ECOMMERCE / NATURAL HEALTH / SUPPLEMENTS
CheckoutÂ
Redesign
OVERVIEW
​
Ben’s Natural Health is a holistic supplement company and information hub, working with over 25 doctors globally they have established themselves as a leading voice for clear and informative health news for the older demographic.
As we’re dealing with an audience who are generally less tech savvy, there are more things to consider when approaching each project. Despite managing a team of 7, I am not afraid to get my hands dirty when the rest of my department are busy.
ROLE​
​
Product Designer​
​
Product Design, UI/UX, User Research, Graphic Design, Interaction Design, Marketing Design, Landing page design, A/B testing, Data Analysis
​
THE TEAM​
​
1 Product Designer, 1 Engineer
TOOLS​
​
Figma, A/B testing, Research & Analysis, Adobe Creative Suite, Usability testing
KEY ACHIEVEMENTS​
​
Over 50% Increase in conversion rate compared with the previous checkout design.
​
36% Increase in customers making it to the checkout.
The Challenge
Ben’s natural health had previously left checkout design to the engineering team which meant the finished product was not optimised for users with varying skill levels with technology.
Objectives
-
Empathise and understand how users navigate the checkout and what areas reduce our conversion rate
-
Rebuild the checkout, championing the user and focusing on the flow of information being entered
The Process
I utilised a lean UX design process in order to get the design in front of users as soon as possible. We were after a quick turnaround and we already had a lot of data and user sessions to go through which helped inform my decision making.
​
Business Objectives
-
Keeping the look and tone inline with the website and blog.
-
Quick Implementation to avoid negatively impacting our users
Our Users
-
Men over 50 struggling with prostate issues
-
Wives over 50 whose spouse suffers from prostate issues
Analysis
I Started this project by executing a thorough analysis of the existing structure. The UI was all over the place and there was not a clear hierarchy of information.
​
My hypothesis was that due to the varying mature ages of our demographic, the experience from landing page to checkout was overwhelming and not fluid enough to instil trust.
Research
As I was updating a live page, utilising microsoft clarity I analysed the length of user sessions from website to checkout, and then took account of where users got to before closing the page, additionally taking note of common devices and operating system used.
I also conducted a competitor analysis to gain valuable insights into what defines a clean and simple checkout experience. To this end I didn’t limit my scope to just healthcare and supplements but researched popular ecommerce products to assess their user journeys.
​
Major Pain Points
​
-
Inconsistent design language meant that users were unsure about the checkout (Increased quick backs)
-
The addition of the postage to the checkout was unclear despite being free and lowered trust
-
Taking into account the age demographic of our users the checkout experience appeared to be quite overwhelming and not well mapped.
I also executed a usability study on our landing page using UXtweak to define the problems users were facing and to better shape our solutions. This study was conducted on both the landing page itself and the checkout through to a secondary landing page.
The UXtweak study can be found here
Persona Analysis
After Researching I went back to our user personas to identify any possible pitfalls going forward.
User Flows
User satisfaction was drastically different based on where the user entered from and how familiar they were with the brand itself. By understanding this I aimed to bring in some extra social proof to the checkout without confusing or distracting the user.
Wireframe sketches
With the project lead time in mind, I brought in the engineers and senior stakeholders at the wireframe stage to align all business goals and make sure the project was feasible in the time frame. I skipped past the low fidelity and from wireframe went straight into a high fidelity mockup.
Prototyping
After Wireframing some possible solutions, I brought my sketches into figma and created high fidelity mock ups of various options. I arranged a meetings with the marketing and engineering teams to make sure my proposed update was:
​
-
Feasible from a technical standpoint
-
Time efficient as we were still seeing traffic to the landing page
-
Effective and clear at conveying extra information
Following a 2nd review with the CEO and engineer, I developed a prototype so during handover it would be easy to understand the functionality I was aiming for.
Development & Implementation
With the new refreshed design, we conducted comprehensive testing alongside the landing page using UXtweak. This involved crafting a comprehensive survey featuring screening questions, tasks, and a conclusive questionnaire, yielding invaluable insights.
We conducted an A/B test with the current checkout resulting in our conversion rate surging by over 50% in comparison with the original checkout, prompting us to extend the optimised checkout experience to our other established landing pages.
​
The number of users successfully navigating to the checkout increased by 36%, thanks to the collaborative efforts between myself and the product team in enhancing the design language and functionality across our landing pages.
Post launch I analysed the checkout with the engineering team to sort out any spacing and layout kinks that may have been overlooked.
Results & Takeaway
Following the success of this project I went on to update the checkouts for the main Ben's Natural Health shop page, utilising all I had learnt during this development process. Namely:
​
​
-
Iterate, Iterate, Iterate!!
-
The project doesn't end after deployment
-
Don't skip steps! It will take longer in the end
-
Have your engineering team on speed dial
