.png)
Blatchford
Improved product page template
Blatchford is a medical prosthetics company. This project revitalised Blatchford's product page template, by unifying user needs and business goals.
Tim has proposed "changes to help encourage more online orders and easier navigation of product info. The work that Tim conducted was methodical, and customer-focused and will support the business objective of driving more e-commerce sales. Thank you, Tim!"
- Emma Marsh, Head of Marketing @ Blatchford
What are the highlights?
The goal of SearchMe was to speed up the search process across various messaging apps, rather than creating a new messaging app. Through the research conducted, it was discovered that people have multiple messaging apps and were short on time. The design journey that led to the creation of SearchMe is outlined below.
Problem statement
The product pages, on the Blatchford website, lack consistency in formate and layout. This results in a fragmented user experience. There is a need to develop a unified design that can be applied across all products, ensuring a consistent and seamless user experience.
My Role: UX Researcher - UX Designer - UI Designer
Tools Used: Pen & Paper - Figma - Microsoft Office Suit - MS Teams
Time On Project: 10 weeks, part time
To help keep this project short, I will only focus on the top of the page, above the fold. The same process was carried out for a complete redesign of the whole product page.
Success criteria
We will measure the success of the project by monitoring customer engagement with the product pages:
• Reducing the bounce rate.
• Increasing our click rate on the primary and other Calls To Action (CTA).
Research summary
Our research into user needs was conducted through a combination of user interviews and thematic analysis. I carried out the interviews via MS Teams, speaking with 5 professional users from 5 different countries and 4 patient users from 3 different countries. Additionally, we gathered insights from our sales teams across various regions to understand the feedback they were receiving. Below are summaries of the four key areas of research we focused on: business, competitors, professional users, and patient users.
What are the business goals?
Blatchford aims to increase orders through the website's e-commerce platform and free up resources for other goals. This will help increase revenue and market share.
What are the competitors doing?
• The industry leaders do not have e-commerce set-up on their websites.
• The websites are patient-focused.
• Clear consistent branding and layout.
• Above the fold is a photo gallery, product name, description and key information.
What did our patient users say?
All patients were interested in seeing lifestyle and product photos. It helps them to "visualise" themselves using the product. It is just as important to see "normal people" as it is to see high-level athletes.
The biggest question for patients is "How can this product improve my life day to day?"
“It's what gonna make my life easier. Day to day against the features that I need for different things... it makes a big difference for what I'm looking at...”
Professional
20%
Use the e-commerce system.
100%
Look for technical information and key features.
Prof.
Patient
100%
Want to know how the product helps them day to day.
75%
Look for technical information and key features.
What did our professional users say?
The professionals have little interest in the user stories, only 3.8% of all comments even mentioned user stories.
There is also a growing trend of patients doing their research and coming to the clinicians already knowing the product they want to be prescribed.
“Many patients... don't know about the clinical information on their prosthetics... they don't know how to choose the suitable product... we want to suggest to you to make the solution guide to find this suitable item...”
What does UX / UI best practice show?
Below is a computer screenshot of the top of the old product page. The Primary CTA "Order now" is below the fold, on a sidebar and has low contrast between the button background and the text. This poor position and contrast choice is emphasised by the results of user interviews showing that only 20% of professionals asked to use the online ordering system. This doesn't help the business goal of increasing e-commerce.
.png)
1
Lack of information above the fold.
2
Primary CTA is below the fold in the side bar.
3
Primary CTA has a poor contrast ratio of 2:1. WCAG’s min. accessibility guideline of 4.5:1.
4
Secondary CTA to empower the patient is on the side and below the fold.​
1
Key information available at a glance: Product name, description and key technical information, easily available.
2
100% of professionals look for technical information and key features.
3
Primary CTA above the fold for clear visibility and to increase conversion rates.
4
Secondary CTA above the fold for clear visibility and to empower the patient.
5
100% of patients want to see lifestyle and product photos. This creates an emotional connection and helps patients visualise themselves using the product.
1
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.
2
Key product information was changed to bullet points to keep a consistent visual language and reduce cognitive load.
3
The “Download documents” button was removed due to no one using it during testing. This reduces the number of choices available and increases the focus on the primary and secondary CTA’s.
Final solution - high fidelity
Using the design system that is already in use across the rest of the website, I worked with the original UX designer to make sure the new page design fit with the rest of the site. I also identified where new and updated UI elements were needed.
​
User testing showed a 3.8x increase in the user's awareness of the "ORDER NOW" button.
1
New in-page anchor link allowing clear and quick in-page navigation.
2
New secondary CTA aligns the aesthetics of the primary and secondary CTAs for consistency and reduced cognitive load.
3
Primary CTA update to increase accessibility to a AAA rating with a 7.7:1 contrast ratio. Greater accessibility leads to more users noticing it, producing increased conversions.
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.
Summary
This portfolio excerpt showcases a pivotal segment of my work with Blatchford, focusing on the comprehensive revamp and standardisation of their product page templates. Here, I effectively aligned business objectives, such as bolstering e-commerce sales, with the distinct needs of our two primary user groups.
​
An interesting insight emerged from the user interviews: both professionals and users noted that patients are doing more research before their appointments and often come knowing which unit they want. Previously, the perception was that the site should primarily cater to professionals. However, the user interviews made it clear that the website also needs to be easily understandable for patients.
Navigating the complexities of an existing website, compounded by incomplete style documentation, presented challenges and design constraints. This underscored, to me, the critical importance of clear documentation to ensure that all team members grasped the design rationale beyond just the current designer. Collaborating closely with another experienced UX Designer who had contributed to the original site, we maintained a cohesive visual language while introducing essential new elements to ensure optimal product page functionality.
Due to the relatively low UX maturity of the company, there were no established channels or allocated budget for easy access to current users for interviews and testing purposes. While this posed delays in the project timeline, it ultimately proved invaluable in informing our design decisions. Engaging with users from diverse backgrounds and locations worldwide was an enriching experience, offering valuable insights into their perspectives and needs.
​
Moving forward, the user interviews have highlighted areas for improvement, particularly the complexity of the site's architecture and the purchase funnel. These are among the key areas we need to focus on next to enhance the user experience.
Thank you for taking the time to look at my project. If you would like to know more or if you have a business proposition you would like to discuss please contact me.
Mobile phone layout
The mobile phone layout underwent similar changes to the computer screen layout, as described above. The sections are arranged to guide the user from an emotional hook, through detailed information, and finally to the "Order Now" CTA.
​
The "Order Now" CTA has been moved from the bottom of the page to the top, increasing its visibility. This leaves the bottom of the page free to promote accessories and related products, creating an e-commerce sandwich. These changes increase product awareness and lead to higher conversion rates.
.png)
Top of the page
.png)
Bottom of the page
Mobile phone layout
Many of the issues present in the computer screen layout are also evident in the mobile version of the product page. However, a more significant problem is that the primary "Order Now" CTA is positioned at the bottom of the lengthy page. This placement hinders user awareness of the e-commerce option. Our user research supports this, revealing that only 20% of our professional users are placing orders online.
Bottom of the page
