How to create emotional experiences into a product listing page.
How e-commerce brands connect with their customer today.
Today more than ever, brands are looking for an emotional connection with their customers. Emotion, one of the words I hear the most when working on a landing page.
Emotion /ɪˈməʊʃ(ə)n/
A strong feeling deriving from one’s circumstances, mood, or relationships with others. Instinctive or intuitive feeling as distinguished from reasoning or knowledge.
Create emotions by adding images, yes but…
One of the first solutions you can find on most websites is the top banner.
It’s used above or before your product listing and its goal is to bring information and/or mood to your category.
The thing is, top banners suck (well, most of the time).
- Their format is awkward. Slim and wide banners are perhaps elegant and minimalist (…) yet, the images you get, no matter the source, are unlikely fitting this format, requiring then major cropping or photoshop retouches (we’ve all extended that background).
- They are usually not responsive and therefore often pointless on mobile.
- They are not SEO friendly. Unless you have that fancy live text on your image which limits a lot the graphic options, but still.
- They consume a lot of graphic ressources: You need to find the right image, the right crop, maybe create several formats if you have a fancy responsive website. And most-likely you will do that every other seasons.
Conclusion : More and more companies are getting rid of top banners and replace them with a headline + body copy combo that no one reads but hey, it performs. And if both the design and the marketing teams are happy about it, it’s a no brainer.
Breaking the grid
Scrolling through an endless list of product is boring. Your customers need to be triggered regularly if you want them to stay focused on what you’re showing them.
For a long time, an easy way to break a catalogue flow was to replace one or several of the product tiles by:
- a message: a good way to display offers and/or USPs.
- a mood image: to bring some more context to a selection of products.
- a link to another category
More recently, you can also find new solutions such as:
- nothing: to create an empty slot that break the dynamic
- a tile breaking the grid or with a different/wider format
The last two options truly creates an inspiring, editorial, dynamic page but it doesn’t come without its challenges: merchandising, stock availability and product images amount or cropping are critical in these scenarios.
The emergence of animated content
And now comes the magic (if you have a fast internet connection).
One day, as you’re casually scrolling through all these products that you want but will never buy, something catches your attention. It’s moving!
Coming from a boring catalogue, you are now suddenly transported to a catwalk or an exotic destination; you are invited behind the scene, the model is looking at you and there is this little touch of magic that makes that expensive product even more precious and attractive.
Brands such as Burberry, Zara, Acne Studios or Céline have successfully implemented these short videos into their catalogue. Of course this requires a lot of ressources and a good internet connection but a whole new shopping experience rises. You can feel the breeze of the moody shot and feel the fabric of the dress floating in the wind.
Conclusion: how stories create emotions
Brands have understood how storytelling is key to connect and build a relationship with their online customers. With an offer that doesn’t stop expanding, online products need to up their game and spark the consumer’ eye.
Online shops can now create the illusion of an actual narrative to fulfill their customers’ desires . The race for the most memorable catalogue experience has started.
I’m Annabelle, a french UX/Product designer working in London. When I’m not researching/designing nor eating a baguette, I write articles on Medium.
