I’m confident your online store features a great selection of high-quality, trusted products. I’m sure you offer those incredible products at a reasonable price.
Maybe you even ship to the buyer faster than anyone else, all while providing excellent customer service.
But none of that matters if your customers can’t use your online store, or if they don’t have a seamless, simple, and meaningful experience when interacting with your e-commerce site.
Don’t get me wrong—products and price are obviously going to matter. But they are only a few of the factors that may cause a visitor browsing your site to add an item to their cart. The most important factor is a site’s user experience (UX), which is the logic governing the sales funnel.
This heavily researched phenomenon describes what happens when a user does everything that you (the merchant) want them to—browse the site, find something they like, put it in their cart—except actually buy the products.
Users abandon their cart and leave your page, taking their money with them. It’s incredibly common.
The graphic below shows the most common culprits behind shopping cart abandonment.
What do a majority of these causes of abandonment have in common? They can be easily remedied with well-designed UX.
Below are Codal’s eight UX commandments for your online store. These are actionable items, organized by the typical customer journey map: from the moment they click on your site, to holding the product in their hands.
1) Invest In Speed…Or Get Creative
A potential customer clicks on a link to your store, interested in the products you have to offer, and…they see a white screen. Impatient, they close the tab and leave your site before it even loads. You never had a chance!
This short attention span is the norm in today’s age, and it’s the reason “website too slow” accounts for 11% of abandoned shopping carts. Even if a visitor makes it to the homepage, slow loading speeds will eventually frustrate them as they attempt to traverse your site.
If you absolutely can’t afford to speed up your site, you’ll have to get creative with your loading screen. Customers will forgive a sluggish site if the loading page shows character and personality, like this clever loading animation from sports app No-Halftime:
Loading Animation On NO HALFTIME app
2) If It Ain’t Broke, Don’t Fix It
Got the creative juices flowing for a fun loading animation? Good. Now turn them off.
After a visitor has entered the site, they’re going to be looking for familiar signs and symbols to navigate. Don’t confuse them with any sort of overly-creative or complex conventions.
Your company’s logo should be prominently displayed in the top left corner, and should link back to the home page. Why? Because every website developer does it, and doing otherwise could confuse the visitor, worsening their experience on your site.
Use traditional locations for the navigation and search bars, and stick to standard symbolism: a gear or wrench for settings, a speech bubble for chats or communication. These are familiar to everyone, and will improve the usability of your site immensely.
3) Forge A Connection
After you’ve implemented those usability basics, you can start to go further by forging a connection between the customer and your brand. Establishing this kind of connection makes your store stand out in the saturated world of e-commerce.
An excellent UX design agency understands that eliciting an emotional response from a potential customer increases the desirability of your site. This can be accomplished through captivating design, striking images, warm fonts, and appealing color schemes.
These sound like the realm of UI, but UX also offers its own techniques to forge a connection with your customer. One technique is as simple as positive reinforcement. Two examples I like to use are Slack and Groupme—check out the screencaps below.
Slack offers warm, friendly advice when a user logs in. Similarly, Groupme pays a quick compliment to the user before suggesting what they should do next. It’s simple, effective, and it upgrades the user’s experience from basic usability to meaningful connection.
4) Go Big On The Imagery
Retailers have been embracing larger, detailed images for their products. Whether its due to increasing resolutions or growing screen sizes, consumers don’t just want to see big, beautiful product images; they want different angles as well, to glean all the visual information they can.
One e-commerce site that takes this to the extreme is enterprise fashion retailer Zara. Take a look at their website below—their product photos are not just high-quality, they’re enormous. We live in an increasingly visual era: adapt to it.
We navigate the digital world by customizing everything we see to suit our personal needs—consumers expect online merchants to do the same. In fact, a recent study found that 74% of customers get frustrated with websites when content is not personalized.
No retailer does this better than e-commerce giant Amazon. Check out the screencap of how their homepage looks to me.
Where to begin. We can start with the smaller touches, like the friendly “Hello, Sean”, displayed a few times around the page, or the “Sean’s Amazon.com” on the navbar. But the true beauty of Amazon’s personalization is more than simple name recognition.
Amazon tailors their entire homepage specifically for me, an individual, based on items I’ve viewed and my purchase history. It even makes recommendations in departments concerning products I’m interested in. And they’re accurate too—I would like to buy those books on design!
One of the reasons Amazon is as colossal as it is today is because of its excellent user experience, and the cornerstone of Amazon’s UX philosophy is personalization. They use it masterfully, and more retailers are enlisting user experience design services to replicate it.
6) Give Clear Feedback With The Cart
We’ve covered a lot of ground, from the initial link to your site, to what customers expect when browsing and viewing your products. The next step, naturally, is adding a product to the cart. It seems simple enough, but many websites fail to provide adequate feedback when a user adds something to their cart. Take the example NNGroup makes out of Costco’s “add to cart” response.
Can you see where Costco told the user “Item added to cart”? It took me a signficant amount of time to find it—a serious blow to the usability of the site.
If a customer isn’t clearly made aware that their cart has been updated, they may leave the products to check the cart, or add the item again. These are small snags in the user experience that can add up to a frustrated user, and eventually an abandoned cart.
7) Have A User-Friendly Checkout
Take another look at the infographic presented at the beginning of this article. Of the top culprits behind an abandoned shopping cart, four of them occur during the checkout process. It is the final obstacle to overcome when converting a visitor to a customer.
Because of this, excellent UX design in the checkout process is absolutely essential.
When tailoring your checkout for optimal UX design, the following must be implemented:
1. A Guest Checkout Feature
Responsible for 14% of abandoned carts, customers want to purchase their product quickly, without the hassle of creating an account and entering personal information.
2. Keep Form-Filling To A Minimum
In a similar vein to the guest checkout feature, your checkout process should avoid asking customers to fill out several forms.
Buyers do not want to undergo the time-consuming task of inputting every aspect of their personal info. To create a checkout with better UX design, ask for the essentials only.
3. Checkout Progress Tracker
To add transparency to the checkout, break down the process into discrete steps, and display what step a buyer is on. Without a progress checker, you risk a potential customer becoming fatigued with the checkout process, and abandoning their cart.
8) Think Beyond The Sale
Congratulations!
A customer has visited your site, discovered a desirable product, added it to their cart, and checked out successfully—no shopping cart abandonment here. Does that mean your UX design work is done?
Of course not! The best UX companies recognize that the customer’s interaction with their site is far from over. First, a customer will want to track their package.
Your site should not only provide a tracking function, but it should also include a progress bar. Just like the progress feature implemented in checkout, customers like to see this transparency in a visually digestible way. And don’t forget an estimated delivery date!
When the customer returns to your site to track their package, why not make suggestions for other products they’d like to buy? Again, Amazon does this brilliantly with their “Customers who bought this also purchased” feature, and a “Buy It Again” button.
What Have We Learned?
The best e-commerce sites all have one thing in common: high-quality, well-crafted UX design. No matter the product, the sector, the market you’re tapping—without optimal UX, your online store will not perform to its full potential.
UX is the driving force behind every online sale you make. So what’s stopping you from harnessing it?
About the Author:
This post is written by Sean McGowan. Sean is a technical research and writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. Working along side developers, designers and marketers, Sean helps support the writing team to ensure Codal produces engaging web content of the highest quality. When not writing about the latest innovations in app and web design, Sean can be found cooking, watching old movies, or sifting through boxes of used vinyl records.
Get a personal 1-on-1 Omnisend demo that will supercharge your next campaign!
