First Impression.png

Fair

UX/UI App Design

2019

Your Guide to Cruelty Free Cosmetics

Some toiletries and cosmetics companies test their products on animals, while other companies are cruelty-free. Unfortunately, it is incredibly hard to tell them apart.
Fair app lets you know which brands are truly cruelty-free, so that you can shop responsibly, ethically, and environmentally.

Survey

The main methods used for gathering data in this project. Lily represents the conclusions of a survey answered by 100 consumers who wish to shop cruelty-free cosmetics.

User Interviews

To better understand Lily's needs, user interviews were held with three of the respondents.

Ethical Consumer

Tries to avoid harming people, animals and the environment.

About

25 years old
In a relationship
Vegan

Meet Lily.

Lily's goal is to shop more ethically by reducing cruelty toward animals.
When Lily goes shopping for toiletries and cosmetics, she is aware that many companies test their products on animals.

3 Line Art.png
4A Line Art.png
4A Quote.png

There’s a problem. When Lily sees a product in the store, she is lost. She has no way of knowing whether the item she’s interested in is cruelty-free or not.

But,

Why is that?

Bunny logo

4B Bunny Icon.png

If a product has a bunny icon on it, or even if it says "not tested on animals", it means nothing. Some of these icons are trustworthy, but others are not. It is an unregulated territory, and anyone can design their own bunny logo to put on their packaging.

Misleading information

4B Info Icon.png

Companies that test on animals know how to use half-truths and legal loopholes to falsely present themselves as cruelty-free. They do it on their websites, on social media, and via their salespersons.

Availability

4B Mobile Icon.png

There are several websites and groups who provide reliable information regarding animal testing. However, their guides are not mobile compatible. When needed at the store, in real time, they are slow and difficult to use, and sometimes don't load at all.

4C Line Art.png
4C Quote.png

And,

even if Lily finally learns that the brand in fact tests on animals, it is hard for her to find a replacement for that long-loved product, at the same quality and for the same price.

5 Line Art Crop.png

Lily is all alone at the store, with no trustworthy information, and without knowing what her alternatives are.
She ends up buying the same old testing product she's used to.
She betrays her values, and feels like she's a bad person.

5 Black Shape Crop.png

The solution:

Lily needs an app that can scan products on the spot, immediately telling her what is truly cruelty-free, and what is not.

7 Line Art.png

User Flow

Home Screens.png

Scan

Image Recognition allows Lily to quickly and easily scan the item she's interested in.

Lily can always search the brand list to check an item's status. Just in case her camera stops working.

A chance to retake the photo before processing.

The app's home screen is its main function – scanning.
That way Lily can scan her item as soon as she spots it, without wasting time on navigating.

Distinct color and icon mark a negative result.

Positive emphasis: pictures and a bright color draw Lily's attention to all the new products she can try, rather than to the one she can't have.

Result

But then Lily finds out that the item is tested on animals. Before she becomes saddened, though, she is offered similar, cruelty-free products.

10 Screens.png

The next step: if the suggested products are not enough, Lily can go straight to the filter screen to find what she's looking for.

11 Screens.png

Filter

Lily is looking for something specific, so she filters by her needs, such as category and price.

Lily is not only vegan, but also aspires to well-being and sustainability. Therefore she has the option of picking products that are also organic, free of harsh chemicals, and fair-trade.

She is presented with the result list, where she can press a product card to view more details.

It is now fun and easy to replace a tested product with a cruelty-free one, that meets all of Lily's requirements.

12 Screens.png
13-GIF-Unknown-Result.gif

Unknown Status

New companies pop up all the time. If Lily comes across a brand that the app doesn't recognize, there's no need for her to feel let down.
By submitting the picture she took, Lily keeps the app updated. A small delight serves as a reward for her help.

Cruelty-Free Status

And when the item she wants is cruelty-free, Lily can see what other properties it has, where to purchase it, and what's the best price. If the item is cheaper online, she simply presses the link to its product page.

14-GIF-Cruelty-Free-Result.gif
15 Line Art Crop.png

Now,

Lily purchases the cruelty-free item at the store or online.
She has succeeded in keeping to her values and staying true to herself.

Sketches Image.png

Design Language

A Dark Color Scheme

17 Chart.png

As one might perhaps expect, 42% of respondents said that their motive for shopping cruelty-free products is veganism. Yet a nearly identical amount, 40%, have stated that their motive is a firm belief in sustainable consumerism.
This is why I chose an energy-saving, mostly dark color palette. To ensure readability, I used Material Design's guidelines for dark theme.

17 Colors.png

A Sense of Luxury

18 Chart.png

While not one of the main two difficulties, a quarter of respondents are facing this problem: a lost sense of luxury. They are tempted by the aesthetic, eye-catching branding of testing companies that are all around them, and feel they only have limited options by comparison.
Therefore I wanted the app to evoke a high-end feeling, signifying quality and plenty. I turned to fashion ads for inspiration, focusing on luxury goods companies.

Design Inspiration.png

What I Learned

While working on this project I really got to experience the crucial role that research and data play, not only in understanding the user's problems, but in all stages of product development, right up until the last steps of design.
It was also interesting to see that while I buy cruelty-free cosmetics myself, not everything I felt personally was necessarily true for most users.
This is why, if I had more time, I would have liked to test the final design at least once more with potential users, and then do another round of improvements.

Future
Features

Personalization Icon Small.png

Personalization

Registered users will be offered products that are best suited for them, based on recommendations by other users with similar conditions and preferences.

Browser Icon Small.png

Browser Extension

At the moment, most respondents still buy toiletries in physical shops, or buy some items in stores and others online. A browser extension will make their online shopping experience easier by automatically hiding all tested products from appearing on e-commerce sites.

This is a UX/UI project. While the brands used here were based on several online sources, it is not meant as a cruelty-free shopping guide, and should not be used as such.