Soap Dental
A responsive website for a new dental office in Boston
Scope
Responsive Website, Branding
Scope
Freelance UX Designer (Research, Visual Design, Interaction Design, User Testing)
Scope
Figma, Illustrator, Trello, Zoom, Pencil & paper
Scope
4 weeks (80 hours)
Overview:
In the greater Boston area, Dr. Bob Cheng, DMD newly opened Soap Dental. They are a family-oriented and patient-centric office offering general dental, family dental, and cosmetic services. Being a brand-new business in town, Soap Dental is looking for a responsive website to stay competitive in the Boston market and provide customers with a positive enjoyable experience.
How might we help the new local dental office, Soap Dental stay competitive in the Boston market while providing a positive experience for their patients?
The Challenge:
The Solution:
A patient-centric responsive website
Being a new Dental office in town, Soap Dental needs to stay competitive and that means having a responsive website that is designed with potential patients in mind. The website would address patients’ goals, motivation, needs, and frustrations ensuring they can achieve their tasks effortlessly and efficiently.
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 the returning patient is available. The structure is simple and accessible without guesswork.
User’s convenience
Keeping the users in mind, 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
Research
Market research
Competitive analysis
Provisional persona
User interviews
Empathy map
User persona
Strategy
How Might We questions
Brainstorming
Project goals
Feature roadmap
Design
Site map
UI Requirements
Task flow
User flow
Low-fidelity wireframes
Mid-fidelity wireframes
Prototype & testing
Mid-fidelity prototype
Usability testing
Affinity map
Branding
High-fidelity prototype
UI kit
Market research highlights
I started the research process by conducting market research to help me better understand the dental market, identify my target audience, and how COVID impacted the industry.
Scoping out the local competition
Once I have a better understanding of the market, I analyzed the strengths and weaknesses of my direct and indirect competitors. This will help me identify any gaps that Soap Dental can address. To narrow down my competitors, I focused on Dental businesses that are within a 10-mile radius of Soap Dental.
Pleasant ST Dental (Direct Competitor)
Joan E. Horgan, DMD - Family Dentistry (Direct Competitor)
Scali Dental (Direct Competitor)
EyeSmile Optometry & Dental (Indirect Competitor)
Meeting the patients
To fully understand Soap Dental’s patient frustrations, needs, goals, and motivation, recruited eight participants who have received services at Soap Dental with the help of Dr. Cheng to join my user interview sessions. This will help me look for more qualitative data as my primary research.
Insights uncovered from primary research user interviews
Meet Elizabeth
My secondary and primary research findings were summarized in my user persona. It assists the design process by presenting our target user group with the essence of their goals, needs, motivation, and frustrations.
How might we help Elizabeth?
Taking the insights gathered from my research, I now want to think about strategizing solutions for Elizabeth. Elizabeth’s needs are framed into an actionable problem statement. Each statement is derived from the user's needs that will help me redirect the user's point of view into How Might We (HMW) statements so that I can start brainstorming ideas that will fulfill the user's needs.
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.
Assembling an intuitive framework
After setting up the product goals and deciding what features to include, I next focused on structuring the framework of the website. To do so, I assembled a site map to help me visualize the relationship between the content, flow, and interaction. For guidance, I referenced various established dental offices.
Elizabeth’s journey
After establishing my user tasks, I created four task flows to demonstrate Elizabeth’s journey through Soap Dental. This illustrates 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.
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. 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.
Putting it to the test
Recruited eight patients to test my prototype with four tasks. This will help me detect issues in my design, to uncover patterns and frustrations participants had when interacting with the prototype helping me identify areas for improvement.
Gathering insights + recommendations
I summarized my usability test findings to uncover patterns and frustrations participants had when interacting with the prototype helping me identify areas for improvement. Recommendations were then provided for each insight to improve the prototype for later reiteration before making it into high-fidelity wireframes and finalizing my prototype.
Testing insight
6/8 participants did not find the “Dental Insurance” information tab right away.
7/8 participants reviewed the scheduled appointment form and provided feedback.
Recommendations
Add dental insurance as its own separate tab on the navigation bar.
Implement participant feedback.
The result
Utilizing the priority matrix, I implemented the recommended changes. Here are some highlights of the changes I have made.
Insurance tab has been added to the navigation bar for easy access.
Building the brand & design system
Before updating the mid-fidelity wireframes to high-fidelity, I need to first establish Soap Dental’s branding visuals. I started listing out the brand attributes that best represent Soap Dental. Then assemble a mood board gathering inspiration from Pinterest to communicate and define my overall visual design direction.
Attributes: modern, friendly, professional, neutral, and fresh.
Soap Dental’s UI kit
Piecing it all together
With the brand identity established, I can apply the style and brand elements to the mid-fidelity wireframes to create high-fidelity wireframes.
High-fidelity across device experience
Branding and UI elements were implemented to tablet and mobile mid-fidelity wireframes to high-fidelity to ensure users have a consistent experience across all devices.
Final Prototype - test it out 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.
Learnings
I learned a great deal about the dental industry and its business operation. These learnings were valuable and I even applied them to my media executions at work. Additionally, working in the media space, I was able to share some of my learning insights from the field and expertise which attributed to future implementation consideration for Soap Dental. This led to a continuous partnership after this project.
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 from our project roadmap P2-P4 categories.
