The Gorman Center for Fine Dentistry
Responsive Web / UX/UI Design / Testing
GORMAN CENTER
The Gorman Center for Fine Dentistry is a well established and highly respected dental practice in the Minneapolis-St.Paul area that specializes in natural looking cosmetic dentistry procedures. The owners of the center - Dr. Steve Gorman and his wife Connie - are interested in seeing a refresh of their website. They would like to learn more about how they can increase conversions and engagement on their website and gain a younger audience without alienating their primary audience of 50+ individuals.
OBJECTIVES
Redesign their responsive website, focusing especially on streamlining the sitemap/flows and on increasing engagement on and conversions from their site.
Refresh their logo/branding so it has a more modern look.
TIMELINE
2 weeks, 40 hrs/week
MY ROLE
Freelance Product Designer
User Research
Information Architecture & User Flows
Wireframing
UI Design
Usability Testing
1. EMPATHIZE
I began the design process by creating a research plan for both primary and secondary research. Here are the research goals I created based on the client’s brief and objectives:
Learn how people choose which dentist to go to and determine which website features are key to this decision.
Observe users interacting with the current website to uncover any pain points.
Understand what would cause a user to convert (make an appointment).
Interview both young and old participants to learn about their specific needs and pain points so we can build a site that balances both groups.
INTERVIEWS
I recruited participants for interviews from my network and from the business’s client base.
# of participants: 5
Ages 28-70
Summary:
There were very different user experiences depending on their dental needs.
Users are looking for convenience - in booking and during the appointments themselves.
People looking for cosmetic procedures will most likely be paying out of pocket and will spend much more time on the website doing research than a person coming for regular cleanings.
User reviews, testimonials, before & after photos, friend/family referrals, and dentist credentials are key to building trust with the user.
“I saw my sister-in-law get veneers and saw how well it turned out, so I went to that dentist and got a quote.” - Michele
MARKET RESEARCH
I conducted secondary research via a literature review into the dental industry to learn more. This is what I found:
The dental industry in the United States is worth USD $60 billion.
Although insurance and government programs pay for a portion of dental services, out of pocket payments are commonplace.
Disposable incomes and population age are both increasing, which is a great trend for dentistry.
Oral health has been discovered to be closely linked to a person’s overall health and wellbeing, so dentists are now thinking more holistically.
Trends include the use of 3D printing and lasers, group practices, digitization of patient records, creating a spa like experience, the use of social media to increase engagement, and the reliance on client reviews.
COMPETITIVE ANALYSIS
I researched some direct and indirect competitors to learn more about their strengths, weaknesses, and features.
2. DEFINE
The second stage began with synthesizing my research findings to define a user persona that would represent the research findings and the new acquisition target audience of 30-somethings with families that The Gorman Center is trying to capture. This was followed with firming up the plans for the Information Architecture and flows of the website.
USER PERSONA
Based on the user research and the business goals, I defined a persona that would be coming to The Gorman Center for a cosmetic procedure, but could potentially stay on as a long-term and bring her family there in the future if she likes her experience.
STORYBOARD
I created a storyboard to visualize the process that the persona would take to arrive at The Gorman Center as a patient and get in her headspace of daily life.
CARD SORTING
A card sorting activity was done via OptimalSort online, with 5 participants who categorized the current website’s content plus some additions into categories that they thought made sense. This exercise helped inform how to build the Information Architecture of the website. Here are the key findings:
Participants created a median of 6 different categories.
The top categories were: About Us, Services, Appointments, Gallery, New Patients, Our Work, and Reviews.
Two of the The Gorman Center’s main nav categories were outliers (“why us” and “smile gallery”) - meaning the participants did not group them with many other concepts.
SITEMAP
The sitemap of the current website was updated to streamline the layout and hierarchy of the content. Based on the card sorting and other research, I simplified the main nav copy to reduce the users’ cognitive load when navigating around the site. The sitemap also began to form the beginnings of the user flow through the site, and what essential pages would need to be designed for the prototype.
TASK FLOW
I created a basic task flow that explores the main goal of the website which is to gain an appointment booking from the user. This shows the user persona landing on the website, doing some research on cosmetic procedures, and then booking an appointment.
USER FLOW
I created a user flow to explore two different routes and the actions our persona could take on each route to complete the task of doing research on a cosmetic procedure and then booking an appointment. This shows her landing on The Gorman Center’s website either on the home page or on the cosmetic dentistry page via the blog.
3. IDEATE
Once I had identified the key pages I’d be designing for the above user flow, I began sketching different ideas for the flow, followed by wireframes and polished UI designs.
SKETCHES
I sketched 3-5 ideas for each page in the flow and then combined different elements from each sketch into the below final sketches:
WIREFRAMES
I built out my sketches into wireframes using Figma to get an idea for the layout, spacing, and grid for the site on desktop, visualizing the essential flow through appointment booking.
BRANDING
Since I was working with an established brand, there was no need to redesign their branding, but it needed a bit of a refresh to give it a more modern look. I removed their outdated looking tagline to give the logo more space.
For the color palette, the client wanted to veer away from their purple color of their past and focus more on the teal, and keep the copper. To balance these two colors which can easily clash, I added a lot of neutrals to make sure the brand came off as sophisticated, premium, and elegant.
The client had a lot of good imagery of their real patients in photo shoots. Although some of them look slightly outdated and the patients are mostly an older crowd, these provided a lot of good material for the site’s visuals.
UI DESIGNS
I created polished high fidelity UI designs for the desktop versions of the home page, cosmetic dentistry page, and appointment booking form.
4. PROTOTYPE
I created a prototype using Figma to test the task flow of researching cosmetic procedures and then booking an appointment.
5. TEST
Using the Figma prototype, I completed usability testing to observe how users would interact with the task flow while completing specific tasks. I wanted to find out what users thought about the layout and UI, how they found out more information about a cosmetic procedure, and how they’d book an appointment.
USABILITY TESTING
# of participants: 3
1 in person, 2 remote
Ages 26-70
One current patient of The Gorman Center
Summary:
Positive feedback toward the UI and layout.
Younger testers would have liked to see younger patients in the imagery.
The copy seemed a bit too marketing-heavy, and should focus more on practical information.
The before & after section did not entice engagement.
Requesting an appointment was easy but the time of day question was vague.
“I didn’t see the before & afters. Didn’t think to use it.” - Nancy
AFFINITY MAP
I created an affinity map to combine all the usability testing feedback from various testers. These are organized into positive or negative feedback, and the final column includes recommendations for updates. The colored post-its represent feedback relating to different aspects of the product. The recommended changes are also sorted into high, medium, and low priority. This helped me to decide what revisions to prioritize.
6. ITERATE
Based on the results from usability testing, I prioritized the most important revisions and updated the designs.
REFLECTION
This was my first project with a real client, redesigning an existing responsive website. I learned a lot about how to balance the "textbook" UX Design process with real world realities of working with a team on their own product. Since they are a relatively small, local business, I had to take into account their target audience and made sure to interview people from their region and age groups they currently serve and want to gain.
The most interesting part of the design process was streamlining an existing yet overcomplicated information architecture to a new structure. It was also a good challenge to work with an existing brand with outdated UI, and marry the current branding with a new look. I also had to learn how to properly present my research, pitch ideas, but also collaborate with the business needs and client preferences.
NEXT STEPS
I am currently working with the client on updating their business cards. Next steps from there include:
Working with client and their marketing/web hosting service to determine if and when this new design will be built.
Build main nav landing pages and child pages for all services.
Create higher fidelity prototype.
Test again!