This is the first in a series of posts from me in which I hope to give you ideas to consider for testing improvements to page elements on Ecommerce sites following emerging best practices. In each post I will provide a wireframe summary of a typical layout showing key design elements, to give you a toolkit to review and optimize your pages.
In this first guide, we have focused on Desktop and tablet design and merchandising elements since in today's era of mobile responsive and adaptive web designs, the smartphone experience is usually simplified in style and content - so it needs separate treatment which we cover in our mobile marketing guide.
If you work in an ecommerce team at a retailer, or are involved in design for your client's accounts, then I hope these templates and tips will guide you along the design/re-evaluation process to maximise results your pages.
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. Other examples are included in our Ecommerce Bible with more detailed requirements on each component.
In the full guide for members I go into much more detail on individual page elements and look at more examples of how these apply in practice from UK and US-based ecommerce sites.
Use our wireframes and examples to test and create more persuasive Ecommerce designs to boost retail sales. Guide newly updated for 2016by James Gurd.
Download our Ecommerce Design Bible.
Other critical questions to consider in order to run tests for the home page include:
By James Gurd
James is an Ecommerce 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.
This blog post has been tagged with:
Web navigation best-practicesTurbocharge your results with this toolkit containing 9 resources
The E-commerce/retail toolkit contains:
Start your Digital Marketing Plan today with our Free membership.
Recommended Blog Posts
Create a co-ordinated ‘always-on’ digital marketing strategy for the whole customer lifecycle to boost conversions and retention It’s no secret that engaging your customers is crucial to achieving continued sales, and it’s also well known that it is usually far …..
Personalized marketing, as we know from our experiences as brand-lovers and as marketers, is the make or break of any e-commerce marketing strategy in a competitive environment Personalized marketing is all about offering improved user experience (UX) by serving relevant …..
E-commerce conversion rate and lead generation landing page stats for desktop and mobile devices for benchmarking averages across different industries As you will know, conversion rates are often used as a KPI to review the effectiveness of e-commerce sites. Naturally, …..
