Whether it’s purchasing a product, engaging with your content, or signing up to enter the latest competition, we believe the value of UX design for your customer lies in their perception of how your eCommerce experience makes them feel.
However, people are like water - they will naturally take the path of least resistance. And unfortunately, it’s highly likely that your website is getting many things wrong, all of which are creating resistance in the minds of your customers. This ultimately leads to them not engaging with your brand and not purchasing your products.
This Playbook was made for you. It’s been designed to give you a detailed glimpse into our design process, providing you with actionable advice and clear guidance on areas to look at when looking to maximise the growth opportunity for your eCommerce website.
This is how we believe eCommerce UX should be done.
How to best serve your customers
The importance of eCommerce UX
We’ve distilled our knowledge from years of working on large scale eCommerce websites, conducting user research and data analysis so we can share what best practice eCommerce UX design looks like with you.
Each section of the Playbook mirrors a section of our eCommerce UX Health Check. It’s a simple, step-by-step process we undertake with each of our clients that helps us build a clear picture of where improvements can be made to your website.
Together our Playbook and Health Check encapsulate all of the expertise and experience we’ve developed since we opened our business in 2007.
1. Homepage - Set a fantastic first and lasting impression
2. Navigation - Get this right and you’re halfway there
3. Product List Pages - Provide the right tools to find the right product
4. Product pages - Create a sense of desire
5. Basket & Checkout - Smooth the way to purchase
6. Customer Services, Delivery & Returns - An exceptional ‘last mile’ experience
If you feel overwhelmed and don’t know where to start, addressing the fundamental areas outlined above will result in you being better equipped than many competitors.
Homepage
Setting a fantastic first and lasting impression
The homepage sets the tone of your brand messaging and services both new and returning customers as a “shop front” from which their browsing experience begins.
A strong first impression will shape a new customers’ perception of the brand and influence if they choose to continue further. They’ll be seeking to answer:
“Is this a brand for me?”
“What can I do on this site?”
“What range of products does this brand sell?”
Answers to these questions are achieved through a deliberate and focused curation of design aesthetics, product merchandising and copywriting that is suitable for and resonates with your audience.
Returning customers will be looking for clearly signposted pathways into seasonal content, sales or new arrivals. Above all, the homepage must be fast loading, clear in message and function as a useful gateway into your product catalogue and content.
EXAMPLE | Wrangler homepage Born Ready campaign
We created a memorable first impression for users by connecting their location data with live weather data to deliver personalised messaging and product recommendations on the homepage - an initiative that helped achieve a 49% increase in revenue.
Check list - Does your site perform in this way?
- Set a good first impression with an aesthetically pleasing layout with large, high-quality bespoke imagery
- Use descriptive button and link microcopy - not ‘shop now’, ‘view more’ or ‘continue’
- Place a primary content CTA clearly above the fold on mobile
- Apply an appropriate delay before triggering a newsletter signup interstitial
- Use a USP bar to highlight benefit-oriented clickable messages
Navigation
Get this right and you’re halfway there
We see many brands treating navigation as the tedious cousin of the product page - left ignored to stand alone in the corner of the dance hall. Brands often hide navigation under a burger menu on desktop sites (please don’t do that) or forego investing in a deeper consideration of the best structure for their catalogue altogether. Yet, navigation is the key element that users rely on to manoeuvre through your website and to make sense of your offering.
Make no mistake, failing to get your navigation right will severely hamper both your customers’ browsing experience and the commercial efforts of your brand.
A first class navigation is achievable, and we can show you what one looks like. A well designed navigation presents a website structure that makes sense to your customers, and you can verify this by testing it with them. A great navigation will use descriptive, non-technical link titles. It will be consistent across mobile and desktop. It will draw attention to the key tasks customers will want to perform on your website, and is designed with both aesthetics and ease of use in mind.
EXAMPLE | Lee navigation mobile optimisation
We combined site usage data and user research findings to inform design experiments which we trialed through A/B testing. This process resulted in a tried-and-tested optimised navigation structure and design that gave users faster access to the most popular products and clearer key journeys through the site.
Check list - Does your site perform in this way?
- Provide a clear visual hierarchy that distinguishes categories from sub-categories and their links
- Provide a mobile navigation pattern appropriate for the site’s IA: accordion, sequential or section
- If phone support is important, have click-to-call available at the top of every page on mobile views
- If physical stores are an important sales channel, include a store locator icon in mobile navigation
- Design buttons and links with clear affordance and provide visual engagement feedback
Product List Pages
Provide your customers with the right tools to find the right product
Customers arriving on product list pages (PLPs) are keen to discover if you have the right product for them. And quickly.
For this task they will rely heavily on filters to narrow down potentially hundreds of different options to a more manageable selection.
The success of this moment in the customer journey therefore requires brands to provide filtering functionality that will do all the heavy lifting for their customers.
Thoughtfully implemented filters will: allow customers to see how many product matches each filter value contains, see an updated product list as filters are applied and allow them to free up screen space by minimising the filter options.
Equal to good filtering functionality, the product list layout itself needs to be a hard working piece of design. It must be fast loading and organised in a way so customers can swiftly focus on potentially relevant products. This is achieved by providing accurate images that highlight product features, alongside descriptive product names that are inclusive of essential attributes. The incorporation of lifestyle images here further helps customers imagine how a product might fit into their lives - how they might wear or use a product.
Weakness in any of these and the user experience suffers.
EXAMPLE | Persuasive lifestyle imagery
The incorporation of lifestyle images within the grid further helps customers imagine how a product might fit into their lives - how they might wear or use a product.
Check list - Does your site perform in this way?
- Reveal an alternative view of product on hover - ideally lifestyle imagery of the product in use
- Provide a filter summary view with both ‘clear’ items and ‘clear all’ options
- Offer user control over the size of the list images (small or large)
- Better utilise screen space with responsive upscaling of the product grid
- Consider adding urgency elements to product items such as low stock indicator
Product Detail Pages
Create a sense of desire
Think of your product detail page (PDP) as the pivotal moment in your customers purchasing decision process. It’s ultimately on this page where they’ll determine if they purchase from your site. A successful product page needs to do the following for your customers:
1. answer all product related questions,
2. allay concerns regarding delivery and returns costs, and
3. create a sense of desire that motivates them to purchase.
With this trinity in mind, how well does your PDP perform? Does it include imagery of the product in use as well as flat or ‘cut out’ shots? Are unbiased customer reviews provided, preferably via a trusted 3rd party? Has content been optimised to be skimmable with both long and short form copy? Is there microcopy communicating the delivery and returns policy? Has high quality visual merchandising imagery been created that allows the customer to imagine the product fit to their lifestyle and needs?
It’s on the Product Detail Pages, where we’ve observed that even small issues will often cause direct website and cart abandonments.
EXAMPLE | Product merchandising
Users are offered a number of ways to inspect product features such as extreme zoom functionality, close up imagery of stitching detailing and the all-important on-model imagery.
Check list - Does your site perform in this way?
- Allow zoom functionality to occupy at least 50% of page width on desktop - 100% on mobile
- Include lifestyle images with the product in a usage context and at correct scale
- Choose a unique button colour for conversion pathways through the site
- Provide either ‘tell me when in stock’ or backordering on relevant products
- Use an individual size button for each variation instead of a drop down
Basket & Checkout
Reduce friction and smooth the way to purchase
At this point your customers have come a long way - they’ve invested significant time evaluating products offered by you and competing brands, weighed up their budget flex and whittled down a large product catalogue to identify the right product for their needs. They’ve scrutinised the product images in detail, read customer reviews and specifications while ensuring the delivery and returns costs are convenient. It’s quite a journey!
It’s now crucial your brand provides an effortless path through the purchase process that is unimpeded by distractions or frustrations.
To do this requires an optimised checkout flow tuned to the needs of your customer: Do you provide a persistent editable order summary throughout the checkout? Do you offer rapid checkout or digital wallet options? Is your checkout form streamlined to 8 fields or less? Do you allow customers to email themselves their basket so they can continue on another device?
And just as importantly, do you follow up with a purchase confirmation experience that is a memorable, delightful or helpful moment?
EXAMPLE | Bear Grylls 'Added to Bag'
Providing both ‘go to checkout’ & ‘continue shopping’ options in the added to basket message gives customers the choice to continue their journey easily.
Showing this ‘added to basket’ information in an overlay rather than redirecting to basket keep users in their current flow rather than pushing them to checkout.
Check list - Does your site perform in this way?
- Automatically update cart summary when item quantity is altered - avoiding ‘update cart’ buttons
- Reduce exit points once the user is in checkout
- Place labels above fields not as field placeholder text
- On forms use inline validation and autofill and consider including postcode lookup
- Consider running an address validator to verify information format & spelling supplied by users.
Customer Services, Delivery & Returns
An exceptional ‘last mile’ experience
While fostering a positive and lasting impression starts on your website’s homepage, an exceptional ‘last mile’ experience is undoubtedly where this relationship is cemented. After all, it’s only when the product arrives in the customer’s hands that the sale is complete.
A good experience at the last mile therefore has the potential to ensure happy customers become repeat customers and advocates for your brand.
Meeting today’s customer expectations requires brands to put customer convenience at the forefront of their service strategy. Which of the following do you offer?
- A flexible delivery service offering nominated day, time slot or priority delivery options
- Free returns that are possible through the customer’s channel of choice: courier collection, post office drop off or in store processing
- Swift response times to queries - brands initiating a response to live chat queries within 3 minutes while customer enquiry emails should be addressed ideally within 12 hours
- Providing continuity of brand voice in the unboxing moment with thoughtfully packed and ‘unboxing’ worthy parcels
Roundup
Over these pages we’ve covered the key points that you can return to again and again when you are auditing your eCommerce site or building your next online store.
We believe that by integrating UX design thinking and applying the correct principles and methods, you can add huge value to your brand, your eCommerce platforms, and your customers
And by identifying where you are today, you can begin to resolve why your customers may not be engaging with your brand, or may not be purchasing your products in the way that you expect.
We hope our Playbook has provided you with a manageable starting point and given you some inspiration to take action. If you need help in implementing the changes and checking for further improvements then please feel free to draw on our expertise.
Your customers are the ultimate source of all eCommerce revenue for your brand, so putting them at the heart of your thinking is always going to be great for business.
Now you’ve got the basics, what’s next?
The benefits of doing a Health Check
At RetroFuzz, we start every partnership with a client by defining the “right thing” to do.
We do this by performing our eCommerce UX Health Check for every new client. The eCommerce UX Health Check is a simple, step-by-step process we undertake with each of our clients that helps us build a clear picture of where improvements can be made to your website.
The RetroFuzz eCommerce UX Health Check will arm you with:
- A new understanding of where your website can be improved, and where your customers may be feeling frustrated, and
- A prioritised plan of the most impactful fixes of the identified issues, that elevate your website to a higher performing, first-class user experience
To see if a Health Check would help transform and add value to your business, schedule a call with Jonathan McNamara, RetroFuzz CEO.
.png)
