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
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 (such as insurance information and services) and to 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 access general business information effectively to ensure Soap Dental maintains a competitive edge in the Boston market?
The Design Outcome
Responsive website with brand identity
Having a responsive website and brand identity is critical for Soap Dental to have an online presence and stay competitive in the Boston market.
Concise information architecture
Everything you need to know as a new patient and returning patient is available. The structure is simple and accessible without guesswork.
User’s convenience
Patient-centric design. One of the biggest frustrations from patients was not being able to schedule appointments outside business hours and having to call to schedule an appointment or to ask questions. Now, users can do so on their own schedule at any time.
Design Process
Taking a user-centered design approach, I investigated Soap Dentals’ patient journey from searching for a dentist to booking an appointment. Then I designed solutions based on my findings and validated these ideas through prototype and user testing with mid-fidelity mockups before developing a high-fidelity prototype based on my findings.
Steps in the process
Pictured: Overview of the steps in my design process
Understanding the landscape with research
The dental market & landscape
Aside from my regular visits to the dentist, I didn’t know too much about the industry. I conducted market research to help me better understand the dental market, identify my target audience and their behaviors, and how COVID impacted the industry.
Key discovery- Dental appointments
One of the biggest surprises was that 85% of all dental appointments are still scheduled over the phone despite digital technology advancements.
Scoping out the local competition
Since I didn’t have any raw website data to learn from, I was curious about the competitor’s success and failures so I can identify gaps that Soap Dental can address. I analyzed the strengths and weaknesses of competitors that are within a 10-mile radius.
Key discovery
I was shocked to find that:
3/4 of competitors do not have the ability to schedule appointments directly
1 of the competitors did not have a website
3 of some competitors do not have any insurance information
Meeting the patients - uncovering their pain points
I needed to fully understand Soap Dental’s patient frustrations, needs, goals, and motivation. What better way than to connect with some patients. I conducted user interviews with eight participants who have received services at Soap Dental. These insights will help me look for more qualitative data in my primary research.
Quick quotes from Soap Dental’s user interview participants.
Uncovering user patterns
There was a lot of rich feedback and insight that the 8 participants shared with me. I organized my findings with an affinity map to help me uncover patterns.
7/8 mentioned insurance acceptance
7/8 mentioned being about to book appointments online at their own convienence
6/8 want to be able to view appointment availability
6/8 had to make calls to the dental office for their last visit
6/8 look for services dental office provides
Identifying user patterns
There was a lot of information to organize from my research. I synthesized the qualitative data by creating an empathy map to help me identify key patterns between all my participants. These patterns are then translated into insights and used to define the needs of Soap Dental’s potential patients.
Key insights from user interviews used to define patient needs
Meet my user person, Elizabeth
Now that I have a better understanding of the dental landscape and my user’s goals and needs, based on my initial research I created a fictional user persona, Elizabeth. She is the voice of a potential customer and best represents my users’ key characteristics and behaviors. The goal was to get a clear understanding of the user's needs before mapping out the relevant essential features.
User persona best represents a potential patient
Strategy
How might we help Elizabeth?
My research findings helped me identify whom we are designing for. I next need to define the problem that I am solving.
To clearly frame the problem we are solving, referencing key insights from my user interviews, I created Point of View (POV) statements. This will help translate my research findings into an actionable problem statement that will help me ideate in a goal-oriented manner. To do so, I rephrased my POV statements into How-Might We (HMW) statements. These statements will help prepare for innovative solutions through brainstorming.
Using the formula [user] + [need] because [insight] to translate into an actionable HMW statement
Brainstorming solutions
Utilizing the problem statements from my How Might we, I created mind maps of potential solutions. For each problem statement, I generated as many solutions or ideas as possible within three minutes.
Challenge: limitation & expectation
In week two, Dr. Cheng revealed that there were limitations and system compatibility issues regarding implementing the initial system for the message and scheduling feature.
Workaround: Temporary solution
Recalling my initial competitor analysis, some businesses utilized form submission for communication and appointment booking purposes. Due to time constraints, Dr. Cheng agreed that was a viable temporary solution. I also noted that we can use this opportunity to gather data and learnings about items we should take into account for the system during his research and meetings with vendors.
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 are determined based on what is needed for Soap Dental to be sustainable financially. User goals are gathered from my persona and technical considerations were determined based on what is needed to upkeep the app. Mutual goals were identified by aligning overlapping goals.
Ideate & Design
Assembling an intuitive framework
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
Consistent experience across devices
In addition to designing desktop wireframes, to ensure users have a consistent experience across all devices, mid-fidelity wireframes were designed for tablet and mobile as well.
Responsive homepage wireframes for desktop, tablet, and mobile
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 - Dental Insurance
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
Building the brand & designing a system
Soap Dental is patient and family-oriented. Dr. Cheng’s goal is to create a welcoming and friendly space for everyone. The top attributes I selected that best fit Soap Dental’s brand are: modern, friendly, professional, neutral, and fresh.
I created a simple friendly logo paired with a vibrant and neutral color palette to complement the office interior. For typography, I used Source Sans Pro, a friendly rounded font paired with Lora for a professional touch.
UI Kit
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
Final prototype
Final prototype - test it for yourself
Here is the final prototype after implementing revisions and applying branding elements. Feel free to explore the app on your own. Reminder participants were asked to complete three tasks which include the below:
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.
Task 2: As a returning patient, Elizabeth wants to view Soap Dental’s service listing so she can confirm if they do general cleaning.
Task 3: As a returning patient, Elizabeth wants to contact Soap Dental so she can contact them outside business hours.
Task 3: As a returning patient, Elizabeth has a busy work schedule so she wants to book an appointment with Soap Dental after business hours.
Next Steps + Reflection
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. Until our regroup, I have been sharing my learnings and findings from vendors with Dr. Cheng.
With the latest revisions implemented, wireframes and essential deliverables for Soap Dental’s website are ready to be handed off to a developer. Once developed, it is crucial to watch how Soap Dental is doing with online appointment requests and message form features. The goal is to make the user experience as seamless for the business and user as possible, and identifying optimization areas is key.
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.
