New product page template to increase e-commerce
Increased the visibility of the ‘Order now’ button by 3.8x
“The work that Tim conducted was methodical, customer-focused, and will support the business objective of driving more e-commerce sales. Thank you, Tim!"
Emma March
Head of Marketing @ Blatchford
New product page template to increase e-commerce
Increased the visibility of the ‘Order now’ button by 3.8x
“The work that Tim conducted was methodical, customer-focused, and will support the business objective of driving more e-commerce sales. Thank you, Tim!"
Emma March
Head of Marketing @ Blatchford
UX & Product Designer
UX Research
Cross-team collaboration
Templates
Project overview
Blatchford needed to increase its online B2B sales. Through a combination of user interviews with prostheticians, medical sales teams, marketing managers, and prosthetic users, it was determined that a number of things needed to change on product pages. This case study will focus on some of the key changes to drive e-commerce sales while providing both the B2C and B2B users with what they needed.
The challenge
The business aims to transition from all sales being handled by their sales managers to all orders under £10k per year being processed through their online e-commerce system.
Success criteria
We will measure the success of the project by the uptake of online orders. We will also monitor customer engagement with the product pages:
• Reducing the bounce rate.
• Increasing our click rate on the primary and other Calls to Action (CTAs).
Research summary
The business wants to increase its e-commerce sales. However, only 20% of professional users interviewed know they could buy online through the site. The old product page had little to no written information and no call-to-action above the fold on mobile, tablet, or computer screen sizes. On mobile, the CTA to ‘Order now’ was at the bottom of the page, out of sight and out of mind. To compound the problem, the primary CTA had a poor contrast ratio of 2:1.
Old product page & CTA location from the Blachford website. Fair use.
Other leading competitors focused their product pages on the end user of the prosthetic limbs but had a CTA to buy online. This feeds into the growing trend of end users deciding which prosthetic they want before coming to their appointments due to research they had done themselves.
NOTE: Only qualified professionals can order a prosthetic.
100% of prosthetic users engaged first with photos and stories of real users, then with the technical data. Only 3.8% of professionals wanted to see stories from users, but all wanted to see technical information on the product.
The difference in priorities between the professional user and the end user needs to be carefully balanced.
Highlights from research with prosthetic users and prosthetics.
Ideation & testing
In the initial ideation, key information was moved above the fold. This meant that product name, description, key technical information, and ‘Order now’ CTA were now easily available. I started with a 'text frame' to allow us to test the information structure without the distraction of images and colours.
The first iteration of the text frame was used for testing on both desktop and mobile screen sizes.
I then tested the text frame with both professionals and individual end users to ensure they could easily find the information they needed. The design was also refined through feedback from the Marketing manager, Dev team, and original UX Designer:
-
Keeping the product name in the body helps with SEO. To aid user navigational awareness, the product name will still appear in the header after scrolling starts.
-
Key product information was changed to bullet points to keep a consistent visual language and reduce cognitive load.
-
The “Download documents” button was removed because no one used it during testing. This reduced the number of choices available and increased the focus on the primary and secondary CTAs.
The second iteration of the text frame was used for testing on both desktop and mobile screen sizes.
Testing of the final design showed a 3.8x increase in the user's awareness of the "ORDER NOW" button.
Key features:
-
New in-page anchor link allowing clear and quick in-page navigation.
-
New secondary CTA aligns the aesthetics of the primary and secondary CTAs for consistency and reduced cognitive load.
-
The primary CTA was updated to meet WCAG 2.2 AA for body text contrast and exceeds it at 7.7:1. Greater accessibility leads to increased user noticing and aiding conversions.
NOTE: The price is not listed because it varies depending on several factors, such as whether the service is provided through a private clinic, the country's health service, or the country of purchase. The price is displayed after the user has logged into their account and configured the unit to their required specifications.
The final high-fidelity UI design.
Final solution
Results
The final high-fidelity UI design. This comprehensive revamp and standardisation of the Blatchford product page template effectively aligned business objectives, such as bolstering e-commerce sales, with the distinct needs of our two primary user groups:
-
Online CTA visibility increased 3.8x.
-
Key friction points removed.
-
User paths simplified.
Lessons learnt
Grew in understanding of how to design for competing priorities: by balancing patient stories with professionals’ need for technical data
Inclusive design directly drives conversions: by improving CTA accessibility
Clear documentation is vital: to align teams and maintain consistency.
Testing helps to sharpen focus on key actions: by revealing unused features to remove which helps reduce cognitive load
Creativity and thoughtful improvements are key: when resolving problems within the constraints of an existing design system