top of page

Olive Health

Responsive Web Application | Mobile-First Design



Allow health-conscious individuals to log in to a responsive health and well-being portal to record their health and medical information, and access general physical and mental well-being features.

My Role

UX Researcher

UX Designer

UI Designer


Competitive Analysis, Survey/Interviews, Information Architecture, User Personas, User Journeys, User Flows, Wireframing, Prototyping (Low-High-Fidelity), Rapid Prototyping, User Testing, A/B Testing


Figma, Sketch, Miro, Jira, Lucid, Optimal Workshop, Usability Hub, Google Forms, Rotato, Adobe Illustrator, Adobe After Effects, Adobe Photoshop, Adobe InDesign


Possible Problems & Solutions

>> Overwhelmed by information

To ensure that users aren’t overwhelmed by the information provided, it is essential to split necessary information into compact and easily digestible portions.

>> Keep continual engagement

Continual engagement with the application can be reached by providing a good progress/development overview and potentially adding a gamified aspect or reward system.

>> Difficult to understand / use

It is important to keep the information users need to digest at one point brief and precise, features should be simplified to avoid confusion. Sufficient explanation should be provided in the beginning and looked up at a later point.

>> Integrating existing services

As many users already use different services to track and monitor their health and wellbeing it should be possible to link and import data from other e.g. apps or fitness trackers to avoid frustration over lost data and progress.

>> Individuality & inclusivity

The design caters to people with different needs and starting point. Every user has different physical, psychological and social needs and knowledge backgrounds so the app needs to be customizable and provide individual support.

>> Security and data safety

To encourage users to be honest with the information they share with the app it needs to be trustworthy. This can be reached by password protection of the app itself and by providing safe servers where the data is stored.


Our Olive health app users need a way to understand and follow their health data with individual feedback and support because they want to improve their health. We will know this to be true when we see users engage with the application on a daily basis.



>> Key objectives

MyFitnessPal’s main message is that “fitness begins with a healthy diet”. They enable users to count calories, analyze ingredients and log activities to ultimately lose/keep/gain weight and change their diets along the way. They offer a premium membership yet their basic service can be used completely for free, giving access to a food and nutrition database with over 300M entries, discussion forums, and adjustments for special dietary requirements.

SWOT Analysis | MyFitnessPal

>> Market advantage

The application can be run on several operating systems and even as a web application making it accessible to a vast range of users, who also continually contribute and add to the food database.

Apple Health

>> Key objectives

The Apple Health app makes it easier for people to see and understand their health metrics and records in a central and secure place. It enables users to link third-party health accessories, e.g. wireless blood pressure cuffs, to monitor and store their health data and share that information directly with their family or healthcare team.

SWOT Analysis | Apple Health

>> Market advantage

As Apple and Apple products are gaining more and more reach within professional fields and healthcare, their native apps and the way they are linked seamlessly provide a smooth data exchange in a familiar and intuitive environment.


Research Goals

» better understand user behavior around the activity of logging personal health data
» determine which tasks users would like to complete using a health app
» documenting user pain points with existing health and wellness apps on the market
» collecting data on the context in which users would use a health app


Online user survey conducted via GoogleForms with a total of 26 participants.

Demographic Overview

>> Pronouns

>>Age range

Key Insights

» 92,3% of participants have already tracked their health/body data before
» smartphones are the preferred medium with which participants track data
» the main pain point of logging data seems to be the frequency with which it needs to be done to gather representative data
» most participants are interested in logging a broader spectrum of data rather than just one specific issue

User Survey | Results


Research Goals

» gain a deeper understanding of the data gathered through the survey
» determine which tasks users would like to complete using a health app
» documenting user pain points with existing health and wellness apps on the market
» collecting data on the context in which users would use a health app


In-person interviews conducted with a total of 3 participants. Interviews were recorded on an iPhone 11 with the participants’ permission.

Key Insights

» there is a great interest to log and track personal health data through all genders, ages, and occupations.
» opinions, previous experiences, and user needs vary greatly in this field.
» there is a market need for an inclusive health and wellbeing app that combines health data form various topics/sources.
» the application needs to be convenient and easy to use, offering motivation or rewards to keep engagement.


Using the input received during the discovery phase three user personas were designed based on the target customers of Olive Health. These personas help to better visualize research findings and empathize with the users during the design process. 

User Persona | Janet

User Persona | Sophia

User Persona | Chris


To visualize the thoughts and emotions the users might go through while using the application, journey maps were created for all three personas. This way it was possible to identify frustrations, pain points, and any other frictions a user might encounter and formulate these into opportunities to tackle during the design process.

User Journey | Janet

User Journey | Sophia

User Journey | Chris


In order to design a sensible and smooth user experience clear tasks needed to be defined that the user personas wish to accomplish. Each of the user personas was assigned one main task which was then split into smaller steps, helping to design clear user flows.

User Task | Janet

User Task | Sophia

User Task | Chris

User Flow | Janet

User Flow | Sophia

User Flow | Chris


Jumping into the development phase a basic sitemap on the basis of the user flows was drawn out. To test the assumptions, a virtual open card sort was conducted using OptimalSort with a total of 9 participants, and 19 cards to sort. A similarity matrix revealed that the basic structure of the original sitemap seemed to align with what most participants also found logical, however some changes needed to be made. Based on the gathered information the following sitemap was created.


Sitemap | Olive Health


Once there was a clear idea of the main features to be included in the product, some basic sketches of wireframes were created. These paper prototypes allowed it to think through and test the initial ideas, working from screen to screen, both on mobile devices and desktops. From this, it was quickly possible to validate individual design decisions and move on to interactive low- & mid-fidelity prototypes using Figma.

Implemented Features

While designing the prototypes it was concentrated on a selected number of features, namely those that the user persona Janet needs. This includes screens to create an account, log an entry within the nutrition focus area, sync data from a 3rd party application, and view her overall progress.



Olive Health, health and well-being application // web-based, mobile version


» assess the learnability for new users
» observe and measure if users understand the app and its value,
» asses, if users can easily complete basic initial functions 

Test Setup

The usability tests were conducted in person and virtually.

For the virtual tests, Zoom and Skype were used, adapted to the participants’ preferences and available software. Both platforms allow the participants’ screens to be viewed and recorded. The participants were asked to open a link in their preferred internet browser, taking them to an online clickable Figma prototype.

The in-person tests were conducted on an iPhone 11, utilizing the Apple screen recording function. The participants were given the clickable Figma prototype using the Figma mobile application installed on the phone.

All tests were conducted in a quiet and stress-free environment, ensuring no distractions or disturbances. All participants were informed about the aims of the testing process and agreed to the recording of their sessions.



You have visited the website of Olive and informed yourself about the application's aims and functions through the welcome page. You would now like to create an account.


You have created your account and set up your desired focus areas. You now want to start logging your calories for the day, starting with the milk for your morning coffee.


Now you would like to import data from another application so you can access it later on.


And finally, you want to get an overview of all the data you have collected so far.

Test Results

The test produced very positive results - every participant was able to successfully complete each task without any support. The participants’ behaviors and comments, however, highlighted a few minor issues that were subsequently solved in the following iterations. The results were collected and analyzed in the form of an affinity map, sorted into the categories of observations, errors, positive quotes, and negative quotes. From there, a rainbow spreadsheet was created, classifying the errors that occurred during the testing with an adapted version of Jakob Nielsen’s four-step rating scale, from 0=I don’t agree that this is a usability problem at all, to 4=Usability catastrophe: imperative to fix before product can be released, with possible solutions and suggested next steps.

Affinity Map


Color Palette & Accessibility

>> Primary Colors

#536976 // 100% // 75% // 50%

#BBD2C5 // 100% // 50% // 25%

>> Secondary Colors



>> Grey Scale





Grid Systems

Mobile Devices

6-column grid

column: auto

margin: 16px

gutter: 16px

Tablet Devices

8-column grid

column: auto

margin: 32px

gutter: 16px

Desktop Devices

12-column grid

column: 86px

margin: auto

gutter: 16px


With each round of iteration, the prototype was updated both in functionality and level of detail, progressing slowly into a high-fidelity design. Through further user testing and quick preference and A/B tests, it was possible to not only tackle the broader, more general issues but also get feedback on specific design choices. Peer reviews and tests for accessibility brought even the slightest issues to attention that could then be optimized. A lot of back and forth from prototyping to testing made it possible to resolve all major issues users encountered while using the application and resulted in a clear and efficient user experience with a well-received interface design that will help users achieve their tasks.

Untitled_Artwork 2.jpg
  • Subtract
  • LinkedIn
  • Behance
  • Pinterest
bottom of page