A mobile-first online booking experience
The challenge
Design a mobile-first responsive website that solves users’ needs when it comes to finding a doctor and creates a positive user experience when booking an appointment.
The result
Feel Well now has a responsive website that is designed mobile-first with a personalized search of doctors and an easy appointment booking.
Client
Feel Well
Background
Feel Well is a developing start-up company that wants to provide clarity and ease between doctors and patients. Their mission is to help people find the right doctor according to what the patients wants. They want a responsive site that doesn’t force users to download and install anything in order to keep it a free platform.
The scope
A responsive web design that is mobile-first
Role
UX Designer (Research, Visual Design, Interaction Design)
Project duration: 80 hours
This is a speculative project I’ve done for UX Academy at DesignLab.
Research
User interviews
Competitive analysis
Define
Persona
Empathy map
Ideate
User flow
Low-fi wireframes
Brand identity
Mid-fi wireframes
Prototype
Usability testing
Affinity map
High-fidelity prototype
UI kit
1. Research
Understand the landscape
To better understand the situation, I began my research around how current booking services in the medical field help their patients find what they need when it comes to booking an appointment.
Research goal
Empathize with the user and get to know their journey from finding doctors to booking their appointments with them.
Understand the main motivations, frustrations and pain points users have when accessing these services
Discover the needs of a booking system
Methodology
Competitive analysis & user interviews
Competitive analysis
Healthcare users today are changing, and their expectations for convenience, affordability and quality are redefining how they engage at each stage of care. Younger generations are not satisfied with traditional means of booking and going to clinics. and people of all generations are more willing to try non-traditional services. Some say they would like to have a primary care physician but have not found one that meets their preferences for affordability and convenience. I turn to online platforms that are currently used and analyzed their sites. My discoveries were:
Primary search bar must be clear and in focus at the home page.
Lists of available information are good to provide for people who don’t know what to find.
Account set up is ideal to keep track of previous visits and quicker booking.
Booking as a guest is a good option.
Filter and sort allows for more personalization.
Clear words to describe what certain functions will do when interacting with it.
Simple flow of booking makes it easier to use the service.
Calendar/time slot availability makes it quicker to check what times you can book.
User interviews
Understanding the users will help empathize with them. I reached out to 3 participants that had booked an doctor’s appointment in the past 7 days and interviewed each one-on-one. This was to collect a deeper knowledge of the user’s key drives, motivations, fears, and preferences. My key findings were:
Users booked an appointment according to the condition, insurance they take, location, date, and time slot that worked for them.
Having an account with details already put in helps fill in the forms when booking an appointment.
Some users liked to filter through doctor after searching.
Distance is important to users when looking to book an appointment over ratings and reviews.
Users will book a doctor’s appointment for themselves when they are getting an annual check-up or feeling sick.
Visibility of the practices and treatments helps users determine what to look for when searching for the right doctor.
Adjusting their appointment is generally quick and easy.
Users found it helpful to see FAQs on the site for questions they may have or not thought of yet.
2. Define
Identify insights and user needs
Utilizing the research findings, I synthesized and illustrated the data into more humanizing terms so I could better empathize with them. Taking this step is crucial to knowing how the product will make a positive impact on them.
Methodology
Persona & empathy map
Persona
I created the primary persona, Katie Caldwell, to better identify with the target user in this case.
Empathy map
Taking the findings from my research, I placed them in sections what the persona thinks, hears, says, and does. This was used to gain insights and identify user needs.
3. Ideate
Forming the product
Building the bridge between users and doctors with a fresh new look to the brand.
Methodology
User flow, lo-fi wireframes, brand identity, mid-fi wireframes
User flow
I created a user flow to show how a user would interact with the website with the task to find a doctor and book an appointment.
Wireframes
Using the user flow, I sketched out the low-fidelity wireframes of the mobile-first website. I kept in mind that only the most useful information was seen by the user before anything else.
Brand identity
To reflect Feel Well’s voice and personality, I designed a new, refreshed look to their brand.
Mid-fidelity wireframes
Taking my low-fidelity wireframes, I built out the mid-fidelity wireframes in Sketch and applied the brand’s identity. I placed the wireframes into the Marvel app to quickly test the structure and layout among potential users and iterate if needed.
3. Prototype
Putting the product to the test
User testing will tell me how usable and valuable the product is to the end user. Gaining inputs and insights about how real users would actually use the product will help improve to address their pain points.
Methodology
Usability testing, affinity map, high-fidelity prototype, UI kit
Usability testing
The usability test was conducted with 3 participants to go on the mid-fidelity prototype and book an appointment for an annual physical. Participants were observed to see how they interact with the website, and to identify potential pain points. The summary of my findings were:
All participants had completed the task with some minor errors. Hitting the hotspots were too small for them and they used the finder to find what was usable.
Some participants had mentioned they like to search before looking at graphics. They usually don’t know the name of the specialty so they look up the condition on Google first.
Some expressed that they just wanted to fill out one part of the form on the homepage and filter the results later.
Looking at reviews and ratings made them more likely to book with the doctor.
Directions from their starting point to the doctor’s office wasn’t important, as they felt they can look it up later.
The site was clean and simple, but would like to see more colors on the site to help differentiate the sections.
Affinity map
I gathered all my findings from the usability testing into an affinity map. This allowed me to find patterns and pain points which lead to several insights and design recommendations.
High-fidelity prototype
Taking the insights I found from the affinity map, I iterated on the mid-fi wireframes and turned them into high-fidelity wireframes.
UI kit
Based on Feel Well’s branding voice and the user testing findings, the UI kit was designed as a guideline for maintaining the visual elements used on the site.
Reflection
Creating a mobile-first website was a challenge that I didn't foresee it being. A mobile screen could only hold so much detail that the design would strategically need to show what the user needs. I initially focused on the essential content needed based on my research, but with usability testing has taught me that users don't always know what they want and want to be able to see what they need with minimal effort.
Next steps
It’s important to iterate to improve task flows, so I’ll be taking my high-fidelity prototype into testing again to gather feedback and improve the product further. With each iteration and testing, I’ll be learning new insights, challenges, confirm assumptions, and validate my research.
