Overview
This case study, was done over 4 months. It is a very extensive and exhaustive case study.
The Problem
What is wrong with the Healthcare system?
The Healthcare system currently is not transparent with their pricing. A new law just passed that says hospitals and doctors offices have to disclose their prices. Trying to find these prices and compare them with each other is close to impossible. You also have the issue of trying to compare the quality, and care of each doctor.
The Solution
How to fix it?
This gives us the opportunity to create a product to help people find and compare doctors, and their prices. Giving the people the ability to compare pricing, quality, location, and services will help people get the best care they can get.
My Role
End to End Role
UX Researcher + UX Designer + UI Designer + Usability Tester
Screener Survey
How to find target users?
• Surveyed 20 People I used a basic google survey tool to survey 20 different people over 1 week period. I found these participants through social media and word of mouth.
• found 5 users who go to the doctor often The survey questions were made to find people who go to the doctor often, who are paying the insurance and healthcare bills, and who are interested in finding better healthcare.
• Followed up for interview After the survey was completed I found 5-6 potential users who fit my criteria. I contacted these users for a followup interview. They thankfully agreed.
Interview
Talking to the users!
• Interviewed 5 people in person and remote
• 10 questions, 15-30min
• Cared most about: Location, Quality, Cost
• Doctor background information would be helpful
• Cost comparison would be helpful to uninsured users
• Doctor language and gender is important to know
Affinity Map
Insights
• 3 most important traits are: Location, Rating, Insurance (In Network or not).
• Most users spoke about wanting to know the Background, Education, Gender, and First Language of Doctor.
• Users found doctors in many different ways, and there is not one popular source they all use.
Personas
Karen:
• Uninsured
• Medium-Low tech skills
• Reg. doctor visits for family
Bob Vance:
• Insured
• High tech skills
• Reg. doctor visits
Empathy Map
Synthesizing all the info
• It was interesting to see what the user would say they would do versus what they actually did.
• This helped me to really get inside the head of the user and know every aspect of how they are feeling, thinking, saying, and doing.
Site Map
Information Architecture
Creating this site map helped me understand the skeleton and organization of how the platform would be structured.
User Stories
What do the users want to do?
• These are all of the use cases that users would go through.
• This helped me understand how the app would be used and what I would need to incorporate into my designs.
User Flows
Converting user stories to user flows
User Story: Find a doctor near me and Book appointment As an insured user, I want to find a doctor near me, so I can book them for a service.
User Story: Find a doctor in my network and book appointment As an insured user, I want to find a doctor in my network, so I can book them for a specific service.
User Flow to Sketches
Converting User Flows to Sketches
User Story: Find a doctor near me and Book appointment As an insured user, I want to find a doctor near me, so I can book them for a service.
Sketches
Creating the layout
I went through many, many sketch ideas. These are some of the few I chose for the final design.
Guerilla Usability Test
Testing the sketches
• Users didn’t use the locate me button
• Try grouping the button with the zip code field
• Everything else seemed to work fine for users
• Users didn’t use the filter or sort options
• Make the sort area more clear
• Move back button to top bar
• Show filter results
• Maybe make the filter button bigger?
• Users want a way to save, and share
• Add a save button
• Add a share button
• Move back button to top bar
• Add open to maps button
Sketches to Wireframe
I made the following improvements when making wireframes
• Splash screen Added to allow on-boarding of doctors. This feature was needed in order to make the app more enticing for doctors.
• Move Back arrow to top bar for clearer more simple navigation.
• Added Book, Save, Share Buttons on Details screen to make the app more useful for users.
Interaction Design
Connecting the flows
This shows the progression I made from the user flow to the wireflow and what changed.
Design System
How should it look?
• This design system helped me create a look that would be attractive to my target demographic.
• I chose shades of blue because that is most associated with clean, sanitary, healthy aesthetic that is used in the Health industry.
• I chose rounded buttons vs square buttons to give a more friendly soft look rather than a sharp harsh look.
High Fidelity Mockup
Converting wireframe to high fidelity
• Creating these high fidelity mockups allowed me to get a better more realistic product to test with users.
• These also helped me get closer to the final product.
User Testing Round 1
Findings
• The Splash page confused people. Round 1 of testing showed me that a lot of people would see the “Doctor” button and click it thinking it would take them to find a doctor.
• Book button was not clear and obvious enough In user testing people hesitated on the details page to find the book button. Solution was to move save button somewhere else and make share button just an Icon, and make Book button larger.
• Confusing links Some headings were blue and buttons were also blue. This could confuse the user as to the meaning of a blue object.
User Testing Round 1
Findings
• The Splash page much more clear. Round 2 of testing showed that everyone understood the splash page better, and didn’t accidentally click on the wrong choice.
• Book button area fixed. With the book button larger everyone understood the next step better. The save button was moved up and was easily readable.
• Color system and other small changes. The button and clickable items were now the same color and everything else was a different color to help keep things consistent. Header bar/top bar was changed to help it stand out. Buttons were rounded to help give a more friendly vibe.
Edge Cases
What if...
It was important to think about the edge cases like what happens when Location Services is not enabled, or Airplane Mode is enabled.
Conclusion
Summary
• Understanding the problem As I went through the design process I learned a lot about the users, and the problem. Understanding the problem really helped me create a product that the users could use.
• Making a solution that works As I did the research, talking and interviewing people It was very interesting to learn how different people have different needs and different situations, but they all need good health care. Creating Personas, Empathy maps, user stories, and user flows really helps to organize that data and help define the problem.
• Testing and making corrections Testing the platform showed me things that I didn't realize were wrong. After making changes and testing again, I was able to find the right solutions for these issues.
• Next Steps This project can still be improved and one of those ways is to allow for doctor support. I started to create a Doctor user flow that would allow doctors to create an account, and post their practice onto the app to allow them to find more patients, and manage appointments. This is still in the works and hasn’t been tested yet. This would be a good next step to take.
Try out the Sketch Prototype here: