top of page
Laptop displaying the homepage of Dr. B Dental Solutions, an e-commerce website for denture care products. The screen shows a clean, modern layout with a featured product banner, navigation menu, and call-to-action button.
Dr. B Dental Solutions logo, featuring bold black uppercase text between two horizontal navy blue lines.

A small e-commerce company selling a range of products for people with dentures, implants, and dental appliances and address problems such as dry mouth and oral infections.

Project Overview

Dr. B Dental Solutions is a company selling a range of products for people with dentures, implants, and dental appliances and addressing problems such as dry mouth and oral infections.

A collection of Dr. B Dental Solutions oral care products, including a bottle of Liquid Crystal dental appliance cleaner, a tube of denture adhesive, a tube of oral moisturizer, a pack of cleansing wipes, a blue ergonomic toothbrush, and a compact ultrasonic cleaning device.

Role

UX Designer

Stakeholders

CEO, President

Key Skills

Competitive Analysis, Sketches, User Testing, Wireframes, Prototyping & Testing

Tools

Figma logo, featuring a square icon with four overlapping circles in red, purple, blue, and green, placed above the text 'FIGMA' in gray.
Miro logo featuring a bold, navy blue stylized 'M' on a yellow square background, with the word 'MIRO' written below in gray text.
G Suite logo featuring a multicolored 'G' in red, yellow, green, and blue on a white square background, with the text 'GSUITE' written below in gray.
Metrilo logo featuring a white network-like symbol forming an 'M' with connected dots, set against a rounded blue square background. The word 'METRILO' appears below in gray text.

What do the stakeholders want?

In our initial brief and meeting with the stakeholders we went over the goal of this project and set expectations.

Target icon with an arrow.

Company Goals

Increase sales and conversion rates and improve overall layout and design

Outline illustration of a human head in profile with a lightbulb inside, symbolizing creativity, innovation, or idea generation. The icon is drawn in a blue line style with small marks above the head representing thought or inspiration.

Our Solution

Locate the areas with the highest bounce rate, and iterate the current design to improve website usability.

Identifying the Core Challenges

To kick off the project, we analyzed the website's current performance and identified usability issues that hindered the user experience and reduced conversions. Our research leveraged multiple data sources, including web analytics, stakeholder interviews, and a design audit. Here’s what we discovered:

Web Analytics Insights

The client’s CRM database (Metrilo) revealed key performance metrics:

  • Cart Abandonment Rate: Alarmingly high at 68%, signaling friction in the checkout process.

  • Conversion Rate: A decent 5%, but with room for growth by optimizing the customer journey.

  • Checkout Drop-Off: Significant loss of users during the checkout process, indicating potential usability bottlenecks.

Stakeholder Perspectives

Interviews with the Customer Service Representative highlighted critical pain points:

  • Disorganized Product Layout: A cluttered structure led to a confusing user experience.

  • Account Creation Frustrations: Customers struggled with account setup during checkout, increasing drop-offs.

Design Audit Findings

Our in-depth design audit validated and expanded on these findings:

  • Complex Customer Journey: Navigation lacked clarity, making it difficult for users to complete tasks.

  • Overwhelming Information: Product pages overloaded users with unnecessary details.

  • Checkout Confusion: Steps were unclear, leading to hesitation and drop-offs.

Based on these insights, our scope of work involved the landing page, product listing, single product page, and the cart and check-out process.

Design Solutions: From Concepts to Implementation

The user flow illustrated how customers navigate the site, with a focus on simplifying checkout to reduce drop-off rates. The optimized flow aligns with user needs and stakeholder feedback.

User flow diagram mapping the step-by-step journey through a website, from the starting point to checkout and confirmation. It includes decision points, interactions, and pathways, represented by different colored shapes to indicate pages, user actions, and services.

STREAMLINED CHECK-OUT

Simplified flow from log in, shipment to payment

Sketches

Through early sketches, I explored two approaches: a multi-page checkout for structured, step-by-step guidance and a single-page checkout for faster transactions. Stakeholder feedback led us to finalize the multi-page approach, addressing usability concerns for older users.

Cart & Check Out

Sketches of the multi page approach broken into three pages.

Multi-Page: Users are navigated through the check-out process in three steps:  Shipping & Billing, Payment, Review, and lastly ending with a confirmation page.

Sketches of a single page user flow.

Single-Page: Users enter their shipping and billing information, then review and place the order, ending with a confirmation page.

Refining User Experience Through Testing

Usability Testing Highlights

We conducted usability tests with participants with a range of ages aged 40+, focusing on key actions like adding items to the cart and completing the checkout. Testing revealed key issues, such as confusion around error messages and unclear button placements. These insights informed iterative design adjustments.

What Worked

  • Clean layout on product pages

  • Easy-to-read fonts.

What Needed Improvement

  • Users struggled with identifying confirmation of added items.

  • Error messages during checkout lacked clarity.

Final Designs

The final designs reduced cognitive load and improved navigation through simplified layouts and clearer calls-to-action. Usability scores increased by 30%, and stakeholder feedback confirmed alignment with business goals.

Before

1. Log in/sign up

Screenshot of the original design with a login form with a "Login" CTA followed by Create an Account with a Submit CTA.

2. Checkout

Screenshot of the original check out process with a two column single page form.

Log in experience

The Login page was streamlined for clear direction for both returning and new users, reducing time-to-login by 25%

Payment experience

The Payment experience  was structured with step-by-step guidance, now including clear instructions and error states, ensuring smoother transactions.

2.  Shipping

Check-out as Guest.png

3. Payment

Payment.png

​A preview of the product purchase was now available to customers. Billing address was condensed if it was the same.

4. Review

Review.png

5. Confirmation

Order Placed.png

After

1. Log in/Sign up

My Cart.jpg

Figma Prototype

Conclusion

This was a valuable experience for me where I had the opportunity to apply the knowledge I learned through my Springboard course and merge my experience working among a team and stakeholders. I had a great time working with a team during this project, and I continued developing my communication skills while leading meetings and ensuring to respond to emails in a timely manner

Challenges Faced

  • Staying on task with our red routes. There were many changes we  wanted to make as we continued designing, however with proper communication among ourselves and with the stakeholders we were able to stay within scope.

  • Limited direct feedback on current state of website.  We did not have direct customer research on how the current website was performing and what the pain points were. The insights from the customer service representative were the best way to incorporate user feedback.

  • Scheduling. Half of our time was on the east coast, so were mindful and flexible with team meetings. My team was very understanding and communicated quickly and found new times to meet when needed.

​

​

​

Next Steps

DrB Dental Solutions has implemented many of the designs we proposed and are continuing to iterate and test the new layout.

​

​


Interested in checking out other work?

bottom of page