Soap Dental
Responsive web design for a new dental office in Boston
Client
Dr. Bob Cheng, DMD
My role
Freelance UX Designer (Research, Visual Design, Interaction Design, User Testing)
Scope
Responsive Web Design, Branding
Tools
Figma, Illustrator, Trello, Zoom, Pencil & paper
Timeline
4 weeks (80 hours)
Getting to Know the Client
Newly opened dental office lacking online presence to stay competitive
In 2021, Dr. Bob Cheng, DMD opened a new local dental office in Boston, Soap Dental - a family-oriented and patient-centric office. Being a new office, Dr. Cheng lacked an online presence.
I designed a responsive website for him to help potential patients access basic information and stay competitive in the Boston market.
I began the project by first learning more about Dr. Cheng’s goals for his business and understanding his current patients and their frustrations and needs.
The Challenge
How might we allow patients to effectively access general business information to ensure Soap Dental maintains a competitive edge in the Boston market?
The Solution
Accessible Information
Simple structure eliminating guesswork
Patients can find information effortlessly
Never need to call the office again
Ability to send message form with questions
Request appointments at the patients’ convenience
Seamless communication between patient and office
The Impact
8
Participants tested the features
8/8
Completed all task
100%
of the users would use the schedule & message forms
Understanding the landscape with research
Market Research
85% of all dental appointments are still scheduled over the phone
Aside from my regular visits to the dentist, I was curious about the industry. I wanted to learn more about the dental market to identify my target audience and their behaviors, and how COVID impacted dental businesses.
Key discoveries:
Scoping out the local competition
Competitors do not have insurance information or online booking options
Having a better understanding of the dental market, I was curious about Soap Dental’s competitors. I analyzed competitor websites within a 10-mile radius to discover the areas of improvement Soap Dental can address.
Key discoveries:
Nearly all competitors lacked insurance information
Users are not able to schedule appointments online
Some competitors did not have a website
User Interviews
7/8 participants need confirmation on insurance and are frustrated over not being able to book appointments online.
After learning about the dental industry and competitors, I next needed to fully understand Soap Dental’s patient frustrations, needs, goals, and motivation. What better way than to connect with some patients who received services at Soap Dental. I conducted user interviews and these insights will help me look for more qualitative data in my primary research.
Quick quotes from Soap Dental’s user interview participants.
Key discoveries
7/8 participants need confirmation if the dental office accepts their insurance
7/8 participants expressed frustration over not being able to schedule appointments online
6/8 participants had to call the office for general information
Needs
Patients need to ensure their dental insurance is accepted
Patients need to be able to schedule appointments online outside business hours
Patients need to be able to access general information without having to call the office
Meet my user persona, Elizabeth
User persona best represents Soap Dental’s patient
Ideation
Business & user goals and technical considerations
Goal alignment
To ensure our goals align with potential solutions generated, I strategized on where to put my focus by identifying Soap Dental’s business, user goals, and technical considerations. This will aid me in narrowing down the essential features that I need to prioritize.
Business Goals
Increase volume of new patients
Access to general information
Seamless communication between patients & office
Increase returning patients
User Goals
Find service listings easily
Easy access to insurance information
View appointment availability
Book appointments online
Technical Considerations
SEO Optimization
Server maintenance & optimization
Loading speed
Responsive website
How Might We …
Leverage research findings to create a positive impact - brainstorming for solutions that align with user needs and business goals
Referencing key insights from my user interviews, I translated my research findings into an actionable problem statement that will help me ideate in a goal-oriented manner. I asked myself several “How Might We” questions based on three problem spaces to create the foundation of the design and frame the brainstorming ideas.
HMW help Elizabeth access a list of dental insurance that is accepted?
HMW help Elizabeth book an appointment outside business hours?
HMW help Elizabeth access general office information without having to make a phone call?
Brainstorming
Discovering possible solutions
Design Concept
Assembling an intuitive framework
Mapping out the framework of the website to visualize the relationship between content, flow, and interaction.
Before diving into design, I needed to map out the information architecture, essential features, and screens needed to visualize the relationship between the content, flow, and interaction. I referenced established dental websites for guidance. Taking what I had, I went through and prioritized them with Dr. Cheng. This way, we ended up with the must-have set of features for the MVP (minimum viable product).
Elizabeth’s journey
With the screens and features established, I wanted to get a better sense of the patient’s journey and flow. I created four task flows to demonstrate Elizabeth’s journey through Soap Dental by illustrating the steps, series of actions, and screens that she will need to take in order to accomplish her task.
As a new patient, Elizabeth wants to access full insurance listing so she can learn more about what insurances Soap Dental accepts.
As a new patient, Elizabeth wants to view Soap Dental’s services listing so she can confirm if they do general cleaning.
As a new patient, Elizabeth wants to contact Soap Dental so she can contact them outside business hours.
As a new patient, Elizabeth has a busy work schedule so she wants to book an appointment with Soap Dental after busines hours.
Elizabeth’s footsteps
To further empathize with how our users will be navigating Soap Dental, I created a user flow that maps out how Elizabeth will discover and interact with the website. For each step in the journey, I explored the different decisions and actions that can be taken.
Key Learning
This gave me a deeper understanding of how one piece of content connected with the next and the different possible choices the patient can make. This helped me validate my information architecture for an MVP.
Sketching the concept
Before digitalizing Soap Dental’s framework, I captured my ideas on paper. This enabled me to examine and convey my ideas, demonstrate functionality, visualize flow, and illustrate interaction. Sketched helped me discover potential issues and solutions early.
Form temporary solution
I carefully researched the different forms our competitors and established dental websites used. I highlighted important items that need to be included on a messaging and appointment request form.
From paper to digitalizing
Once I decided on the visual direction of the layout I want to go for, I started to digitalize a mid-fidelity version of the wireframe for usability testing. This is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. Most importantly, it allows me to check and test functionality early on.
Homepage
Service page
Message form
Request an appointment form
Prototype & Testing
Testing & iterations
Taking my mid-fidelity prototype, I had 8 participants recruited for testing. They were taken through 4 tasks focused on decision making and action using the mid-fidelity prototype.
Testing key insight #1 - 3 tries 30 seconds
6/8 participants did not find the “Dental Insurance” information tab right away. It took an average of 3 tries and took an average of 30 seconds before they were about to complete the task.
Recommendation: Add dental insurance as its own separate tab on the navigation bar
Task 1: As a new patient, Elizabeth wants to access a full insurance listing so she can learn more about what insurances Soap Dental accepts.
Testing key insight #2 - appointment form
7/8 participants reviewed the scheduled appointment form thoroughly. Some had confusion and provided feedback. Feedback included:
Contact preference
Clarifying what morning, afternoon, and evening hours consist of
Ability to select services instead of typing in the message
Selecting insurance information
Recommendation: Implement participant feedback
The results
Taking the feedback usability finds, I iterated the design accordingly. Below is the before and after.
The insurance tab has been added to the navigation bar for easy access.
Updated appointment form per patient feedback. The form is more detailed and specific reducing confusion and the need to input information in the notes.
Branding + High-Fidelity Mockup
Piecing it all together
With the brand identity established, I applied the style and brand elements to the mid-fidelity wireframes to create high-fidelity wireframes.
High-fidelity across device experience
To ensure users have a consistent experience across all devices, branding and UI elements were also implemented to tablet and mobile mid-fidelity wireframes to high-fidelity.
Responsive home screen high-fidelity design for tablet and mobile
Reflection + Next Steps
System limitations & compatibility challenges
The biggest hurdle of this project was coming up with solutions that are efficient and compatible to implement with Soap Dental’s platform. There were technical limitations and restrictions from the initial solutions for the message and scheduling feature.
To move forward, I suggested a temporary form solution until we can find a system that works best with Soap Dental’s platform.
Working in media for pharmaceuticals, I had the opportunity to connect with vendors that offer platforms and features that Soap Dental was looking for. I have been sharing my learnings and findings from vendors with Dr. Cheng.
Time constraints
Dr. Cheng and I both work during regular business hours, so it was hard to schedule a time that worked for us.
Working with Dr. Cheng came naturally and was very similar to working with my day-to-day clients. I sent Dr. Cheng updates, findings, and status daily to ensure we are on track and connect on any concerns that would arise.
All deliverables for Soap Dental’s website were handed off to Dr. Cheng.
He is working with an external web design studio to get the website built and I have been providing feedback and advice.
Once the website goes live, I will be regrouping Dr. Cheng to visit website performance, identify optimization opportunities, and review items for the next round of implementation.
