Header Illustration
LanguageSwitch
Portfolio
Monstep Title

Monstep

Gamified Health-App als UX&UI Case Study

Immer mehr Menschen verbringen ihr Leben hauptsächlich im Sitzen, ohne sich großartig sportlich zu betätigen. Hier kommt Monstep ins Spiel. Monstep hilft Menschen, sich mehr zu bewegen und einen aktiveren Lebensstil zu führen, indem sie sich eines kleinen digitalen Monsters annehmen und sich um sein Wohlergehen kümmern. Mit sportlicher Betätigung wird das Tamagotchi-Tier am Leben gehalten.

Ich habe diese App von Konzept bis zum Hand-Off an Entwickler entwickelt.

Vorgaben & Features

  • Gamified Health-App für Smartphones
  • Erstellung der UX & UI auf Basis von UX Research
  • Entwurf, Illustration & Animation des Charakters
  • Kompletter Prozess auf Englisch

Umsetzung

  • Konkurrenzanalyse
  • User Research mit Survey und User Interviews
  • User Flows, Sitemaps & Wireframing mit Figma
  • Usability Testing und Preference Testing
  • Monster-Illustrationen in Photoshop & Animation in Live2D
  • Interaktiver Prototyp mit Figma

Menu-IconMenu-IconInhaltsverzeichnis

Problem Statement

Monstep users need a way to stay motivated on health-goals long-term because benefits of a healthy lifestyle depend on perseverance. We will know this to be true when we see lots of people being motivated to stick to healthy life decisions by using our app.

Konkurrenzanalyse

Ich begann mit einer Konkurrenzanalyse von verschiedenen Tamagotchi- und Gesundheits-Apps und habe mir drei davon im Detail angesehen. Für die Analyse habe ich Key Objectives, Overall Strategy, Market Advantages und ihr SWOT-Profil analysiert.

Ziele

  • Herausfinden, welche Art Apps populär sind
  • Wie populäre gesundheitsbezogene Apps ihre Benutzer dazu motivieren, sich mehr zu bewegen
  • Ein Gefühl für die Konkurrenz entwickeln

Erkenntnisse

  • Es gibt keine guten Gesundheits-Apps auf Android, die ein Tamagotchi-ähnliches Gameplay mit Gesundheitsaktivitäten verbinden. Es gibt zwar eine gute App für die Apple Watch, aber die ist nicht sehr vielfältig. Eine Multi-Platform Smartphon-App mit Smart Watch-Integration hat Potential
  • Viele Apps scheinen nicht wirklich auf einen gesünderen Lebensstil aus zu sein, sondern versuchen die Zeit zu maximieren, die Spieler auf den Bildschirm gucken - um Werbeanzeigen einzublenden
  • RingFit Adventure für die Nintendo Switch ist ein tolles Beispiel für Gaming mit Workout, wie es sein sollte und ich konnte es in vielerlei Hinsicht ans Inspiration nutzen
Ring Fit 2
Ring Fit 1
Screenshot 20210525 190737 com wokamon android
Screenshot 20210525 233902 com wokamon android
Screenshot 20210525 234001 com wokamon android
Screenshot 20210525 234333 com wokamon android

Survey

Generative Research

Neben einem guten Überblick über die Konkurrenz ist der nächste Schritt, meine potentiellen Benutzer kennen zu lernen. Dafür habe ich eine Umfrage und Interviews durchgeführt. Meine Umfrage hatte 26 Teilnehmer aus allen Altersgruppen und einem ausgeglichenem Geschlechterverhältnis. Dabei durfte jeder teilnehmen, der einen aktiveren Lebensstil führen wollte.

Ziele

  • Ein Gefühl für meine Zielgruppe bekommen
  • Ihre Bedürfnisse und Ziele in Bezug auf einen aktiveren Lebensstil kennen lernen
  • Herausfinden, wie viele dem Gedanken offen gegenüber eingestellt sind, eine App für ihre sportliche Aktivität zu benutzen

Erkenntnisse

  • Die Mehrheit der Teilnehmenden scheint nur den richtigen Schubs in die richtige Richtung zu brauchen, um sich mehr zu bewegen. Etwas, was nicht zu viel ihrer Zeit in Anspruch nimmt
  • Die meisten wollen sich mehr bewegen, aber weniger Hilfe bei anderen Aspekten gesunden Lebens (Essen oder genügend zu Trinken)
  • Teilnehmer gaben an, faul zu sein und wenig Zeit in ein Tamagotchi investieren zu wollen (z.B. Dateneingabe)
  • Die Teilnehmenden gaben an, sich mehr bewegen zu wollen, sind aber nicht motiviert genug, dem nachzukommen - und haben meistens nur kleine Ziele. Ein virtuelles Haustier könnte dabei gut helfen!

Zusammenfassung

  • Der Top-Grund für Workout war "general fitness/endurance", was 70% der Teilnehmenden ausgewählt hatten. Es war ebenfalls der Top-Grund, warum die Teilnehmenden aktiver sein wollten
  • Über 60% sind höchstens mäßig zufrieden mit ihrer Betätigung und über 70% würden gern mehr tun
  • Der Grund für die Diskrepanz ist "Faulheit", oder weil sie Schwierigkeiten haben, es in ihren Alltag zu integrieren
  • 30% der Teilnehmenden benutzen bereits ein Gerät, um ihre Gesundheits- oder Sport-Daten aufzuzeichnen oder auszuwerten
  • Ca. 60% gaben an, Daten spannend aufbereitet zu bekommen, würde ihre Motivation erhöhen sich mehr zu bewegen
  • 40% gaben an, dass sie einen virtuellen Companion hilfreich finden würden, aber 46% gab auch an, sie würden es bevorzugen keine Zeit damit verbringen zu wollen es mit Daten zu füttern. Dabei würde es der größte Teil gerne unter 3 Minuten pro Tag halten
  • Trotzdem würden 70% gerne daran erinnert werden, sich mehr zu bewegen
Weiterlesen
Survey

User Interviews

Generative Research

Neben der Survey habe ich auch User Interviews durchgeführt, um an wertvolles qualitatives Feedback zu kommen und meine potentielle Zielgruppe in der Tiefe zu verstehen. Um die resultierenden Daten zu sortieren, habe ich eine Affinity Map genutzt, wo ich die Aussagen in Needs/Goals, Reasons/Motivation, Data Recording/App Experiences und Wishes/Desires sortiert habe.

Ziele

  • Die Zielgruppe nachhaltig verstehen
  • Die Bedürfnisse & Ziele der Menschen verstehen, die aktiver leben wollen
  • Die Survey mit qualitative Data ergänzen

Erkenntnisse

  • Wie in der Survey wollen die meisten Teilnehmenden sich mehr bewegen, aber tun dies nicht, weil sie zu wenig Zeit haben, oder angaben, zu faul zu sein
  • Gamification ist eine tolle Sache für alle Teilnehmenden: sie wollen Progress, Kurzzeit- und Langzeit-Ziele, auf die sie hinarbeiten können: Levelups, Evolutionen etc.
  • Teilnehmer waren berechtigterweise skeptisch gegenüber den Vorteilen, die eine App gegenüber Stift und Papier bieten muss. Es ist wichtig für die App, mehr zu bieten als schlichte Zahlen, um Benutzer abzuholen
Affinity Map

User Stories

Um die Key Requirements für meine App zu segmentieren und in kleinere Ziele herunterzubrechen, habe ich User Stories für meine App geschrieben.

Dashboard

  • As a user I would like to be motivated to do physical activity, so I can gain long-time health benefits.
  • As a user I would like to see my pets' status immediately, so that I know if I'm doing well
  • As a user I would like to show off my achievements to others, so we can engage in friendly competition
  • As a user I would like to customize my experience, so that it feels more personal

Onboarding

  • As a new user I would like to receive an introduction, so that I understand how the app works easily
  • As a veteran user, I would like to skip the onboarding, so I can get started immediately

Sign Up

  • As a new user I would like to save my progress, so that I don't lose my data when I get a new phone.
  • As a new user I would like to register via my e.g. Google account, so I can finish registration faster
  • As a regular user I'd like to be logged in by default, so I don't have to login every time I open the app
Weiterlesen

User Flows

Bevor ich anfing, erste visuelle Skizzen zu machen, habe ich User Flows für die häufigsten Tasks angelegt, die ein Benutzer der App durchführen würde. Hier ist zum Beispiel der User Flow zum Füttern des Tierchens und ein User Flow dafür, wie man ein Workout mit seinem Monstep macht.

User Flow 2
User Flow 1

Sitemap

Card Sorting

Die Sitemap stand als nächstes nach den User Flows an. Anschließend habe ich ein Card Sorting mit meinen Sitemap-Schlüsselwörtern durchgeführt, um zu sehen, ob potentielle Nutzer die Sitemap richtig navigieren würden. Hier ist mein erster Sitemap-Entwurf.

Sitemap 1

Das Ergebnis des Card Sortings hat mich dazu gebracht, den Shop-Screen rauszuwerfen und ihn stattdessen in den Feeding-Screen zu integrieren. Danach sah die Sitemap so aus.

Sitemap 3

Low Fidelity-Wireframes

Nach der verbesserten Sitemap habe ich ein Set LoFi-Wireframes angelegt. Dabei habe ich zuerst ein paar grobe Ideen auf Papier skizziert. Nachdem ich das Gefühl hatte, meine Ideen funktionieren gut genug, habe ich einen ersten groben Prototypen in Figma angelegt.

Sketch 3
Sketch 2
Sketch 1
Sketch 4

Da mein Card Sorting-Test suggerierte, dass Leute die Kauf-Optionen in der Food-Sektion suchen würden, habe ich ein Slideout in meinem Food-Screen integriert. So konnten Nutzer alles, was mit Füttern zu tun hat auf einem einzelnen Screen erledigen. Hier zu sehen auf den ersten beiden Bildern.

Danach kommen noch das Dashboard und der Exercise-Screen als Beispiel für meine LoFi-Wireframes.

Career Foundry Seite 25
Career Foundry Seite 26
Career Foundry Seite 19
Career Foundry Seite 28

Character Design

Der entscheidende Punkt meiner App, visuell, war natürlich das Monstep selber. Da der Scope von diesem Projekt lediglich die UX und UI umfasste, hatte ich keine Zeit übrig um die komplette Auswahl aller möglichen Charaktere zu entwickeln. Stattdessen habe ich mich darauf konzentriert, ein Beispiel-Design zu erstellen, was den Zeichen- und Animationsstil für das Projekt gut darstellen sollte. Das Ziel war es, ein Design zu entwickeln, was schnell genug zu illustrieren und schnell genug zu animieren ging. Damit können sehr schnell sehr viele produziert werden, was sie wirtschaftlich macht: alle Animationen wurden in lediglich 6 Stunden erstellt. Die Illustration & das Rigging in 2 Stunden.

Hier sind einige Inspirationen und die Skizze für meine Beispiel-Spezies "Magical Mini Pot".

Entwicklung des Stils

Meine erste Inspiration kam von meinem Coffee-Table-Buch "Bestiarium von Nysth", welches ich illustriert habe. Es war ein Buch voller lustiger und schrulliger Kreaturen. Meine Monsteps sollten ein ähnliches Gefühl vermitteln: erheiternd und ein bisschen skurril. Niedlich, aber nicht übertrieben. Es gibt genügend ernste Gesundheits-Apps da draußen und wir sind hier, um Spaß zu haben!

Da die Illustration einfach und schnell animierbar sein muss, muss die Kreatur gewisse Design-Vorgaben erfüllen. Daher habe ich einen Stil gewählt, der keine Konturen, flächig schattiert hat und ein paar leichte Verläufe mit einer Prise Pinselspritzer, um ihnen einen "gezeichneten" Look zu verpassen.

Weiterlesen
Creature

Usability Testing

Evaluative Research mit Rainbow Spreadsheet & Affinity Mapping

Ohne gutes Testing kann man keine gute UX schaffen, so viel ist klar. Meinen digitalen Prototypen habe ich von 6 Leuten testen lassen. Die Sessions wurden hauptsächlich Remote wegen COVID-19 durchgeführt. Ich habe ungefähr 25 Minuten pro Teilnehmer einberechnet.

Ziele

  • Die Learnability der App einschätzen
  • Feststellen, ob Leute die App verstehen und die grundlegenden Funktionen der App nutzen können: Einloggen, Nahrung fürs Monstep kaufen und es füttern

Zweck

  • Herausfinden, wie einfach die Teilnehmenden die App erfolgreich navigieren können
  • Verstehen Benutzer, worum es bei der App geht?
  • Können die Benutzer Nahrung für das Monstep kaufen und es füttern?
  • Verstehen Benutzer, wie man Schritte und Coins sammelt?
  • Finden Benutzer die Einstellungen?

Script

Das Script enthält generelle Hintergrund-Fragen zur Person, ihre Tätigkeit und ihr Verhältnis zur sportlichen Betätigung, sowie ihr Technik-Know-How und ihre Gewohnheiten in Bezug auf Gesundheits-Apps.

Taskliste

  • How is your pet doing? Find out how to retrieve this information.
  • You recently got a smart watch and want to connect it to work with Monstep. Connect your smart watch with this app.
  • You want to put your recently connected smart watch to good use and exercise with your pet. Find out how to do it and do it.
  • Your pet is losing health. What do you do to improve it's health? (Alternative: buy food for your pet and feed it)
    And lastly, change your pets' name!
Weiterlesen
Affinity Map 2

Meine aus dem Test resultierenden Daten habe ich mit einer Affinity Map organisiert und nach Observations, Quotes und Errors sortiert. Über die häufigsten Fehleinschätzungen und Interpretationen hatte ich so einen guten Überblick.

Um eine noch bessere Übersicht zu haben, habe ich in einem Rainbow Spreadsheet die häufigsten Probleme und mögliche Verbesserungen festgehalten.

Rainbow Sheet Usability

Verbesserungen

Einige der Probleme, die Teilnehmer mit meinem Prototypen hatten, waren definitiv größerer Natur und mussten angepackt werden. Hier sind einige Beispiele, die ich dank meines Tests beheben konnte.

Issue 1: Food-Shop

Meine grandiose Idee ein Slideout für den Food-Screen zu haben, um Essen zu kaufen, hat sich als Flop herausgestellt. Ich musste meine Entscheidung, die ich bei der Sitemap getroffen hatte, zurückziehen, da alle Teilnehmenden vorschlugen, es stattdessen als separaten Screen einzubauen. Ich habe also einen Shopping-Screen angelegt, den man via der Bottom-Navigation aufrufen konnte. Ein Teilnehmender erwähnte, dass er gerne mehr Informationen an den Items dargestellt hätte, was mich dazu bewog, den Shop-Screen dahingehend zu designen.

Issue 2: Coins und Schritte

Das Dashboard enthält zwei Währungen, die getrackt werden. Auf der linken Seite ist ein Schritt-Counter und auf der rechten die Coins. In meinem frühen Prototyp hatten beide das gleiche Icon und niemand verstand den Unterschied. Es war recht offensichtlich, dass ich Änderungen vornehmen musste. Die rechte Seite zeigt nun eindeutig ein Coin-Icon, sodass es sich eindeutig einer Währung zuordnen lässt. Die linke Seite ist das tägliche Schritt-Ziel und bleibt daher ein einfacher Fuß.

Issue 3: Klick auf den Namen

Die meisten Teilnehmenden fanden die Möglichkeit, sein Monstep umzubenennen nicht. Weder beim ersten, noch beim zweiten Versuch. Die meisten suchten die Option in den Einstellungen oder versuchten, den Namen des Monsteps zu tappen.
Daher machte ich folgende Änderungen: Wenn Benutzer auf den Namen des Monsteps drücken, öffnet sich nun der Customize-Screen mit der Umbenenn-Möglichkeit. Ebenfalls wurde die Option in den Einstellungen untergebracht.

Issue 4: Den falschen Menüpunkt klicken

Einer der Aufgaben war für die Test-Teilnehmer, eine Smart Watch mit der App zu verbinden. Sogut wie alle Teilnehmenden versuchten mit dem "Manage Account"-Menüpunkt zu interagieren, statt auf "Smart tracker pairing options" zu gehen. Das Einstellungsmenü habe ich daher mit weniger Menüpunkten gestaltet und eine direkt einsehbare Tracker-Option, dass direkt den momentan verbundenen Tracker anzeigt, hinzugefügt.

Weiterlesen
Fix 1
Fixes 2

Style Guide & UI

Preference Testing

Nachdem die Navigation und das Layout gut funktionierte, habe ich den Graustufen-Prototypen als Basis für meine HiFi-Wireframes genommen. Dabei habe ich ein passenden Look and Feel entwickelt, der zu Monstep passt. Das war gar nicht so einfach, weil ich die Balance zwischen spaßig, aber nicht zu kindlich finden musste.

Entwicklung

Das Farbschema basiert auf Hellgrün und dunklem Petrol. Das Petrol hilft dabei, dass die App sich erwachsener anfühlt, während die Grüntöne an die in der Nacht leuchtenden Farbtöne erinnert, was ein bisschen die Verspieltheit unterstreicht. Die Glow-in-the-dark-Farbe ist auch eine Farbe, die vor allem der 90er Jahrgang gut kennen sollte - genau die Menschen, die jetzt junge Erwachsene sind. Das passt hervorragend zu meiner Zielgruppe. Grün ist dazu auch eine sehr freundliche Farbe. Mein allererstes Design war auf hellgrünem Hintergrund, was die App aber total nach Kindern aussehen lies. Das dunkle Petrol hilft, das Monstep hervorstechen zu lassen, während es eine beruhigende, erwachsene Wirkung ausstrahlt. Dieses Farbschema hilft auch dabei, es von ähnlichen Angeboten abzuheben und einen USP zu schaffen.

Weiterlesen
Style 3
Style 1
Style 2

High Fidelity-Prototyp

Das Design ging durch viele Kollegen-Hände, Preference Tests und regelmäßiger Verbesserung dank dem Feedback meiner Test-Teilnehmenden. Am Schluss hatte ich einen soliden interaktiven Prototypen in Figma mit einer passenden Style Guide, die bereit war, an Entwickler weitergegeben zu werden. Der digitale Prototyp kann via Interaktion mit der Figma-Datei ausprobiert werden.

Feeding
Dashboard Dead
Exercise
Exercise Ongoing
Arrow