Monstep

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).

Goals

• 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

Findings

• 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.

Goals

• 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

Findings

• 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!

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.

Goals

• 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

Findings

• 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

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.

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".

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.

Goals

• 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

Test Objectives

• 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?

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.

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!

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.