Website design is integral to how many products you sell. That’s the bottom line.
What works today might not work tomorrow, so you need to stay sharp and make regular improvements if you want to sell more products.
Fortunately, we’ve listed six eCommerce website design trends you can implement to improve your conversion rate.
1. Mobile optimisation
Buying on mobiles is becoming easier, which is making it more widespread. No need to boot your computer or laptop up anymore, unlock your phone, click a few times, fill a few forms out and there you go. It’s on its way!
As you can see from the graph, mobile commerce sales are set to keep growing, so you need to ensure your website is optimised for mobile if you want to keep increasing your sales.
Google research shows that 73% of consumers will switch from a poorly designed mobile site to one that makes purchasing easier.
Here are a few tips on how to make your eCommerce website mobile friendly:
- Use Google’s mobile test tool to give an indicator of performance and usability
- Make your checkout process simple
- Use a top navigation menu for easy navigation
- Offer searching and browsing options for different types of buyer
- Speed up your site for fast browsing
- Use carousels so users can view more items on a page
2. Interactive shopping
While static images continue to be a part of eCommerce web design, animations, cinemagraphs and interactive shopping are becoming more popular as retailers aim to make their products stand out, and offer an extra dimension to the buying journey.
Animations
Animations are visuals used to enhance the aesthetics of a product. They allow the user to interact with your website, which differs from the norm of reading text and looking at static images.
If you work in the eCommerce sector, we’re sure you’re already familiar with Shopify. Although traditionally an out-the-box software, they wanted to promote their card reader to pop up shops and in-store merchants.
They created this video:
Think about what this video would add to a product page — bold, exciting colours, fluid movements and glossy, shiny products appearing from the card reader.
It gives the product some much-needed edge, I mean, it’s only a card reader after all.
Cinemagraphs
Cinemagraphs are still photographs where elements of the picture move to make it more engaging, allowing you to target elements you want to stand out.
Cinemagraphs work great on social media:
Take the following into consideration, though:
- Size — gifs and HTML5 files can be large
- Location — will you host them, or a provider?
- Looping — ensure the file isn’t being downloaded every time it loops
Here are a few examples of websites that use cinemagraphs:
Custom shopping experiences
If you have access to designers and developers, you should explore the route of custom shopping experiences.
A custom shopping experience is where you tailor aspects of the experience to give the prospect a smoother, more exciting personal buying experience.
Whatever we buy, there are always adaptations we could make to make the product or service suit us better.
Here’s a kit generator from Dynamic Team Sports, excuse the colours, I have awful taste.
Further Reading
3. Storytelling
While one aim of your business is to sell products to make a profit, your customers don’t connect with that vision — and if you lead with that, be prepared to fail.
People connect with brands. Brands that have a purpose, meaning, and add value to their lives. How do you think the biggest brands maintain such a huge market presence?
They tell stories, they promote their rich history, how they’ve helped people and show you what you can gain from them.
Harry’s Shaving Company
Men’s subscription shaving products are all the range these days. Harry’s entered a market that already had Dollar Shave club telling their wacky story, so they had to try something a little different.
While Dollar Shave Club is funny, loud, irreverent and bold, Harry’s took a different approach. Their storytelling style is simple, quirky, honest and responsible.
They ensure that humans are always part of their story, and attempt to promote the message that all men are different, but we’re all together, share similar problems, and should foster a sense of community.
It’s similar to the way Boots use their Feel Beautiful campaign but has a more subtle delivery (it’s aimed at men, after all).
While they do talk about their product, the values their company hold are the driving force behind what they do. Watch this video:
Now ask your self this question: what’s your story?
4. Material design
Material design is intended to give the user a more realistic feel when they’re browsing through your website. It uses simple, bold colours and shapes to provide the user with a more authentic feel.
Here’s an example of material design from Dropbox, notice how the colour darkens at the left and lightens at the right, giving the impression the laptop user is sat at a table.
On the left of the banner, you have a clear call to action within a simple shape and simple text. Flick from left to right and your eyes will become confused with the artificial and natural elements.
5. Asymmetry & broken grids
Most websites try to adhere to a structured, balanced look, but if you want to stand out, you can experiment with asymmetrical design.
We’d advise you to consider what type of brand and company you are before going with an asymmetrical design. If you’re a traditional, by the book type business you could isolate your customers with something that looks too out there.
Also, consider that you don’t want to make product pages look messy. All the information has to be in the correct place. If you do it right, you can create a unique, unconventional look that separates you from competitors.
Take a look at this website from Culture Poland. While the boxes are all different sizes, and the text appears both horizontally and vertically, they still manage to keep everything in order.
As you scroll down the page, the watermarked logo follows you, creating an abstract feel which adds to the bold, quirky site.
6. Images that show diversity
Diversity is a hot topic in the 10s, the UK is a melting pot of different religions, races and genders — and they have to be represented by eCommerce companies.
We used the example of Harry’s earlier. Now, it would be silly to assume Harry’s would have a website with loads of pictures of women on it. Women aren’t their target audience.
There are old men on their site, black men and white men.
There are also illustrations of a man in a wheelchair, a man reading, a man with a pride flag, and a man receiving counselling.
And yes, there are a couple of illustrations of women.
If you look at Asos, they’re setting the tone with their model pictures. They aren’t afraid to be brave, and they get it right. Why can’t men wear crop tops?
You need to get it right
Unfortunately, diversity is something that you can get wrong quite easily, diversity revolves around subjects that are sensitive and usually spark debate, such as the above photo challenging perceptions of masculinity.
I’m sure there would be a few people that are uncomfortable looking at the picture, never mind wearing the outfit.
Dove posted two images that seemed to convey racism, which was shared on social media, asking customers to boycott the brand.
Dove apologised for 'racist' Facebook advert showing a black woman turning white after using @Dove lotion. pic.twitter.com/NGXyhnGuBZ
— Habeeb Akande (@Habeeb_Akande) 8 October 2017
Dove’s core message is to appeal to women of all shapes, size and colour, and they certainly missed the mark with this campaign.
Does your eCommerce website have the latest trends?
If your eCommerce site is lacking any of the above features, it’s time to correct it. That’s if you want to grow your business.
Let’s recap these 6 eCommerce web design trends:
- Optimise for mobile
- Make shopping interactive
- Tell your story
- Incorporate material design
- Experiment with asymmetry
- Diversify your images