Work

back arrow

Ommetje Redesign

UX Design

Marieke Hepkema

Client: Dutch Brain Foundation (school project)

light bulb

Introduction

This project was an assignment for the subjects 'HCI Mastery' and 'Seductive Interaction Design' during the minor User Experience Design I completed in 2021.

The design challenge

Ommetje is an app by the Dutch Brain Foundation, that aims to persuade people to walk 20 minutes every day, because doing so is good for mental/brain health. Ommetje has become succesful, having around 200.000 daily users. However, their original goal was to reach younger people; those under 40 years old (later referred to as 'the users/users').

This user group has been becoming less active each day, with users becoming inactive for 2 main reasons:

  1. The app seemed useful to the young users at first, but they were demotivated by the strong competitive aspect.
  2. The app is deemed to be quite dull and outdated. Erik Scherder, a professor in neuropsychology who is used as something like a mascot in the app, doesn't appeal to the younger user base. He's old, but still thinks he's cool.

Ommetje needs to be improved and taken to the next level, so it will appeal more to the younger users. Some key objectives are:

a graphic showing some key words from the text before this image. We don't want: dull, outdated, demotivating and overly competitive. We do want: young people, personal trainer, motivating, community.

Selected flow

This flow was selected because it poses an interesting opportunity to solve the problems that Ommetje is experiencing. The aim is to create a more gentle but also motivating app, according to the following princicples:

a graphic showing the flow chart for starting and completing a walk with the ommetje app

Current situation

a graphic showing the current screen designs of the flow mentioned before, with some more details about what is going wrong. Important points are that the home screen is not inviting, and focuses too much on competition. The stop button during the walk looks to inviting, and when you cancel your walk, Erik Scherder's happy face pops up, indicating that he's happy you're quitting. The brain fact you receive after completing a walk is not scannable (information overload), and the results screen is quite boring. The 'receiving a badge' -screen is a bit better than the others, but could be improved by adding suggestions and/or a link to their collection of badges.

Goals

Before redesigning the experience of Ommetje, it is very importan to state what the relevant goals of the user and the business (Ommetje/Dutch Brain Foundation) are. What does the business want, what does the user want, and where do these goals unite?

Business goals

  1. Make users walk for more than 20 minutes.
  2. Persuade users to continue walking when they walk for less than 10 minutes.
  3. Increase engagement and continued usage in the 40- user base.

User goals

The user wants to...

Experience goals (FEEL)

End goal (DO)

Life goals (BE)

Customer journey map of current situation

a customer journay map that shows how the current situation influences the users. Some quit the app, because they're demotivated by the competitive aspect and the strict rules, and some continue using the app because they're motivated by the competition and do well in their group.

Personality

As stated in the debriefing, the current personality of the app feels old, dull and outdated. It is important to create a personality that is more appealing to the younger users.

If the app would be a person out there in the world serving customers, its job would be:

The client proposed that a requirement or the personality would be that it would feel more like a personal trainer. This was slightly changed, as brain health is normally not something that is regarded as a main issue for personal trainers.

Customers would describe us as the most

As the users found the app to be dull, outdated and demotivating, it would only be logical to change this identity to something that would better fit the young user base: energetic and motivating.

Also, the app has some aspects that should be conserved: the insightful and clever part of the app actually can be quite appealing. When people learn more about brain health, and the reason why they're going for walks, they will feel more engaged and motivated.

We never want to come off as

These traits are basically all that the users didn't like about the current app, with some small additions. It is very important that the app adds some pleasantness to the sometimes mundane activity of going for a walk. A feeling of being outdated doesn't resonate with young users.

'Intrusive' was addes, because the goal of the app is to promote mental health. The app shouldn't utilize unnecessary push notifications or have a cluttered look. A lot of people use the app when they are taking a break from work, and being too stimulated might make them more stressed.

Script

The script, that was written to apply the personality traits to the main interactions, must depict a style that is both motivating (using words of praise), friendly and helpful. Information about brain health should always be summarized in an understandable wayk, so that it will decrease the cognitive load of the user. The focus should always be on the primary task: going for a walk.

a graphic showing the dialogue between the user and the app. The user asks the app to go on a walk, and the app answers in a kind, upbeat way, to motivate the user.

New flow

I applied both HCI and seductive interaction design principles to the design, and created a new flow, that tackled both the user goals and business goals.

Some seductive interaction design principles I applied were: praise, rewards, self-monitoring, personalization, reminders, suggestion, simulation and liking.

The customer journey map of the new designs. The user is motivated to continue walking (business goal 2), feels proud of walking for more than 20 minutes (business goal 1) and motivates the user to keep using the app (business goal 3).

Micro-interactions and animations

I designed animated micro-interactions to give the product character and to to decrease cognitive load and change blindness. I looked at the trigger, rules, feedback and loops of each micro-interaction, and animated them using principle. These micro-interactions are meant to improve the user experience; some are helpful in preventing change blindness and decreasing cognitive load, for instance.

To see the animations in action, please watch the product video at the bottom of this page.

Filling the brain meter

The design below shows how the color of the background changes to green, which is associated with health and nature, as the 'ommetje' (walk) progresses. The main goal of this animation is to communicate that over time the goal of walking 20 minutes will be achieved (cause & effect). The color will change once the user has walked for more than 20 minutes. Also, the end walk button is highlighted.

Animation principles

The button is transformed and easing is applied to the changing background color and button animations.

a graphic showing the different stages of the animation of the 'brain meter' filling during a walk.

Loading results

The main goal of this animation is to create a sense of orientation and simultaneously conveying a sense of anticipation & achievement (emotion). This animation is a bit more 'dramatic' than the others, as I wanted to reward the user and really let them know that they're doing great!

Animation principles

There’s a lot of offset, delay & easing going on in this animation, from the progress bar filling to the brain shrinking & text appearing. When the brain is at it’s smallest, the background, including the newly loaded map, play a dolly & zoom effect, making the background seem like it’s recoiling from the ‘impact’ of the brain that has struck the background. The white round solid behind the brain is transformed during this animation.

a graphic showing the different stages of the animation for loading the results after completing a walk.

Unlocking a new badge

The main goal of this animation is to convey a feeling of anticipation and joy. The new badge elastically appears into the screen, as if falling from above and bouncing on the shadow underneath the badge. The user should feel so very proud of their achievement!

Animation principles

Easing (timing & spacing) and offset & delay are applied to all animated elements. The bouncing badge conveys a sense of it being elastic, and the text bubble that rises up has to get a very light, floaty feeling.

a graphic showing the different stages of the animation for unlocking a new badge in the app.

Testing & Iterating

To validate (or disprove) the redesign, I created an assumption matrix which made it more clear which aspects were the most essential during the validation process. I conducted a couple of usability tests, based on the assumption matrix.

Crucial assumptions were:

an 'assumption matrix', where assumptions that I made are placed in a matrix, with 1 axis being crucial/not crucial and the other one being known/unknown. The most important ones (unknown and crucial) are mentioned above this image.

The results

The usability tests lead to some valuable insights, like:

Iterations

As this (school) project was only a few weeks long, I didn't have a lot of time to create multiple iterations, but I managed to apply some of the insights to the design, as shown below.

a graphic showing a design change after the usability tests. In this case, it shows that the 'health tip' after completing a walk has changed. The summary of the tip is highlighted, so the information becomes more scnannable. a graphic showing a design change after the usability tests. In this case, it shows that, at the results screen, the map is less zoomed in, so you can see the shape of the walk you completed. As a 'little big detail', the icon on the 'view map'-button is now also in the shape of your walk. a graphic showing a design change after the usability tests. In this case, it shows that the 'groups' icon at the home screen, where you can find your walking community, has changed. The heart in the middle now funcitons as a fillable meter that shows how much progress you've made together with your community. The heart icon fills up as you progress together.

The end result

This project was all about finding the balance between the important business goals and the goals of the users of the Ommetje app. By locating the problems in the current situation and utilizing seductive principles and HCI guidelines, I was able to create some redesign proposals. It was very interesting to look at the Ommetje app from this perspective. Learning about the various kinds of goals proved to be very helpful for defining the scope of the redesign.

I especially like the kinds of projects where you get the opportunity to use digital tools to stimulate healthy behaviour. In a world full of dark (behavioural) patterns, it's nice to be able to use seductive principles for something positive.

Prototype video

Please have a look at the prototype video below, where you can see more clearly how the animations play out.

What I learned

I think this project really helped me to look at all those small parts that make a product more seductive. Even the visual style can play a big role in stimulating the user. This really shouldn't come as a surprise to me, though, as I'm the kind of person that low-key does judge books by their covers at first, as I love graphic design ;). But on a serious note; a lot of the principles were relatively new to me, and they helped me to look more critically at products I use as well; which patterns are they using to influence me?

This project also helped me to hone my Principle skills further. I created the designs in Figma, and animated the biggest part using Principle. I think this has made the prototype a lot more strong and convincing.

Tools

I created the designs using Figma, and animated the Figma prototype using Principle.

figma principle