Olive is a mobile application designed to help people care for their wellbeing alongside their daily work, track healthy habits, and organize and balance their day.
Role
UX Researcher, UX Designer, UI Designer
Tools
Figma, Sketch, Miro, UsabilityHub, pen and paper
Date
February–July 2021
Problem & solution
Problem
People who work long hours and have busy schedules need a way to improve and maintain their mental and physical health alongside their daily work.
Solution
Olive is designed to help busy people maintain their mental and physical health by suggesting short, customized activities based on their work style. It also helps them arrange their daily schedule, track new habits, and access reliable resources to better understand their health.
Design process
Discover → Define → Design → Refine, with iteration throughout.
01 · Discover
Competitive analysis
I began with a competitive analysis of Tangerine and Bloom to understand the market and identify opportunities by examining each competitor’s strengths and weaknesses.
The SWOT analysis helped shape these app features:
Customized activities based on the user’s work style.
Different types of resources: articles, audio, videos, books and courses.
Daily goal tracking and weekly reports.
User research
To understand the problem, I conducted user interviews with four participants.
Interview goals
Identify how people care for their physical and mental health.
Understand what motivates them to care for their health.
Learn about their experiences with physical and mental health apps.
Understand how they organize their lives and daily schedules.
Participants’ responses.
Research insights
After the interviews, I created an affinity map by sorting the data into three categories: behaviours and attitudes, needs and motivations, and frustrations.
Key insights
People have different health needs related to their work style.
Seeing daily progress helps people achieve their goals.
People are not always aware of the effects their work style can have on their mental health.
People dislike feeling isolated.
People rely on notifications and reminders to remember tasks.
People use different tools and apps to manage their day.
Affinity map.
User survey
After the interviews, I conducted a survey to build empathy with potential users and understand their needs more deeply.
Survey goals
Find out whether people would be willing to try this kind of app.
Identify which features would be most and least beneficial to them.
Understand the age range of my target users.
Participants’ responses.
02 · Define
User personas
In the second phase of my design process, I created two user personas with different concerns.
These personas helped me understand users’ behaviours and needs more deeply and brought a human perspective to the design process.
Deema
Deema
“My job requires time and attention to detail. Trying to perfect every detail makes me feel stressed and affects my physical health as well.”
32 · UI Designer Single · Vancouver, Canada
Anxious · Hard worker · Results-oriented
Favourite brands Facebook · LinkedIn · Apple
Goals
Manage anxiety while meeting deadlines at work.
Become more aware of work-related health issues and how to avoid them.
Needs
A tool with an effective training plan based on her work style to help her achieve her health goals.
Reliable resources and education about mental and physical health.
Motivations
Customized activities that fit her work and help improve her health.
The ability to track her progress.
The ability to challenge others or share achievements with friends.
Frustrations
Too many apps provide the same content for every user.
Health information on social media often comes from unknown sources.
Loneliness.
Personality
More extroverted and creative; busy, organized and team-oriented.
Device and internet usage
Mobile, desktop and social media.
Adam
Adam
“I admire people who can organize and balance their lives. It’s not easy to schedule your workday and take care of yourself at the same time.”
43 · Marketing Manager Married, two children · Seattle, US
Logical · Practical · Determined
Favourite brands Apple · Nike
Goals
Balance personal, social and work time.
Establish habits to become more productive.
Needs
A tool to help organize his day.
A simple way to keep track of his habits.
Motivations
A daily report showing his responsibilities.
The ability to track multiple habits.
Customized reminders for each habit that fit his schedule.
Frustrations
Not enough time to complete all his daily responsibilities.
Forgetting where he wrote his notes.
Difficulty relying on memory to track new habits.
Personality
Balanced between introversion and extroversion; analytical, busy and organized.
Device and internet usage
Mobile, desktop and calendar.
User journeys
I created user journeys for the personas to visualize their relationship with Olive and the touchpoints between each user and the product.
Deema’s journey
Deema
Scenario Deema and her team are approaching a project deadline. She spends long hours at her desk and forgets to take breaks, which affects her physical health, causing neck cramps and back pain. She is looking for a tool to help her and her team address this problem.
Goals & expectations
Maintain her physical health while working.
Find short activities that fit her schedule and goals.
Share activities with her team.
Deema’s journey
Find suitable activities
Set preferences
Practice
Challenge friends
Tasks
Review the health categories.
Identify the categories that fit her work.
Choose the help that aligns with her needs.
Choose a suitable session duration.
Set a weekly schedule based on her preferences.
Receive a notification.
Open the app.
Go to the exercise page and start.
Complete the exercise.
Select Share and open the friends list.
Select a friend and send a challenge.
Return to work.
Thoughts
“My job requires long periods of standing. While working, I find it hard to focus on anything beyond my work.”
“Sometimes my busy schedule makes me forget to enter my data, and there’s no notification to remind me.”
“I haven’t missed a workout since the New Year. It’s my New Year’s resolution.”
“Competing with friends motivates me the most.”
Feelings
Neutral
Frustrated
Happy
Happy
Opportunities
Show the available services.
Let users choose the type of help they need.
Let users choose the session time.
Provide a way to schedule routines.
Create an activity page.
Create a friends list.
Provide a way to challenge friends.
Adam’s journey
Adam
Scenario Adam has a busy week of meetings and work responsibilities, but he wants to attend his daughter’s school play on Tuesday afternoon and bring her a gift. He wants to balance his personal, social and work time.
Goals & expectations
Plan his week ahead and add details and notes to events.
Balance personal, social and work time.
Adam’s journey
Create an event
Set a reminder
Balance
Tasks
Name the event.
Add a personal note.
Categorize it as life, work or health.
Choose a date from the calendar.
Set the reminder time and number of reminders.
Choose the reminder type and tone.
Go to the home page and choose Insights.
Review the weekly reports.
Adjust the week to balance life around his goals.
Thoughts
“I write my appointments and responsibilities in my phone notes and read them before bed to check for unfinished tasks.”
“Sometimes my busy schedule makes me forget to enter my data.”
“I love seeing my progress.”
Feelings
Frustrated
Neutral
Happy
Opportunities
Let users organize the week ahead.
Categorize events by type.
Let users customize reminder dates and times.
Provide a calendar.
Provide weekly reports about how users spend their time.
User flows
I mapped the key paths the personas would take through the app to achieve their goals. Each flow shows the potential starting points, the steps along the way, and the endpoint.
Deema’s flow
Task analysis
Download the app and view the splash screen.
Complete onboarding and sign in.
Choose the type of help, enter user information and set reminders.
Go to Home, then Activities, and play a neck-stretching video.
Adam’s flow
Task analysis
Sign in and go to Home.
Create an event.
Enter the event information.
Set a reminder.
03 · Design
Sitemap
Before wireframing, I developed an initial sitemap. I then used open card sorting to improve the app’s structure and navigation.
The final sitemap.
Low-fidelity prototype
I translated the sitemap into a prototype. I created the first low-fidelity version with pen and paper, then tested it with users through Marvel so they could interact with the design.
Low-fidelity wireframes.
Mid-fidelity prototype
After testing, I created a mid-fidelity prototype in Sketch and iterated on the design using feedback from the low-fidelity tests.
Mid-fidelity wireframes.
04 · Refine
Usability testing
I conducted a second round of usability testing with six participants to test the mid-fidelity prototype: one moderated session in person and five moderated remote sessions over Zoom.
After testing, I organized the data into an affinity map and created a rainbow spreadsheet to assess the severity of the errors.
Testing goal
Assess how easily new users could learn to use Olive for the first time.
I wanted to observe whether users understood the app’s value and could complete basic tasks: start an activity, search for resources, and add appointments for life events.
Affinity map and usability testing rainbow spreadsheet.
Usability testing findings
The onboarding text was too long.
The home page felt cluttered.
Users needed a shortcut to the calendar from the home page.
The graphs needed more explanation.
Home page — before and after.Graphs — before and after.Goal setting — before and after.
High-fidelity prototype
After testing the mid-fidelity prototype, I continued developing new pages and adding detail and colour to create the high-fidelity prototype.
I ran preference tests on selected pages to evaluate the design. I also shared the prototype with fellow design students to gather feedback, collaborate with other designers, and refine the design.
Here is the final design.
Onboarding & wellbeing goals
Onboarding and setting wellbeing goals.
Home & activities
Home page and activity flows.
Resources & courses
Resources and the course purchase flow.
More screens
Account access, habits, calendar, community and notes.
Design language system
Colour palette
The original Olive colour palette.
Typography & iconography
Style
Typeface
Size
Weight
Header 1
Montserrat
17 px
Semibold
Button text
Montserrat
17 px
Semibold
Page title
Helvetica
17 px
Bold
Body 1
Montserrat
17 px
Regular
Body 2
Montserrat
15 px
Medium
Small text
Montserrat
13 px
Regular
Label
Montserrat
10 px
Regular
Iconography
Grid, layout & buttons
Grid: 5 px. Layout: four 75 px columns with 20 px gutters.
Common UI components: buttons
Primary buttons: 280 × 45 px and 330 × 45 px, with active and inactive states. Add button: 55 × 55 px.
Common UI components
Tab bar: 390 × 83 px.
Navigation bar: 330 × 40 px.
Input fields and search bar: 348 × 45 px.
Progress bar: 360 × 29 px.
Charts, cards, page controls and pop-ups.
What I learned
Following the design process was incredibly rewarding and changed how I think. It taught me to observe carefully and empathize with users so I could design a product that serves their needs, rather than relying only on my own perspective.
Asking “why” throughout user interviews is key to understanding the problem.
Sharing my design with others brought fresh perspectives and had a strong impact on the final design. Evaluating each piece of feedback was also a challenge.
Finally, I learned that design is never truly finished.
