Olive Health
Responsive Web Application | Mobile-First Design
PROJECT OVERVIEW
Objective
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
Responsibilities
Competitive Analysis, Survey/Interviews, Information Architecture, User Personas, User Journeys, User Flows, Wireframing, Prototyping (Low-High-Fidelity), Rapid Prototyping, User Testing, A/B Testing
Tools
Figma, Sketch, Miro, Jira, Lucid, Optimal Workshop, Usability Hub, Google Forms, Rotato, Adobe Illustrator, Adobe After Effects, Adobe Photoshop, Adobe InDesign
PROBLEM HYPOTHESIS
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.
» PROBLEM STATEMENT
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.
COMPETITOR ANALYSIS
MyFitnessPal
>> 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.
USER SURVEY
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
Method
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
USER INTERVIEWS
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
Method
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.
USER PERSONAS
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
USER JOURNEYS
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
USER TASKS & FLOWS
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
INFORMATION ARCHITECTURE
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
LOW- & MID-FIDELITY WIREFRAMES
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.
USABILITY TESTING
Subject
Olive Health, health and well-being application // web-based, mobile version
Goals
» 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.
Tasks
01
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.
02
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.
03
Now you would like to import data from another application so you can access it later on.
04
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
DESIGN LANGUAGE SYSTEM
Typography
Color Palette & Accessibility
>> Primary Colors
#536976 // 100% // 75% // 50%
#BBD2C5 // 100% // 50% // 25%
>> Secondary Colors
#AF007E
#F7BFF9
>> Grey Scale
#202020
#666666
#CCCCCC
#FFFFFF
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
HIGH-FIDELITY WIREFRAMES
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.
