- Shower curtains
- Cute makeup brush washing machine
- Groot costume
- Cinnamon sugar
- Chia seeds
- Glow in the dark sandals
An everyday search on an eCommerce website appears more or less like this for the average person. It’s as though we can’t stop ourselves from getting online and buying things (we mostly) don’t need.
In Q1 of 2021, Amazon raked in $837,330.25 per minute. Perhaps, you’re a contributor to that number.
Whether you were pressed for time, couldn’t find what you were looking for, or chose to spend an unreasonable amount of pleasure in tracking packages, online shopping has now become a weekly, if not daily need.
How did a pandemic change eCommerce?
Did the pandemic propel the growth of eCommerce beyond anyone’s expectations?
According to sources, global eCommerce sales shot to $26.7 trillion in 2019. If that’s not staggering, we don’t know what is!
In the US alone, online retail sales saw a whopping 32.4% increase in 2020 and just as steadily, it rose to 39% by the first quarter in 2021.
While the numbers are impressive, it’s crucial to understand the whys. Online retail is no longer a novelty — the world was slowly and steadily treading that path to make it an everyday need. The only difference in getting there was the path less chosen, or for that matter, one that we never saw coming.
The pandemic catapulted us into the future.
Yet it would be inaccurate to attribute online store and online retail’s triumphs to the catastrophe that took over the world over the past two years.
At the core, what helped was exceptional UX UI design laden with a fundamental understanding of people’s need for practicality. For online retailers to thrive and grow multi-fold, it isn’t just what they sell that matters.
A website that’s easy to navigate, intuitive to use, guarantees hassle-free shopping, and most importantly, doesn’t make the customer waste time thinking is what the ideal eCommerce website design should be.
Yet, it’s not just bigwigs like Amazon, Walmart, Target, and eBay, that enjoy top rankings. One look at the Etsy website will show you how you can grow from any calamity.
In an article published by businessofbusiness.com, Jael Goldfine recounts how Etsy started as a website catering to a niche – one that quickly boomed to cater to the needs of the ‘everything-artisanal-seeking’ Gen X and Gen Y.
She adds that the then 24-year-old NYU classics graduate, Rober Kalin set Etsy up to sell handmade furniture. In time, he found others like himself looking for a platform to sell their crafts.
It was 2005; the time was ripe.
People were warming up to the idea of shopping online and increasingly starting to believe that it wasn’t ‘one of those internet things’.
When the recession hit, Etsy took giant leaps of faith and grew. People were looking for other sources of income – so they sold everything and anything that money could buy. Fast-forward to 2022; Etsy has emerged as one of the biggest eCommerce websites for crafters, vintage goods, and handmade creations.
So, whether it’s an 1885 CC Morgan silver dollar or a bed you’re looking for your furry friend, Etsy will have it. Etsy worked, and it still does, not only because of its offerings but also because it understands the core of good design.
Good design is simple, intuitive, and has customers walk in and out without any hindrances. This fundamental design element is shared across all leading websites.
We’ll talk about it in detail now if you’re planning on building an online retail site of your own.
What Makes an eCommerce Website Catchy?
Zendaya on the banner. But, also a lot more.
Have you shopped online at It’s such a breeze. One knows instinctively where to go, what to look for, and voila, the user’s shopping cart steadily fills up. But besides the ease of use, it’s also pleasant on the eyes. Without having to scroll as though you’re looking at a bottomless pit, it drives you where you need to be in carefully carved out sections.
So, whether it’s a trendy outfit that you’re trying to put together or looking for a deal that will make your day, the website will direct you there in a few quick scrolls. By doing so, Target has achieved near perfection.
The design is clean, simple, and has no frills.
This is one of the first things to keep in mind when designing a website specifically for eCommerce. A website that bombards visitors with too much information results in clutter, and they will quickly lose interest. As a result, they may want to leave immediately.
Unfortunately, this means that they won’t ever know what you have on offer. It also makes the customer’s search more difficult. Stick to a minimalistic design with contemporary typography styles. Cluttering a page with elements, icons, and buttons will look busy and distract the visitor. Shred down to the bare minimum. Put yourself in the customer’s shoes and think about what you need. When you give a user to many elements, it also confuses them.
A website with fewer elements loads faster and highlights what’s important. But, it’s not only Target who’s cracked this code. All major eCommerce websites have a few qualities in common – it’s why they’re consistently at the top.
This brings us to another crucial element of designing for eCommerce – Navigation.
Importance of navigation on eCommerce websites
When investing your time, money, and effort into building a website that sells products and ultimately sells, you must never look past the importance of site navigation.
Human beings are easily distracted, so much so that eight seconds is all it takes for our minds to wander. So, within those eight minutes, you can either convert the user into a regular customer or lose them forever.
If you can’t provide it for them, they’ll start to lose interest, or worse, move to another website that will do the job faster and better. Primary navigation menu aside, your product page and categories should be clear and unambiguous too.
Look at Asos’ immaculate and dream-to-navigate website. It can’t get easier than this to find what you need. Clearly defined “Men” and “Women” categories further expand to reveal sub-categories, further highlighted by representative picture icons.
Immediately the home page draws one in – it’s inviting. With colorful banners that showcase clothing from a particular era above the fold to brands that are all the rage below the fold, Asos has mastered the art of blending design and style — all the quirks that appeal to millennials and Gen Z.
With carefully placed banners on the page, Asos attracts customers and invites them to click on massive sales on the website.
By understanding customers’ needs and online retail patterns, Asos has hit the nail on the head. It shows you what you want, quickly feeds on that want and translates it into a need. It shows you what you want, quickly feeds on it, and translates it into a need.
Then, it throws in a few suggestions, which you’ll be very tempted to buy. Almost instantaneously, you’ve created a “look,” thereby giving yourself the satisfaction of having created an aesthetic.
This is what a great website can do. It can tap into your emotions about a certain piece of clothing and help you justify your purchase.
For instance, if you had simply landed on the website to browse but ended up purchasing quite a few things, you hear yourself saying things like, “Oh, but it was on sale, I needed to have it,” “This is trending right now,” “These boots would really look cute if I wore it to that cowboy-themed party”, and so the list goes.
Tapping into the sentiment and psyche of the buyer (some like to understate its importance and call it “market research”) is undoubtedly crucial; how you incorporate color and images is equally important.
There’s a lot of hype surrounding the comfort that a pair of Crocs offers, yet the same can’t be said about what it looks like. For years, even Croc swearers have said many not-very-kind things about the clogs.
But, one look at their website will take transport you to a land that’s full of color, joy, and everything bright in life.
The harmonious assortment of colors, the high-quality images that ensure inclusion, the bold risks with typography – everything seems to just work! But, Crocs have come a long way since the invention of their clogs. The range now also includes sandals to women’s wedges.
Crocs worked and why their website works is because they encourage one to go against the grain.
The website is home to collages, black banners, frames — everything you wouldn’t expect in an eCommerce website. It incorporates many design elements that will be all the rage in 2022. From clean symmetrical lines, images of real people, fluid gradients to lightweight serif typography, 3D elements, and good use of positive space, it’s in-your-face but that’s why we love it.
Ensure smooth navigation
Don’t panic, though; your website can look just as attractive, even with a few elements. Get rid of the frills. The navigation should be easy, and your customer should never be running in circles to find something.
You’ll see that with a few muted colors, high-quality images of women in all shapes, colors, and sizes (because representation matters), Truvelle has caught the attention of many.
It works even though it’s a website that caters to a niche. The website stands out with clean lines, a few shades of grey, and images that help a bride envision her big day. Each wedding gown or dress is photographed on models who are a size two and a size 20 because everyone deserves to feel beautiful. To achieve this, one must understand the customer, and to do that, one must dive deep.
One of the biggest reasons most flock to Amazon (other than the 353 million products they sell) is their recommendations. Think about a time before Amazon, Walmart, Target, or any other eCommerce website existed.
If you wanted to buy something, you’d ask your neighbor for their opinion. Or, you’d call a close relative or friend for a second opinion. If two people in your immediate circle either said good or bad things about the item you’re looking to purchase, your decision would sway.
Why eCommerce websites need to be recommendation-smart?
Amazon uses recommendations as one of the most powerful ways of personalizing your shopping experience. Amazon seems to understand user experience like no one else does. Leah Retta, Content Manager at Dynamic Yield
One of the best ways to make your website recommendation-smart is to add widgets that track the user’s location, recent/older purchases, trending items, saved lists, deals, and shopping patterns, among others, to narrow down recommendations. While it could be hit or miss, chances are more likely to be a hit. Even if it may not convert into a sale, it may propel product discovery.
A widget that gives Amazon’s recommendations an extra boost is the “Compare with similar items” section. Best of fabrics, sanitary fittings, and other similar products that you would essentially like to touch and get a feel of but can’t, this widget seemingly goes that extra mile for you and tells you all you need to know. Subsequently, the user feels heard. Questions are answered, and hassle-free shopping is streamlined.
Importance of reviews and ratings
The mother of all elements on a website is reviews and ratings. If you’re not allowing for people to leave a comment about whether they liked a product, or more importantly, if they didn’t like the product, you shouldn’t start building that website.
People enjoy talking, especially when they’re angry. To begin with, you shouldn’t be selling defective products on your website, but if you let a few slip through the cracks, it’s your responsibility to be transparent through your users.
We live in a very connected world – one that is highly opinionated. A good review or a bad one isn’t just the people’s way of getting their thoughts across. It’s also a form of seeking validation and believing that they’ve helped someone make the right choice, the smart choice.
While this may pertain to physical business spaces, you’d be surprised to know that 72% of online customers will trust a local business more if it has an overwhelming number of positive reviews than negative ones.
Similarly, adding a “Rate” button is as important as a “Review” button. While many go all-out in talking about their experience, some limit it to rating a product. Again, the act is simple, yet communication is as effective.
When you have all these elements in place, it’s a good time to start thinking about how you can win your user’s trust. This begins and ends by ensuring that their money is safe and that they’re not getting fleeced. Sensitive customer data should never be accessible to any third party. SSL encryption is one of the best ways to gain trust. Information is encrypted automatically.
Once you’ve done this, you’re almost on the cusp of creating the best eCommerce website that ever was. Now, you need to think about a man’s best friend. No, not a dog. Their mobile device.
Your website should be a mobile responsive design. Most people use their smartphones to shop and make payments, and therefore you must invest in eCommerce store optimization. The more responsive the website, the faster it will load.
Now, we’ll let you in a secret that’s hiding in plain sight. See that good ol’ “Add to favorites” button patiently just sitting there, waiting for you to hit it? It doesn’t ask for you to come back immediately, not in a few months, even for years.
So you forget about the item you’ve ‘favorited’ (no, you’re not going rock that leather jacket like Mel Gibson in Mad Max) and move on with your life.
The bottom line is that you must understand buyer psychology from all possible angles. “Add to favorites” works much like how we bookmark an article we like on the internet. We tell ourselves, “this looks like a good read; let me come back to it.” The truth is, we rarely do. What matters is that we intended to read it.
When a user adds a specific item to his favorites list, the widgets on the background can get into action. This brings us back to – recommendation. The sly yet sneaky ways of personalization that makes us feel heard.
Okay, we’ve covered enough about what your website is going to look like (and trust us, it’s going to look incredible), let’s cover UI design tips that can help you get one step ahead.
What are the Best UI Design Tips?
Red.White.Bull’s Eye.
You know what this is. Target’s website is consistent with its branding. With pastel colors all over the website and pops of Target’s iconic red strewn about here and there, it’s evident what the brand is trying to achieve – it’s staying classic. That’s their brand identity—rule #1 in designing a UI that will instantly speak to millions.
Above the fold is always a great place to be in any website, so pay heed to visual hierarchy and the elements you want your customers to bump into first. Place the most critical information above the fold. It’s okay to break the rules and use lesser white space to make more room for details than pushing content below.
Sometimes, all it takes is one extra scroll to ruin everything.
We’ve said this several times, in several different ways, but we’ll repeat it. Learn when to stop.
Overdesigning is overkill
If you’re trying to make everything look uber graphic, even your fonts, it may end up looking like an ad. And no one runs away from ads as much as a shopper does. To make the fonts more visible, use high-contrast text.
Don’t bombard the shopper with too much information at first glance; it’s an immediate turnoff. Shopping should be a leisurely activity that invokes joy, not one that infuriates the shopper to no end. When using buttons, use ones that are already familiar and universal.
Keep in mind that you cater to a diverse audience spanning several geographies and ages. If you want to stand out, perhaps, this isn’t the space to do so. Keep buttons predictable. People don’t enjoy big changes; it throws them off. Go a step further and provide labels for all icons.
Make the search button one of the first things the shopper sees. The only reason a user visits your website is to look for something. Ask yourself what matters more? Showcasing everything all at once or giving them the freedom to look around? The choice is easy. Through eye-tracking software, it’s now common knowledge that most people follow roughly an “F-pattern” when reading a page.
When visiting a website, a user’s eyes first land on the top left-hand side of the page and move to the center and then the right side. Their eyes then travel back to the left-hand side, this time only slightly lower, and their eyes may now hover and stop somewhere in the middle of the page. The pattern that emerges roughly makes the “F” shape.
So, do what the best websites are doing. Place the search bar on the top-left side of the page. If you don’t want to do that, ensure that you’ve found a space for it that’s visible from everywhere. An excellent feature to add to the search bar is the auto-complete functionality.
What’s your website looking like right now? Do you want to be your first customer? If your website doesn’t tempt or provoke you to purchase something, perhaps you’re doing something wrong.
What are the common mistakes in eCommerce website design?
A study suggests that Americans spend roughly two hours a day shopping online. Which, if you haven’t figured out yet, means only one thing – it’s not just the “thing” shoppers are looking for; it’s mostly the experience you’re selling to them.
This also means that just because your website looks stellar doesn’t mean customers will buy from you. You must cater to their needs in more ways than providing the goods.
For starters, how fast is your website? Can it take the user exactly where she needs to go and load the product she wants in less than 5 seconds? Add one more second, and she’s losing interest.
Add a few more seconds to that, and if it’s still loading, she’s long gone from your website. If the page takes progressively more seconds to load, leading up to 10, the bounce rate increases to a staggering 123%.
Make a mental note, a physical note, or tattoo this if you must: The highest eCommerce conversion rates occur on pages that take 0-2 seconds to load. If the check-out time is as long-drawn and irksome, it’s a double whammy. Why build a website in the first place? If your website is slow, you’re already falling behind.
Another colossal mistake is one that will have people talking for all the bad reasons. Avoid low-quality images at all costs! If you think traveling back in time and using highly pixelated images may add a charm to the old world or bring back a nostalgic aesthetic, we must stop you right there. Invest in good photos. Invest in quality.
Whether it’s because of the stalker-esque tendencies we’ve all developed (thanks to social media) or not getting the satisfaction of physically feeling something when purchasing it, we like to zoom in on every picture. If the image breaks when zoomed in, you’re in trouble. Fix it, fast.
Read more about mistakes in eCommerce website design here.
Conclusion
Online retail is an ever-evolving game. If you don’t plan to reinvent yourself, you’re already in hot soup. You can try cross-selling, up-selling, and down-selling to boost your sales.
As a final note, and you should already know this, an inferior internal search engine can get in the way, several times, and severely when you’re trying to sell thousands of products. Along with the search bar placement, your internal search engine should be robust to increase sales.
Top comments (0)