Olive

an integrated medicine responsive web app that helps users to manage

their medical records, medications and to schedule appointments
online.

Overview
PROJECT BRIEF MY ROLE TOOLS I USED
Creating Olive was a part of my UX Design course at Career Foundry. UX Designer: Adobe XD
The aim of it is to enable health-conscious individuals to log in to a User Research, Adobe inDesign 22
responsive health and wellbeing portal to record their health and Ideation, Optimal Workshop
medical information, and access general physical and mental wellbeing Wireframing and Usability Hub
features. Prototyping, Google Forms
User Testing, Icon8 Illustrations
DURATION May 2021-November 2021 UI Design

DESIGN PROCESS
I followed the Design Thinking Process to develop OLIVE, this methodology guided me through finding, feedback and iteration
process.

Empathise Define Ideate Prototype Test Iterate

Empathise
01
Problem Statement
I started the Olive project from defining the problem I want to solve. Double Diamond Strategy was a helping tool to define
possible problems and ways how to tackle them.

First Hypothesis:

Health conscious people with a busy lifestyle need an efficient way to stay on track with their medical records, fitness and
wellbeing goals, because they want to improve their health and decrease their stress level.
We will know this to be true when we see if the users actively are using portals features.

Competitive Analysis
In the next step I identified two potential competitors of my app: Meine TK, 8fit and performed a competitive analysis to
examine what are their key objectives, strategy, market adventage and marketing profile. Afterwards I created a SWOT profile
on my competitors strengths, opportunietes, weaknesses and threats. Furthermore I performed a UX analysis on 8fit, focusing
on usability, layout, navigation structure, compability, differentation and calls to action.

I’ve learned that there is no portal to upload medical records online, like test results etc. and if there is, it has to be available
only by a particular health insurence website, that I couldn’t access.

Business Requirements
By writing a Business Requirements Document I defined my target audience, had a closer look at risks and opportunities,
business objectives, scope, functional requirements of the product, as well as creating delivery schedule.

User Research
To understand users and their needs, goals and motivations, I interviewed four people from the Olive’s target audience. To
prepare for those interviews I’ve defined the research goals and created a script with 17 questions revolving around behaviors
in regards to their healthy lifestyles.
I have gathered a very valuable insights (listed below) that further helped me in developing a design solution for their problem.

Key Insights:

- Lack of one designated place for medical records overwhelmes interviewees

- Participants need a video consultations feature, they believe that not all sitations require a visit by a doctor’s practice
- All participants said that doctors treat only symptoms and don’t see the bigger picture. That the conventional medicine is
limited
- Everyone has a problem with forgeting the mediicine, when and how to take it (losing doctors notes)

Define
02
New Problem Statement
After I evaluated the information gained during the user interviews, through Affinity Mapping, I defined a new problem
statement.

Problem Statement:

“Health concious individuals are aware that conventional medicine isn’t enough. They are looking for new ways to improve
their health but are missing an app with a more holistic approach. We believe that by providing users with a portal that
combines conventional and alternative medicne, offers video consultations with experts from aound the world and by lets
them manage their health related data in one place, we will support them with tools to gain more control over their own
health.”

User Personas
User personas were created to ensure the user needs, motivations and frustrations were kept at the forefront throughout the
design process.

User Journeys
Creating user journeys helped to emphatise and understand the thought and emotions potential users when interacting with the
main features of the app.

Ideate
03
User Flows
I created the user flows to understand the steps my users would take to complete a particular task. I started from defining the
objective, and afterwards I decided on task analysis which let me map out the user flow for each persona.

Card Sorting
After structuring the first sitemap for Olive I then assesed the hierarchy of information within the app, with an online closed card
sort comprised of 18 cards and 5 participants was conducted.

Revised Sitemap
The findings were then analysed to determine the optimum layout of Olive’s sitemap.

Prototype
04
Low-Fidelity Wireframes
I quickly sketched low-fidelity a series of screen for Mobile and Desktop, that to map out the three key features without getting
caught up in unecessary visual details.

High-Fidelity Wireframes
Afterwards I started to build upon those screens and features and add more details in Adobe XD, to create a clickable prototype
for the Usability Testing.

Uploading medical records flow

Scheduling a video consultation

Click heretotoo
Click here seesee
thethe mobile
mobile prototype
prototype

And heretotoview
And here viewthe
the desktop
desktop versions
version

Test
05
Usability Testing
After preparing the Usability Test Plan and Usability Test Script, I conducted remoted and in-person Usability Tests with 6
participants. They were asked to perform 3 scenario tasks relating to the main features of the Olive app, like booking a video
consultation, uploading medical results and setting a reminder for medication. The goal was to observe whether participants
understand the app, its funcionality, see how they navigate through the app and uncover any points of friction.

Usability tests provided a great insight and revealed some important errors that required fixing along with valuable observations
from participants.

Analysis and Reporting

I analysed the the Usability Testing results by interpretating the information with an Affinity Map. Afterwards I organised the data
by creating a Rainbow Spreadsheet. I categorized errors according to Jakob Nielsen’s severity rating scale and added
observations and quotes. The Usability Test Report prioritised the issues to be addressed in the next iteration of the prototype.

Key Findings:

- Participants need the direct access to main features from the dashboard, not from the hamburger menu
- Medications need a separate page
- Scheduling appointments flow needs to be shorter
- Search for a new appointment feature needs to be more highlighted
- Change some buttons like „Add new file“ to „Add new folder“

Iterate
06
Design Iterations
With errors highlighted and prioritised, adjustment were then made to the prototype, delivering an imoproved user experience.

Preference Test
I run a Preference Test, by using Usability Hub website, to see which version of the introduction and dashboard page, 10 of the
participants do prefer. Since there were so usability issues with my dashboard, it was particulary important to me that it is well
designed and causes no confusions.

Design System
I created a style guide as well as pattern and component library to document the visual design of the app and keep a consistent
design language. This step included building components, variants, choosing colors, typography and other user interface
elements. This way I developed a comprehensive design system, a consistent, visually appealing and accessible user interface.

Click heretotoview
Click here viewthe
the Design
Design System
System

Final Design
After much testing, iterating and polishing, Olive final design is complete and it’s clickable prototype ready to use.

Link to Prototype
Prototype

Credits
Big thank you to everyone who guided and supported me during this course: My tutor Elvira Hellenpárt and mentor Vale Querini
and Vlad Danciu, as well as everyone participating in my research and testing phase.