Why is this? Well, ecommerce has massively matured. It’s big business. Digital teams are smarter, and more agile. Sexy new tech such as HTML5, CSS3 and jQuery allows for sublime user experiences.
As such I wanted to raise a toast to innovation by highlighting a bunch of – hopefully inspiring – examples to you.
But first, a massive caveat: I would severely and mercilessly beat a few of these sites with a big best practice stick. There are product pages with missing information. There are search boxes with tiny fonts. There are usability issues galore.
Secondly, for ecommerce sites, it is all about the data. If you’re not constantly testing, measuring and refining, then you aren’t doing it right. What works for one brand might not work so well for another.
All of that aside, the ecommerce teams that take chances and push the boundaries of are to be applauded. Guidelines are precisely that: guidelines. Rules are there to be broken. And innovation is always to be encouraged, even when it doesn’t work out.
So let’s take a look at some ecommerce websites (and one mobile app) that are trying new things, and that are noteworthy for their approach to the user experience. Click on the screenshots to check them out for yourself, and do let me know what you think.
Clustering is one of the hotter trends in ecommerce. Focusing on outfits, rather than individual products, is one of the basics of smart merchandising, and can help to drive up order values. Jack Jones has some good ideas to help shoppers play around with different outfits.
Dynamic / animated backgrounds were one of my web design trends for 2014, and I’ve recently seen a few examples on ecommerce sites. Folks adopts an unusual approach: visit the homepage and you’re presented with an evocative road trip animation, rather than the latest promotions and hottest products (scroll down for those).
Now, I’m fully aware that your ecommerce brain might implode at this approach, but there’s something to be said for immediately pleasing the senses, and it didn’t stop me from exploring the site. I mean, just look at how pretty it is…
The dropdown includes little drawings as well as navigational labels, and the ‘Try Me’ feature shown below is a useful mix and match tool, akin to taking a bunch of items to the dressing room in a store. It is difficult to not play with it.
For starters, take a look at the gorgeous presentation in the feature filtering area. Like Bonarium, Two Socks isn’t content to simply use text for navigation.
The product pages are a little low on key information, but overall the attention to detail on the user interface is good. For example, if you fail to state your foot size a non-threatening warning message appears and the foot size field briefly flashes red to highlight where you need to look.
It also has a cute ’emergency’ tool, for those who “need socks but have no time to shop”. It is a one-armed bandit. For socks. Innovation!
A homepage with plenty of quality product shots, a colour picker, and the use of hotspots as a navigational / discovery tool.
Yet more bundling. There is a view room / view products toggle button in the top navigation. Click to see the room view and then hover over different parts of the room to reveal product information. Great for shoppers in browse mode.
Lots of animation on this site, from the homepage to the product pages. Overdo it and it becomes a mess, but strike the right balance and animation can help bring pages to life.
I particularly like the lookbook idea on this boardwear site: a full screen image with menu that slides out from the right, featuring some of the items shown on the page.
There are also some nice micro UX touches, such as the very slight movement you see on some of the pages (which responds – ever so slightly – to where your mouse is pointing).
This is a charming single product website, with Vertty having reinvented the beach towel based around a bunch of triangles.
The homepage presents a carousel of sorts, to allow you to pick your favourite colour. The colour coding is a really lovely touch: both the logo and ‘get yours’ button immediately change colour, as do the product pages.
There’s a lot I like about Bellroy’s ‘Slim Your Wallet’ campaign. Its website also has a lot of good things going on, such as beautiful mix and match typography, icon-based navigation, sliders to play with, as well as some lovely feature filtering graphics. All of this helps the site look pretty while doing a good job of selling the product. I can just about forgive the autoplay…
House Of Fraser
The newly revamped House of Fraser website does a lot of things very well, and uses the True Fit tool to help minimise returns by helping shoppers to find their perfect fit. Smart tech and dynamic content FTW.
Add an item to the basket via the mobile app device and your phone will vibrate.
Note the little microphone icon in the search box. Yup… voice activated search comes to ecommerce.
Barbour’s Christmas site
Roaring fires, snowflakes, parallax scrolling, running dogs, hotspots, and robins. Who doesn’t love a robin?
Another online clothes store that makes the most of lookbooks and hotspots.
An exceptionally clean site with a strong focus on imagery, often relying on the hover state to reveal text / product information.
Another really clean, image-focused site with a lot of laser-guided content about its brand, products and customers. Ok, it isn’t the most innovative of these examples, but it certainly has the right feel for for this kind of product.
I especially like the close up shots of master jewellers at work… one of the more sensible uses of large animations that I’ve seen.
Use your mouse to spin the shoes around.
I’m including this because of its excellent suggested search functionality (with auto-complete). Again, it’s not unique tech, and you’ll have seen this before, but so very many retailers haven’t bothered to introduce this sort of thing yet.
An ultra-spartan approach that allows the images to do the talking.
This is a fine ecommerce site with superb usability. A lot of thought has gone into the navigation and feature filtering, as well as the little details across the site.
I guess that’s more than enough to look at for now. Be sure to let me know in the comments area below if you’ve seen other examples of ecommerce websites that have innovative features, or that are doing things a little differently.