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
Loading
ButtonZum Warenkorb hinzugef├╝gt
Zum Warenkorb