Adding Sustainability Features to ASOS
This was a conceptual project.
The Problem
ASOS, with its extensive product range from various brands, lacks a clear representation of sustainability features for items with eco-friendly attributes. Despite some products being sustainably made or using environmentally friendly materials, this information is currently absent on the website.
Introducing sustainability features to ASOS's website is a practical step, allowing customers to easily identify and choose products based on their sustainability preferences. This not only assists conscious shoppers but also aligns with the company's commitment to environmental responsibility, leveraging its existing inventory for a more informed and sustainable shopping experience.
Determine what type of sustainability product details users are interested in.
How do users understand the environmental impact of their potential purchases?
What characteristics do customers associate with sustainability and environmentalism?
Research & Design Objectives
1
2
3
Customers can search sustainable in the search bar and over 10K options populate.
These products have an additional banner that indicates to the customer the item was made sustainably in some way.
Patagonia's website is extremely educational and provides multiple resources to its customers to read how the company is practicing sustainability.
Within the product details they share the sustainable impact the item has, what it's made out of, and whether or not it was certified Fair Trade.
Competitive Analysis
Compared four different E-Commerce brands that have added sustainability features to their websites to see what their strengths and weaknesses were to get a better understanding of what competitors are doing.
They have a sustainability category that you can choose from when looking through products.
Sustainable items have a "Lower Impact" banner on all of the product images to let the user know they are considered sustainable.
Sephora has a category called “Clean Beauty” where all items that have been certified ‘clean’ have an icon on the product image.
The product details page has a 'highlight' section that shows helpful knowledge of the product. For example, the product is reef safe, or hypoallergenic. Sephora also lists all the ingredients that are banned from clean products.
Interviews & Findings
Conducted 5 remote user interviews with participants that shopped online at least once a month, and consider themselves environmentally friendly. The interviews were designed to get a better understanding of participants online shopping habits and their desire to shop sustainably. These were the most common themes found:
Materials Used: participants expressed that they want to know what materials retailers are using, if they are ethically sourced, and if they are harmful to the environment.
Socially Responsible: participants expressed that they want to know if the companies they shop at are socially responsible, by either donating to social causes, fair trade/fair wages, treat their employees well, and are inclusive to different body sizes and races.
Shipping & Packaging: participants expressed that they want companies to ship their products sustainably by using eco-friendly packaging
Transparency: participants expressed that they valued company transparency. They want to be educated about their processes and expect to find this information on the company’s website.
Site Diagram
I opted to create a site diagram to help me visualize where the new features would live on the current site.
Putting It All Together
Homepage: I added a Sustainability tab in the top navigation.
Product Details > Sustainability Tab: on this page I’ve added a sustainability tab that customers can expand to learn more about what makes the product sustainable. Based on feedback I received in my interviews, I included materials, social responsibility, and packaging.
Checkout > Delivery Options: within the delivery options I added an eco-friendly packaging option allowing customer’s to opt into paying a few extra dollars for environmentally friendly packaging. Since it’s more cost effective for ASOS to use plastic packaging, they are allowing the user to make the conscious decision to pay more for environmentally friendly packaging.
Sustainability Page: within the sustainability page I added a leaf icon indicating which items are sustainable. In this case all products are because we’re in the Sustainability Category.
I wanted the new features to seamlessly integrate with the existing UI and branding of ASOS. That meant staying consistent with their color palette, and typography while still calling attention to the small feature additions.
Key Findings
From This
To This
User Testing
Conduct a moderated usability study to measure the usability and intuitiveness of the new features. I tested 5 participants by asking them questions followed by a series of 6 task flows to complete.
Each participant was able to complete the task flows with minor difficulties. The feedback provided, both positive and constructive, was very insightful.
“It’s familiar and intuitive, you don’t really have to think about it.”
“I really like the way it’s presented, maybe it can show what about the packaging is eco-friendly.”
“It provided even more information than I thought it would. It’s very informative and I like that it tells you to take it one step further with the packaging at checkout.”
Participants wanted to know about the water usage.
Eco-friendly packaging might be easy to miss, should put it in a different category.
The sustainability product page should mention what the leaves mean for added clarity
What makes the packaging eco-friendly?
All participants mentioned they really liked the new features and thought that everything added looked like it belonged.
All participants knew the green leaf represented sustainability in some way.
I added information about the products water usage since it was mentioned in both the user interviews and user testing.
I made a new Packaging section in the checkout so it would be mandatory to choose instead of an option, that way customers won’t miss it.
I updated the Sustainable Category header to explain what the green leaf means
The Final Design
Future Considerations
Next Steps & Learnings
Larger pool of subjects: If I had more time I would have liked to interview & test the features with more people.
Sustainability Pledge: The next step would be adding a page dedicated to ASOS’s sustainability pledge with additional information on how they decide which garments are sustainable.
In conclusion, I think this design sprint was very successful. Every participant I spoke with mentioned how much they liked this idea and wished that more brands were more transparent with how their clothes are being made.
Key Features
Based on my research findings, I identified several features to add to the ASOS website to help users find and shop sustainably and hopefully lead them to be more conscious shoppers on the website.
Sustainability Icon
Packaging
Water Usage
Materials
Search Sustainability
Social Responsibility
