Olive App
Better Health through Better Living
A UX/UI Project for a responsive Health and Wellness App
UX/UI CASE STUDY
DURATION
6 months
MY ROLE
UX/UI Designer, UX Researcher
TOOLS USED
Figma, Miro, Google Slides
Project Overview
Olive is a responsive health and wellness app that provides a variety of accessible information and guidance on health topics such as yoga, nutrition and meditation. The aim is to provide overall information about how to follow a healthy lifestyle and how to build healthy habits by using only this app and without the need to switch and use various different apps.
Target Audience
The target audience of this app is working professionals who want to follow a healthy lifestyle and want to find balance between their stressful everyday working life and self-care.
Problem Statement
People with stressful everyday working lives and those who are seeking a healthy lifestyle often struggle to find a comprehensive platform that addresses their wellness needs. Existing wellness apps often lack integration of key elements like yoga, nutrition and meditation, leaving users to switch between multiple apps. Users need a way to find a variety of accessible information and guidance on wellness topics in one app. We will know this to be true when we see how many users are using our app in order to create healthy habits for themselves.
Solution
Provide a single platform that seamlessly integrates yoga, nutrition and meditation to support users in maintaining a healthy lifestyle or adopt new healthy habits.
Goals
Simplify the user experience by offering a minimal and an intuitive interface that allows users to easily access and navigate through various features of the app
Personalize the app by offering tailored recommendations based on user preferences, needs and goals, fostering a long-term engagement
DESIGN THINKING PROCESS
COMPETITOR ANALYSIS
USER RESEARCH
Research Goals
To understand better the user behavior around wellness and building healthy habits
To determine which tasks users would like to complete when using a health and wellness app
Documenting user pain points and existing health apps on the market
Collecting data on the context in which users would use a wellness app
AFFINITY MAPPING
Key Findings
Most users want to accomplish a better living overall. They are not only interested in exercising and losing weight, but also in eating healthy, drinking more water, having a better quality of sleep and improving their mental health in general
It is very important to the users to have access to a variety of different content on health topics
Providing guidance and instructions can really make a difference in the way the users use and interact with the app
All of the interviewees want to track their progress and see obvious change in their bodies and mental health to stay motivated and keep on using the app
USER PERSONAS
Αfter conducting the research analysis for Olive, I created 2 User Personas to address the problem statement:
The first persona, James, is 37 years old, lives in Berlin and is a busy lawyer. Because of his job he has a lot of stress. Through Olive app, he will learn meditation and relaxation techniques in order to reduce his stress levels.
The second persona, Cecilia, is a very active 25-year-old girl who lives in Rome and works as a data analyst. She likes art and music and has a tendency to get tired and bored easily. With Olive she will have access to a large variety of workout videos and recipes so she can find always something to keep her engaged.
USER JOURNEY MAPS
User Journey Maps:
I tried to create two comprehensive user journey maps that highlight the entire end-to-end experience of users with my design. These visually compelling maps are extremely helpful in order to identify pain points, user needs and opportunities for improvement.
USER FLOWS
“As a user, I want to learn how to meditate through meditation videos, so that I can control my stress levels and improve my mental health”
“As a user who aims to follow a healthier lifestyle with advice and guidance from experts, I want to get to know how to use a health app, so that I will learn a lot of things about exercising and healthy eating ”
“As a user who wants to start eating and cooking healthy food but has no previous knowledge, I want to have access to a large variety of recipes, advice and tips, so that I can learn the basics of healthy cooking and be able to cook nutritious meals by following the instructions”
SITEMAP
LOW-FIDELITY WIREFRAMES
Low-Fidelity Wireframes
My basic idea when I started to design the basic screens of Olive, was that I wanted to create an application that is simple and easy to use, which will include features that will be easily recognizable for the user and will be able to intuitively navigate and explore everything its characteristics as well as to easily perform the desired action.
MID-FIDELITY WIREFRAMES
Mid-Fidelity Wireframes
After sketching my Low-fidelty wireframes, I moved a step forward and created my mid-fidelity wireframes in Figma. My mid-fidelity wireframes are more detailed and I wanted to capture the visual elements and layout of the design while allowing room for further refinement before moving on to the high-fidelity prototype.
HIGH-FIDELITY WIREFRAMES
High-Fidelity Wireframes
After testing my mid-fidelity prototype with my users, making improvements and iterations based on the feedback that I gathered, I started designing the high-fidelity version of my design. My high-fidelity wireframe is visually polished and realistic. The images I chose to use are images picturing real people, nature and the feeling that I want to give to the users of Olive is calmness, growth and peace.
These hi-fi wireframes effectively showcase the interactive elements, layout, and overall user experience, providing a clear representation of the final design direction. Of course, after conducting usability tests with my users, iterations will be made.
USABILITY TESTING
Usability Testing
I conducted 5 usability tests remotely via Zoom with my participants. I recorded the sessions with their consent. One of my participants used her mobile phone to test the prototype.
Test Objectives
Determine and observe if the participants are able to understand what Olive app is
Observe how participants navigate and interact with the app and go through completing the required tasks, (e.g onboarding or find meditation videos or meal ideas ) and find out if they can actually complete the tasks successfully
Find out if the current flow is clear and intuitive enough for first time users
Test Goals
The goals of this test are :
to test how easily users navigate through the app
to observe and understand how quickly they are able to complete simple and the most common tasks while using the app and identify errors while completing these tasks
USABILITY TEST RESULTS
Feedback & Iteration
According to the users feedback, there missing a button for returning to the Homepage.
Iteration: A back button was placed in order to help the users navigate and go back.It was observed that in the nutrition page there is no clear division between the different subcategories.
Iteration: Now the different categories are presented in a clear way and the user is able to select his desired category and then see all the recommended results.Some users found he results page overloaded and said that It causes some distraction and confusion to them.
Iteration: The results page became more simple and clear. An intuitive and easier to navigate page can reduce the user’s cognitive load.The Hamburger Menu seemed to confuse users rather help them navigate easily.
Iteration: I decided to remove the Hamburger Menu and keep the bottom Navigation Bar to help my user navigate through the app.
STYLE GUIDE
FINAL MOCKUPS
Reflection
It was challenging and fulfilling to create a user-centered design that effectively addressed users’ needs, goals, motivations and preferences.
I discovered the importance of learning how to use tools, learning new skills and creating your own design from the beginning.
I understood how valuable is to conduct thorough research, empathize with the users and iterate your design based on the feedback you get after testing your design.
Next Steps
Moving forward, my next steps will involve practicing a lot and making improvements and iterations based on how my responsive app is functioning in different breakpoints.