INCI Beauty

Project overview

Product

INCI Beauty is an independent project that provides people a mobile application that mainly allows them to analyze the composition of cosmetic products that they scan, search or request analysis directly through the application.

Objectives

In addition to provide product analysis, the application suggests product alternatives, allows its community to share and has many other features that make it quite cluttered and sometimes confusing for its users.
As a regular user of this product, I wanted to bring a modern touch and propose a more optimized version.

Roles

UX Research

Wireframing

Prototyping

Visual Design

Project Frame

Scope

Fictive project
5 days

Mission

Mobile application redesign

Tools

Notion, Miro, Figma and Bravo studio

Deliverables

Problems
Personas & Maps
Designs & Prototypes

UX Research

⏰ 3 days to review the product and map

The research objectives

While understanding the product structure and hierarchy, the objectives were to identify the types of users (personas), problems and decide on the user journey and screens to focus.

The possibilities with INCI Beauty

INCI Beauty helps people to choose their cosmetic and healthcare products with transparency 🔍 .

Transparency

Accessibility

Community

Beauty

Healthcare

Environment

With INCI Beauty, the users can...

Analyse composition of cosmetic and healthcare products and check their labels
Search for products and their alternatives
Research chemical composants and read about their effects and relatives regulations
Register or ask for registration (analysis) of a new product
Mark product efficiency and share their opinions
Discuss with the community
Report issues to the staff and developers
Access to their favorite products
Access to their product researches historic

The users of INCI Beauty

Marion, 22

Nurse anesthetist

Relation with the app

She has discovered the app with a friend one year ago and since that she always use it before test and buy new product.

Main filters used for search‍

Cruelty free label

16/20 min

Specific composants

Life mode

Vegan

Animals lover

Sportive

Nature

Travel

Lily, 42

Accountant

Relation with the app

She has discovered the app with a friend one year ago and since that she always use it before test and buy new product. It has became an indispensable.

Main filters used for search‍

18/20 min

Community opinions

Specific composants

Specific natural extracts

Life mode

Family

Art lover

Cooking

Meditation

Travel

Paul, 30

Insurance advisor

Relation with the app

Paul has discovered the app with his girlfriend and uses it from time to time, when he doesn't forget it.
He finds the scan very practical, especially when he is hesitating between several products.

Main filters used for search‍

Number of likes

between yellow & green marks

Made in France label

Life mode

Couple

Eco-friendly

Economic

Adventure

Hiking

UX Review

General returns

INCI Beauty is well noted with 4 / 5 ⭐️ !

Specific users' returns

Below is what I retained from the opinions gave on the Apple store by the current users of INCI Beauty mobile app.

The product sheet shows lot of information and sometimes leads users to confusion notably on the different ratings used.
This page should be further clarified.
Many have asked if it could be possible to see when a product has a more recent version in the analysis process.
This can be specified into the product sheet.

Currently the way to ask to analyse a new product is to go into the community chat and share the information and then wait.
Provide a private and direct access for this action with a progress indicator will bring so much value to the users.
A last point noticed is to provide user with a direct way to report issues to the staff or developers without passing by the Apple store.

User journey review

Choose what you want to do!

Home screen with 4 main actions
Since the users are not on this page they cannot access their account, settings and the other actions here
The app does not provide the usual navigation bar along the journey

Scan the product you want to analyze ...

The user can activate the flash
And has the option to get a mini-sheet coming from the bottom of the screen once a product is scanned rather than get the full page to change

Or search it directly using the search bar...

INCI Beauty - product categories list / suggestions

Categories are provided to help you in your research

the filter...

INCI Beauty - sub-categories list / suggestions

This filter allows users to filter products based on their chemical composants and is available since the beginning of the research.
Once opened, it displays a navigation bar in the bottom.

and the sub-categories.

INCI Beauty - second sub categories list

Depending on the category, numerous sub-categories are available.

Once in a sub-category...

The users can see a list of products with their short description and notation if available.
A new filter specific to this sub-category has appeared on the top-right.

Here is what the specific filter looks like..

Users can filter based on pertinence, notation, brand, natural extracts that we found also in the chemical filter and selling points.

Once on the product sheet..

The users can find lot of information including two grades, one by the community (not usual visual) and one by the scientists.
They also have many possible actions that we can see are sometimes repeated.

Opening the community tag..

To know where to buy this product..

INCI Beauty - product sheet - shops to find

And have a look at its alternatives.

INCI Beauty - product sheet - alternatives

Finally add a product to its favorites list..

INCI Beauty - product sheet - add to favoris

What I retained from this review..

The absence of a navigation bar throughout the journey limits the user in his actions to access for example his private space (profile & account settings), his history and other main actions like search, scan or chat quickly.
The product sheet gather and display lot of information. Also, some of the actions are duplicated or in my opinion not at the right place and these can be confusing for the users.

Different filters appear along the journey and not in the same area.
I found categories in the filters very similar or the same ("natural extract")
Positioning the filters close together will prevent the users to miss them.

Competitive benchmark

The objectives of this benchmark is to understand and get inspired from the market trends in terms of services (features) and design.

Yuka

Among its competitors, Yuka stands out for its level of maturity in terms of number of users and product diversification - not only concern cosmetic products.

Yuka was a good source of inspiration.

Main point to retain:

Consistence and ease of use with the preservation of a navigation bar all along the journey.

CLEAN Beauty

Like INCI Beauty, CLEAN Beauty focus on cosmetic products.
‍
Marked 4/5 by its users, it stays a good source of inspiration.

Main points to retain:

The app includes an onboarding page detailing how to use the app.
They also provide a glossary page and a dedicated page (under the form of one article) about the chemical composants and their regulations.

CLAIRE

CLAIRE also focus on cosmetics only.

Having a lower mark and marked by less users, it still has a modern and pleasant visual to get inspired.

Main points to retain:

The use of blocks and contrasted colors brings modernity and better visibility.
They provide a page with a list of articles to read about cosmetics, chemical composants and regulations.

Wireframing

⏰ 1 day to ideate and wireframe

The wireframing step consist in designing the skeleton of the app and its interfaces without necessarily having the final content or visual. This step allows me to test and challenge my ideas in order to display all the necessary information to fully enjoy the digital product in the best possible way.

Before wireframing, I created this high-level sitemap to prevent missing main features.

The wireframes

Visual / UI Design

⏰ 1 day to get inspired, adjust and apply the style

The UI design step consists of creating (if needed from scratch) the visual elements or apply the brand visual design to the components created in the wireframing phase.

It is as well important that the users recognize the brand identity (and consistency) along its journey as its simplicity to use. It is because visual design includes both the aesthetics aspects (beautiful & pleasant) and accessibility aspects (readability and visibility) that it also plays a significant role in information hierarchy.

Moodboard

To work on the visual design, I always start by creating a moodboard. This moodboard is a collection of inspirations and those can go from simple colors, photographies, logos, screens shots of interfaces to some reviews of existing products (in addition to the benchmark). In this case, I get a lot inspired by AirBnB and Yuka mobile apps.

The idea here is to get inspired by the best and avoid reproducing the mistakes of the less good.

My proposition

It is finally the time I decide for the color palette and typographies to use even if I had already chose the typography when working on the wireframes as it helped me to better anticipate spaces. It is also a phase for small adjustments as when I apply the colors I better see the harmony and visibility that I want to create and give.

Products list inside a sub-category

A navigation-bar is now visible to allow users to quickly access to the main features and so, to optimise their experience in general.
Like the navigation bar, the users have constant access to their account and the mobile app settings - top-right button.
Both filters are now visible, synthesised and close together near the search bar to facilitate and optimize the research process.
It will now be possible for the user to see which product is in his favorites list and to remove or add it if wanted without necessarily getting into the product sheet.

Synthesization

More concise and practical filters to use!

Here is the filter of families of chemicals located under the search bar - for all products - available since the beginning of the research.

Practicity

Here is the specific filter appearing once inside the sub-category next to the search bar and specified as default input to "search within this sub-category.

Final design Mock up - Product list category filter

The product sheet

Better accessibility of the main actions: activate the alarm to be notified of any changes or activities linked to the product, add to favorites, mark the product.

Better visibility...‍

on the composition notation with the adjustment of colors contrast and its key position,
on the community notation with the star system rather than the likes system to avoid confusion,
on the product version with the addition of a discrete block button specifying if a new version is in analysis process. Once clicked, it should show to the user the progress of analysis of the new product version,
on the chemicals composants by grouping them based on their grade.

If the user want to know more about the product (labels, characteristics, etc.), I suggested a secondary button under the composants list and leave its former location to the scan button.

Visibility

More accessible actions!

Final Design - Actions via product sheet

Actions specific to a product sheet - share, modify information, add a new version - and more - learn more on notation system and composants, report an issue - are now accessible on the top-right (3-dots button).

Efficiency

As it was required by the users, they now can organize at a minimum their favorites into lists very easily!

Final Design - add to favoris from product sheet

Their new favorites area shared with their alerts

Final Design - manage favoris inside a list

Final Design - actions inside a list of favoris

Optimization

Style guide

This mini-style guide gathers the typography used (one here), the colors and their functions and the components - tags, buttons, progress bars, nav-bar, etc.

As we could think, the application is not only addressing young women (INCI Beauty) but address any public to help them better choose their cosmetic and healthcare products in full transparency and regularly on-site (in the store).

I therefore wanted to reinforce the readability and accessibility by adjusting the color contrasts, the sizes/widths of the texts and buttons. I also wanted to bring more modernity through the choice of colors and the use of rounded edges and blocks. Finally, I am happy that I managed to maintain a visual consistency through the creation of the components and the harmonization of colors.

Components

Challenges

🤝 Do the right choices!

Choosing beautiful colors is easy, but as simple as it may seem... making the right choice of colors is essential and not simple. There, it is necessary to find colors that must: represent the brand identity, well represent the pre-defined functions, be accessible, be beautiful and go well together.

Being able to condense all the necessary information and actions to the advantage and benefit of the user and the product while making its journey pleasant, that is the challenge that I love !

Key Take Aways

💫 Being able to adapt..

One project, its own method.
Even if the method is basically the same, depending on the complexity of the product and the objectives defined, the time needed to get to know the product and the time dedicated to creativity can hugely differ, hence the importance of being able to adapt!

Understand the objectives before starting a project 😅 .
At the beginning, I thought I could redesign the application in 2 days since I know the product... but I did really need 5 days otherwise there would be no interest to work only on the visual (UI) without working on the core problems and user expectations (UX!). Again, these made me aware of the agility I need to work on!

INCI Beauty

Project overview

Product

Objectives

Roles

Project Frame

Scope

Mission

Tools

Deliverables

The Process

Project Goals

UX Research

The research objectives

The possibilities with INCI Beauty

The users of INCI Beauty

UX Review

General returns

Specific users' returns

User journey review

Competitive benchmark

Wireframing

Visual / UI Design

Moodboard

My proposition

Style guide

Components

Challenges

Key Take Aways

Thank you
for coming until here!

INCI Beauty

Project overview

Product

Objectives

Roles

Project Frame

Scope

Mission

Tools

Deliverables

The Process

Project Goals

UX Research

The research objectives

The possibilities with INCI Beauty

The users of INCI Beauty

UX Review

General returns

Specific users' returns

User journey review

Competitive benchmark

Wireframing

Visual / UI Design

Moodboard

My proposition

Style guide

Components

Challenges

Key Take Aways

Thank you for coming until here!

Thank you
for coming until here!