top of page

Olive Health App
Design Process

73161-golden-samsung-mobile-s7-telephone-phone-border.jpeg
Dashboard Final.JPG

What's the Goal?

The Olive Health app was designed to provide users quick access to their Doctors and Documents that they need to get proper healthcare from anywhere through their phone.

​

With this app I am trying to ease the interaction between doctors and patients by allowing them to make appointments anywhere, more specifically calls and receiving of documents on their mobile device.

What did I do?

In my work on the Olive App I performed user research and design for the overall experience of the application through preference testing and usability testing as well as peer reviews. This project was created through an immersive UX Bootcamp with Career Foundry.

User Insight and initial Analysis

The initial stage after having a clear goal for Olive was to delve into seeing how people would respond to the different requirements of Olive and how that made them feel.

​

This led to the first iteration of User Research Analysis. It started with asking the participants various questions in a verbal interview and gauging their responses and writing down what they said and their reactions. This was very informative and helpful.

​

These interviews and answers served as the basis for the User Personas that I created for Olive to help create a User Experience that catered to the designated demographic.

User Research Goals.JPG
User Research Analysis.JPG

User Personas

User Persona Sarah.JPG

From the user insight and initial analysis as well as research gathered during the design initial brainstorming process, I created Sarah and Fred, the two personas that represented the lifestyle and attributes of those that Olive could help to its fullest extent.

​

These two Personas were also used in the user flow process and creating the general layout of the app and its feature set. The Personas helped in figuring out which areas of the app would be redundant and which ones needed to be fleshed out to provide the most enjoyable experience.

​

From these two I created the initial user journeys for Olive that would provide the backbone for the rest of the design process.

User Persona Fred.JPG

User Journey and User Flow

Sarah User Journey.JPG

The User Journeys are precursors to the user flows and I used them to block out areas of resistance and stress that the user might endure. This is the reason for the smiley face measurements. I wanted to keep a visual gauge of my own perspective on how I believed the persona would react to each area and my goal was to create a journey that ended up with a happy face.

​

The list of user thoughts was also in the same vein as it kept track of what obstacles I believed the end-user would encounter in each step of their journey.

Fred User Journey.JPG

These are two of the User Flows that I did for the Olive app. They cover basic areas and may not have many steps but that's the design philosophy that I created for Olive. I wanted the user to be able to reach their goal in as few steps as possible to minimize time spent in the app and maximize the help and utility they were getting from it.

User Flow 3.JPG
User Flow 2.JPG

Wireframes and Inital Mockups

The initial wireframes for Olive consist of a very basic structure but as the design progressed it was very clear that the various iterations and design feedback on these wireframes carried through the final product.

​

I found that over the course of mocking up and iterating upon the app I found the design style and language that took root in the final product.

​

The only page that faced a large change was the dashboard which went through several iterations. The final stage of which is present in the final mockup stage.

​

​

Dashboard Low.JPG
Documents Page Low.JPG
Doctor Profile Low.JPG
Dashboard Final.JPG
Documents Page Final.JPG
Doctors Page Final.JPG
Doctor Profile Final.JPG

Final Mockups

The final mockups of Olive have come a long way from the wireframes they started as. The colors and accessibility touches that came in various iterations have helped with the overall usability of Olive.

​

The lines of buttons on the footer have been thinned out through various iterations because of user feedback and preference testing. A/B Testing helped form the backbone of the app's aesthetic and design language as it neared completion.

​

The doctor page went through a few iterations on its way to its current appearance. Namely the addition of backgrounds and colored circles denoting the availability of certain doctors on a rolling basis.

​

Additions such as callout colors for certain interactions like deleting an item and having buttons that have no background were all preference tested and researched to be best and most efficient, user friendly, and accessible.

​

Here is a link to all the final mockup screens

Adobe XD

Final Prototype

Click on the image to access the full interactive prototype.

73161-golden-samsung-mobile-s7-telephone-phone-border.jpeg
Dashboard Final.JPG

The Road Ahead for Olive

Thank you for taking a look through my process on the Olive App! I am continuing to make edits and iterate on the app over the next few months by running more usability and A/B preference testing. I am also looking into making the app more aesthetically pleasing and delivering on a good standard of visual design.

bottom of page