Guides and Templates

E-commerce design pattern guide

Retailers - use our e-commerce design bible to review and improve your site experience and conversion

How will this online retail website design best practice guide help us?

We created this guide to give our members a definitive reference of best practice for the design of key website page templates essential in retail e-commerce websites. Since best practices for these page types are common on other types of sites, it is a useful reference for the design of all sites. For each page type, for example, the home page or product page, we have defined two wireframes with an explanation and examples of the core design elements that digital teams need to incorporate for desktop or mobile responsive sites.

The purpose of this guide is to give you 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 e-commerce teams, particularly in retail, with those involved in design from managers through to optimizers. The secondary audiences are agency-side digital teams and independent e-commerce consultants who are working with retail e-commerce clients.

What best practice recommendations does the e-commerce design patterns guide include?

The first edition of this guide focused on best practices for creating desktop web experiences for retail with the intention to add more detail on mobile-optimized experiences. In the second and third edition, our main focus has been to update guidance and examples on mobile-optimised responsive and adaptive experiences. We have expanded the coverage on best practices for mobile retail design through these features:

  • Mobile-specific best practice sections for smartphone and tablets
  • Mobile wireframes for all key page templates listed below
  • Screen captures comparing examples of mobile against desktop designs

What does the guide cover?

The guide shows best practice for these key steps in the customer journey

This guide is structured around a review and recommendations for 10 key page types that form the customer experience for retail site customer journeys::

  1. Homepage
  2. Category page
  3. Search results page
  4. Brand page
  5. Product list page (PLP)
  6. Product details page (PDP)
  7. Basket page
  8. Checkout – sign-in
  9. Checkout – delivery and billing
  10. Checkout – payment and order confirmation

The recommendations for each section follows the same structure and includes:

  • Best practice tips including multichannel and international recommendations
  • Mistakes to avoid
  • Measurement and optimisation tips
  • Key requirements checklist
  • Mobile-specific best practices
  • Wireframe templates for desktop and smartphone
  • Annotated retail examples for desktop and smartphone
  • Common features

Resource Details

  • Authors: James Gurd, consultant at Digital Juggler
  • Format: Comprehensive guide with checklists and desktop, mobile examples for different page types and elements

About the author

James Gurd

James Gurd

James is an e-commerce consultant and owner of Digital Juggler, an e-commerce and digital marketing consultancy helping retailers develop, execute and evolve e-commerce strategies and optimise their digital channel. With a background as a head of e-commerce and also agency side as Head of Client Development, he has experienced life on both sides of the fence. He has helped companies like A&N Media, Sweaty Betty and Smythson to manage RFP/ITT proposals. and been lead consultant on high profile projects for Econsultancy, Salmon, and Greenwich Consulting.

He is a guest blogger for Econsultancy, for whom he also writes best practice guides, regularly contributes to industry events and co-hosts #ecomchat, a weekly Twitter chat for e-commerce knowledge sharing.

For e-commerce advice and support, connect with James on LinkedIn and Twitter.

Business memebrship badge icon Professional Membership is required

Access this resource now

Professional members get full access to this and other resources in the E-commerce/retail Toolkit.

Learn more about Professional membership Already a Professional member? Login here Guide cover
Look inside content

Trusted by marketers all over the world

Since 2009 our toolkits have helped thousands of marketers in over 170 countries to hit - and exceed - their targets.
Will you be next?

Globe illustration
Smart Insight partner logos over 165,000 consultants, agencies, entrepreneurs and SMB's in over 170 countries.

Get better results

Make your job easier

Tenfold improvement

Learn more about business membership
Smart insights logo