Oral Radiology Experts

Transforming an online radiology businesses’ website to boost navigability, customer engagement & booked consultations.

Brief

Tools

Figma, Miro, Google Sheets

Timeline

6 weeks

My Role

UX Design + Research

Deliverables

Hi-Fi desktop prototype

Healthcare professionals needs to gain customer trust, while having a website that is easy navigate and find information. The client wanted a professionally designed site, while still showing a bit of personality and friendliness of the business.

Challenge

  • Hi-fi website prototype that is easily navigable

  • 73% reduction in consultation booking time

  • Improved branding across UI elements and tone of voice

Results

Project Goals

Improve a small, but growing B2B website

Increase navigability for first time site visitors

Motivate customers
to book a consultation

Research & Discovery

Initial Client Interview

I began this project by interviewing the business owner about their goals with the website redesign. The stakeholder mentioned that they wanted to refresh the design as they did the best they could with the SquareSpace template. They also emphasized that they wanted minimal color changes but still a stylish, yet professional tone aligned with industry standards.

Competitive Analysis

To kick off the project I researched Oral Radiology Experts’ top 3 competitors.

Lo-Fi Prototyping

Wireframes

Here are some of the rough wireframes I drafted up after paper sketching. I reviewed these with my primary stakeholder to get the ball rolling and make sure their vision aligned with the updated layout design. I used these wireframes to help me move to the next stage of my user testing and hi-fi designs.

Information Architecture

After designing wireframes, I thought it would be a valuable resource for the owner to be able to compare the changes that were made to the flow of the site in a concise and visual manner. I created information architecture for the old website and then for the prototype.

Squarespace Info Architecture

Prototype Info Architecture

Hi-Fi Prototyping

Style Guide

I created a simple style guide to act as a reference as I worked on multiple iterations of the website design and wanted to maintain consistency throughout the design.

Comparing the Figma Prototype Against the Old Website

Version A is quite unbalanced regarding text size, margins, logo+title size, and flow of information. In Version B, I focused on strategically adding CTAs for consultation, WCAG corrections (text size, color contrast), and more engaging content design & UX writing. Below is a side by side comparison of a few of the pages and sections of pages.

Version A Home Page

  • Menu pages are hard to read regardless of screen size

  • Huge logo at header is distracting

  • Text size & color contrast fails ADA requirements

  • Inconsistent margin sizes

Version B Home Page

  • Added consultation CTA Banner

  • Passes ADA text sizes and color contrast ratio

  • Text box width lowers cognitive load

  • Overall more visually dynamic + engaging

Version A About Section

  • “Owner” and “Dr. Kate Dubois DMD” looks like a link as it is the CTA color, but is actually a header. Poor UX and accessibility

  • Content layout feels cramped and unbalanced

Version B About Section

  • Easier to scan for info

  • Balanced content and margins

  • Lower cognitive load on users

  • Proper info hierarchy

Version A FAQ

  • Not actually FAQ page

  • Unbalanced margins

  • Poor info hierarchy

Version B FAQ

  • Changed page title based upon user research that found users felt unsure of what info they would find on this page

  • Balanced content and margins

  • Added basic stylization to make more aesthetically pleasing

Version A Contact Form

  • Huge tooth logo is distracting

  • “Contact” text at top is colored as CTA purple, it’s misleading

  • Text size fails ADA requirements

  • Owners’ email listed first, rather than the consultation form

  • No confirmation after hitting the ‘‘submit’’ button

Version B Contact Form

  • The alignment is improved overall and content is streamlined

  • Owners’ email moved to the bottom as they would rather be contacted that way

  • Friendly and clear confirmation message

  • Offers a timeline to inform when they can expect an email response

User Testing

I conducted a mixed methods, two-part synchronous study to understand how users perceive the original site design compared to the Figma prototype. The research was motivated by the following elements: usability, discoverability, and accessibility.

Part 1 focuses on qualitative data via time on task A/B testing. Part 2 focuses on qualitative data through comparison testing via think think-aloud method.

Participants were read two separate scenarios followed by tasks, both were timed separately. Time on task was selected as a product evaluation method to present to the stakeholder concrete metrics for user site navigability.

Part 1: A/B Testing: Time on Task

Part 2: Preference Testing Site Walkthroughs

Participants were asked to reflect on the previous tasks and while freely navigating the website and prototype. Participant think-aloud responses were sorted in Miro via thematic analysis. Upon completion of all of the think-aloud walkthroughs, the qualitative data was then summarized with key insights.

Thematic Analysis Results

  • Participants immediately noted that the design of Version B was a huge improvement

  • Test users reported B felt more trustworthy and established as a business, which they found especially important as it is a medical industry

  • Participants liked that the consultation form notified them it had gone through

  • This helped to elicit a good understanding of their user journeys.

Design Handoff

Upon completion of user testing and evaluation, I shared the findings with the business owner. I confirmed with the business owner they could proceed with design implementation with the web developer. I also let them know that I labeled the design items ie. files, layers, components, groups etc. based upon industry standards.

Linked below is the developer adapted web version of my prototype design.

Key Takeaways & Recommendations

After the preference testing, it was clear that people felt they could trust V2 more. It was much faster to find information such as services and about. Overall, the updated site felt more established and credible.

1.

The pool of participants only included one user from the dental industry or the target demographic. It would have been great to have more prospective users ie. dental practice owners, receptionists, or office managers who actually work in the dental field to get more industry specific feedback for the client.

2.

The Figma prototype significant lowered the cognitive load on users by making the site easy to scan. Users preferred the design more overall and recalled a positive impact of the UI and UX elements.

3.

The adapted version of my prototype design did not fully represent my design work, but it was a great opportunity to learn how I could approach a design handoff differently in the future. It is also important to note, that I do not know the skill level of the developer, so there could have been some limitations on both ends of the project.

4.

Thanks for Reading

check out my other case studies!