Breathe Easier, Sleep Happier

E-commerce & Healthcare: Conversion Optimization and Redesign

Homepage for healthcare project
Company
eXciteOSA is the first clinically proven and regulated daytime therapy for mild sleep apnoea & snoring.
Industry
Healthcare, HealthTech, Ecommerce
Role
Lead Product Designer
Key Areas
UX Audit
Analytics
CRO
Conversion
UI KIt
User Testing
Guidelines
UI Design
Wireframes

About

We established a cohesive design system, incorporating brand guidelines, and developed UI screens. Usability testing and iterative improvements followed, with a focus on analyzing data for enhanced conversion rates.

The project involved redesigning specific pages, notably the product and checkout pages, to address high dropout rates. Beginning with an initial audit and analysis of Google Analytics and user sessions, we pinpointed the issues. Collaborating closely with the client, we conducted workshops, ideated solutions, and created wireframes.

Stats & Results

Timeframe
2 weeks
Team
2 people
Sales
+15%
Conversion
+46%

The Design Process

01
Debriefing
In this initial phase, we engaged in workshops with the client to gather essential information, analyze data, and evaluate analytics. We also requested branding materials to guide our design process.
02
UX Audit
I conducted a comprehensive audit of the existing website to identify strengths and weaknesses, focusing on enhancing the overall user experience.
03
Wireframes
I crafted wireframes to address specific usability and conversion-related challenges.
04
UI & Assets
I developed a cohesive set of visual guidelines, including a redesign of icons, menu, and footer elements, and crafted new UI screens to elevate the site's aesthetic and functionality.
05
User Testing
To ensure our designs resonated with users, I carried out six usability tests, providing valuable insights into user behavior, and ensuring that our designs were not only aesthetically pleasing but also user-friendly.
06
CRO & Analytics
We conducted A/B testing, meticulously analyzed the results, and made iterative refinements based on our findings. These adjustments were then compared to the original conversion data to gauge the project's impact.

The visuals

Image of e-commerce healthcare product design UI
Sleeping device in use
Sleeping device in use
Sleep apnoea and snoring is a problem for many people whose tongue muscles relax during sleep, causing partial airway collapse.

Some Examples of the Audit

UX audit for healtcare project
1
Visual Hierarchy and Consistency

The page changes its navigational structure on the product page (the menu disappears), making it hard for people who want to check the price first and then do some extra research. The 'Add to basket' button does not stand out; it's hard to notice.

2
Readability & grouping

The description part is very text-heavy, hard to read, and nothing is highlighted there to lead the user's attention. The description is filled with technical details except for real benefits. The users cannot define the quantity of the products they want. Grouping and structural differentiation are missing – the product info and checking out should be somewhat separated.

3
Hidden Benefits

The benefits of the money-back guarantee and the product's benefits do not stand out, and they are both very deep in the site (far below the fold). They also blend into the rest of the content.

4
Lack of Value and Information

This unnecessary intermediate screen doesn't provide information or anything valuable for the user. This unnecessary intermediate screen doesn't provide information or anything valuable for the user.

5
VAT & Shipping - Expectations

VAT and Shipping changes as per the country that the user selects later. At this point, the user has expectations towards the pricing, and at the next step, the total amount might change.

UX audit for ecommerce project
UX Audit for ecommerce website
6
CTAs are not Standing Out

Login and coupon options get lost due to the lack of hierarchy and the amount of information on the page.

7
Cognitive Overload

The entire page is unstructured and has a lot of information without a visual hierarchy. The users can easily get lost. The users need to understand why they must fill out so many inputs – the context surrounding this is missing.

8
Lack of Transaprency

The effects of applying for a tax exemption or entering a country are not immediately visible to the user - the final price is far below the fold and needs the user to scroll to the bottom of the page.

9
Trust & Realiability

The payment section does not communicate trust and reliability to the users.

High-Fidelity Wireframes

Product Page
Wirerame for ecommerce project
Tax Exemption
Wireframe for healthcare ecommerce project
Shipping
Wireframe design for healthcare ecommerce project
Payment
Wireframe for healthtech project

UI Design

Product Page
UX Audit for healthcare product design projectUI for healthcare project
Tax Exemption
Checkout optimization for healthcare projectMobile design for ecommerce project
Shipping
Checkout for healthcare ecommerce projectMobile UI for healthcare ecommerce project
Payment
Checkout optimization for healthcare projectMobile design for healthcare ecommerce project

Color Palette

Primary Colors
#2FB3EC
#6969DB
#2FB3EC
Neutral Colors
#FFFFFF
#F1F4F7
#E8E8E8
#D8D8D8
FEB3C7
#D6B7D8
System Colors
#0DC64C
#FBB225
#EC2F2F

Typography

Aa
Source Sans Pro Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ⌃ & * ( )
Aa
Source Sans Pro Semibold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ⌃ & * ( )
Aa
Source Sans Pro Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ⌃ & * ( )

Grid

Grid and layout for healthcare project

CRO (a test case)

46%

Increase in the conversion of the cart process

Google logo
Analytics

Software used

Multivariate

Test types

1,200 people

we used an avg. of 1,200 participants per test

Through strategic conversion rate optimization efforts, we achieved remarkable results. By streamlining the user journey and eliminating the intermediary cart step between the product page and checkout process, we realized an impressive 78% increase in the overall conversion rate. Moreover, our UX optimizations alone led to a significant boost in the final checkout rate, elevating it from its initial 0.4% to a remarkable 9%, underscoring the impact of user-centric design on driving successful outcomes.

Conversion optimization for healthcare project