Gamified Health-App as UX/UI Case Study
More and more people are living sedentary lives with office jobs and hardly get any exercise. This is where my app Monstep comes in. Monstep helps individuals to stay active and move more over the course of their day by introducing a little companion to take care of. Users need to keep it alive with their physical activity.
I've developed this app from scratch up until hand-off to the developers.
- Gamified health app for smart phones
- Creation of the UX & UI with research
- Animation & character art
- Competitive Analysis
- Generative Research: Survey, Interviews
- User Flows, Sitemaps & Wireframing with Figma
- Evaluative Research: Usability Testing, Preference Testing
- Creature Design & Animation
- Interactive Prototype with Figma
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.
I started out with a competitive analysis of different pet- and health-related apps and looked in-depth into three of them. For the analysis I've looked into key objectives, overall strategy, market advantages and their strengths, weaknesses, opportunities and threats (SWOT).
- Find out what kind of pet apps are popular
- How health apps motivate the user to do more physical activity
- Get a feel for the competitive landscape
- There are no good pet health apps that combine nurturing a tamagotchi type of monster with health activities on Android. There is one decent app for the Apple Watch, but it lacks customization. Therefore a multi-platform smart phone app with smart watch integration has great potential
- Many apps don't actually want you to live a healthier lifestyle but instead try to maximize the time spent looking at the screen to watch ads
- RingFit Adventure for Nintendo Switch is a great example of exercise with gaming done right and I could draw a lot of inspiration from it
Besides getting a good overview over the competitive landscape, understanding my users is the very important next step. For this I've conducted a survey and interviews. My survey gathered 26 answers in the course of a day from people of all ages and a balanced gender ratio. My recruiting criteria was everyone that wanted to exercise more or incorporate more healthy life decisions into their routine.
- Understand & pin-point the target user base
- Understand the needs & goals of people wanting to exercise more/live a more healthy lifestyle
- Determine the likelihood of people who would like to use an app to boost their exercise
- The majority of people just need the right kind of nudge to actually exercise a little more, something that won't take too much of their precious time
- Most want to exercise more, but less help on other parts of healthy living (food or water intake)
- People are lazy and prefer to keep the maintenance of a pet to a minimum.
- People want help to exercise more, are not motivated enough to do so, but have modest goals (general fitness). A virtual pet could help with this!
- The top reason for exercise was "general fitness/endurance" which 70% of participants chose – and likewise the top reason people wanted to exercise more
- Over 60% are only partially satisfied with their exercise gains/benefits and > 70% would like to exercise more!
- People do not exercise more, even though they want to, because they're "too lazy" or have difficulty fitting it into their schedule
- 30% of participants already use a device to keep track of some kind of exercise/health data
- About 60% stated having data presented in an interesting way would improve motivation to exercise for them
- About 40% stated they would find a companion helpful, but 46% said they'd prefer not to spend any time entering data for it and the majority would like to keep it to under 3 minutes a day.
- However, most stated they'd like the companion to remind them to exercise (70%) while the other options were chosen significantly less often.
Besides the survey I've also conducted interviews to get valuable qualitative feedback and understand my potential users in-depth. To organize the data I've used an affinity map, where I sorted the quotes and statements into Needs/Goals, Reasons/Motivation, Data Recording/App Experiences and Wishes/Desires.
- Understand the target user base in-depth
- Understand the needs & goals of people wanting to exercise more/live a more healthy lifestyle
- Supplement the survey findings with qualitative data
- Just like in the survey, most participants of the interview want to exercise more, but can't due to time-constraints or perceived laziness
- Gamification would be a huge factor for all participants: they want to see progress, long- and short-term goals to work for: level ups, evolutions etc.
- People are rightfully skeptical of the benefits an app has in comparison to simple pen and paper. It's important for the app to deliver more than simply numbers and engage the user
To break the key requirements for certain features down, I created User Stories for my app.
- 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
- 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
- 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
Before jumping into sketches I created user flows for the most common tasks a user would do within my app. Shown here is the user flow for feeding the pet and exercising (some of the most common actions a user will take within the app).
After having created the most important user flows I've created a sitemap for my app. I then conducted a card sort with my sitemap keywords to see if people would potentially navigate the sitemap correctly. you can see my first sitemap draft below.
The result of the card sorting let me to believe I should scratch the shop and incorporate it into the feeding section. So here's the updated sitemap.
Low Fidelity Wireframes
Following my updated sitemap, I've made a set of low fidelity wireframes. I began by jotting some rough ideas down. After I felt my ideas were working good enough, I made a low fidelity digital prototype in Figma.
Since my card sorting suggested people would look for the buy options within the food section, I incorporated a slide out within my food screen, so people could find everything related to feeding, getting food and buying food on basically a single screen, as one can see here with the first two pictures.
I included the dashboard and the exercise screen as another example for my low fidelity wireframes.
The biggest make-or-break point of this app, visually, was certainly the Monstep itself. Since the scope of the project was to develop a proof of concept with UX and UI, I didn't have time to develop the full roster of available characters and instead focused on one exemplary design that would show off the style of animation and illustration I aimed for on this project well. The goal was to develop a style fast enough to draw and fast enough to animate. With this it'd be possible to quickly produce a lot of them and therefore profitable: all animations were created within 6 hours total. The drawing and rigging preparation took about 2 hours.
Below is some of my inspirations and the sketch for my exemplary species "Magical Mini Pot".
My initial inspiration came from my coffee table book "Bestiary of Nysth" that I illustrated. It was a book full of funny and quirky creatures. I wanted to give my Monsteps a similar vibe: uplifting and a little quirky. A high appeal, but not overdone. There's enough serious health apps out there and we're here to put the fun into healthy living!
Since the art needs to be easily and quickly animatable, the creatures have to follow certain design restrictions. I chose my art style based on this criteria: no outlines, cell-shaded with some low opacity gradients, some soft brush splatter and grunge to give them a more drawn feel and easily distinguishable parts for animating.
After all, we can't claim to do good UX without testing the first draft with actual users. My digital prototype was tested by 6 participants. Sessions were being held in person and remotely due to the dangers of COVID-19. I scheduled about 25 minutes per participant.
- Assess the learnability for new users interacting with the app
- Measure if people can understand the app and are able to complete basic functions like logging in, buying food and feeding the virtual pet
- Determine if participants can successfully and easily navigate the app
- Do users understand what the app is about (taking steps, feeding the pet)?
- Can users easily buy food and feed the Monstep?
- Do users understand how the step collecting and currency works?
- Do users find the settings easily?
The script contains general background questions about the person, their occupation and their relationship with exercising, and their habits using health-apps and technical knowledge.
- 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!
I first organized my information from my usability test with an affinity map and also sorted each participants' data into observations, quotes and errors. This way I had a good overview over the most common mistakes and misconceptions I faced with my prototype.
Afterwards I created a rainbow spreadsheet to even better organize my data and jot down my ideas on how to fix the problems that I identified thanks to the usability test.
Some issues were clearly a larger scale problem and needed to be addressed. Here's some examples I've tackled after my test.
Issue 1: Food shop
My grand idea of having a slide out on the food screen to buy food turned out to be a big flop. I had to reverse my decision as participants all said they found it illogical and suggested making it a separate screen instead. The shopping button was turned into it's own screen with an icon in the bottom navigation. Since one participant said he'd like more information (a tooltip) about the items he buys I've also redesigned the shop screen a little to show more information upfront and also indicate how to buy items better.
Issue 2: Coins and steps
The dashboard contains two currencies that are being tracked. On the left side there is the daily step counter and your step currency is being tracked on the right. In my early prototype both had the same icon and nobody understood the difference. It was obvious I had to make changes. The right side now clearly shows a step coin icon that indicates this is about a currency and hopefully people will understand it is the balance. The left side is the daily step goal and remains a simple foot.
Issue 3: Name-click
Most participants did not find the option to rename the Monstep at the first, or even second try. Many looked within the settings or tapped the Monsteps' name directly.
I've made the following changes: if people tap on the name of their Monstep on their dashboard, they'll be redirected to the personalize menu. People can now also change the Monsteps' name in the settings menu under "Monstep options".
Issue 4: Clicking the wrong settings navigation point
One the tasks was for users to pair a smart watch with their app. Participants wrongfully tapped 'Manage account' instead of 'Smart tracker pairing options'. I've simplified the settings menu into two navigation points and a tracker option that shows the currently connected device (or no device) immediately.
Style Guide & UI
After having the navigation and layout in a good spot, I took the greyscale prototype as a base and started creating my high fidelity wireframes. I developed a visual language that fits the concept of Monstep. This was a fickle task, as I had to strike that balance between fun & entertaining, but not overly child-like tone. I wanted to communicate: this is a fun place, but not necessarily for children!
Thoughts & Development
The color scheme is based on light green tones and dark teals. The teal helps the app feel more mature, while the greens have a similarity with the glow-in-the-dark colors, which hints at the playfulness of it. Glow-in-the-dark is also a very "90s kids" color, which are young adults by now - it fits the target audience perfectly. Green is also a very friendly color. My initial design was on a light green background, but it made the whole app feel like it was for children. The dark teal helps the Monstep to pop out, while radiating a calm and mature vibe. Also, this color scheme helps distinguish it from other apps, which usually have different base colors.
High Fidelity Prototype
The visual design went through several iterations of peer reviews, some preference tests and the continuous improvement on participant feedback. In the end I've created a solid prototype in Figma with accompanying style guide that was ready for hand-off to developers. You can try out the digital prototype by interacting with the Figma file below.