Ecommerce UX Breakdown: When Images Take Over
Feb 25, 2019

For ecommerce shoppers, good visuals are make or break. Clear product images, an inviting homepage and visually led navigation work because photos are a rich source of information for shoppers.

They can convey emotion, pull shoppers into another world, speed decision-making and give customers a feel for products that don’t come with a text description. And the data backs it up: econsultancy reported that larger product images increased bid placement on one auction website by 63%, and using an image as a website background instead of white space lowered visitor bounce rates by 27% on another.

But some companies are pushing things further than simply increasing the size of a product picture. These three companies have built websites that are visual-led from top to bottom; these companies take users on a journey through the images that they choose and the way they incorporate the images into discovery and purchasing decisions.

The future of ecommerce is going to be even more visual than it is now, and companies like this are leading the way.

1. Luxury clothing retailer Sezane creates an aspirational haven

French clothing retailer Sezane was born as an ecommerce brand, and they’ve embraced the possibility of being online-first. Here’s how they do it.

Homepage

Sezane’s homepage is photo-centric: the only thing on it is a navigation bar at the top and a slideshow of images:

Their photos are rich in color and focus on their products, but they don’t feel like stock product photos with a white background and a standalone item — they’re curated, styled and deliberate. These images have started to tell the story of Sezane’s brand to anyone who lands on their homepage. The tones are warm and instantly give you the aesthetic of the brand — modern, luxury goods with a romantic twist.

The image-first approach has been popping up on more and more online retailers lately (think: AllSaints homepage videos) and for good reason. Brand images like Sezane’s that start a narrative offer browsers an easy way into the story of the woman who wears their clothes.

Navigation

To go deeper into the Sezane website, you navigate off of a dropdown menu that includes a fully styled, fashion magazine style photo:

These give the reader a hint of what’s to come and build off of the homepage images. A browser begins to get a sense of the way that Sezane’s clothing is designed to make people feel, which is a difficult thing to do in ecommerce, where shoppers can’t touch clothes to assess the quality or try things on.

Navigating into a section, you won’t find rows of stark white product photos. Sezane breaks up their product photos, which makes for a visually dynamic browsing experience, with styled shots that double down on the aesthetic of the brand.

This gives the feel of browsing through something deliberately curated, like a showroom, rather than just being handed a stack of product photos. Sezane is using the product navigation pages to tell a story about the woman who wears this clothing. They’re dynamic shots that are reminiscent of a style blog more than a simple catalog of items.

This is a way for Sezane to create a “luxury experience” in cyberspace, and it’s very well done.

Product pages

The product pages continue the story of Sezane’s website by showing their clothing styled in different ways on different models. It’s about showcasing the feeling of wearing the items as much as the items themselves, and it feels aspirational: if you have this sweater, you’ll feel effortless, stylish, chic, just as the model does.

These pages are more work than many retailers are able to put into their product pages, especially for marketplace sites that are repurposing images from brands. But for smaller companies that are offering a limited or boutique range, such as Sezane, taking the extra step to design product photos as a way to entice viewers with the desire for a certain feeling and lifestyle goes way beyond just showcasing a product.

Why it works

Sezane is a small, digital-first luxury brand, and their website proves it. They can afford to delicately stage each item. They took this opportunity to build a website that’s an experience of being enveloped in their brand, their worldview, rather than just a list of items on sale.

They know their buyer is in their late 20s-mid 40s with a significant disposable income who understands the value of luxury products and has expectations about the experience of buying higher-end goods. A website can’t have a nice couch and plate of truffles when a shopper stops by, but it can make them feel like they’re someplace curated, special, better than normal — someplace where women are always chic and have the perfect thing to wear in their closet. That feeling is as good as sales.

2. Glossier lives up to the aesthetic

Ecommerce darling Glossier has always put the web first when it comes to branding and sales. Let’s see exactly how they make their ecommerce experience so good.

Homepage

Glossier is an aesthetic as much as it is a brand, and their homepage reflects that. New products are given top billing and have Instagram-worthy photos that are highly stylized:

As you scroll down, the website puts product photos front and center. They use white space to their advantage — and white space is very much a part of the Glossier “brand aesthetic,” which makes their layout feel fresh and brand-appropriate even as it’s visuals-first.

Navigation

Opening up the Glossier sidebar brings you more images, not a list of text. This works for them because of their limited product selection — they only have one of each item they sell (one lipstick, one concealer, etc.) so it’s very easy to find where you’re going:

When you scroll over an item, more images appear to the right of the navigation — above you can see a woman applying their concealer and another highly stylized photo of the product. This helps spark the imagination and desire of users as they’re getting into the products. For a casual or new browser, it builds excitement and anticipation about Glossier’s offerings without extra word lists or clunky category descriptions.

Product Pages

Glossier’s product pages are a master class in using images. When you click on a product, there’s a showcase of that product on a number of models. This is important for a makeup brand for several reasons. One, people can have trouble picking shades that will match their skin tones. It also shows that Glossier is a deeply millennial company. Makeup retailers can get blasted for small shade ranges that leave out darker skin tones, but Glossier keeps up their branding of celebrating natural beauty by including models of all skin tones.

When you click on a shade, you’re shown several different models wearing that shade, but you’re also given a product video that shows you how a product is applied and how it works into the skin. This is key for consumers who can’t tell product consistencies and formulas from photos alone.

Further down the page, Glossier hits you with even more images in a mini-image gallery of product shots and models showcasing products:

These feel like user-generated content — as if you’re scrolling through Instagram, where Glossier has 1.8 million followers — but they’re brand images. The deluge of images on their product websites is designed specifically to help people make difficult choices about product shades, product performance and product wear without ever touching them. Glossier is using images to disseminate information that just can’t come across via text.

Why it works

Glossier founder Emily Weiss is hell-bent on keeping Glossier products only available on their website because she understands that shoppers don’t just want a new mascara or eyeshadow from Glossier; they want the Glossier experience. Glossier didn’t have a physical space when they launched and have limited themselves to a few “popup” physical locations. The spend that they could have invested in brick and mortar is going to their online space instead.

Glossier as a brand is pushing a certain, narrow view of what makeup and skincare should be — they have taken a hard stance on “natural” looking products that “enhance.” You won’t find bright red lipstick or false lashes on their website, and their website is selling this aesthetic choice as much as it is their products.

3. CB2 builds inspiration into a shopper’s journey

Home goods retailer CB2 emphasizes styling and design for all their offerings, giving viewers a window into their updated living spaces without a trip to the showroom. Here’s how they pull it off.

Homepage

The homepage isn’t the star of CB2’s website, but it is filled with beautiful photos that provide a snapshot of their offerings. CB2 has a decent range of furniture styles, lighting and accessories on their website, so showing a series of images that showcase different aesthetics helps any shopper see that CB2 could be the place they get their next dining set.

This is far more effective than making an endless scroll of subheadings (“chairs,” “sofas,” “lamps you’ll love!”) that come with single product photos. Their images are high quality and take up the entire web page as you scroll, which is a quick and beautiful way to familiarize a customer with CB2’s offerings.

Navigation

At first glance, their navigation is a bit clunky. It’s a sidebar that is just a list of categories. But it actually works — there’s no messing around with lists and sublists that take time to load and are difficult to scroll through.

Once you get to the product navigation pages, each category greets you with more big photos, each with a different aesthetic. This keeps the welcoming and luxury feelings from the homepage going and hits the browser with inspiration before showing them individual pieces. For a furniture and home decor site, giving shoppers an idea of what their “dream” space could look like with CB2 pieces is a clever selling tactic.

Moving into the categories themselves, the product photos are clearly the focus. What we like is that the product photos change as you scroll over them, giving you a chance to see the product alone and styled (left is a product photo, right is styling shown with a cursor hover):

This gives you a lot more information about a product than another photo of it in an empty room. For example, you get information on how the color looks in different lighting and the relative size, which a photo easily expresses.

Product pages

CB2’s product pages work because they show many angles of a product and, critically, how different items can be styled. Take this example of a bar cabinet tucked behind a sofa:

They also use visuals to give the dimensions of an object instead of just giving a numeric description in a sidebar. This can help people who have a hard time visualizing items that aren’t in front of them at scale:

Underneath the product, they also give a grid of photos for products an item goes well with. This keeps the flow of inspiration, styling and aspiration for shoppers. You might be on CB2 to buy their atrium tufted black patent leather bench and then realize you want to be the person who styles it with a white throw, a bronze side table and a crystal candle holder. This is especially important in interior design because many people need inspiration if they’re working on their own space.

Why it works

CB2 is selling single-purchase, expensive items — think a $2000 sofa that you plan to purchase and won’t repurchase for a decade or more. People buying home items in this price range have an expectation of a quality product and appreciate attention to detail, especially when it comes to styling.

Those browsing with intent are not casual shoppers who might make an impulse buy. They want to know that the dimensions are going to be right, the color will be true to the photograph and an item will live up to their expectations. By projecting multiple images of pieces and including styling elements, CB2 caters to these buyers.

In addition, home decor thrives on inspiration. CB2 does an excellent job of building in inspiration in every category and product page to keep shoppers thinking about what an item would look like, how it can fit into their space and what the possibilities of an item are. Sparking that inspiration is what will keep shoppers mulling over items and choosing to buy a sofa and a lamp.

Full speed ahead

Ecommerce websites should tell a story, entice browsers and pull people into the experience of shopping with a brand. Product photos with two angles and a white background are a baseline that many ecommerce companies are leaping over. Putting the resources into making your website easily navigable and full of rich, visual information isn’t just about looking good — it’s a shrewd business move that will position your company at the head of the pack.

 

Stay up to date
with industry news and Syte updates
Thanks for subscribing! ❤