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.