Aug 30, 2021
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.
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.
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.”
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.
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 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.
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.
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.
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.
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.
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.
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 .
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).
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.
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.
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.
