By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in my marketing efforts. View my Privacy Policy for more information.

Olive

As a part of my Career Foundry UX Design course, I was put in charge of the UX and UI Design for a health and well-being portal.

The challenge was to create a health and well-being portal used to organize medical information and appointments.

The app is designed for everyone who wants to keep medical information in one place and have fast and intuitive access to it.

My role

UX research, design, testing and UI design

Tools used

Pen and Paper, Figma, Miro

Research and analysis

When I first dived into the challenge I was surprised at how fewer portals to manage all that data - especially in the European area - exist. Below are the main conclusions I draw from my research:

Competitor analysis

I created a competitor analysis comparing 2 competitors: Pomeló and gesund.bund.de.

I also created a competitor profile including their marketing and SWOT profile as well as analyzed the Usability, Layout, Navigation Structure, Compatibility, Differentiation, and Calls to Action.

Based on this analysis I defined Olive's main industry and target: Usually, parents manage the doctor's appointments for their children. Children start doing that for themselves once they become young adults. Older people (up to 60 years old) still interact with smartphones.

User interviews

I created a catalog of questions with mainly open questions to collect qualitative data to validate users' needs and the core features of Olive.

Insights:

From these interviews and previous research came Olive's MVP:

User personas

I created 2 user personas of target customers based on real people to illustrate the core target audience, with a focus on the major needs of the most important user groups.

user story

User Journey Maps & User Flows

I created 2 user journey maps for for visualizing the processes a user goes through in order to accomplish a goal. After that I went on to create 2 user flows in order to focus more on the successful flow through the app and to know what kind of screens I need.

user persona
user persona

Information Achitecture

I conducted remote card sorting which helped me generate the information architecture of the app.

Based on the results I created the sitemap:

information architecture

Prototypes and wireframes

I sketched out the first wireframes using pen and paper to organize the main features.

pen and paper wireframes

Wireframes & Usability Tests

Wireframes were created to validate and redefine Olive's core features using the design tool Figma. They were also tested in various usability tests (moderated in-person and remote in-person) with potential users from my target group. After indicating the biggest improvements I iterated the wireframes.

user interview

Below are three examples of the iterations:

image of iterations

I also changed the overall design of the interface. I created the favorite doctors' section right below the dashboard title. The "plus" icon was also exchanged for more direct action.

Visual Design & Style Guide

I created a style guide by defining colors, typography, and styles and applying them to the user interface (UI).

olives style guide

Final UI Design

all UI screens

Interactive Prototype

Feel free to try my interactive prototype with the following use-cases:

Use Case I

Imagine that it's the time of the year again to go to the dentist. Call him to schedule a new appointment.

Use Case II

You just had physiotherapy and had to pay the invoice directly to the therapist. Submit the invoice to your insurance to initiate the refund.

Use Case III

You want to manage the doctors appointments of one of your family members. Create a new profile for them.

Let's exchange some great ideas!

Help me to get to know you

What budget range are you in?

Tell me more about the project

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form. Please check your inputs.