It is a mistake to think of an E-commerce platform as just an online store. A poor design makes it hard for your customer to interact with your business. Which leads to low sales, customer abandonment, and a loss in revenue.
The key thing here is the word “just”. It includes a lot more that doesn’t exist in a conventional shop. It takes into consideration a lot more like the number of clicks, pages visited and time inside the page.
It’s important to take seriously the design of every e-commerce store since it is the bridge between your customers and your business.
This article is not a must-do guide for the experience of a user of your e-commerce site. It’s just a list of considerations to take into account when developing one. There is no such thing as a definitive answer in a field that is constantly evolving. And it is up to you to use this and any information that you encounter with the most care. Use your experience, your intuition, and the metrics of the site to determine what works for you.
Customers
We can all agree that everyone is not the same. Your customers will explore your page with different goals in mind. Here is a brief consideration of the type of customer:
Based on the Product: They know what they are looking for. They have a goal in mind and they are going to find it. Give them the tools to achieve that goal.
Based on the Navigation: They have time. They want to search and see things around them. They might stop the search one day only to continue the next one.
Based on the Investigation: They would like to have all the information possible to make an informed decision. Things like prices, quality pictures, addresses, and reviews. Every relevant information that you could give them.
Bounty hunters: They want to buy the best products for the best price. Things like the discounts right next to the “original” price it’s very compelling to them.
Occasional purchase: They could be one of the above but they could have found your e-commerce by chance, or by a gift card or something. Make sure that your site allows you to buy without registering or at least explain the benefits of doing it.
With that notion in mind, let’s dive into the specifics.
Search
The search must be at the heart of your business. Google made a whole empire based on a search engine. Youtube, at its core, is a place to search and watch videos, without the search component the platform would be a flop. Let customers go forward and back whenever they want.
Pay attention to the categories and subcategories of navigation. Remember to allow the exploration of a category as a whole instead of just automatically using a subcategory.
The search bar is very important. Take it very seriously. If you can add relevant suggestions and autocompletion then do it. And don’t forget to make it as simple and intuitive as possible, but with additional options for advanced users who want to make a specific type of search.
And don’t hesitate to add filters.
Well, this is not only to make your business more transparent to your customers but also because it allows people to analyze and compare the products that you're offering. Whether with another store or other products that you have in stock, people will make comparisons, so make that information accessible.
Again, make a detailed description. Don’t saturate. You can make a summary, add a button to "read more" or do anything that alludes to the information that you have without clouding the page with information.
Make the price comparison easy, like adding the original price, the discounted price and how much the customer is saving. Also, remember that offers help to cause that sense of urgency.
Some people will give you their email for a newsletter, but only if you make it clear that they will find out more discounted prices, rare products, or relevant information for them.
Add information about the company. This will make it seem trustworthy and will send a message of professionalism to everyone who visits your e-commerce, investors included. That's related to the social proof that you need.
Make a "similar products" or "suggested" products section on the product detail
This is only an idea since it could backfire by leading to decision fatigue of the abundance of choices. So bear in mind that you need to make the information digestible. That's related to information theory.
Social Component
Allow people to share this product.
Add links to similar products.
Highlight products on offer or new products or more bought or whatever.
Comments and reviews, both good and bad because both sides of the opinions are valuable and it will make your site more transparent.
Buying process
Simplify the shopping and checkout process.
Make easy the usage of coupons, you can apply them automatically if necessary.
Make e-commerce able to buy without registration.
Clear distribution of the information.
Pages
Home
It needs to answer the doubts of the customers. You can use it to show the catalog or to show links to where to find those catalogs or something.
The home page is meant to be the first thing that your customers will see, just like a shelf in a store. You can ask yourself, what products do you want to show first to the customers? What things can you show them so that they keep buying?
Make it clear that this is e-commerce.
Allow them to buy on the home page.
Give them access to the catalog.
Information architecture.
Buying and selling process: types of payments, devolution policy, delivery options, etc.
Build thrust:
Make the URL as simple as possible.
Make it simple, with this I mean don't saturate with information and link the customers.
Make it clear what and how you sell so that customers can understand it as soon as possible.
Add links to relevant information like policies, solutions or navigation, etc.
Be concise
The navigation must be clear and repeat like a pattern. Be consistent on the whole website.
Things like menus must be always accessible, and make it easy to access core functions like shopping cart, catalog, etc.
Category pages
They show and present the categories to the users. They are the bridge between choosing a category and a product or a list of products.
They represent order, so they can't be messy. And don't automatically move users to the subcategories. Don't saturate them with information. And show the levels of navigation so the user can move in the app and categories.
Product List pages
Present.
Show.
Categorize.
Show the name of the product, price (always), add other options if they are available, availability now and in the near future, pagination (it tells that there are more products), and don't overwhelm with the suggestions, and quality images (this is important because many people buy after seeing a good set of images and show detailed views and everything).
Show which links they have seen (like Google does), and add personalized products and attention. Add filters and orders for choosing the sort order and filters and such.
Product page
This is where the user starts to make the choices in the buying process. This is the best sales agent for your site. They will compare your products with those of your competition.
Reviews
Images: don't forget not only to show the product itself but also in context.
Description: They want clear descriptions, you can add different stages of the descriptions, like the technical ones on one side, and the general description on the other.
Price.
Discount: you can add them automatically if they have a coupon or something that it's related to some promotion, and show the discount price and all its benefits.
Name.
Availability.
A clear way to buy or add to a cart or something.
Categories.
Navigation.
Zoom into the images.
Delivery and buying options.
Variations.
Talk in the language of the users. What you show is what you sell, don't make shady businesses with fake images or descriptions.
Reviews
Show the good and the bad ones, present summaries and show more options for the reviews.
Checkout
Order the steps just like the users expects them.
Show the progress and the steps in the process.
Minimize distractions.
Add clear buttons for the process, like a go-back option, the step before, the step forward, and the cancel, (save the state of the whole thing on redux or something).
Only ask for relevant information about that shopping process.
Justify why are you asking for each piece of information, and add a description of the name of that field, use a title attribute, or use HTML and CSS to make a floating info panel on hover.
Don't ask for the same information or information that you already have
Update the information each time that it changes for the next checkout
Autocomplete the fields with the info that you have, but allow them to be changed.
Use clear tags and add hover descriptions to those fields
Generate long enough input fields for each field. And make sure to use the right tags for input, like numbers for numbers, and text for text.
Some users will use the "Enter" or "Return" keys to go to the next step.
Allow users to correct or change their info at any point.
Don't preselect like you were the user.
Error messages
They need to explain what went wrong. Be clear and concise.
They must appear next to the input field and don't overwrite the other fields.
They need to explain how to correct and solve the problem and be clear and concise.
Use red for the errors, because if you use it in other messages or things on the app then it will lose effectiveness. Take into consideration the users with visual impairments
Solve or show a possible error before it becomes a barrier when pressing the button or "enter".
Explain what you want with each field so that the error is less recurrent
You need to show that the cart works and that it makes sounds or animations or something each time that they add something. The user must be able to config that.
Make clear the "buy" button and the "add to cart" button. The button "remove from the cart". And the quantity and total and discounts next to the total, be creative, remember that there aren't clear rules on this, only suggestions.
Explain what to do when the buyer and the receiver are different, like using a QR code or something.
Show what is on the cart.
The cart must be present at all times on the pages.
Add a "keep buying" button.
show links to the policies like devolution and such, and don't overwhelm with information.
Allow to change and modify the content of the cart. Always save the state of the cart.
Navigation
Avoid empty categories and/or catalogs. Remember that with each click the user must get closer to reaching their goal.
Categories trees, bread crumbs, and stand-alone categories and subcategories are important.
Show relevant information and navigation for the user, you can highlight some products in the navigation.
Some products are part of multiple categories or needs.
App Navigation
Remember to pay attention to trends or make your own, the tabs were really important, nowadays are the bottom tabs and drawers.
The hamburger menu and such are easy to recognize. It needs more than 4 categories, and if there is a lot of information it will become a disaster, and for those users that don't use too much internet then it might not be that intuitive.
The bottom navigation allows exploring the app with the dumb.
Registration
It must be optional, and they need to offer clear benefits to justify the process to the users.
You can use the email as usernames, don't have to allow them to create a username. But it's up to you.
If it is obligatory the registration, explain why and the advantages.
Give space for:
registered users.
about to register.
guess users.
Add the logout button.
Delivery and shipping options
Show the price of the shipping.
Allow them to choose.
Don't show choices that do not apply to the user or product.
Show info about the delivery company, and possibly about the delivery person.
Show the estimated date or time of the delivery.
All in one price, even if they are more than one product.
Allow the user to add instructions for the delivery.
Add the precedence of the product (this is completely optional, it depends on the type of product and business).
Show complete information like phone number, localization, and times. And, if applicable, the delivery options or where to pick up the product.
Totals and cost
Show all the individual costs.
Show the discount costs.
Show the total cost.
Show the total cost with the discounts.
Add instructions when where to find the info that we are asking
Show familiar images like a credit card for payments.
Allow adding coupons in the right place to avoid friction.
Show the money available like in a gift card or the wallet or general balance or whatever.
Make simple code names.
Resume (page)
Show all the details in a resumed way (and view more if you need to) of the buy.
Add in the whole process the option to cancel the process.
Show all that information and allow the user to confirm.
You can think of it as a ticket:
A "thank you" + name or something.
A number of the buy or whatever.
Info for the follow-up of the process.
A PDF or a printable option for the user.
A "keep shopping" button.
A logout button (this one is optional, for the users that want to exit the process securely).
And, that's it. Remember, these aren't absolute rules to follow, they are only suggestions. It's up to you to find the best user experience for your e-commerce, and that's the most exciting part.
If you have any idea or want to point out some mistake that I made, write a comment below, I will read it and I'm sure that we will find a solution for it. I hope that you make fantastic sites with this information that I wrote.
Follow me on Twitter, LinkedIn, Github, Instagram, Medium (For more opinion based posts), and here on Hashnode and my Hashnode blog.
Have a nice day and until next time. Bye.
