Billi London’s Low Impact Website

10 min readMar 22, 2021

Case Study: How to design a low impact fashion e-shop ?

One of our challenge : would illustrations replace high definition product pictures ?

February 2020
For: Billi London
With: Lucie Lépine
Tools: Miro, Figma

Last year, I had the pleasure to interview the founders of Billi London, an innovative brand of tights that biodegrade in 5 years instead of 40 to 100. Their tights participate in the transition towards a circular economy model: they are designed to be durable and not leave any waste on the environment at the end of their life.

Ethical & sustainable practices are at the core of their business: Marie and Sophie carefully consider the impact of each of their decisions have on the workers, customers, suppliers, community, and the environment. Could we eco-design an e-shop as Billi London eco-designed their tights?

Secondary Researches

To understand the environmental and social impact of the digital world, We both participated in the Digital Climate Collage workshop. Hosted by Sandra Sydow, it was an eye-opening collaborative exercise filled with insightful facts and data.

A snapshot of our Digital Climate Collage

The problems are real and exponential

In 2019, we owned 19 billion digital devices : smartphones, computers, connected wearable or home appliances. Every second 50,000 photos are posted on Instagram, 4 millions YouTube videos are watched and 12 billions emails are sent every hour, but only 20% are opened. (Ademe)

Polluting more than air transport, our combined usage of digital equipments and internet is responsible for 4% of the global green house gas emission (equivalent to 18 nuclear power plants) and forecasted to double to 8% in 2025. (The Shift Project)

All of these factors also contribute to use up natural resources intensively. For instance, manufacturing a 2 kg computer requires the involvement of 800 kg resources.

If it were a country, the Internet would be the third largest in electricity consumption in the world, behind China and the United States.

Once we all linked the sources and consequences, we discussed how to minimize the digital footprint as an individual. Obviously, the responsibility also lands on governments and companies’shoulders. And what about us, UX UI designers? How might we design websites with a low ecological footprint?

Current website assessment

We interviewed 5 customers to get to know their profile and what they think of the current user experience.

Billi London’s current e-commerce — Feb 2021

In parallel, we also ran a desirability test with 20 users who did not know the brand. They were invited to navigate the website for a few minutes and select 5 adjectives out of 25 to describe the look and feel.

Professional, Efficient and Boring were the top 3 adjectives.

These adjectives demonstrates that the experience is not aligned with the brand’s personality: elegance, to be inspiring, bold and unique.

While interviewing, we also discovered some usability issues in the information architecture and copywriting. It made the navigation a bit confusing. Redundant content, too much texts and pages as well as hidden navigation elements got them lost.

That’s when it was really useful to evaluate their website with the 10 usability heuristics to suggest revisions to “help site visitors to complete tasks faster. A site with good UX will have a smaller per-user internet footprint.” (creativebloq.com)

Meet Emma, our persona

Emma embodies the key learnings of our interviews, she is an affluent urban person in her 30’s, aware of climate issues and wants to consume more responsibly. Buying sustainably is not only to help the climate but is also an indirect way to interact with her entourage and share an interesting and meaningful experience.

PROBLEM STATEMENT

AS AN ethical consumer
I WANT my e-commerce experience to be as sustainable as the product I’m purchasing
IN ORDER to reduce my environmental footprint.

So how might we create a sustainable website for Emma without compromising her experience?

Eco-design and Low Impact Design is a growing evolving topic. There are visionary designers and developers but also brands and agencies, who have started the conversation the past decades and proposed many actionable ideas to design digitally as responsibly as possible. At the end of this article, I gathered low impact website inspirations, articles and tools (EN or FR).

There are also good practices in technical, hosting and development in order to reduce a website’s footprint: 115 web page ecodesign good practices by GreenIT. As designers, we focused on delivering a Low Impact Design Prototype based on our findings.

Low Impact Design Principles

After a design exploration phase and feasability assessment of the different best practices, we came up with Billi London’s Low Impact Design Principles.

Measuring

To know the effectiveness of the low impact re-design, we chose 2 complementary tools developed by the GreenIT group based on their 115 Ecodesign Good Practices.

http://www.ecoindex.fr/ calculates an estimation of the environmental footprint and performance of a web page.

and Ecometer.org “assesses the level of ecodesign maturity of the web page by counting the number of good practices implemented; and identifies areas of progress(…)”.

Style Tile design

Based on Billi’s current Brand Identity, we explored the possibilities according to our principles to design a Style Tile.

An accessible color palette should have a contrast ratio scoring near AAA. We aimed to use only 2 main colors for the site layout. We submitted their brand identity colors by pairing the primaries and secondaries to Colorable to check which is the most contrasted and distinguishable color duo.

To limit the amount of light emitted by the screen and save energy, we picked main colors that aren’t too consuming in terms of brightness : Deep green and Pastel pink. We kept black and white as neutrals because they have the best contrast for text and picked the Orange Sanguine as an accent color.

Regarding lowering the quantity weight of medias and content, we assumed it is very important to display high quality product pictures. However, inspired by the Low Impact website of Organic Basics clothing brand, we took the radical step to remove high quality photos, redraw them in vector and display 1 low definition pictures.

Because the founders were open to experimentation, we definitely embraced the Test & Learn culture of UX Design to collect feedback and validate or revise our choices.

For fonts, we found the Google Fonts matching alternatives to their fonts, as they will universally display on all devices. Text sizes is set up to be always more than 14pt to be legible and accessible for the visually impaired according to this article.

Information architecture

Less is more when it comes to Low Impact Design: we reworked the site map to have as fewer and as shorter pages as possible.

We noticed that there was information duplicates in different format: for instance a pdf. Care guide but also a Care guide page that we removed. In the Homepage; unnecessary product details that we moved to the Product pages in our re-design.

A user was interested in reading their “About” and “Commitments” pages but gave up quickly because it was too long and scattered. In order to free the user and the climate from multiples clicks and page loads, instead of splitting “About” and “Commitments” in 2 category pages, we merged them in 1 page where the user could access to all articles with a drop down button for each title.

All over the site, there were copywriting and paragraphs layout editing revisions with the aim to have concise and consistent display of information. Our new site map planned to downsize from 30 pages approximately to 22.

User flow focus

Our challenge is to know if a low impact version of the site would alter the user experience of a fashion e-commerce, consequently we focused on the buying user flow. Even if designing mobile-first is a low impact design good practice, we checked Billi’s analytics and discovered that most sales happens on the desktop version (% of sales on desktop versus mobile: 55,42%) and chose to re-design the 3 first pages for our Low Impact Preview : homepage, product and basket pages.

Hi-fi Prototype

Usability testings

We tested our prototype 6 times with 2 existing users and 4 new users matching the persona profile who do not know Billi London. We purposely did not inform about re-design and gave them the task to buy a pair of Coco tights all the while commenting what they see, and how they feel.

Key learnings

Sustainability commitments must be showcased for accountability and credibility, even more from a relatively new brand as many clicked on “About” to learn more before looking at the product.
The visual design is not deteriorated by the low impact re-design: “trendy”, “young” and “original” were the most used adjectives to describe the homepage.
However to convert to a sale, it is a must to display at least 1 high quality picture on the product page : 5/6 users would not buy without seeing the details of the product even if they understood the WHY of a pixellated photo.

To finalize the experiment, next steps are integrating the full version to measure and compare its ecological footprint before and after re-design. Furthermore, testing sales performances over a period of 6 months to prove that it does not bring down the purchasing experience and the business needs.

Conclusion

To design a low impact website, it is all about balancing users’ expectations and business needs.
Art direction and Content are very important fields to develop for the brand to convey their sustainable motivations all the while achieving their goals without neglecting the user’s experience.

Thank you for reading, if you live in France and read this post entirely, you have downloaded 99MB of Data. This required 12g/CO2, which represents 1 charge of smarphone or driving 50 meters by car. (calculated with Carbonalyzer add-on)

Was it worth it ?

Feel free to contact me if you have any questions or comments.

Linda Mai Phung

Thank you
Lucie Lépine
Billi London
Aude Penouty, Sandra Sydow, Clémence, Tamara, Octavia, Denise, Noémie, Bénédicte, Esther, Sylvie, Lola.

Sources

Environmental footprint of the digital world, Frédéric Bordage — GreenIT (2019)

Pour une sobriété numérique, The Shift Project (2018)

La face cachée du numérique, Ademe (2021)

Digital Climate Collage Workshop (FR & EN)

Ecodesign guidelines:

Podcast with Buddy Buddy Web agency (2020, FR)

Guide d’éco-conception numérique, Designers Ethiques (2021, FR)

A designer’s guide to digital sustainability (EN)

A to do list for sustainable designers leaders (EN)

Site internet et blog : les bonnes pratiques de la communication responsable, Ademe (FR)

Eco-designed logos

Accessibility:

Colorable, to check if your colors are distinguishable enough.

Colorblind Plug-in for Figma, allows you to view your designs in the 8 different types of color vision deficiencies.

Tools to measure and improve:

Eco-conception web, les 115 bonnes pratiques, GreenIT (FR)

Eco-meter (EN & FR)

Eco-Index (FR)

Carbonalyzer Add-on, (FR & EN) an educational tool that allows you to visualize the electricity consumption and greenhouse gas (GHG) emissions associated with your Internet browsing. Available on Firefox and Chrome, The Shift Project.

Other interesting online tools:

All sites do not have all the same methodology and criterias to calculate, so the results varies from one tool to another. Nevertheless, to be low impact is to reduce the use of CO2, energy and natural resources, so the aim is still to reduced the as is number.

https://www.websitecarbon.com/ (EN)

https://www.ecograder.com/ (EN)