Designing a Wellness App — a UX/UI case study

5th design challenge in Ironhack

We live in a hectic world where it can be difficult to become aware of our negative habits on time. Even when we resolve to change our lifestyle towards a more optimal life, it can take a lot of time and effort to be successful alone.

For this challenge, we were tasked to design a digital wellness tool for the National Wellness Institute (NWI) for a chosen area related to wellness in order to help people commit to a healthier lifestyle.

The solution must include: An area where users can set up their profile, goals setting, progress tracking and data visualization of the user stats.

Deliverables:
Native IOS App and Desktop landing page

Duration of the project: 9-day design sprint

Setup: Groups of 3

Tools:
Figma, Maze, Google Suite, Trello, Miro, Pen and Paper

The Process

For this challenge, we were executing a full UX design process by following an evolved Double-Diamond approach.

Discover

Following an initial research of wellness products, we observed that despite the availability of numerous wellbeing apps, people still struggle to maintain a healthy relationship with alcohol consumption. We felt that drinking can be both socially accepted and, at the same time, stigmatized once it becomes an addiction.

Quantitative & Qualitative User Research

Instead of jumping straight into competitive analysis, we wanted to validate our assumptions with the users first. We began our discovery phase with the lean UX canvas. Here are some of the main points we wanted to better understand:

  • Are people aware of their drinking habits?
  • Is there a peer pressure when it comes to alcohol consumption?
  • Do users have a problem saying “no”?
  • What reasons do users have to drink less or stop drinking?
  • What effect does alcohol have on people’s lives in general?

With these in mind, we prepared online surveys and wrote a transcript for the interviews. After receiving 33 survey responses and conducting 4 interviews, we were interested to see the data.

The main survey findings:

With the results at hand, we created an empathy map which helped us to step into the shoes of the user.

Competitive Market Analysis

After gaining a better understanding about the problem, we dived deeper into competitive market analysis by creating a Feature Comparison Matrix. Since it was clear by then that drinking is closely related to socialization, we also analysed Facebook because of its famous community aspect.

Feature Comparison Matrix

The main findings:

➤ Most of the competitors have some kind of community feature.

➤ The majority are focused more on science and tracking than on feelings and emotions.

➤ Some of the competitors lack the motivational aspect.

➤ Only I Am Sober+ has a new habit building feature and seems to be mainly aimed at users who have an alcohol addiction.

All things considered, we identified our “blue ocean” (an opportunity to stand out in the market) by offering a simple yet engaging application which would be more focused on emotion.

Note: Although I am Sober + seems like the most direct competitor, later in the defining process we concluded that our application will focus on fighting the socially accepted drinking habit instead of specifically targeting an alcohol addiction problem.

Define

Affinity Diagram and HMW Statement

Once we gathered all the research data, we synthesized it into an affinity diagram and highlighted the main trends and pain points. Following a thorough evaluation we narrowed our focus down on the pain which seemed to be the most challenging to solve— (young) people feel a lot of social pressure not to feel like outsiders when it comes to drinking.

From here we derived a HMW statement:

How Might We motivate and facilitate people to take control of their social drinking habits, by helping them beat peer pressure and social expectations.

Affinity Diagram

Problem & Hypothesis Statements

Research showed that young people have trouble controlling their alcohol consumption, due to peer pressure and social expectations.

We believe that, by developing an app that promotes conscious drinking while reinventing the image of what is a cool behaviour, we will empower a younger generation to make better choices together and have a healthier relationship with alcohol. We will know we are right if the app drives organic traffic and influences a decrease in the number of people who are confident to say no when offered a drink in social situations.

User Persona

Our user persona Hannah Warren was created based on the findings from the user research. She is a young university graduate who just got her first job and wants to bond with her new colleagues. She is annoyed by peer pressure to drink and wishes to feel confident about her decision when she doesn’t want to.

Storyboard & User Journey

We imagined Hannah in a situation where she is invited to work drinks and has an opportunity to meet her new colleagues. Unfortunately, despite that she knows that she cannot handle alcohol well, she cannot bring herself to refuse. Eventually she gets drunk and the next day is embarrassed for her actions and feels disappointed in her inability of saying “no.”

Storyboard by Corinna

The journey map helped us identify 3 touchpoints and feature opportunities.

Develop — Solving the Problem

Ideation/Brainstorming

Once we had clear HMW and problem statements, we arrived at my favourite part of the process — ideating. After positioning the HMW statement in the middle, we went wild with brainstorming all the possible features we could include and then voted on those which seemed the most effective.

Brainstorming & Voting on Miro

MOSCOW & MVP Statement

Although the voting showed which features we would ideally like to see in our application, we still wanted to better prioritize them with the help of Moscow method.

Moscow Feature Prioritization Method

Moscow Method together with the information from the ideation stage guided the establishment of the Minimum Value Product Statement:

The user needs an app where they can set and track their goals regarding alcohol consumption and be encouraged to maintain them while participating in a community. The app must include the following:

Drink tracker, allow a limit setting, user progress visibility and ability to enroll in challenges & receive support from like-minded community.

With the MVP statement at hand, we also defined the jobs stories.

The main job story

When encountering pressure to drink at a party, I want to be able to take control of my social drinking habit, so I can refuse with confidence knowing I have a community behind me.

Information Architecture: Sitemap

The information we gathered so far helped us build the site map together with the main user and alternative user flows.

Site Map
The Main and Alternative User Flows

Interaction Design

Lo-Fi & Mid-Fi Prototype

After clarifying the user flow, each of us did some hand concept sketches to help us visualize how to best implemented the features.

Lo-fi user flow sketches by all team members

We were happy to see that all of the group members were on the same page as the sketches turned out to be rather similar. We selected the best bits of each to build a mid-fi prototype.

Mid-fi Prototype

User Testing Results

We then employed Maze to test our prototype with the users.

We received test data from 19 testers. To our surprise, the usability score was rather low and especially on the home screen — scoring only 33.

Important feedback we took into account for the iterations:

“Would be better to see your challenges on the main page because that’s what I want to check first thing”

Also, we identified the main problems to be iterated on the hi-fi prototype.

Problems identified from Mid-fi testing and the solutions

Visual Design

Visual Competitor Analysis

Before starting to define our brand image, we compared the visual style of 3 competitors — Sober Time, Drink Control and I Am Sober.

Sober Time Visual Analysis
Drink Control Visual Analysis
I Am Sober Visual Analysis

The dominant style of the competitors is defined by:

  • Serious and clean look
  • Big letters, little text
  • Calming colours and visual language
  • Mainly medical/ health related and not emotionally engaging

Since our focus was more on a community feeling, empowerment and positive emotions, we wanted our app to be more vibrant and visually engaging than the products of our competitors. We created a Style Tile including our slogan, typography and several potential bright colour combinations.

Brand personality testing - Mood Boards

In order to define which visual style would fit our brand personality the most, we created a survey with two Mood Boards asking people to choose which attributes would fit them best.

Brand Personality Testing

After receiving the results, we realized that the attributes associated with the first Mood Board best matched with our idea of the brand image. We wanted our application to be gender neutral and most importantly — optimistic, motivating/empowering and youthful. Therefore, we chose to stick to this particular style with dominant colour red commonly associated with action, energy, excitement and confidence .

The Main moodboard

Hi-Fi Prototype: Testing & Iterating

Desirability Testing — 5 Seconds Test

As soon as we built the first version of the hi-fi prototype, we conducted an initial desirability testing. We used a quick-exposure memory test where we showed the participants our home screen for a very brief moment before taking it away. Then, we asked the participants what they could recall about the app. We were happy to see that the users liked our chosen visual style. However, there were some important problems identified which we had to fix immediately.

At this stage we also finally arrived with the suitable name for our app — CoCap (referring to community + capping alcohol).

Floating menu

Micro-interactions

Initially we used micro-interactions to create a floating menu for several options under the add button. However, to our surprise, the usability tests showed that most of the users still could not find how to create a challenge.

“I was a little confused, where to create the challenge”

Despite that we liked how the button looked visually, we had to remind ourselves that we were designing for the user and not ourselves. As Issara Willenskomer puts it wisely —animation will not save you from a bad design.

Therefore, we decided to remove the floating menu from the add button keeping only the tracking of drinks feature. It seemed more logical to move creating a challenge option to the Challenges at the bottom navigation tab.

Below you can see the final result which was created by taking into account the usability test results. The gif walks you through the process of creating a challenge, reading the encouraging comments from the community, logging the consumed drinks, recording your mood regarding the challenge and finally — checking the overall progress.

The Landing Page

Once we had our Hi-fi ready, we built a landing page which includes:

  • CoCap brand statement together with a CTA to download our app.
  • The header includes — about, community and partners sections which directly link to scrollable content below. The user also has an ability to create an account.
  • On the footer the main features and MVPs are listed.
CoCap Landing page

Style Guide

Style Guide is a compilation of UI elements used on the app and was created to keep as a reference for the design team to make sure the user interface is consistent across the board.

CoCap Style Guide

Next Steps

  • Test our Hi-fi prototype with even younger users who may have more peer pressure than the user age group analyzed.
  • Enable more community related features.
  • After validation of the main features — wearable implementation.

Learnings

Overall, this challenge felt very rewarding because we had an opportunity to spend enough time empathizing with the user. Spending longer than we were used to on the discovery and define phases paid off later in the process as we kept referring to our findings for reassurance that we were meeting the real user needs. Additionally, I was reminded again that prototype and desirability testing is crucial in the design process in order to get a better insight about what requires improvement.

Thank you for reading! Any feedback is welcome.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store