Putting the Eco in Ecommerce:
How Harnessing the Power of User Brand Perception Increases Engagement and Retention for Sustainable Fashion Brands
10% of all global CO2 emissions are caused by the fashion industry -more than air traffic and shipping combined.
— SmartInsights, 2020
It is thus easy to understand why in a recent study by Nosto in 2019, 52% of users want fashion companies to become more sustainable. 64% of consumers say that they want brands to be engaged in both improving business practices as well as producing sustainable products.
86% of those surveyed in the 2021 Edelman Brand Trust index agree that CEOs should be the mouthpieces of their companies, speaking out publicly about at least one societal, economic or environmental issues.
The same studies show clearly that when brands connect the dots between their efforts to market their social and environmental initiatives by providing meaningful, transparent information about production, customers trust the brand, translating into greater brand awareness, engagement and retention in the future.
56% of consumers say that companies use social and environmental issues as a marketing ploy
Post-pandemic, the link between brand trust and customer engagement is even stronger.
Consumers are mistrustful of claims to be “green”, and the subtle differences in marketing terms are little understood. According to studies conducted by SmartInsights, 38% of consumers say they can trust a brand based on their advertised social impact initiatives, which is even more enlightening when we look at the 87% who say they trust brands based on the providence of the products themselves.
Greenwashing is a problem within eco fashion--and users take note.
How do we cut through the clutter and connect meaningfully with savvy consumers looking to put their dollars where their values are?
Meet Lili
Lili is a 30-something professional who tries her best to educate herself about sustainable living. She loves clothes and design, and up until recently, shopped in both high-end brands as well as fast fashion shops to update her wardrobe.
She has recently decided to educate herself on the environmental impact of her fashion choices, and has begun to pay closer attention to the brands’ commitments to social and environmental welfare.
Her problem? She doesn’t want to sacrifice style for sustainability.
How might we create a fashion-forward e-commerce experience for Lili that instills confidence and trust in the brand’s values so that she feels secure in making a purchase?
One of the key aspects of this mission is leading the eco-fashion revamp by inviting users to buy with the conscious objective of creating a positive impact.
Overconsumption leads to more returns, which have a major impact on the environment (production, materials, shipping costs), as well as on the small start-ups bottom line.
We were tasked with designing a site that helps Lili feel confident with making a purchase while also staking a claim as an authentic brand that lives its values.
The brand’s MVP funding a product through a pre-order model invites users to pre-purchase a unique garment designed with 3D technology using completely compostable fabrics.
Red route based on MVP: Home, Product Page, Disruptor Message, Checkout
After completing several rounds of brainstorming, we settled on the following design features:
An informative, immersive homepage to explain the brand and offer more information on both the business model and brand story
A featured collection
A product page
A virtual closet feature, a creative attempt to reduce returns and therefore consumption
A disruptor window in an attempt to inject the purchasing process with an environmentally-conscious message
After defining the red route, we were ready to begin designing. We then conducted a series of remote usability tests on 8 participants over the course of a weekend. Testers were recruited based upon their knowledge and use of e-commerce sites, and their interest in sustainability.
Will the UI Interrupt the Checkout Process?
Initially we decided to test a disruptor message as a key component of conscious purchasing on the site. The user would be greeted with a pop-in message after selecting a product for pre-order in the hopes of inspiring the user to pause and think about the purchase from a social and environmentally aware mindset.
Disruptor Message Interrupts Purchase
The initial testing was conducted over a 3-day period with a total of 7 subjects. Moderated testing was performed remotely on Zoom, and the results were analyzed by the design team.
In fact, the disruptor message, while problematic in its design, was actually well understood and appreciated by the users. The main issue was in its presentation--users described feeling like they were being “talked out” of making the purchase by having the disruptive pop-in appear before they had moved on to checkout.
Testing Identifies Issues with MVP - Funding
One of the more surprising results was the fact that the brand’s business model -- the pre-order, Kickstarter-esque purchase -- was not well understood by the users.
On first glance most people skimmed over the funding information and status bar. When pressed to describe what they were seeing, users weren’t consistent in their responses.
Nice Surprise: Users are excited about the brand story
Relying on brand storytelling to engage users is one of the major mistakes to be made when constructing a new e-commerce presence--users are not usually keen on reading content that takes them away from their main goals of shopping for a product online.
It was therefore a welcome surprise when all users tested responded enthusiastically to the homepage’s editorial, story-rich design.
Virtual Closet: an Exciting Feature for a Future Build
The Virtual Closet tool allows the user to take a selfie and have the selected garment digitally applied to their image. This concept has been utilized by countless eyeware and cosmetics brands, but is still emerging in fashion.
Our client has been working with its designers on this concept, so we definitely felt it was an interesting feature to include in our tests. It has the added bonus of being a tool that not only helps users feel confident purchasing based on aesthetics, but also could potentially reduce return costs.
Users were definitely very interested in the concept and had a very positive reaction.
The UI was very basic, as the priority was to get the initial user response so that our client could make the decision on investing further in the feature for a future build.
Second round designs refine UI
The second round of iteration focused on improving and clarifying the UI based on user feedback:
Reimagining the location and appearance of the “disruptor” message to be less disruptive while retaining the authentic messaging
increasing user education about the brand’s business model
Providing more opportunities for the brand to highlight its story, the designers, its diversity
Another round of remote usability testing was conducted with 8 participants in the US and Europe.
Improved user response to Disruptor message, while problems persist with funding UI
While all users responded favorably to the new location and wording of the disruptor message, relocated as a first step to the checkout process, the UI surrounding product funding was still not as clear as we would have liked
We attempted to enlarge the status bar and font size of the of the preorder section in an effort to make it more visible. We also introduced more information on the homepage regarding the business model.
Unfortunately users did not instantly “get” the concept at first glance. It took a second and perhaps some prompting until they understood the process, and they all still expressed concern over what would happen to their charge if the product wasn’t funded, etc.
Final homepage and product page designs
Moving Forward
While our active involvement in the project ended after the second testing round, we were able to give our client some very valuable information moving forward with the site.
Some key improvements we would undertake in the future:
More iteration is needed in the funding UI within the collection section and product pages.
More education is needed on the brand business model in general
A rich immersive homepage experience helps users connect and trust
The Virtual Closet feature is a big win for users in terms of concept, but the exact UI relies on the service provider and the variety of technical constraints it would impose.