Work > OptimusHealth Responsive website
Optimus Health:
Simplifying Your Path to Find Doctors
Product
Responsive web Design
Concept project
Role
Product Designer
Responsibilities
UX Research
UX/UI Design
Branding
Tools
Figma
Miro
Mural
PROJECT OVERVIEW
OptimusHealth is a health insurance company that allows American HMO health consumers to confidently search, learn, and pick their in-network doctors all within one platform.
For American health consumers, making decisions between healthcare providers or specialists for their health concerns is often confusing and overwhelming.
Health consumers pour hours and hours into researching the right doctor just to inform themselves if the doctor can diagnose their health problems. At the same time, they have to understand the heavy medical jargon to make the right decision.
So what if they can search, learn, and pick their doctor all within one platform?
CHALLENGE
Assisting American healthcare consumers through the process of finding a doctor
SOLUTION PREVIEW
Guided Experience & No More Medical Jargon
Adding Multiple Symptoms
System Status Feedback
SEEKING TO UNDERSTAND
A secondary research and user interview with American doctor-seekers were conducted to understand the doctor finding process and pain points
I spoke with 6 adults who have searched for a doctor online in the past 6 months
““I saw the title internal medicine doctor so I had to google it because there wasn’t a definition for it to see if it’s what I am looking for””
Using affinity mapping to organize all my notes, I synthesized these 2 key insights that would ultimately guide my designs:
1.
An easy & simple process to find a compatible doctor
Novice health consumers are confused about which doctor to see at the start of their search process
2.
Understanding information in plain English instead of heavy medical jargon
Novice health consumers are confused about which doctor to see at the start of their search process
DEFINING THE USERS
Meet Lily, an HMO novice at Optimus Health who’s unsure how to begin her search for a doctor
Using every detail I found in my user interviews, I created a persona to humanize and define the users that I will be designing this product for.
Visualizing the user’s emotional journey of finding a doctor.
I used a storyboard to visualize what Lily would go through when she needed to find a doctor.
She recently hurt her back and wants to find a doctor from her insurance company.
At the end of the process, she received a list of doctors and was overwhelmed by it.
She was confused about which doctor to see based on her symptoms and then gave up on the search process.
DEFINING THE MVP
No one uses the insurance’s doctor finder for the same reason. Building without defining a minimum viable product (MVP) first is no joke.
From my user stories and competitor analysis, people choose a new doctor for various reasons. However, someone like my persona, Lily, will need a simplified process to locate and trust their list of doctors. Therefore, when designing my doctor finder feature, it was crucial to ensure that the user flow is straightforward yet instills confidence in the user that the feature is effectively helping in the search for doctors who can help her.
(Due to the time constraints, the non-OptimusHealth insurance user flow would have to come after the MVP.)
(Above) Task flows: Finding a list of specialists as a member of an HMO Novice User
This is one of the task-flows that I designed for.a
EARLY DESIGN
Putting layout and key features on low-fidelity sketches to map out the major user flow screens and finalizing the sketches by turning them into digital low-fidelity wireframes.
I brainstormed my ideas with a couple of sketches for my design. While sketching, I made sure to lay out the critical information and key features.
Low-fidelity sketch wireframes of the profile page, the wizard guide page, symptom selection page, and the list of doctors page
Low-fidelity wireframes of the critical user’s task flow when using the wizard guide to find a doctor and requesting a specific doctor.
Mid-fidelity wireframes of the screens in desktop view
ITERATE & CONTINUE DESIGNING
An updated mid-fidelity wireframe based on another designer’s feedback from low-fidelity wireframes.
New Page VS Modal Window
Before: For every action the user takes, it would bring the user to a new page.
Visual Interaction
Information Hierarchy
Before: Users read the description to match symptoms with body parts.
Before: Users would have to scroll to find sections of the page with a vast amount of information such as reviews.
After: Users can complete their doctor search without navigating to new pages after clicking buttons..
After: Users tap on body parts to locate symptoms without much thought quickly.
After: Information is now organized into tabs for easy access to reviews and other content without the need for scrolling.
Usability Testing
Mid-fidelity prototype reveals Doctor Finder made people feel doubt and uncertainty towards the list of doctors.
Once all the mid-fidelity screens were designed, connecting the screens logically was key to making an actual prototype ready for user testing.
I conducted 5 remote, moderated usability tests through Zoom by using mid-fidelity wireframes for
Function
Ease of use
User’s confidence level with using the doctor finder feature
Key Insights
Users felt doubts about how the Doctor Finder concluded with the list of doctors.
The continue button’s function on Yes/No and single-answer questions was unnecessary
The broad response time frame and the easy-to-click request specialist button left users feeling uncertain.
Doctor’s clinic address and phone numbers are irrelevant information when browsing the list of doctors.
REVISION
User feedback from user testing improved the high-fidelity wireframe design
Added a user feedback screen that answers these 2 questions for the user
How the doctor finder got the following list of doctors
This will demonstrate that the doctor finder understands the user’s health problem
Removal of the continue button on screens with yes/no & single answer questions
Added a specific response time frame and more screens for error prevention.
Providing relevant doctor’s information for users
DEFINING THE BRAND
OptimusHealth brand mission is to empower, compassionate, impact, and simplicity
I created OptimusHealth because English meaning “optimus“ which means best. The world of healthcare is complicated, but the patient’s health comes first. I wanted OptimusHealth to provide health consumers with the best health service that is simple to use while empowering them to make decisions for their health.
Using the psychology of color and accessibility as part of my design, I picked blue because it symbolizes trust and compassion. Since this was a professional healthcare website, I decided on a monochromatic blue color scheme.
As for the typography, I selected Roboto, a sans serif that is easy for the eyes to read on a mobile screen.
A glance at OptimusHealth’s visual style guide
NEXT STEPS
If I had more time…
Conduct User Testing Round 2
Though I made changes based on the insights gained from my 1st round of usability testing. I would like to run a 2nd Usability A/B Test on the symptom search bar to understand if the user would prefer to scroll or type in the search bar to find their symptoms.
Add a Patient Review System
Adding features to the patient review tab because participants in the usability test all mentioned they would read the reviews from others to help finalize their decision.
Add an Appointment Booking Service
I would like to add a new appointment service feature because it was mentioned many times by during initial research, and usability testing.