OLLIWELL (UX Design)
What does it mean to be fit?
Fitness often brings to mind images of cardio, strength training and other physical exercise. But emotional health and healthy eating are also important in being fit. Olliwell helps people reach their fitness goals by tying physical, nutritional and mental health together. It enables them to log fitness activities, chart their progress and stay on track.
Role: UX Researcher, Product Designer, UI Designer
Skills: Competitor Analysis, User Research, Information Architecture, Wireframing, Prototyping, User Testing
Tools: Figma, Balsamiq, Optimal Workshop, Usability Hub
Time Frame: 6 months
Understanding
Products are designed to solve problems.
To understand how Olliwell could help people reach their health and fitness goals, I came up with possible problems people might have with existing apps, and possible solutions.
Possible Problems: A lot of people find fitness/wellness apps too intimidating, that it's only for "fitness junkies" or those who are already super motivated about fitness.
Many users are excited when they first use a fitness/wellness app (like for their new year's resolution), but then their excitement quickly drops off.
A lot of fitness routines don't take into account the emotional component, and that people might put more or less effort into their physical health when their emotions run high or low.
Problem Statement: Our fitness app users need an encouraging, friendly app that will help them maintain their physical health and revise their routines according to their current feelings because it is very easy to lose interest in fitness when the emotional motivation is not there. We will know this to be true when users regularly log their progress on the app for longer than 2 months.
Potential Solution: A friendly, uncluttered app that won't have a steep learning curve, and appears welcoming to those starting a fitness journey. This app will be encouraging and maybe instead of having a typical "fitness" journal, it will have a "feelings" journal. Users will still want to open this app even when they are feeling low and less motivated about fitness.
Competitive Analysis
To see what comparable apps (and their features) are already available on the market, I conducted an analysis on two of Olliwell’s would-be competitors, FitOn and Freeletics.
This would help me see the opportunities that Olliwell could present.
FitOn
Freeletics
Freeletics:
The company describes this app as Europe's #1 fitness app and the "best digital personal trainer" without a gym. Targeted at all fitness levels, the app aims to help users "achieve goals quickly and build healthy habits."
FitOn:
FitOn is an app founded by former FitBit VP Lindsay Cook. It calls itself the "#1 Free Fitness App." FitOn describes its app as a way for people to work out anytime, anywhere without paying money, and still getting "the best workouts, from the best personal trainers."
User Research
To get some concrete data about what people might need in a potential health app, I surveyed participants on their fitness and health activities, habits and outlook. From there I interviewed a few of these participants more in-depth and recorded their attitudes, needs, frustrations and more.
Goals:
- Identify potential app users' behavior, attitudes and motivations when it comes to fitness
- Identify challenges that prevent app users from reaching fitness goals
- Identify possible app features that would help and be appealing to potential app users
Insight: All respondents indicated that tracking and logging information—calories burned, workouts completed, reps performed, diet/nutrition, progress—would be helpful. This would help users keep themselves on track and accountable, as well as motivate them as they are able to see changes.
Action: Create a logging feature for users to log anything they want. Over time, users will be able to see where they started and how much they have changed by keeping themselves on track.
Insight: Respondents struggle with motivation but recognize the importance of developing positive long-term habits.
Action: Help users start positive fitness habits and maintain them, by featuring gentle reminders that are inviting, encouraging and non-intimidating.
User Personas
To incorporate the findings from my user research, I created two user personas—Fernanda and Kyle—composites of the kind of people who would use Olliwell.
I would look to these user personas when I am designing this app as in “What would Fernanda and Kyle do?”
Although both were fitness-minded, Fernanda’s primary concern is fitting in exercise whereas Kyle’s primary concern is sticking to a healthy diet.
User Flows
To visualize how my user personas, Fernanda and Kyle, would reach their health and fitness goals, I charted their mental models and user journeys.
I then created user flows to show how they would accomplish their goals using the features on the app.
Card Sorting and Site Map
After developing the user flows, I created a site map to start thinking about how the features on my app would be organized.
To refine the organization of my site map, I conducted a card sorting with participants from multiple countries and used the findings to revise my site map.
Cart sorting using Optimal Workshop
Site Map V.1
Site Map V.2
Creating Wireframes and Prototype
To quickly visualize ideas for how I would lay out elements on a screen, I made sketches on paper, then created low-fidelity wireframes using Balsamiq and mid-fidelity ones using Figma.
These wireframes eventually became the first prototype.
(Olive was the working title for the app before the name Olliwell was chosen.)
Low Fidelity using Balsamiq
Mid Fidelity using Figma
Usability Testing
To see how the prototype would work in the real world and to find potential frictions, I conducted usability tests with participants using the mid fidelity prototype.
Tests were conducted via Zoom with screen-sharing, and participants were given the following tasks to complete:
-Signing up via email and filling out the personality questionnaire
- Logging a meal
- Creating a journal entry
- Playing a workout video
From there I compiled the results into affinity maps and a rainbow spreadsheet to see if changes needed to be made for better navigation.
Errors were evaluated using the Jakob Nielsen error severity scale.
Examples of changes that resulted from usability testing include:
- Adding a search function to the workout videos
- Having clearer indicators of workout completion and saving function
- Revising questions in meal journal to sound more specific yet neutral
- Letting people enter in their own emotions in the mental journal instead of choosing from 3 predetermined choices
Participants’ demographic info
Affinity mapping
Rainbow spreadsheet
Preference Testing and Creating High Fidelity Prototype
After usability testing, I was ready to transfer my mid fidelity wireframes to a higher fidelity prototype.
To start seeing how certain designs might inspire or motivate people, as well as how they might make people feel, I conducted preference testing to garner first impressions of some of my screens.
To start nailing down what elements I would like to have consistently across all my screens, I looked to guidelines such as those on the psychology of color, and created a design language system.
This system would cover UI components from fonts and colors to the size of buttons and images.
I charted what to do or don’t when it comes to the UI for this app so that future designers may easily create more screens for this app that are cohesive.
Psychology of Color infographic from newsourcing
Iterations
A lot of time could be saved if kinks are ironed out before a product release.
To see more ways I could smooth out my design, I made more iterations based on Google’s Material Design language, Web Content Accessibility Guidelines, and feedback from fellow designers, as well as my tutor and mentor.
Changes include:
- Spacing out elements for improved readability
- Increasing the size of touch targets to help those with decreased manual dexterity
- Adding labels to icons to better comprehension of icons
- Switching from photos to illustrations for the hero images to improve cohesion
Revised screens based on feedback from fellow designers at CareerFoundry
Revised screens based on Web Content Accessibility Guidelines
