UX Case Study: Design of a Fitness App
How might we better support people in maintaining and improving their overall wellness, nutrition and exercise?
The Objective: The ideas about regaining and maintaining one’s health through diet, exercise and other lifestyle measures have gained much momentum in the recent years. Hence, I embarked on a personal project to design a fitness app that would help people with recording, tracking and visualizing their journey.
The Approach: A mobile app that helps people track diet and exercise.
Goals:
- Develop a research-informed understanding of who, how and why wants to be more physically fit.
- Understand the current challenges people face while maintaining their health and wellness.
- Design a product that improves the user experience of becoming more physically fit.
Duration: 8 weeks, spending around 6 hours a week.
Tools: InVision, Google Sheets, Figma
Phases: User Research and Analysis — Strategy — Design
My Role: User Researcher, UX Designer, UI Designer
Phase 1: User Research and Analysis
To begin, I sought to gain an in-depth understanding about how people perceived the notions of health, wellness and the like. I was looking for insights to the needs, motivations and lifestyles of the users that I was going to design for. I conducted interviews of 6 people. I synthesized my research and crafted three key user personas:
- Teenagers, who have some weight, anxiety and related problems
- Young adults, who are fascinated with the idea of a perfect body
- Older corporate employees, who want to introduce some exercise into their life
The personas helped to highlight essential user needs and I translated these needs to user stories. I decided to focus on the mobile app as the personas indicated that a lot of people use apps in the mobile phones, and it would be easier for them to use the app on the go.
In order to further hone a user’s experience of regaining or maintaining their health and fitness, I developed customer journey maps for each of the user. The journey map provided useful insights into the thoughts, interactions, feelings of the user and visual representation of the emotions that a person might feel while setting out on a fitness journey. Through the process of designing a journey map, I distinguished five overarching phases of a person’s journey of becoming more physically fit:
- Anticipating
- Beginning
- Engaging (using the product)
- Feeling the difference
- Completing
Developing a journey map was particularly crucial for identifying the pain points someone might feel — and the emotional “roadblocks” or “barriers” that one might face — in the process of achieving their fitness goals.
By the end of the user research phase, I identified three categories of users, crafted their personas, user stories and consumer journey.
Moving to the second user, James
Now, the last user, Mary:
Phase 2: Strategy
As a part of strategy, I took the opportunity to conduct a feature prioritization analysis, to ensure that the design was focused on the key user requirements. I also did a competitor analysis of the existing products. Based on this information, I determined the information hierarchy for the app.
Minimum Viable Product(MVP)
The main business goals are to ensure the following aspects :
- The business remains profitable.
- The customer base expands.
- The product is popular, there are decent number of downloads for the app.
whereas the customer goals for this app broadly are:
- Achieving higher levels of physical fitness and engaging in more physically activity
- Recording meals and exercise and tracking them
- Having reminders to track their activities
- Exploring exercise buddies and sharing their journey on Instagram/Facebook
Based on the business and customer goals, I tried to identify critical use cases for the app.
Product Roadmap
At the beginning of our process, we recognized a yearning in every individual to be a little bit more fit. From there, we identified that our key users will tend to fall in three major personas: Anna, who has weight and related problems, James who is all about fitness and work devoted Mary. In the process of prioritizing our features, we came to an exciting realization. We found that among the three groups of users, Anna and James are emotionally engaged in the weight loss journey, they are more motivated than Mary as they are more invested in being physically fit.
As a result of this realization, for now, the basic features of our app focus on Anna and James. Once our product is launched, we will enhance our product with features that cater more to Mary’s requirements, which will also help to maintain the interest of James and Anna in our app.
Competitor research and analysis
Information hierarchy
For the scope of this case study, I decided to stick to wire frames that meet the requirements of the MVP:
- Screens that track the user’s meals and exercise.
- Screen that captures milestones visually in the weight loss journey.
- Screen for record breakdown calories and nutrient intake.
I felt these use cases can be categorized as the following two functions broadly:
- Recording the information and displaying all the information recorded
- Visual graphic of the journey so far
I wanted to have a dedicated tab to each of these functions. I designed for a tab titled “Dashboard” where user can see graphics for weight, calories consumption, exercise, etc. The second page titled “Timeline” for capturing user’s activities within a day.
Additionally, I wanted to have a tab for user’s profile. I felt that the profile tab will useful for the future product development, so that we can cater to use cases such as customizing notifications for exercise and recording meals and match exercise buddies based on location. Further, it can be used for displaying and editing of user information. For this case study, I have not deep dived into the design of the profile tab.
I had to decide which page to launch the app on. As the user will adding meals and exercises a few times each day, I decided to use the “Timeline” screen as the home screen for the app.
Phase 3: Design
To focus on designing the core experience of my app, I began hand sketches. I tried to come up with all the possible ideas for the mobile screens. Based on the hand sketches, I created low-fidelity wireframes using InVision.
Hand sketches
Dashboard
This screen is dedicated for the user to track meals, exercise, calories consumption, etc. As every metric is tracked differently, I decided to group graphs into two categories: calorie-related and exercise-related. The user will be able to add graphs for both categories, if he/she so requires.
Then I tackled other questions like:
- For time period over which the user wants to see the data, I narrowed from 6 options (day, 1-week, 1-month, 3-month, 6-month and 1-year) to 3 options (week, month and year), with rationale that day data was being captured in the timeline tab. 3-month and 6-month data can be seen in the 1-year tab.
- The preferred units of measurement can be captured during the onboarding process. The user can see and edit his choices on the profile page. The app can use the same units across all the pages.
- Considering space constraint, the scale of the graph can be customized; it should reflect values from ± 20% of the user’s maximum and minimum input. For example, user whose weight varies from 40 kg to 50 kg in a month, we display scale from 32 kg to 60 kg. This will save space and offer a zoomed view to the user over a mobile screen.
Timeline Screen
I had 3 different ideas for design:
First Idea: Calendar screen
Pros:
- User can have individual cards to view and edit details.
Cons:
- Space constraint
- User cannot see all the details.
Second idea: Diary screen
I considered options to present data in this page:
- Arrange the data as per user input or
- Present empty structured page for user to fill data
I chose the latter as it is more systematic, intuitive and more accessible approach for the user.
Third idea: Grouping activities as meals and as exercise
Cons:
- User may miss an entry because there are just two broad categories to choose from.
- Tough to edit/delete his entries.
I decided to go with the second option and arrange this page like a diary, and present an empty structured page for user to fill.
Low-fidelity wireframe
Dashboard screen
Timeline screen
As I was happy with my results so far, I decided to capture the process of user adding data (meal/exercise) to the app. This will happen when the user clicks the add button on the timeline screen. Additionally, also catered to design for editing the information entered.
High-fidelity design
Next, I designed the app’s UI, keeping in mind Material Design color and graphic guidelines. I adopted complementary colors, blue (#2D42FB) and orange (#FA9917). Adopting blue as the primary color, I used it for top and bottom app bars. The floating action button and data visualization use the secondary color, orange.
Reflections
This project is only the beginning of a larger, longer design process, and plenty of further research, iteration, and design can be done to improve the usability and viability of the app.
If this were an actual product, the next steps would be to conduct analysis and user testing research on the prototype developed so far, and make the relevant changes to the interface based on user needs and behaviors.
The main takeaway I had from this project was the importance of user research, which really helped me empathize with the users I would be designing for, it made the process feel more like a real problem was being solved.
