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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Previous
Previous

HouseHunter