Olive - Health & Wellbeing App
Olive is an app to help busy, health-conscience individuals better keep track of their health providers and medications and to stay on top of their health and wellbeing needs. This is a case study on my UX design process I used to help users to reach this goal through the design of a responsive web app.
Role: End-to-End UX/UI Design (sole designer)
Client: CareerFoundry
Timeline: January - May 2021 (5 months)
Project Type: Concept
Tools: Adobe XD, Optimal Sort, Marvel, Usability Hub, Adobe Illustrator, Google Forms
My initial goals were to figure out an objective, possible problems users are having, come up with a Problem Statement and an initial Hypotheses and possible solutions for the users. You can see my finding below.
My next steps were to get a better handle on my problem space by analyzing the competition and developing User Stories so I could better understand what features user might want in the app. After conducting S.W.O.T. profiles on two other apps in the field, Healow and MyChart, I came up with the following User Stories:
To gain a better understanding of the people who could be actually using the app and the problems they are facing, I conducted three user interviews with members of my target audience. By breaking down all the information I received in the interviews with an Affinity Map, I was able to better organize the data and see similarities.
Taking everything I had learned, I developed two sets of Users Personas to give live to potential users of the app and to ensure their needs, motivations and frustrations were kept top-of-mind throughout the design.
To better understand how both Chole and Lance would feel as they used different features of the app, I created two sets of Journey Maps to better see where I could create positive experiences as they related to the user’s goals and expectations.
In order to see specific actions each of the personas could take when completing a featured task within the app, I developed User Flows. This step was also helpful seeing what screens would be needed in creation of the app’s Information Architecture.
After creating an initial Site Map, I had six people participate in a card sort to help see if I was heading in the right direction. After evaluating what I had learned, I ended up making several changes that altered the direction of my overall design. Once the updates based on feedback from actual users was in place, I was ready to move into sketching and wireframing the app design.
This is the stage where I now begin to bring the design to life. Below are Low-Fidelity Wireframes where I worked on my ideas and designs sketched out on paper.
I then translated and continued to refine the design of the app by creating Mid-Fidelity Wireframes using Adobe XD. With this I was able to create a working prototype that I could now have outside humans try out and give me feedback on what an actually future user might think of the app.
I conducted in-person Usability Test with five participants where I was able to observe the testers interacting with the prototype I created in Adobe XD. This ended up being extremely helpful as I found six issues to help improve the overall design of the app. You can see the results in the Usability Test Reports below.
Though-out the design process, refinement and constant improvement are being made to make sure future users will get the best possible experience. You can see the progress made on three of the screens, starting at the initial sketch phase to the current high-fidelity prototype for the Sign Up, Home and My Health Team screens.
Below is the Design System that was created to ensure a visual consistency and cohesion of elements in the overall app design.
Final Designs
After testing and iterations, the final design adjustments were made and all design components set for developer hand-off.
Thank you! Click here to view the prototype