Meet Olive
Olive is a pseudo-app centered around providing users with an easy-to-use patient healthcare portal.
Olive focuses on the user's needs to refill prescriptions, schedule lab appointments, and message their provider directly.
%20(Mockuuups%20Studio).png)
%20(Mockuuups%20Studio)%20(9).png)
%20(Mockuuups%20Studio)%20(1).png)
%20(Mockuuups%20Studio)%20(8).png)
%20(Mockuuups%20Studio)%20(4).png)
%20(Mockuuups%20Studio)%20(7).png)
The Process
1) Research
Creating Olive began with generative research, which included a competitive analysis, understanding business requirements, and gaining insights into the problems Olive aimed to solve.
Problem Statement:
Managing healthcare needs can be overwhelming. Olive needs to find a way to simplify prescription refills, lab scheduling and provider messaging in one seamless app.
2) Understanding the User
To better understand potential users, I conducted user research that included interviews, mental models, user flows, and the creation of user personas. Developing a user persona was crucial, it allowed me to design with user needs, behaviors, and pain points in mind. This approach not only fostered empathy for the users, but also provided a clear guidance for my design work.
Let me introduce you to Sophie, who represents Olvie's primary user group. Sophie is elderly, not tech-savvy, and frequently uses her healthcare app.
Image: Proto Persona Sophie
3) Wireframes & Low Fidelity to High Fidelity Prototypes with Figma
With the user in mind, I started designing wireframes. This process started with quick iterations on pen and paper, which allowed me to explore and test different navigation flows and organizational structures. After, I transitioned to a digital format using Figma to refine my ideas further.
Image: Paper wireframe for mobile and desktop
To evaluate which organizational structure was most effective, I created a sitemap. The data for the sitemap was gathered from user interviews, user flows, and competitive analysis. I then conducted a card sorting activity, where users helped identify where they would expect to find specific features and categories.
.png)
Image: User Flow for Sophie
.png)
Image: Sitemap for Olive
This data collected from the user flows and sitemaps allowed me to make key decisions on what to include and the flow of the low and mid-fidelity wireframes.
After developing the sitemap, I created digital low and mid-fidelity wireframes using Figma. Additionally, I built a mid-fidelity prototype to test whether the user flows were properly arranged.
Image: Mid Fidelity Wireframes in Figma
Once the mid-fidelity wireframes were finalized, I proceeded to create high-fidelity mockups and prototypes for user testing.
Image: High Fidelity mockup in Figma
4) User Testing
With the high-fidelity prototype ready to go, it was time for user testing. The initial round of user testing consisted of creating a test objective, plan, script, and of course, the testing itself.
Test Goals:
The primary goal of this usability test is to assess how effectively the user interacts with Olive to help determine the app's usability. Areas of focus include, identifying usability issues, measuring task completion success rate and evaluating overall user satisfaction with Olive.
Methodology:
The usability test will follow a moderated and remote moderated usability testing method. Participants will be asked to complete predefined tasks with thinking aloud and verbalizing their actions.
Participants:
The number of participants will be 5-6. The participant profile will consist of healthcare workers and those who have frequent healthcare needs.
Tasks:
-
Log in and follow the onboarding flow.
-
Message a provider.
-
Schedule a lab appointment.
-
Schedule a prescription refill.
Metrics:
Metrics used to understand the outcome of the usability test will consist of Jakob Nielsen's components of usability, the SFP formula for learnability and the error rating scale.
Results
Image: Rainbow Spreadsheet of User Testing Data
Summary:
Six usability tests were conducted to assess the user experience of the Olive. The main goal of these tests was to observe how users interact with the app and identify any usability issues. This section provides a brief overview of my findings and the errors that I address.
-
Issue 1: Selecting previous in the previous labs screen takes the user to the homepage instead of the intended page of the lab home.
-
Error Rank: Critical- should be address right away.
-
Suggested Change: Updating the prototype so the selector is attached to the correct screen.
-
Evidence: 100% of participants expressed their frustrations at the back button returning all the way to the home screen. Both participants 1 and 3 expressed that this error would cause them to close the app or be too frustrated to continue.
-
Issue 2: When selecting labs the click box is located on the word and not the icon. Creating confusion as to where to click.
-
Error Rank: Moderate - should be address soon.
-
Suggested Change: Update the prototype so the selector is attached to both the icon and the word.
-
Evidence: 100% of the participants failed to click on labs on the first attempt. Only two participants pointed out the error or expressed a moment of confusion, but all participants did take two or more clicks to get to labs.
-
Issue 3: Having more of an easier way to go back rather than selecting the home screen.
-
Error Rank: Moderate - should be addressed soon.
-
Suggested Change: Updating some of the gestures to allow for a swipe to go back.
-
Evidence: 83% of the participants noted that having an easier time going back in the process would be appreciated. They also expressed that they sometimes just want to double check that the information they selected previously was correct.
5) Design Collaboration & Refinement
After completing user testing, I also gathered feedback from fellow designers. My design was sent to three other designers, and based on their feedback, my iterations are as follows:
Feedback:
-
"Brown is not enough color contrast with the background."
-
"Hamburger menu is mostly on Android. Also is there a way to make the buttons more modern?"
-
"Is there any way to swap out the icons for something else? The icons lack life."
-
"Is the tab navigation necessary on the prescription steps?"
-
"The green confirmation box is too harsh."
Previous
.png)
Updated
Previous
Updated
.png)
.png)
.png)
Refinement:
By combining user testing data and feedback from designers, Olive transformed into a more user-friendly app.
Image: Previous High Fidelity mockup in Figma
Image: Iterated and refined High Fidelity mockup in Figma
6) Design Deliverables
Packing up Olive for delivery to engineers involved creating a style guide and a comprehensive folder containing all of Olive's assets.
Image: Olive's Style Guide
Next Steps for Olive:
-
Continue to developed the remaining features for Olive. - Billing, Medical Records and Appointment overviews.
-
An additional round of user testing and designer feedback.
-
An additional round of refinement and iteration based off the data from the user testing.
-
Update the style guide and Olive's design deliverables.
Summary Of Creating Olive &
My Learning Journey.
Creating Olive was an educational experience that contributed significantly to my growth as a designer and problem solver. I discovered that successful design requires a combination of technical skills and creativity.
Key Takeaways:
-
Real-World Testing: The data and feedback I gained from engaging real users was invaluable. Their feedback helped shape the direction of the project and provided me with a better understanding of what users truly wanted.
-
Empathy in Design: Recognizing users' pain points reinforced the importance of creating solutions that simplify tasks and eliminate unnecessary steps. By maintaining empathy for the user, I was able to create designs that are efficient and effectively address their essential needs.
-
Designing for Accessibility: Every user is unique, and I wanted to ensure that Olive is designed for individuals with diverse abilities. Whether users have visual, auditory, cognitive, or motor impairments, everyone should be able to enjoy and benefit from Olive.
Key Learnings About Myself:
-
Refining Process: Usability testing and designer feedback taught me the value of adaptability. By continually refining Olive, I learned how to embrace critique and how to make designs that truly benefit the user over my personal preference.
-
Functionality through Simplicity : I learned how to streamline and make my designs more simple and effective through the user mental models and site maps. Not overwhelming the user with options or features helped keep the app easy to navigate.
-
Community: Receiving feedback from others designers and UX experts helped tackle design problems that were not so straight forward to solve. By being involved in my community it helped me stay current on trends, design solutions and provided a place to gain new ideas through diverse perspectives.