Delivering Higher Conversions by Focusing on User Behavior
Heartland Dental is the nation’s largest Dental Service Organization (DSO). The marketing department manages and maintains over 1,000 individually branded dental practice websites.
I was brought in as the Head of UX to redesign the 1,400+ individually branded Heartland Dental Practice websites. The websites were underperforming on desktop and outright not working on mobile devices.
Project Meta
The Challenge
%
Approx. Visitor Conversion
%
Mobile Bounce Rate
%
Organic Traffic
Avg. Download Speed on 5g
Project Goals
- Increase appointment requests and convert visitors to patients
- Make the websites Mobile Responsive – reduce mobile bounce rate
- Make websites WCAG 2.0 compliant
- Improve organic SEO performance
Research Methods
- Google Analytics
- Competitive Analysis
- Usability Hub Time-to-Task Test
- Usability Hub 5-second Test
- Usability Hub Card Sorting
Process
Design Thinking Process
Competitive Analysis
Aspen Dental
Founded: 1998
Practices: 1,022+ (approx.)
Key Findings
- All practices are branded as ‘Aspen Dental’
- Online scheduling
- National search office locator
Pacific Dental
Founded: 1994
Practices: 900+ (approx.)
Key Findings
- All practices are individually branded
- Online scheduling
- Templated design
Western Dental
Founded: 1903
Practices: 560+ (approx.)
Key Findings
- All practices are branded as ‘Western Dental’
- Online scheduling
- California/ West Coast only
Initial Discovery – No Clear CTA
Usability Testing of Heartland Legacy websites
The first business order was to identify on the existing design of how users were currently using the websites.
Using Usability Hub, 100 users were given 5 seconds to view the page to the right and click on the item they thought was most important. In another test, these same users were asked to make an appointment and were timed until they succeeded.
More than 70% of users tested took over 15 seconds to identify the “Make an Appointment” button.
Over 65% of users tested clicked on the “Virtual Office Tour” button
Another 24% of users tested clicked on the “Solutions & Services” button
Initial Discovery – Bloated Navigation
After an initial audit of the primary navigation, it was discovered that the average practice had over 156+ items in their primary navigation.
As if those 156+ options in the dropdown were not enough, an overwhelming number of the items were Dental or Medical jargon that the average user would not know.
For example “Bruxism”. At the time, Bruxism had been searched a total of 2 times in the U.S. over the past year. However, ‘Mouth Guards,” the solution for Bruxism, had been searched for over a million times.
Bloated Navigation with over 156+ choices for users
Quantitative Research
Heartland Legacy Practice site analytics
Over two years of data from Google Analytics provided some definitive insight into user patterns.
Despite all of the aforementioned navigation items, users were overwhelmingly going to only 4 pages.
- About Your Dentist
- Payment Options
- New Patients
- Location
Define
User Journey
User Journey for Heartlands new websites
- Users wanted to find out about the dentist.
- Is the practice accepting new patients?
- Does the practice accept my insurance?
- How far from my home or office are they?
- I need to make an appointment.
Define
Card Sorting
I conducted two sets of card sorting tests to help identify genuine navigation items that could be considered ‘Services’ vs. items that served another purpose.
Group 1: Consisted of 23 Dentists and Orthodontists from around the company.
Group 2: Consisted of 15 prospective “patients” via Hubspot.
Card Sorting exercise to clean up the legacy navigation
Define
Early Sitemap
Early sitemap for New Heartland sites
Finding compromise between the users and the ‘stakeholders’
Users were clear in their goals – and they weren’t interested in ‘information’ that the dentists considered ‘vital’.
Almost to a person, the stakeholder dentists thought the information presented was far more important to prospective patients than any information the patients were clearly coming for.
As a compromise, I removed the 150+ services from the primary navigation and created a content block on the home page called ‘Knowledge Center’ listing all the office’s current services. The information was still prominent but no longer blocked users from their goals.
- I blocked out the primary components I knew the homepage had to have.
- Priority 1 was to make our user journey as frictionless as possible.
- Priority 1-A was to make our primary CTA of “Make an Appointment” unmistakable.
- I called it the Knowledge center. In moving the remaining links from the navigation to this knowledge center, they were no longer in the way of the users, but it was still prominently placed on the home page.
- A flexible section of the knowledge center for the offices that offered Orthodontics.
Define
Defining the Design System – Colors
185 Different color palettes
The legacy sites had 185 different or unique color palettes chosen from print collateral or other sources. Any 508 compliance that the legacy websites had was purely accidental.
Using the WebAIM: Contrast Checker, we identified 65 accessible primary colors and the accompanying secondary and tertiary colors.
Heartland Legacy Color Palettes
Ideate
Homepage Wireframe
Heartland 1st Round Homepage Wireframe
After multiple sketches and conversations, an initial homepage wireframe emerged.
I returned to Usability Hub to quickly test this initial wireframe.
Users tested were having a hard time identifying the ‘New Patients’ item when it was separated by the office address.
The users tested significantly improved the time to find the “Make an Appointment” button. In fact, not a single user took more than 7 seconds. Cutting the time to action in half from the previous testing.
Ideate
Card Sorting Results – Knowledge Center
User / Stakeholder Compromise in action
Taking the results from the card sorting exercises, the content team looked up the dental jargon and replaced it with SEO-friendly terms.
We now had content that the stakeholders considered important but allowed the users to accomplish their goals without getting in the way.
New Knowledge Center on the homepage wireframe
Ideate
Design System
Heartland New Websites Design System
Once we established the new color palettes and our homepage wireframe was tested and tweaked, the lead front-end developer began to write the HTML/CSS to bring them to life.
I took his opportunity to begin assembling the design system for the entire suite of 1,400+ websites.
Design System Features:
- WCAG Compliant
- Flexible enough for thousands of varieties.
- Custom set of dental icons
- Manageable color palette
- Scaleable Typography System
Prototype/ Testing
Homepage Prototype Testing
Final Prototype User Testing
Once more into the breach.
We were confident that we had thoroughly tested our new solution, but we did one last test of the working prototype with Usability Hub to be safe.
100% of users tested found the Make an Appointment button in under 5 seconds.
Live
The Desktop Solution
Heartland Dental Final website Phase1 of the Digital Transformation
Live
The Mobile Solution
Heartland Dental Final Mobile website Phase1 of the Digital Transformation
Mobile Experience Improvements:
No mega-menu in the hamburger
Loads on Mobile Devices
Improved CTA Placement
Multiple CTA’s for users
Google Ratings on 1st screen
New Patient Promo on 1st screen
Live
The Final Numbers
%
Approx. Visitor Conversion
%
Mobile Bounce Rate
%
Organic Traffic
Avg. Download Speed on 5g
One Last Number
In Potential Additional Revenues*
Based on the 200% increase in appointment requests, converting 14 new patient requests per week on average.
According to the ADA (American Dental Association), a new patient is worth $4525 to a dental practice over the life of the patient.