How is UI design helping consumers choose sustainable products?

Rich Brown
UX Collective
Published in
5 min readJul 23, 2021

--

When I started looking at how design is influencing behaviour change around sustainability, one thing struck me: It has to get easier to buy better. Here I take a look at user interface (UI) design in e-commerce specifically, and audit some of the approaches web designers are taking to help educate and enable consumers to choose sustainable products.

A word about data

It’s obvious when we think about it, but whatever we see on the interface of a store has come from somewhere; there’s a data set behind it. Product images, descriptions, ratings, price — everything has either been added by people (employees, users in the case of ratings) or sometimes by machines, for example, AI image recognition.

For sustainability to be navigable, there needs to be data that underpins it. Given there are no uniform requirements for reporting ESG information, this means that each site and the people behind it is possibly, indeed probably, taking a different approach. There are significant downsides to this — users have to learn the system on each site, and the data lives on that site alone. Compare with product ratings, which are most often out of 5*, easily understood and sorted by, and can exist across different platforms. Against this challenging backdrop, we should still be encouraged that such efforts are going in to create sustainable data sets, and make these usable.

UI approaches to showcasing sustainability

How can consumers choose ‘the sustainable one’? It’s what we need them to do. We are now seeing different ways of surfacing real product differences otherwise hidden and enabling users to navigate by it: sustainability. It’s great that this is starting to happen. Here are different approaches I’ve seen so far:

Filters

This is: enabling users to filter search results down by sustainability attributes. These need a data set behind each product that identify it as sustainable. I’ve seen two main types — a single ‘sustainable’ filter and ones with sub-options. I personally believe the more general the more useful here, as for me, for example, filtering between different types of certification is too granular.

rei.com has a sustainability filter with a number of sub options and certifications
rei.com has a sustainability filter with a number of sub options and certifications
Backcountry.com has a ‘Responsibility’ multi-select filter
Backcountry.com has a ‘Responsibility’ multi-select filter
Nike.com materials filter showing Sustainable Blends
ASOS.com showing a Responsible filter with Recycled and Sustainable Materials
Nike.com and asos.com focus on materials and in certain areas of their sites enable buyers to filter based on them

Collections

Merchandising collections of products with shared attributes is as old as e-commerce itself — think “Mother’s Day” or “Summer” collections. Sustainability is an attribute becoming more common as collections. Like filters there are stores and marketplaces using a generic sustainability attribute to organise around, and there are those that are much more specific.

Amazon’s ‘Climate Pledge’ has collections of products that have been certified, organised as collections 1 of 2
Amazon’s ‘Climate Pledge’ has collections of products that have been certified, organised as collections 2 of 2
Amazon’s ‘Climate Pledge’ has collections of products that have been certified, organised as collections
asos.com also features collections, which they call ‘Edits’, that include a ‘responsible edit’
asos.com also features collections, which they call ‘Edits’, that include a ‘responsible edit’
Shopify’s Shop App breaks down many different types of responsible collections
This is Shopify’s Shop App, which breaks down many different types of responsible collections

Badges

Badges are means by which we can pick out particular products and draw attention to them. We see them on search results, and attached to product descriptions. There is not a standardised set of badges so these tend to be site specific, created by the site owners.

Mellerbrand, a store showing two identical products apart from one is called out as ‘Eco’ (and costs £5 more)
Mellerbrand, a store showing two identical products apart from one is called out as ‘Eco’ (and costs £5 more)
BuyMeOnce has a range of badges showing provenance and durability
BuyMeOnce has a range of badges showing provenance and durability
Itemerie.com is a marketplace for sustainable products that has badges that reflect its thorough vetting process
Itemerie.com is a marketplace for sustainable products that has badges that reflect its thorough vetting process

Descriptions

Whilst not necessarily new or innovative, a common way of highlighting product sustainability is talking about it in the text the accompanies a product. This may index in search, making sustainable products findable by those using site search, or may just be found while browsing. As human-generated info, such descriptions are not structured data that can, for example, be filtered by.

Badges with body copy from agood.com
Badges with body copy from agood.com
A similar combination of badges with body copy from shophonu.com
A similar combination of badges with body copy from shophonu.com

Offset at checkout

Some stores are using small nudges to change behaviours. One example is carbon offset at checkout. Here Davines is using a plugin by Cloverly which gives the buyer the option to offset the carbon, and perhaps some guilt, by paying a little more.

Davines is using a plugin by Cloverly to enable buyers to offset their carbon emissions in delivery
Davines is using a plugin by Cloverly

Scores

This is the approach I find the most interesting with the greatest scope — and need for standardisation. Some sites are starting to surface sustainability in a numerical way. This is bringing sustainability much closer to being aligned with how other ways of ranking products — such as price, ratings, delivery time- work, as it allows information to be ordered based on a number. This is starting to mean more sustainable options can compete in listings, in a way they haven’t been able to to date.

Davines is using a plugin by Cloverly
Ordering flights by CO2 emissions on Google Flights
Three simple scoring axes from good on you
Three simple scoring axes from good on you
Higgs index sustainability scores from hm.com 1 of 2
Higgs index sustainability scores from hm.com 2of 2
The Higg index on hm.com

What’s next

If design is going to save the world, UI design will play a big role in that. What I would love to see here is not proliferation of new approaches, but consolidation and standardisation. If the way I found sustainable hotels matched the way I found sustainable trainers, or better still the sustainable options by default ranked higher, we’re going to see more of the behaviour change we want.

Have you seen other approaches to add to this list? I’d love to hear about them.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

--

--

Design at Shopify. P/T Master’s student at Cambridge Institute of Sustainability Leadership. I’m the kind of guy who supervised the guy who invented the wheel.