Challenge
To create an e-commerce site for a fitness ring with a subscription feature. The target audience is health-conscious individuals who want to track their everyday activities to maximise their health.
Solution
I created a website for a fitness ring product that included an above-the-fold landing page, product page, checkout flow, and order confirmation page.
I used engaging CTAs that clearly informed the user what the next steps would be, reducing friction and guiding them seamlessly through the purchase journey.
I conducted qualitative usability testing to test various different headlines and phrasing in order to find out what copy would resonate most with the audience
1. Home page
The home page is the first stage in the user journey and it’s important to capture the users attention with copy that connects with them immediately.
Through the headline ‘Take Control of Your Fitness with Biometric technology’, it speaks directly to the users who are on their fitness journey and looking for products that will help them. A key feature of the product is the ‘Biometric Technology’, so this was highlighted as it is a key differentiator between others on the market. The headline matched with a clear subhead helps to reinforce the message that this product will help them reach their fitness goals.
I used a CTA of ‘learn more’ instead of buy now or shop now, as this informs the users that they are not committing to purchasing the product at this stage.
Through qualitative usability testing, I tested the headlines ‘Take Control of Your Fitness’ vs ‘Own your fitness’. I wanted to test out these 2 headlines as they are similar in wording but can evoke different emotions from the participants. The testing revealed that most users preferred ‘Take Control of Your Fitness’ as it felt empowering, action‑oriented and reinforced personal responsibility.
Based on these findings, I decided to use the headline as ‘Take control of your fitness’ as this seemed to resonate with the participants the most.
2. Product page
On the product page, I focused on presenting key information for the user in a clear way. I highlighted key product features in a way that stands out to potential buyers. Through user research, I discovered that features such as ‘28-day battery life’, ‘accurate data tracking’ and ‘in-app support’ are what users valued the most in a fitness ring product.
Ring sizes can often be an area of confusion for many individuals, so a key featured offered with this product is a ‘free sizing kit’. Understanding that this may be a product people are unfamiliar with, I utilised tooltips to provide additional information. This allowed me to keep the interface clean while still offering helpful detail on demand.
3. Subscription Benefits
In the ‘Elevate Extra Membership’ section I highlighted key features in an easily digestible way, using concise content and visual hierarchy to ensure important information could be scanned quickly.
Once a user adds the ring to their cart, they will be met with a pop-up screen where they are given the option to add the elevate extra subscription to their cart. Here, they will be met with a discount offer for the subscription and additional benefits highlighting the service.
The CTAs are very clear for the user, they can either add the subscription to the cart or skip this for the time being. Through qualitative usability testing, I tested the CTAs “skip for now” vs “continue to checkout”. All users preferred ‘skip for now’ as this provided them with the most clarity that the subscription was not being added to the cart, so I decided to stick with this CTA.
4. Subscription Pop-up
As users reach the checkout page, they are presented with information that they would be familiar with from previous online shopping experiences. This presentation was intentional as I want to reduce cognitive load. At this point I want this process to feel as easy and seamless as possible for the user so it lowers their chances of leaving the page.
I used clear progress indicators at the top of the checkout pages with supportive, guiding messaging. This shows the users where they are in the journey and how many steps remain, reassuring them that completion is close and reducing the likelihood of drop-off.
5. Checkout Page
The final step in this process is the confirmation page. This page reaffirms to the customer that the order has been successfully placed and provides clear next steps, including delivery expectations and order details, helping to build trust and reduce any post-purchase uncertainty.
The delivery status is presented with clear imaging that the user would immediately understand, but is also backed up with affirming copy to confirm the status.