Billi London

August 2020 - 10 days

UX/UI training project Ironhack

With: Lucie Lépine, remote working.

Design of a well-being app

Very often, with all our wish to be healthier, we download this promising fitness app, use it once with slight success, and ... never use it again.

Let's challenge this habit.
Facial yoga is booming, it's a natural alternative to relaxation and anti-aging remedies.
Our challenge is to create features and a design system that will encourage users to engage in this practice.

 

Role: UX/UI Designer, market study, user researches, user testings, features prioritization, wireframing, prototyping, visual identity.

Tools: Mural, Figma, Invision, Zoom.

Find all the UX process in Medium.

After sending a survey with 50 yogis and interviews with 15 practitioners, we created a happy and fresh mood board to convey the playful aspect of the practice.
With facial yoga, users shape their face. So we opted for a creative direction with abstract shapes and artistic lines. For the palette, solid and bold tones like cobalt blue and neon yellow to contrast with the natural tones of the skin.

Climate Collage.png

Our Style Tile is tested by 20 users with a desirability test which confirms the concepts of our moodboard: it reminds them of these adjectives: playful, trendy and friendly.

During our Marketing research and users interviews, we noticed that they need a regular monitoring of visual and relaxing benefits to motivate them to practice regularly.

Thus, we decided to work on the functionalities of: taking a Selfie before / after with a dated gallery but also a questionnaire to follow the different effects of rejuvenation, relaxation and facial musculature over the course of the practice.

Many users told us about the embarrassment felt when practicing at home because of the funny faces made around their loved ones or flatmates. We celebrated humor by integrating a videoconferencing feature to do these exercises with friends.

Many users told us about the embarrassment felt when practicing at home because of the funny faces made around their loved ones or flatmates. We celebrated humor by integrating a videoconferencing feature to do these exercises with friends.

persona Billi-classic.png

Many users told us about the embarrassment felt when practicing at home because of the funny faces made around their loved ones or flatmates. We celebrated humor by integrating a videoconferencing feature to do these exercises with friends.

How to create an eco-responsible e-shop without compromising Emma's experience?

In addition to this, you need to know more about it.

Digital eco-design is a subject that is wasteland and constantly evolving for the time being.

Designers, developers, but also visionary brands and agencies have started the conversation over the past 2 decades and offered concrete solutions to design digital interfaces in the least impactful way for the environment.

I have gathered 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 , the interview with 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 for reducing a website's footprint: Green IT references 115 good web page ecodesign practices . For this experiment, we focused on producing a low impact Design prototype.

Digital eco-design design principles

In addition to this, you will need to know more about it.

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 retained these design principles for Billi London.

Design Principles.jpg

"We can only improve what we can measure"

To determine the effectiveness of the low-impact site redesign, we chose 2 complementary tools developed by the Green IT group on the basis of their 115 good ecodesign practices.

EcoIndex calculates an estimate of the environmental footprint and performance of a web page.

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

In addition to this, you need to know more about it.

Tile style

As eco-responsible as possible, we decided to over-cycle the existing one and 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 submitting them to Colorable , we find the most contrasting color duos that are the most readable and pleasing to the eye.

Find the whole process of our UX research by consulting this Medium post.

Colors.png

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: dark green and pastel pink . We kept the black and white as neutral as they have the best contrast for reading text and chose Blood Orange as the accent color.

In addition to this, you need to know more about it.

Stop rich media

As for reducing the weight of the media quantity, we assumed that it is very important to display high quality product images for a fashion e-shop. However, we take the drastic decision to remove all high quality photos, redraw them as a vector, and display 1 low definition image for the produced photos.

For fonts , we are replacing the fonts with Google Fonts alternatives, as they will show universally on all devices. Text size is set to always be greater than 14pt to be visible and accessible to visually impaired people, according to this article.

Style Tile.png
Information architecture

Less is better, when it comes to eco-design: we have reworked the site map 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.

One 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 merged them into 1 page. The user will be able to access all the articles with a drop-down button for each title. Our new site map was to go from around 30 pages to 22 pages.

Billi London - Copy of Site map 23_02_20

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 store, so we focused on the flow of buyer users. Even though mobile-first design is a good low-impact design practice, we checked Billi's stats and found that most of the sales were on the desktop version (55.42%) and chose to create a prototype with home pages, product pages and shopping cart.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

Hi-Fi Prototype

Ergonomics tests

Our prototype is tested 6 times with 2 existing clients and 4 new users who do not know Billi London and match the profile of persona Emma. We deliberately didn't notify of a design overhaul and gave them the task of buying a pair of Coco tights.

Key information

  • Sustainability commitments should be showcased for brand credibility as many clicked “About” to find out more before looking at the product.

  • 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 a must 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.

In addition to this, you need to know more about it.

Conclusion

In addition to this, you need to know more about it.

Designing a low impact website means balancing user expectations with business needs . Artistic 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 addition to this, you need to know more about it.

In order to finalize the experiment, the next steps will consist in integrating the full version of e-commerce in order to measure and compare its ecological footprint before and after the redesign. In addition, we will test the sales performance over a 6 month period to prove that the shopping experience and business needs are not adversely affected.

In addition to this, you need to know more about it.

Find all our resources, tools used and inspirations on Medium.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.

In addition to this, you need to know more about it.