Shopify Website Design for a Fitness Equipment Company: A Case Study
Summary: I designed a Shopify e-commerce website for Ab Roller to sell fitness equipment. This was a temporary website that allowed them to generate revenue while they switched all of their sales to Amazon.
View The Final Design Images
Use the links below to see a larger version of each image.
The rest of this page will discuss my strategy for designing these pages.
About The Product
Ab Roller sells multiple fitness products focused on building your abs. Their most notable offering is the original Ab Roller, invented by Don Brown in 1994. With over 10 million units sold worldwide, this product revolutionized the way people perform crunches.
No E-Commerce Website
After their direct response website was discontinued in favor of retail sales, Ab Roller no longer had an e-commerce website. At the time, they were offering two new products plus the original Ab Roller and were eager to start selling online again. The company’s goal was to sell exclusively on Amazon, but in the meantime, they wanted to generate sales through their own e-commerce website.
I was the UX website designer for this project. I communicated with the company’s inventor and co-founder. My responsibilities were to:
- Design a website that would sell their products so the company could generate revenue while they switched exclusively to Amazon.
- Build this website using a reliable e-commerce platform.
I chose the following solutions based on the project’s requirements, my own research, and my past experience with similar projects.
Build The Website Using Shopify
Shopify is a leading multi-channel commerce platform and shopping cart that powers over 500,000 businesses.1
Shopify was perfect for Ab Roller because the company sold multiple products, needed an online presence, and wanted the ability to automatically send orders to their fulfillment center for shipment to customers.
This was a fairly simple website design project. The goal was straightforward: to provide a professionally designed website that would sell the products.
Use Turbo Theme as a Starting Point for Design
I researched Shopify themes that I could use as a starting point for designing Ab Roller's website. My research led me to the Turbo theme: a high-quality, fast, scalable, powerful theme made for Shopify e-commerce stores.
A home page should introduce visitors to the website, company, and products. I achieved this by designing an effective introduction by incorporating an image of someone using the company’s original Ab Roller. I also inserted a "Products" link in the navigation menu that would take the visitor directly to the products.
Products Category Page
The "Products" link took the visitor to the Products Category Page, where all three products were listed. The products were presented in order from most basic to most sophisticated, as indicated by the products’ prices and names: original, elite, and extreme.
Ab Roller Original
This page sold their original Ab Roller device. The basic-level product.
Ab Roller Elite
This page sold their Ab Roller Elite device. The mid-level product.
Ab Roller Extreme
This page sold the Ab Roller Extreme. The high-end product.
These are the outcomes Ab Roller gained from their new Shopify e-commerce website.
Ab Roller had already been selling in retail stores, and now they were able to generate sales online via search engine traffic using branded search terms.
More Marketing Opportunities
Selling online brings greater opportunity by being able to develop an email list and CRM database, and to market on social media and paid channels.
As noted above, this was a temporary website, so the project requirements were minimal. While the site was professional, clear, and visually appealing, in my opinion it lacked some features a visitor would normally like to see. These include:
- Quick product comparison
- Video demonstration
- Differences between the products’ materials
- Product recommendation for certain people
Make Your Value Proposition Clear
It’s important to ask yourself, “Why is my product better than those of my competitors?” Ab Roller has a lot of competition, so it was important for them to distinguish why their product is better than others. They enjoyed a competitive advantage in that they are the "Original Ab Roller" brand, so they decided to focus on this distinction with this temporary website.
1 - https://www.shopify.com/press/releases/shopify-now-powers-over-500-000-businesses-in-175-countries