Billi London
February 2020 - 14 days
UX/UI research
With: Lucie Lépine, remote working.
Billi London is 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. Therefore, how might we eco-design an e-shop as Billi London eco-designed their tights?
Role: UX/UI Designer, market research, user research, feature prioritization, prototyping, testing, visual identity.
Tools: Miro, Figma, Zoom.
Project carried out in English, our low impact resources are in French and English.
Research
To understand the environmental and social impact of the digital world, we participate in
La Fresque du Numérique , a collaborative workshop-game that informs us with facts and revealing data.
The problems are real and exponential
Indeed, we learn that in 2019, we owned 19 billion digital devices: smartphones, computers and connected objects. Every second, 50,000 photos are posted on Instagram, 4 million YouTube videos are watched and 12 billion emails are sent every hour, but only 20% are opened . (Ademe-FR)
More polluting than air transport, our combined use of digital equipment and the Internet is responsible for 4% of global greenhouse gas emissions (equivalent to 18 nuclear power plants) and is expected to double to 8% in 2025 (The Shift Project-FR/EN)
Finally, if it were a country, the Internet would be the third largest consumer of electricity in the world , behind China and the United States.
After linking sources and consequences, we discuss how individuals, governments and businesses could minimize the environmental footprint of digital.
And what about us, UX-UI Designer? How to design websites with a low ecological footprint?
Evaluation of the current website
We start by interviewing 5 clients to find out their profiles and what they think of the user experience.
During the interviews, we notice problems with ergonomics, information architecture and writing that make navigation confusing. Redundant contents, superfluous text and pages as well as hidden navigational elements confuse them and lead to payment abandonment.
That's when it really came in handy to evaluate the site with the 10 usability heuristics to advise changes to "help site visitors get things done faster." Because "A site with a good UX will have a smaller digital carbon footprint per user." (Creativebloq.com)
At the same time, we also carried out a desirability test with 20 users who did not know the brand. They were asked to browse the website for a few minutes and select 5 out of 25 adjectives to describe the look and feel of it.
"Professional", "efficient" and "boring" were the first 3 adjectives.
These adjectives show that the experience does not correspond to what the brand seeks to represent: elegance, being inspiring, audacious and unique.
Meet Emma, our persona
Emma embodies the key lessons from our interviews, she is a well-to-do city dweller in her thirties, regularly shopping for fashion and other products online. Aware of climate issues, she wants to consume more responsibly. Buying eco-responsibly is not only helping the climate and people, but it is also an indirect way to interact with those around you by sharing an interesting and meaningful experience. (Photo: Unsplash)
PROBLEM
AS AN Ethical Consumer,
I WANT my e-commerce experience to be as eco-responsible as the product I buy,
IN ORDER to reduce my environmental footprint and share my experience with my loved ones.
How to create an eco-responsible e-shop without compromising Emma's experience?
Digital eco-design is currently an undeveloped and constantly evolving subject.
Designers, developers, but also brands and visionary agencies have started the conversation over the past 2 decades and proposed concrete solutions to design digital interfaces in the least impactful way for the environment.
I have collected many article references and tools at the end of the article in English and French. For this project, we were particularly inspired by: the Low Impact site of Organic Basics , from the interview of Buddy Buddy by The Good Goods , who designed the site of the Maartin agency.
Apart from Design and ergonomics, there are good technical, hosting and development practices to reduce the footprint of a website: Green IT reference 115 best practices for eco-designing web pages . For this experiment, we focused on producing a low-impact Design prototype.
Design principles of digital eco-design
After a design exploration phase and an assessment of the feasibility of the various best practices according to the needs of the company and the users, we have retained these design principles for Billi London.
“You can only improve what you can measure”
To know the effectiveness of the redesign of the site with low impact, we have chosen 2 complementary tools developed by the Green IT group on the basis of their 115 good eco-design practices.
EcoIndex calculates an estimate of the environmental footprint and performance of a web page.
EcoMeter “evaluates the level of eco-design maturity of the web page by counting the number of good practices implemented; and identifies areas for progress (…)”.
Tile Style
Eco-responsible as much as possible, we decide to over-cycle the existing one and to adapt the current brand identity of Billi London to the principles of defined web eco-designs.
Knowing that an accessible color palette must have a contrast ratio close to AAA, we decide to use 2 main colors instead of 5 for the layout of the site. By combining the primary and secondary colors and subjecting them to Colorable , we find the most contrasting and legible color duos that are pleasing to the eye.
To limit the amount of light emitted by the screen and save energy , we have also chosen colors that consume little in terms of brightness: the dark green and pastel pink . We kept black and white as neutrals because they have the best contrast for reading text and chose Blood Orange as the accent color.
Stop Rich Media
Regarding the weight reduction of media quantity, we assumed that displaying high quality product images is very important for a fashion e-shop. However, we take the drastic decision to remove all high quality photos, redraw them in vector and display 1 low definition image for product photos.
For fonts , we are replacing fonts with Google Fonts alternatives, as they will display universally on all devices. Text size is set to always be larger than 14pt to be visible and accessible to visually impaired people, according to this article.
Information Architecture
Less is more, when it comes to eco-design: we have reworked the sitemap to have as few pages as possible.
We have removed duplicate information such as a "maintenance guide" page and a pdf. "Maintenance guide" to keep only the pdf.
A user wanted to read the “About” and “Commitments” pages, but quickly gave up because they were too long and the paragraphs were scattered. In order to free the user and the climate from multiple clicks and page loads, we have thus merged them into 1 page. The user will be able to access all articles with a drop-down button for each title. Our new site plan was to go from about 30 pages to 22 pages.
Focus on user flow
Our challenge is whether a low impact version of the site would alter the user experience of a fashion e-commerce, therefore we focused on the buyer user flow. Even though mobile-first design is a good low-impact design practice, we checked Billi's stats and found that most sales were on the desktop version (55.42%) and opted to create a prototype with the home pages, product pages and basket.
Hi-Fi prototype
Usability testing
Our prototype is tested 6 times with 2 existing customers and 4 new users who do not know Billi London and corresponding to the Emma persona profile. We deliberately didn't inform about a redesign and gave them the task of buying a pair of Coco tights.
Key information
Sustainability commitments need to be showcased for brand credibility, as many clicked “About” to learn more before looking at the product.
The desirability is not deteriorated by the eco-designed design: “trendy”, “young” and “original” were the adjectives most used to describe the home page.
However, to convert to a sale, it is essential to display at least 1 high quality photo on the product page : 5 / 6 users would not buy without seeing the product details even if they understood the WHY of a pixelated photo.
Conclusion
Designing a low-impact website is all about striking a balance between user expectations and business needs . Art direction and content are very important areas to develop so that the brand transmits its eco-responsible motivations while achieving its objectives without neglecting the user experience.
In order to finalize the experience, the next steps will consist of integrating the full version of e-commerce in order to measure and compare its ecological footprint before and after the redesign. Additionally, we will test sales performance over a 6-month period to prove that the shopping experience and business needs are not adversely affected.
Find all our resources, tools used and inspirations on Medium.