Celebrating the weird, the different and the atypical.

Sure we have a set few ideas about user experience and what we consider best practice, but that doesn’t mean there isn’t room for experimentation.

The following examples offer a different view, whether it’s in their search tools or in the way they present their products.

Some of the following are perhaps better in principle rather than execution, and none of them should be considered as anything more than ‘interesting’, however you may just find some inspiration here…

The First World Problems Store

This brilliant Dutch site sells placebos for your most sensitive ‘first world problems’, all the proceeds of which go towards providing affordable HIV medication.

The full-page carousel is glorious, inviting you to scroll through items via two ghost buttons, until you find a solution to something that ‘is your problem’.

Ted Baker

In an effort to make the ecommerce experience more tangible, more ‘real world’? Ted Baker has launched an online virtual store, which uses 360 degree panoramic photography to allow users at home to walk around its Shoreditch branch and browse through many racks of designer clothes.

 

Zoom into the racks, then when you find a product you like, click on it and be taken to a pop-out product description with a direct link to the ecommerce store.

Fat Face

If you hover over one of the homepage products an eye appears which you can then click, and it rearranges the page so that the item is highlighted in a larger box, with colour and size options and an ‘add to bag’ call to action.

Zara

Zara operates a search tool where the content of the page completely disappears, then is replaced with dynamically loading search results as the user types.

Chief customer officer Borja Santaolalla explains the logic behind Zara’s idiosyncratic approach to search. 

The search experience at Zara has been designed from a discovery perspective. That is, selling clothes is not a functional search, such as browsing a catalogue of electronics, search in fashion is about inspiration, it's about emotions and empathy.

So basically search as an inspiration tool, not necessarily as a discovery tool. The problem with this is in the unpleasant blankness that occurs before you begin typing as if something has gone wrong with the site. 

The same design team improved on the above with the next example...

Pull & Bear

Instead of completely wiping the page of content when you click in the search box, a smaller flyover appears.

This is definitely an improvement. There is also the very simple addition of a close button, which is definitely lacking from Zara, and a way to toggle between how many results are served on the page.

Mendo

A scrolling transition from product page to basket is a neat way to keep things fluid.

B&O Play

This scrolling landing page lets you explore the various features of the headphones at your own speed, while a captivating full-screen video plays in the background.

Brickfielder

Here’s an incredibly thorough look at the technology behind its latest sweater using a plethora of interactive scrolling and swiping techniques.

Whistles

Alongside its super minimalist menus and subtle grey calls to action, I also like the way image of the man is greyed out when you’re not looking at men’s clothes, and the giant luminous cross that denotes the category you’re in.

Björn Borg

A very simple idea, as you scroll back and forth you can see how each product looks when in its reflective state.

Mack

In the same way that clothes shops are using clustering to see how entire ‘looks’ can be created and purchased, here you can hover over individual items in the room and purchase them or if you’re feeling even more extravagant, buy the entire room.

Further reading…

For more on web design from the blog, check out:

Christopher Ratcliff

Published 8 July, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

You might be interested in

Comments (4)

Avatar-blank-50x50

Deri Jones, CEO at SciVisum Ltd

Some nice examples (and some startling!).

I wonder what decided Whistles to use a big yellow X, rather than a big yellow tick ? Which would seem more fitting?

about 3 years ago

Avatar-blank-50x50

Sian Barlow, Business development director at Beef Digital

Some interesting examples here. Quite like the Bjorm Borg idea, nice way to show the product in 2 forms. The concept of the Brickfielder site looks like a great way to demonstrate the tech in the shirts which I'm sure the audience is interested in. It just doesn't function as well as I hoped when I went to it!

about 3 years ago

Gracious Store

Gracious Store, Owner at Gracious Store

One of the interesting things about eCommerce is that each people has the opportunity to personalize their site according to their taste and creativity. Which navigation is better? How are you to decide and what s your criteria for your decision.

about 3 years ago

Avatar-blank-50x50

Laura Cutajar, eCommerce Trading and Production Manager at Phase EightSmall Business Multi-user

I like the Fat Face example, though that's only in mobile, for desktop it doesn't look as neat and slick - homepage is a bit cluttered and confusing :(

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.