We’ve selected the below resources based on both their popularity and the quality of the advice, and collected them into one time-saving list so you don’t have to constantly search around. For your convenience, we’ve organized them into the following categories:
- General eCommerce Design
- eCommerce Home Pages
- Product Pages
- Mobile Design
- eCommerce UX
- Designing eCommerce in Photoshop and Illustrator
1. Revered UX speaker, author, and advisor Paul Boag, gives his advice on eCommerce design 9-part free video class from Skillshare. If you’re a fan of his work, you’ll enjoy the intimate feel of these single-camera classes, which create a coffee-with-a-friend atmosphere. In a little over an hour, he covers topics ranging from switching design specialization, attracting eCommerce clients, reading analytics, improving your clients’ business, and increasing traffic. Both new and experienced designers will find a lot of useful advice and suggestions in this article, punctuated by screenshot examples from real eCommerce sites. While some of the advice is basic or common knowledge, it’s author Karol K’s take on these conventions, such as explaining image close-up mechanics or using progress bars at checkout, that make this a worthwhile read.Accounting for site design and beyond, our free ebook works as an all-encompassing guide for improving the returns on your eCommerce site across the board. We cover the process of building an eCommerce brand from the bottom up, including how to carve a niche in your market, best practices for improving growth and traffic, fail-safe tips for SEO, and how to prioritize the best marketing channels.This roundabout but nonetheless insightful article collects 10 pieces of design advice from a perspective of “what not to do.” Regardless of the catchy and playfully gimmicky format, the advice here is rock-solid, covering areas like taxes and why your shouldn’t over-emphasize security.
2. Key Ecommerce home page wireframe requirements
The key design elements of a home page are summarised in this wireframe:
Homepage
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.
Other critical questions to consider in order to run tests for the home page include:
1. Have we defined and understood the goals for the homepage?
2. Do we know who are core visitor groups and personas are?
3. Have we defined the core content components for our homepage to enable goals/satisfy key personas?
4. Have we identified web analytics requirements?
5. Have we defined content personalisation requirements?
6. Have we defined the navigational elements?
7. Do we have clear contact information?
8. Is it clear what we do for new visitors?
9. Do we give people a reason to shop with us?
10. Do we use persuasion techniques to influence visitors?
11. Do we have a mega menu to deep link people to relevant product pages?
12. Is the site search bar clear and easy to use?
13. Are we promoting our current marketing campaigns?
14. Are we promoting our current offers?
15. Do we provide relevant content to help visitors?
16. Have we made it easy for users to sign up to our newsletter?
17. (Multi-channel only) Is it is to find our local Stores?
18. (International only) Is it easy for users to select the store/currency for their local country?
3. How You Can Design an eCommerce Website That Converts Browsers into Buyers
I’m sure you’ve heard that your homepage is one of the most important pages on your website. Well, that is true but only if you are not running an eCommerce website.
No doubt, your homepage is a very important page and should never be neglected.
However, for an online store, your product pages are arguably the most important pages on your website.
Why? Because your product pages are where you turn browsers into customers!
While all the pages on your website collectively create the overall experience and branding for your online store, it is on your product pages where your customers will make the pivotal decision of “I’m buying this now” or “Meh, maybe I’ll check elsewhere.”
If you were to optimize only one thing in your online store, it should be your product pages.
So, how do you design a product page layout that can capture your customers’ love (and wallets)?
It’s not as hard as you think. Just follow proven methods by leading online stores, and techniques tested by leading conversion specialists.
There are no guessing or complicated design philosophies to master. Just follow this 2-part series to design your perfect product page layout:
Creating a good product page layout that your customers actually find helpful has nothing to do with design skills.
Yup, that’s right!
The key to creating a successful product page is to know what visual stimulus helps you attract the consumers you are targeting, and make them react the way you want them to.
I know this sounds like some sort of a Jedi mind trick, but bear with me and let me explain.
For example, research has shown that the color orange appeals most to impulsive shoppers, while the color blue and teal attracts the budget-conscious buyers.
You can pick the color of your add-to-cart button to match the type of consumers you want to attract — impulsive or budget conscious buyers.
(If you want to learn more about psychology of color and how to pick the right color for your website, see this guide)
This is why designing an effective product page, doesn’t actually require any hardcore design skills. You just need to:
Figure out what type of customers you want to attract, then
Use proven, field-tested visual stimulus to target these customers (we’ll go over these below).
Do you want your product pages to attract the type of customers you want and convince them to buy your products?
Of course you do, otherwise, why are you reading this post?
Knowing how to create a highly converting product page is a hot topic; countless research and tests have been done to understand what makes people want to buy a product or service.
You can leverage this knowledge to your advantage, so you too can build highly converting product pages.
4. Checkout page optimization is a frequently overlooked area for retailers looking for routes to increase online revenue.
Instead, many online business owners and managers focus on optimizing for the front end of the website –– creating beautiful designs, site experiences and merchandising product to push customers down a purchase funnel.
That makes sense. After all, this is your customer’s first impression of your business, and your first opportunity to convince them to stay, browse and buy.
But when it comes to buying, an online store’s checkout far surpasses any other element of the website in terms of importance — including CTA buttons, product page specifications, and other more commonly thought-of factors.
This is the time when you — unknown retailer — present risk to the consumer. There is a reason that 7 out of 10 shopping carts are abandoned. 20+ years after the advent of ecommerce, consumers are still wary of providing sensitive information such as credit card details unless a retailer can prove that it is trustworthy, secure and worthy of the sale.
There are multiple ways to increase consumer trust with your product at the checkout page. Further, there are multiple ways to reduce abandoned carts on the product page, in the shopping cart and at checkout.
I’ll cover all of these in this post, helping you to address the below reasons of why people abandon cart other than because they aren’t ready to buy.
Here is that full list:
61%: Extra costs (shipping, taxes, fees) were too high
35%: Didn’t want to create an account
27%: The checkout process was too long or complicated
24%: Couldn’t see or calculate total order cost up-front
22%: Reported the website had errors or crashed.
18% Didn’t trust the online store with their credit card information
16%: Delivery timeline was much too slow
10%: Didn’t believe the returns policy to be fair or satisfactory
8%: Didn’t see their preferred method of payment
.5%: Their credit card was declined
Now, it’s worth saying that I don’t believe there’s such a thing as an optimum checkout process. The results will always differ based on the demographic, product complexity, price point and various other variables and the best results are likely to come from continuous testing, monitoring and improvement.
However, I’ve worked on a number of checkout projects with merchants over the last few years and this post based on many of those experiences.
Here are the actionable tips I generally give to ecommerce businesses looking to improve their checkout experience and gain more from merchants who have started the process.
1. Capture the user’s email address early
Whether you like it or not, you’re never going to convert 100% of the users who reach the checkout page (or progress from the cart) – not even close. So, one thing I’ve always tried to do is grab the email address as early as possible, often as an independent first step.
This first step requires the user to enter their email address and choose whether they want to check out as a guest or create an account for later use. It also ideally performs a lookup to tell the user if the email address already has an account associated with it.
Hyphen Mattress has a really strong checkout experience and is a great example of how an initial email / user validation stage can be done as a first step (i.e. grabbing the email address). With either checkout process — checking out as guest, or creating an account — the first step is to input your email.
ecommerce checkout
The main objective behind grabbing the email address is for shopping cart abandonment campaigns. Without an email, you cannot launch your abandoned cart email series, which often brings back 15% of customers who add an item to cart, get to checkout and then decide not to purchase.
I’m also a big fan of systems like DotMailer and Ometria, which require a user to enter their email address in order to tie their behavior to a user, which allows for more personalized email marketing.
Using connections built by companies like Windsor Circle for BigCommerce –– or whichever ecommerce platform you use –– will allow you to sync data in real-time between your online store and a more personalized email provider like DotMailer.
Here is a backend view to show you exactly what you can do to implement this process. Keep in mind, this only works if you grab email addresses early and often.
checkout optimization
Easily create marketable customer segments based on specific behavior.
best checkout ux
Track how those segments perform.
If don’t need abandoned cart segmentation that’s so advanced, capturing the email address early in the process is still incredibly important to trigger regular abandoned cart flows. You can set those up out-of-the-box with BigCommerce or through other email providers like MailChimp, Dotmailer and Klaviyo.
We're an expert eCommerce website design company offering the following services:
i. Wireframe Creation & Discovery
The first step in the eCommerce web design process is to develop an outline of the website and all pages included. Think of the wireframe as a blueprint for website project. Through an in-depth discovery process, we'll understand your front-end design and back-end functionality needs.
ii. Custom Website Design
Starting with a blank white page, we go through a full custom design and branding process. Our creative team will design an eCommerce website that not only looks great, but it built with functionality in mind.
iii. Checkout & Credit Card Processing
Whether you need a basic checkout or a customized checkout process, our development team can handle your needs. We also integrate with many standard eCommerce payment processors and can do custom payment gateway integrations.
iv. Custom Functionality
If you're looking to create a unique website or have custom business rules to make managing your eCommerce website easier, we have the in-house development team to stand behind your requests.
v. ERP / Amazon / eBay / Marketplace Integrations
Integrate your website with your ERP system or other 3rd party services. These integrations will help keep data synced, provide data in real-time and give the best experience possible to your website users.
vi. Email Marketing
eCommerce email marketing campaigns are one of the highest converting marketing channels available. We'll not only integrate your website with your email campaign provider, but we can also help design and develop effective strategies.
vii. Product & Data Imports
Pulling over current product data, customers or past order history is just a few examples of the data imports that are often completed. No matter the data you need moved or the size the scope, we're highly experienced in managing these tasks.
viii. SEO Friendly Development
Our in-house SEO team makes us nations #1 rated eCommerce SEO service provider. Our marketing experts will be involved in your project from beginning to ends, assuring your launch is smooth and ranking are retained and raised.
ix. Site Navigation.
Site navigation should be simple and all the questions a consumer may ask should be answered along the way. Where possible, adhere to the "three click rule" - that is, a visitor should be able to access any information regarding your product or service within 3 clicks of any other area of your web site. Pay close attention to cross-browser compatibility issues as many complex menu systems play havoc with browsers.
Recommended pages.
Along with the home page, your sales pages and the shopping cart, I recommend implementing the following web pages as part of your ecommerce site:
About Us Page.
The "About Us" page is crucial to boosting consumer confidence. It provides a summary of the business, your commitments and direction.
While we are all protective of our privacy, online business is no different to traditional business in that we all like to 'put a face to the name' - we need to reassure our site visitors. When purchasing goods online, I always go to the 'About Us' or company profile pages before parting with my money (especially after one bad experience - another story for another time). The page should also provide other contact details for your business and your various registrations, associations and affiliations. View further information relating to "about us" or company profile pages.
Privacy policy.
What are you going to do with my information? - a question asked by many online shoppers. Putting together a privacy policy doesn't necessarily require a legal team! Learn more about developing Privacy statements.
FAQ's (Frequently asked questions)
No doubt you'll be asked many questions about your product. Many of these questions will be repetitive. It's these questions and answers that you'll want to add to your FAQ page. This promotes customer confidence and saves your valuable time. A prospective client may be somewhat hesitant in asking questions and this hesitancy may translate into a lost sale. A well-constructed FAQ will help coax these online customers into purchasing.
Testimonials page
A dollar value can not be placed upon positive client testimonials; this is some of the best promotional copy around. Elicit feedback from your current customers and ask their permission to publish their comments on your site.
& Many Other eCommerce Services
