
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
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
Survey
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!
User Interviews
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
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
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.
Sitemap
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.
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.
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.
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.
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".
Usability Testing
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?
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.
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ß.
Style Guide & UI
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.
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.