Take Control of Your Health Your Way
Olive
Overview
Purpose
Olive is a medical and health tracking app that allows individuals to input and store their medical and health information for their records. This app is needed to assist users in tracking their important medical and health information by allowing them to organize their records in an easy and personalized way according to each user’s preferences.
Objective
Allow health-conscious individuals to input and store their medical and health information to organize and compile based on the user’s preferences and convenient access to those records when needed.
My Role in This Project
UX & UI Designer
Duration
4 months; November 5, 2021 – March 25, 2022
Tools
Pen & Paper
Adobe XD
Sketch
InVision
Whimsical
Optimal Workshop
What is the problem?
Problem Statement
Users need a way to record their health and medical information in a secure portal because, in their busy lives, they need to stay up to date on their health status without compromising their privacy.
Hypothesis
We will know this to be true when users consistently use Olive to document their appointments, medications, diagnoses, injuries, treatments, and vaccinations instead of competing apps.
User Research
Interview Questions
How often do you see a medical provider? (occasionally, annually, etc.)
What health and/or medical information do you think is important to keep track of?
Do you use any health or medical tracking apps now? Or did you use any in the past? If so, which apps do you, or did you, use?
Did any of those apps have a feature to input specific health or medical information? (such as medical conditions, vital signs, medications, etc.)
If so, did you use that feature often?
About how often do you think you would have new medical information to keep track of? (i.e. new vitals, labs, symptoms, etc.)
Takeaways
I was able to gain a lot of useful insight into what users would like to see in a health and medical tracking app. It was a little challenging getting the participants to open up about how they generally manage their medical and health information, but I noticed when the questions were worded to ask for their opinion, it seemed to allow the participants to feel more comfortable answering those types of questions. There was some concern for the security of storing their sensitive medical information on the app. I also learned that many younger users may not use the app consistently because they may not see a provider as often as someone who is older. The target audience for consistent users may be from earlier generations and more thought will have to be put into ease and simplicity.
Proto-persona & User Stories
Log in/ Sign up Flow, with 2-Factor Authentication
As a user concerned with app security, I want to know my information is safe so that I feel comfortable recording my personal health and medical information.
Job Story: When I log in, I want it to be a quick and easy process for me and still be secure, so I can easily gain access to my information recorded on the app without having to risk the security of my personal information.
Customized Dashboard that Comprises Any Logged Information by the User
As a person who wants to keep their medical information organized, I want to be able to customize my dashboard, so that I can find the information I am looking for easily.
Job Story: When I go to a doctor’s appointment, I want to be able to see all my organized medical information, so I can have it handy when my provider asks for specific information.
Low-Fidelity Wireframes
Screen #1: Dashboard - I liked the idea of doing a dashboard rather than a home screen because I want the user to be able to customize what information they will see on their dashboard since it should be used to assist the user in quickly finding and inputting their information.
Screen #2: Calendar (Reminders) - The purpose of this screen is to keep track of appointments and medication times. I wanted to make a screen that had a calendar and list view of the appointments and medications because users may prefer a more visual representation or a straightforward text-heavy representation.
Screen #3: My Info - My idea was to make a quick list of categories the user could choose from to input and view their information. That way the user can find the information they are looking for quickly and easily with little to no frustrations. This feature is supposed to replace paper records a user may receive after an appointment with a provider, if the user would prefer to make the records digital.
Mid-Fidelity Wireframes
Screen #1: Dashboard - I found that using icons may help the user connect what category their information is being organized under. There was a problem with finding universal icons that most users would recognize to mean what I intended them to mean. To solve this problem, I made labels for each card that the icon was listed under to hopefully indicate what they represent.
Screen #2: Calendar (Reminders) - By choosing to organize the appointments and reminders by a different styled card than the dashboard cards. I had an issue with the consistency and visual appeal of the two different styles of cards, so in the final designs, I decided to make these cards identical to the cards on the dashboard.
Screen #3: My Info - The category buttons needed to be large enough to contain each category’s text and to be viewed by a user that is visually impaired.
Preference Testing
Preference tests were done on 4 screens: 1 introduction and 3 onboarding. The test was open for 48 hours and received 10 participants per test.
Takeaways
Test #2 was the only test with significant results. Most participants preferred the real-life backgrounds; however, some participants still chose the illustrated background because the real-life images did not necessarily relate to the health and medical subject of the app. Based on the information I received from the preference tests, I will move forward with the real-life image backgrounds. I will also be editing these screens and replacing some of the backgrounds with more relevant real-life images and ensuring the text is readable.
Resulting Screens
Ultimately, the design was changed drastically due to the information received from the preference tests. The feedback showed that many users chose design A over design B because it was more appealing, not because it met the goals of the app.
Peer Feedback
“The settings symbol is too high, with your mockup screen it cuts out”
“Not fully sure, what the meaning of this icon is - maybe a descriptive text could help me figure it out” [edit view icon]
“On the dashboard, you have icons next to Calcium and MRI but then in the other sections it looks like there is something missing in that spot, just seems a little inconsistent. And just an idea: Maybe at first you could only see the titles of the sections kind of an overview and only when you click on one it would show the information that is now visible for everything? And when it's closed there could still be a notification sign on it if there is anything new or important.”
“It's not completely clear what this icon represents--a caption underneath might be helpful.”[edit view icon]
“Adding icons here might make the spacing feel consistent with the "Latest Results" section.”[empty space on the latest results card next to text]
Considerations & Changes
I do agree with the settings symbol being too high on the screen and will move it down another 16px.
The Edit View icon is not common, so I will add text to let the user know what the function of this icon will be.
I do agree the cards look like they have something missing in the empty space next to the text and there is a lack of consistency; however, I will not change the latest results card to open and close because “important information” could mean something different from one person to the next. Making customization options too advanced may discourage our target demographic from using the app, as intended.
The change I will make is to add the icons to the dark teal cards and make the headers on the white cards just text.
High-Fidelity Wireframes
Screen #1: Dashboard - I chose to organize each category into cards to give Olive a clean look without making the UI too plain. I also decided to label the icons on the navigation bar because multiple users had trouble identifying what all the icons represented.
Screen #2: Reminders - A plain calendar with simple editing tools, as well as the same style of cards for the listed reminders, seemed to be the best fit for the target audience for Olive. Since this is a medical care tracking app, our target audience is geared more toward the aging population that is more apt to have multiple medical problems.
Screen #3: View Info - I made a decent amount of space between larger-sized buttons for each category to give the user plenty of space to select the category they want. The large buttons are to accommodate users who are visually impaired or people that just like big buttons!
Challenges & Future Improvements
I did come across a few challenges when designing Olive. One of which was determining which features would allow Olive to be a health and medical storing app without becoming a fitness app that many users are used to. I was able to overcome this challenge by gathering feedback from users and ultimately designing a dashboard screen that shows the user’s selected medical information.
Future Improvements will include:
More extensive screens for each category in the ”view info” and ”add info” features.
Combining the ”view info” and “add info” features into one on the navigation bar will be considered to create more simplicity in the navigation bar.
The edit view screen will become more customizable for advanced users who would like to view their dashboard information differently.
An option for dictation may be added to the ”add” and “edit” fields to allow users to easily and quickly fill in their medical information with less typing.
Olive has reached its final stage; however, there will be constant considerations for improvements to the app.