Design Challenge: Wellness Tracking App
5th Ironhack project
The Challenge:
Context:
For our 5th project within the IronHack Bootcamp Julia Morillo and myself worked with The National Wellness Institute (NWI), an organisation founded in 1977 with the mission of “providing health promotion and wellness professionals unparalleled resources and services that fuel professional and personal growth.” Even though NWI has numerous years of experience in the wellness field, their program has been very slow to catch up with technology.
Design Challenge:
The challenge was to create a digital product for the National Wellness Institution and conduct user research to understand people’s relationship with mental, physical, and emotional well-being aiming to improve their lifestyles. Below you’ll find the agreed pre-requirements and deliverables:
- The tool can be focused in any category that relates to personal wellbeing, such as (but not limited to): exercise and fitness, eating/diet, meditation, time management, etc.
- It tracks the user’s progress and pushes them to commit to a healthier lifestyle.
- The UI should reflect a fresh, updated image
- The main user flow for the main feature of the application must have:
> Users need to be able to set up their profile to include important information relevant to their goals.
> Users need to be able to set goals and track their progress.
Deliverables:
- Native iOS Application
- A Web Landing Page
DEFINE THE PROBLEM
1. Empathise | Develop a deep understanding of the problem
1.1 User research
1.1.1 User Research. Quantitative Method: Survey
1.2 Business Analysis.
1.2.1 Business Analysis. Competitive Analysis:
1.2.1.1 Feature comparison
2. Define | Clearly articulate the problem you want to solve.
2.1 Affinity Diagram and How Might We Statements
2.2 Problem & Hypothesis Statement
2.3 User Persona
2.4 User Journey
SOLVE THE PROBLEM
3.Ideate | Brainstorm all possible solutions (good and bad)
3.1 Ideation / Brainstorm
4. Information Architecture:
4.1 Information Architecture. Sitemap
4.2 Information Architecture. User Flow
5.Wireframe / Prototype
5.1 Prototype.Mid-Fi
6.Test | Gather user feedback in order to refine your solution
6.1 Usability Testing
7. Visual Design
7. 1 Visual Design. Mood-boards
7.2 Visual Design. Style Guides
8. High-Fi Prototype
DEFINE THE PROBLEM
1. Empathise | Develop a deep understanding of the problem
1.1 User research
1.1.1 User Research. Quantitative Method: Survey
After carefully elaborating the question “What do we want to learn?” as our main focus within our survey, we also developed others, some, looking at the current social pandemic situation we live in:
- How is Corona affecting your day to day life mental sanity.
- People’s daily exercise habits, and its frequency.
- Type of technology people use to practice any physical activity.
- Impediments or blockers to not do exercise.
Health and wellness have different levels and categories. We ensured and clarified that we consider “exercise or physical activity” any kind of practices like dance, games, sport, meditation , games etc. Essentially any practice that helps people live a healthier life.
Through their feedback we could see that people in general are aware of the benefits of exercise or physical activity and the main reason they practice it, is to reduce their stress and anxiety levels they have in their daily working routines. However, lack of the motivation is seen as their main impediment to do it.
Tech became a powerful ally because it helps and motivates people to achieve their health and wellness goals with gamification, for instance.
Healthcare-related mobile apps are becoming popular at an astonishing speed as indicated by the fact that 69% of US smartphone owners track at least one health indicator using them. Besides smartphones people are also using wearables for the same purpose.
Our survey also included a enquiry around usage between fitness apps different than the NWI offered through their website:
VR / AR is also hype nowadays. Feedback shown that people like to engage with this hype technology:
1.2 Business Analysis.
1.2.1 Business Analysis. Competitive Analysis:
1.2.1.1 Feature comparison
The feature table comparison we made among the main competitors was mostly aimed to look at the ones within our scope of our challenge: the onboarding flow, and the tracking feature.
We got a pretty good idea about the most common ways of setting the user’s goals and the way of showing the information from the user’s progress in their workouts.
Besides, since our questionary revealed interest on the VR experience we also included in our analysis The virtual reality institute of health and exercise which is an organisation created to study the health impact of virtual and augmented reality.
They have developed a mobile App (VR Health Exercise Tracker) with workout programs and calorie tracker built specifically for VR, and it is made based on hundreds of hours of VR-specific metabolic testing. They calculate the calorie cost in each game.
This is a big step to make gamification as a positive contributor to physical fitness and therefore a healthier lifestyle.
2.Define | Clearly articulate the problem you want to solve.
2.1 Affinity Diagram and How Might We Statements
As mentioned previously the lack of motivation blocks people to do exercise or physical activity. Our “How Might We” (HMW) statement based on that same blocker.
How Might We make exercising more attractive and funnier to people that have no motivation to practice it?
2.2 Problem & Hypothesis Statement
The Problem Statement
Our app was designed to provide wellness and mental health while doing exercise or practicing any physical activity. We have observed that the service/product is not motivating nor providing a good time management feature to help people do exercise or physical activities along the week, which is causing a lack of memberships conversion on the app.
The Hypothesis Statement
We believe that, by creating a more appealing and engaging app while integrating the latest tech for people that look for new motivations and better time management tools, users will achieve a better mental wellness as well as a better life quality. We will know we are right with the increment on conversion and a decrease on statistics of people with stress levels.
2.3 User Persona
Our User Persona is Carla, a young and high level educated professional with a tech background. She works as a Web Developer and she is fully engaged with the latest technology. She owns her own set of VR glasses and enjoys the experience she gets by using them.
Her job requires sitting so many hours and when she has some free time, she tries some Fitness app, but she gets bored and gives up easily. Her main frustration is the lack of motivation.
2.4 User Journey
Some opportunities were found to improve the bad experience Carla finds in her free time when exercising. She wants to have fun while doing exercising and the fitness apps she already tried are boring and more of the same.
After an intense day, Carla wants an exciting activity to make her escape from the daily routine and practice the exercise she needs after a long day sitting in the same position.
SOLVE THE PROBLEM
3. Ideate | Brainstorm all possible solution (good and bad)
3.1 Ideation / Brainstorm
All the above data collected helped us to create a suitable solution for Carla.
Carla expressed the difficulties she has on setting exercises routines but she knows and is fully aware that she needs it to improve her mental wellness and health.
Carla is familiar and a very updated user on the latest technology, that’s why the current fitness Apps she uses are not enough to satisfy her exigent needs.
By introducing a VR App alongside a wearable (smartwatch) that can offer customised workouts based on any activity you like such as dancing, yoga, gaming and whatever that makes you stay fit, brings you joy, wellness and a healthy life. This would increase Carla’s interest and therefore would level up her motivation.
Nowadays VR is accessible to anyone with a simple and cheap card VR glasses. Your smartphone, the gyroscope movement recognition of your head and wearables would do the rest. Essentially the moment you select a workout, your avatar will show you the dance and the steps to follow.
4. Information Architecture:
4.1 Information Architecture. Sitemap
The competitors gave us several indications about their current IA.
Our focus was on the Home LP, Workout and Progress pages in each application.
- Down Dog has few pages and is focused on the workouts. It has a clear navigation structure and it is easy to find the information and set your preferences.
- VR Health Exercise Tracker is simple too. The most important page is the Settings where you define your metabolic information and calculate your heart rate. It is important to have a wearable to track better your exercises and see your progress, however is not mandatory to use the App.
- The Structure of the Adidas app is the most complex. It includes a community page with events or challenges. The progress page included extra pages and navigation flows like add more activities, check your statistics or set goals.
The home/dashboard page is very similar in all of them and they all have a CTA to either send you to the workout page or directly start your exercise.
4.2 Information Architecture. User Flow
The information we got so far and the study of our competitors helped us to build the main User Flow of our App, the onboarding.
A new user starts by signing up, it follows the process with 4 more steps where he or she sets up its profile and includes important information relevant to their goals. We included in this flow an extra step of choosing an activity and starts the workout in 2 more “clicks”.
4.Wireframe / Prototype
4.1 Prototype.Mid-Fi
We designed a Mid-fi and tested it with users.
5.Test | Gather user feedback in order to refine your solution
5.1 Usability Testing
By challenging our users by doing the initial onboarding to see if there were any constraints their feedback was:
“Not really, I had to look the options, but was simply and intuitive. No stress or confusing situations. Great job.”
—
“The address book. The name agenda isn’t clear to me (I’m also a native English speaker).”
6. Visual Design
6.1 Visual Design. Moodboards
Glassmorphism and 3D illustrations are a UI trend in 2021 which combined with NWI main colour palettes could offer an engaging and appealing look and feel. From our competitors we also understood that a clear, spacious and digestible design, especially when there’s so much data to show is essential.
6.2 Visual Design. Style Guides
The result is an updated and refreshed design with a playful touch added with the 3D illustrations. We wanted to communicate a vibrant style that could engage with our target audience. A demanding generation that struggles for motivation to exercise.
7. High-Fi Prototype
You can see in detail some screens of our App in detail:
A promotional landing page was also a requirement. Our focus where mainly on:
- A strong visual Hero above-the-fold image with a CTA to download the App for different devices.
- The 3 main features and MVP’S.
- An important claim from the National Wellness institution mission:
Thirty minutes of exercise of moderate intensity, such as brisk walking for 3 days a week, is sufficient for these health benefits. Moreover, these 30 minutes need not to be continuous; three 10-minute walks are believed to be as equally useful as one 30-minute walk.
- Another section would also show another CTA to download the app and the available devices.
- Lastly our footer would include contact information, social networks and a much needed newsletter subscription to get updates about the App.
We were able to prototype different User flows and split The onboarding in 5 simple steps:
- Define your goals
- Type of activity the user like
- Connect with your wearable (not mandatory, this step can be skipped)
- Personal information such as weight and heigh
- Connect with your Address book (not mandatory, this step can be skipped)
A necessary onboarding is essential to provide a customised workout program with the activities that suit best the user preferences.
The moment the user lands in the Home-Dashboard page, the user is able to choose between our suggestions in an easy an intuitive way.
Some people also like company when doing exercise or practicing any other physical activity. This feature shows the user’s contacts that have the Wellness App and it offers the possibility to add them into your workout. This makes the exercise an even more funnier experience.
Finally, this is the “Set a Plan” feature.
With this option, the user can add a workout into a form of a schedule where the days, time, level and type of activity can be customised.
This plan will run notifications that will remember the user to achieve its goals.
This full video describes the whole experience with all the User Flows and the VR experience
