A mobile-first online booking experience tailored for convenience and ease of use
The challenge
Develop a mobile-first, responsive website that helps users find a doctor and enhances the appointment booking experience.
The result
Feel Well now features a mobile-first responsive website with personalized doctor searches and easy appointment booking.
Client
Feel Well
Background
Feel Well is a developing start-up company focused on improving communication between doctors and patients. Their mission is to help individuals find the right doctor based on their specific needs. They aim to create a responsive website that requires no downloads or installations, ensuring it remains free.
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 researching how current medical booking services assist patients in scheduling appointments.
Research goal
Understand the user's journey as they search for doctors and book their appointments.
Empathize with their experiences, including their motivations, frustrations, and pain points when accessing these services.
Identify the needs of a booking system to improve the overall process.
Methodology
Competitive analysis & user interviews
Competitive analysis
Today's healthcare users are evolving, and their expectations for convenience, affordability, and quality are reshaping their engagement at every stage of care. Younger generations are dissatisfied with traditional methods of booking appointments and visiting clinics. Additionally, people of all ages are increasingly open to exploring non-traditional services. Some individuals want a primary care physician but struggle to find one who aligns with their preferences for affordability and convenience. To better understand this trend, I reviewed various online healthcare platforms and analyzed their websites. My findings were:
The primary search bar must be clear and in focus on the home page.
Lists of available information are useful for people who don’t know what to look for.
Account setup is ideal for tracking previous visits and for quicker booking.
Booking as a guest is a good option.
Filtering and sorting enable greater personalization.
Clear words to describe what certain functions will do when interacting with it.
A simple booking flow makes it easier to use the service.
Calendar/time slot availability makes it quicker to check what times you can book.
User interviews
Gaining an understanding of the users will help us empathize with them. I reached out to three participants who had booked a doctor’s appointment in the past seven days and conducted one-on-one interviews with each. This approach allowed me to gather deeper insights into their key motivations, drives, fears, and preferences. Here are my key findings:
Users booked an appointment based on their condition, insurance, location, date, and the 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 doctors after searching.
Distance is more important to users when booking an appointment than 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 have thought of yet.
2. Define
Identify insights and user needs
Using the research findings, I synthesized and presented the data in more relatable terms to foster empathy. This step is essential for understanding how the product will positively impact users.
Methodology
Persona & empathy map
Persona
I created the primary persona, Katie Caldwell, to better identify with the target user.
Empathy map
Based on my research findings, I organized them into sections representing what the persona thinks, hears, says, and does. This approach helped 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 developed a user flow illustrating how a user interacts with the website to find a doctor and schedule an appointment.
Wireframes
I created low-fidelity wireframes for the mobile-first website, focusing on presenting the most essential information to the user first.
Brand identity
To reflect Feel Well’s voice and personality, I designed a new, refreshed look to their brand.
Mid-fidelity wireframes
Using my low-fidelity wireframes, I created mid-fidelity wireframes in Sketch and incorporated the brand’s identity. I then placed the wireframes into a prototyping app to quickly test the structure and layout with potential users and iterate as needed.
3. Prototype
Putting the product to the test
User testing will reveal how usable and valuable the product is for the end user. Gaining input and insights into how real users use the product will help improve it by addressing their pain points.
Methodology
Usability testing, affinity map, high-fidelity prototype, UI kit
Usability testing
The usability test was conducted with three participants who navigated the mid-fidelity prototype to book an appointment for an annual physical. During the session, participants were observed to understand how they interacted with the website and to identify any potential pain points. Below is a summary of my findings:
All participants completed the task, although some made minor errors. The hotspots were too small for them, so they used the finder to locate usable options.
Several participants mentioned that they preferred to search for information before looking at graphics. Often, they didn’t know the name of the specialty, so they would first look up the condition on Google.
Some expressed a desire to fill out only one section of the form on the homepage and filter the results later.
Additionally, they noted that reading reviews and ratings made them more likely to book a doctor's appointment.
Participants felt that directions from their starting point to the doctor’s office were unnecessary, since they could look them up later.
While the website was clean and simple, they suggested incorporating more colors to help differentiate between sections.
Affinity map
I compiled all my findings from the usability testing into an affinity map. This helped me identify patterns and pain points, leading 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
According to Feel Well’s branding voice and user testing results, the UI kit was created to serve as a guideline for maintaining the visual elements used on the site.
Reflection
Creating a mobile-first website turned out to be more challenging than I anticipated. A mobile screen can only display a limited amount of detail, which means the design must strategically highlight what users need. I initially concentrated on the essential content based on my research. However, usability testing revealed that users often don't know what they want and prefer to access what they need with minimal effort.
Next steps
It's important to refine task flows through iteration, so I will take my high-fidelity prototype back into testing to gather feedback and further enhance the product. With each iteration and testing phase, I will gain new insights, identify challenges, confirm assumptions, and validate my research.
