Recommended design patterns and best practices for retail home pages
A successful ecommerce home page is one that engages its customers from the moment they see it. One way to ensure that you create a successful home page is to test improvements to page elements on ecommerce sites, following slowly emerging best practice.
This piece focuses on desktop and tablet design and merchandising elements on a home page, remembering that in today’s world of mobile response and adaptive web design, the smartphone experience is often simplified, so that will be explored in a guide.
We’ll take a look at a wireframe summary of a typical layout showing key design elements, providing a toolkit to help you review and optimise your site. If you work in an ecommerce team at a retailer, or are involved in design for your client’s accounts, then these templates and tips should guide you along the design/re-evaluation process to maximise results.
Key Ecommerce home page wireframe requirements
The key design elements of a home page are summarised in this wireframe:
The template above outlines the core elements of an ecommerce homepage.
Please note that the UX/UI design patterns used will, of course, vary from site-to-site and the extent to which each component is used (e.g. how much content is put into each component, how far it scrolls down and across the page, what images & copy are used etc.) is dependent on the unique requirements of each website.
For example, niche premium retailers most often have a cleaner design that is focused on the brand in comparison to large catalogue retailers who adopt a stronger merchandising focus.
The template is intended to act as a good practice framework for you to understand the key elements of an effective ecommerce homepage that you can then discuss within your team or with agencies to adapt to fit to your business and audience needs.
Here is an example of how different page elements varies for John Lewis. Further details can be found within James Gurd’s Ecommerce Design Bible.
There are obviously more details to consider in terms of individual page elements, and how they should be applied in different environments, such as UK or US based ecommerce sites.
But remember to keep certain critical questions in mind when running tests for the home page:
- Have we defined and understood the goals for the homepage?
- Do we know who are core visitor groups and personas are?
- Have we defined the core content components for our homepage to enable goals/satisfy key personas?
- Have we identified web analytics requirements?
- Have we defined content personalisation requirements?
- Have we defined the navigational elements?
- Do we have clear contact information?
- Is it clear what we do for new visitors?
- Do we give people a reason to shop with us?
- Do we use persuasion techniques to influence visitors?
- Do we have a mega menu to deep link people to relevant product pages?
- Is the site search bar clear and easy to use?
- Are we promoting our current marketing campaigns?
- Are we promoting our current offers?
- Do we provide relevant content to help visitors?
- Have we made it easy for users to sign up to our newsletter?
- (Multi-channel only) Is it easy to find our local Stores?
- (International only) Is it easy for users to select the store/currency for their local country?
For more information, check out Strategic Insights Ecommerce design pattern guide, a 115 page guide with checklists and examples for different page types and elements.
http://www.smartinsights.com/guides/ecommerce-design-patterns/
It provides a comprehensive reference of best practice for the design of key website page templates used in retail ecommerce websites. For each page type, for example a product listing page, we have created a template with an explanation and examples of the core design elements that digital teams need to incorporate for desktop or mobile responsive sites. It is a toolkit to use to review tests to optimize existing templates, or alternatively as a blueprint that can be adapted when you are planning a site redesign.
The primary audience for this guide is members or ecommerce teams, particularly in retail, with those involved in design from managers through to optimizers. The secondary audiences are agency-side digital teams and independent ecommerce consultants who are working with retail ecommerce clients.