Project Summary
Telehealth and the usage of related tools has increased signficiantly since 2020. With this rise in tools, users are able to find healthcare providers that fit their needs. Healthcare can be difficult and stressful for patients to navigate. There are various obstacles that patients may have to deal with, but simply finding a healthcare provider shouldn't be one of them.
Problem: Patients find it difficult and time-consuming to discover in-network doctors, get necessary information like services and cost, and schedule an appointment on their own time.
Solution: Doctorly makes it easy for patients to discover healthcare providers, schedule appointments online, and communicate directly with the health office to get the necessary information. Using the appointment cost calculator, users can enter their insurance information to see if a doctor or service is in their price range.
Timeframe:
• Research: 2 weeks
• Define: 1.5 weeks
• Design: 2 weeks
• Prototype & Test: 1 week
Roles:
• UX Researcher
• UX/UI Designer
Tools:
• Figma
• FigJam
• Optimal Workshop
• Maze
Key Solutions
Live chat | Availability calendar | Cost calculator
Looking for an overview of the key solutions and final wireframes? Look no further! Click through to see the wireframes and brief explanation of the solutions.
Wondering how I arrived at these solutions? Continue reading!
Research
Competitor Analysis | User Interviews | User Persona | Storyboard
Competitor Analysis
I started with a competitor analysis to see what our competitors can offer and how we can stand out. Our main competitors include ZocDoc, RateMDs, Healthgrades, and Doctor.com.
All of our competitors have doctor ratings, doctor profiles, and allow users to filter their search results. Only one of our competitors allows users to book their appointment online. None of our competitors offer a way for users to directly communicate with the healthcare facility to quickly get additional information. Another major weakness of our competitors are that the platform doesn't sync with the healthcare provider's schedule, so appointment times may not be accurate.
User Interviews
I conducted 5 user interviews to determine users’ motivations, frustrations, and desires when searching for a new healthcare provider. Interestingly, 80% of users were dissatisfied with their current method of finding a healthcare provider. They shared that their current method of finding a doctor is difficult and time-consuming, and they don't feel like they can easily get all the information they need.
In the interviews, users shared that when they search for a new doctor, they consider the doctor's insurance network, availability, distance from home, and patient reviews. These became the priority items to include on a doctor's profile. Users also said they're frustrated that they generally don't know how expensive a doctor is until they're already at the appointment.
User Persona
Based on the goals and motivations identified in user interviews, I developed a user persona to encapsulate the patterns observed in my research.
Julia’s biggest goals in Doctorly are to find an in-network doctor that's close to home, schedule an appointment, read reviews, and gather all the necessary information without having to call anyone. Her pain points in the process of finding a new doctor are that her insurance website is difficult to use and won't allow her to filter by can’t filter by preferences, she an’t always tell what location a doctor is at and when they’re there, and she doesn't know if a doctor is within budget until the appointment.
Storyboard
Using the user persona, I created a storyboard to determine the key moments of her journey and empathize with her.
Julia starts off her journey looking for a doctor in her new city. She uses her health insurance's website to search for doctors, but doesn't find it to be very user-friendly. She overhears someone talking about Doctorly, a website where users can easily search for healthcare providers. She quickly gets on her iPhone and visits their website, entering her zip code and searching for a GP. She's thrilled to find out she can filter by her needs, and she uses the Live Chat feature to ask a question to a healthcare facility. She schedules an appointment and is happy to see that the appointment cost calculator shows that the doctor's services are within her budget. Julia is shocked at how easy it was to find a new doctor, and decides to find all her new healthcare providers using Doctorly.
Define
Feature Roadmap | Card Sort | Sitemap
Feature Roadmap
I looked at a combination of the competitor analysis and user interviews to determine what features this app will need. The following features are Must-have features for a minimum-viable product:
Account creation/sign in
Map
Availability calendar (to sync with doctor's calendar)
Live chat with healthcare facility
Doctor reviews
Filter for search results
Doctor information on search results page (including rating, name, facility, distance, profile picture, etc.)
I used these features to create my wireframes and conduct usability testing.
Card Sort
I considered the users' needs and features when creating a card sort, which I conducted with 5 participants in an unmoderated format. After further research on design patterns, I determined more effective and simple ways to organize information, which are reflected in the Sitemap. Below are some of the card sort results.
Sitemap
Using the information gathered during the user interviews and card sort, I created a sitemap to determine how the information would be organized. I focused on building out the Dashboard and Profile pages since those would be the main focuses for the MVP and usability testing.
Design
User Flows | Lo & Mid-fi Wireframes | UI Kit | Hi-fi Wireframes
User Flows
I used the users' goals to determine the three tasks I would be testing later and created user flows for them. The flows are:
Schedule an appointment.
Chat with a healthcare facility.
Update insurance information.
Lo & Mid-fi Wireframes
I sketched some lo-fi wireframes for the key screens based on my user flows and user needs. Since this is a responsive website, I created versions for both mobile and desktop. I used the lo-fi wireframes to create digitized mid-fi wireframes, where I created different versions of screens before determining which version to turn into hi-fi wireframes.
UI Kit
The lo and mid-fi wireframes gave the structure of the screens, but before I could get started on the hi-fi screens, I needed to create an UI kit. This included creating a color palette and typography, as well as buttons, forms, and other reusable components. Here is a sample of the UI Kit.
Hi-fi Wireframes
Based off the lo and mid-fi wireframes, I created hi-fi wireframes and brought them to life with UI. One of the most important features for this app is the ability to chat directly with a healthcare facility. Doctors that have that feature as an option have a "Live Chat" badge on their card in the search results.
Here is a sample of the first version of hi-fi wireframes.
Prototype & Test
Usability Test | Priority Revisions | Final Prototype
Usability Test
I conducted unmoderated usability testing with 8 participants. Overall, the product was rated by users as being easy to use, but there were two areas that needed improvements:
Users thought the Live Chat badge was a button and felt confused when clicking on it didn't do anything.
In the doctor's availability calendar, users thought it was confusing that a dot on a calendar day meant the doctor was available, rather than meaning they were booked that day.
Priority Revisions
The biggest issue related to user satisfaction while using Doctorly was the Live Chat badge. While it was used as a badge to represent which doctors have the live chat feature, users were confused that they couldn't click on it. After usability testing, it was clear that the most intuitive action for users was clicking on the badge to start a chat, so I turned that badge into a button.
Next, I made the availability calendar more clear by graying out the unavailable days.
In a follow-up round of usability testing, users were more satisfied with the new versions of these screens.
Final Prototype
I created three prototypes to demonstrate what a user would experience when using Doctorly to chat with a healthcare facility, schedule an appointment, and update their insurance information. Due to time constraints while developing the MVP, I could not create screens for using the cost calculator. Instead, I have screens for updating insurance information in the user dashboard, which is a required step before being able to use the Cost Calculator.
Final Thoughts
Lessons Learned
This project emphasized the importance of working in small sections instead of trying to do a little bit of everything at once. Doctorly has a lot of features and needs to be accessed by both patients and healthcare providers, so there was a lot to think about. Primary and secondary research showed various features that could be included to meet users' needs and stand out from competitors. To successfully create a minimum-viable product, I needed to focus on the most important features and screens, while keeping track of what could be added later.