Ru Li

UI/UX Designer

ROLE

DURATION

COMMITTEE

TYPE

Concept, Research, Visuals

4 months

Adam Smith, Hye-Jin Nae

Thesis, Personal Project

challenge

CHALLENGE

A variety of counterfeit products or chemicals used on the skin can have lasting and potentially fatal consequences for the health and safety of consumers. 

SS problem 1
SS problem 2
SS problem 3

        88

                12,000

                     $5.5 billion

chemicals used in more than 73,000 products in 595 companies which can lead to cancer, birth defects or DNA damage, or other harm. 

negative reports of cosmetics from the consumers 

were lost in sales profit 

SOLUTION

Help you find safer products

A blockchain system of products’ lifespan development that built in many online websites to prevent mix the spurious with the genuine and help user find safer product is discussed and evaluated based on the 52 users with different skin conditions background.

4gif-statge
SS solution 1
SS solution 2
SS solution 3

Blockchain benefit reimagined

The reason why Blockchain technology can stamp out counterfeits is that the records of distributed ledger technology cannot be altered

                          Personalized

Get to know you better. Fill out your personal skin information. Let SafeSkin provide personalized products for you based on your unique skin.

                               Security

The mission of safety level labels is to make ingredients transparent. Using labels to qualify ingredients whether take a toll on our health or not is straightforward.

Easy to work in the online stores &

Get to know your skin

A built-in system in different stores. People can check the product information by clicking "Check on SafeSkin".

Discover how products are evaluated

Behind the "Production" section, SafeSkin shows safety Levels based on the potential side effects that may be caused by the ingredients and based on compatibility to users' skin type generated the score of match degree.

Unlocking the story behind the product

Every process customizes its own page with different modules, and it all verify product from when the product is produced to when the consumer receives it.

Offering suitable products

that your needs

Inspired by Instagram, SafeSkin has multiple sections of products for your skin type. Finding the product that suits you faster.

Explore our community

Getting advice from SkinCare community can be helpful for you to know the benefits and side effects better.

PROCESS

The process for this project includes the following

EMPATHIZE

DEFINE

IDEATE

DESIGN

ITERATE

Background Research

Pain Points

Competitive Analysis

Problem Statement

Solution

Persona

Brainstorming

User Flow

Wireframe

Visual Design

Iterations

Questionnaire Analysis

SS User Research

Analysis: The results show that abnormal reactions to the use of cosmetics and skincare products are common and are not affected by skin type. Most people are looking for products suitable for their skin on the basis of focusing on the efficacy of products.

Competitive Analysis

SS competitive analysis

Pain Points

01

Due to inadequate supervision, shopping sites have many fake products without the user's knowledge.

02

The information on the website is not rich enough for consumers to fully understand the product information. For merchants: using attractive fuzzy information to mislead consumer buying. 

03

The information on the website is not rich enough for consumers to fully understand the cosmetics and skincare product information. For consumer (behavior): it is difficult for customers to buy products that suitable and safe.

04

The information on the website is not rich enough for consumers to fully understand the product information. For consumer (psychology): regardless of whether consumers know the authenticity of the product, it will affect their psychology (regret purchase or not regret)

Summary: Inform the consumer about the product is authentic or fake, they have the right to know; the more detailed information, the more helpful for a decision to purchase.

Persona

intreview

How will SafeSkin change the way the online shopping world works?

Brainstorming

  • Production
  • Storage
  • Shipment 
  • Support

These are the four stages of the product's "whole life". Based on this, ingredients analysis, Inspection, Itinerary tracking, Customer Review, and Safer Alternatives will be introduced in those sections for users to better understand the product.

 

SS_brainstorming 1
workflow Mobile

User FLow

01 Device: Mobile

Sign up SafeSkin and start your journey to find safer products.

User FLow

02 Device: Laptop

“Check products’ lifespan development on SafeSkin when shopping on Sephora”

workflow desktop

Wireframes

Wireframes with four main pages including homepage, search, community, and "me" connect the user flow above.

wireframe instruction

Visual design

Main color: Green represents healthy and red represents credible

Secondary color: For both the Mobile and laptop user interface, I utilize color to show four stages of the product's lifespan development, for example, pink represents the production process, yellow represents storage, orange expresses shipment, and the blueish purple color expresses the Support section. 

 

 

typo
color pallte

Testing and Iteration

By looking for users for testing, I got some constructive feedback. The user groups of the testing are multiple and referential in terms of reliability and rationality. Most of the participants have positive feelings about the idea of four main "Stages", which helps users understand and track the transaction and functions of the product ​to a large extent.

However, for the "ingredients" part of the product, the vast majority of users have given some suggestions. For professionals or non-professionals, no attention is paid to the names of all ingredients, and more attention is paid to the summary of the efficacy or side effects of the ingredients. Regardless of whether it is before or after using or purchasing cosmetics or skin care products, users hope to get suitable treatment for their skin. Therefore, after combining the feelings and suggestions of the subjects, I adjusted the "Production" part of the product details page

 

testing Q
before after

Conclusion

 

The side effects of cosmetics and skin care products seem to be a potential problem at present. Since most of the products have relatively inconspicuous side effects, the harmful reaction can only be triggered after a long period of use, and this kind of problem will damage the body organs for a long time. It is deep and can be fatal. Moreover, cosmetics and skin care products are daily routines that people must use every day. In order to ensure good health, it is time for consumers to pay attention to this issue.

 

The article explored the ingredients of Cosmetics and Skincare products while analyzed existing Apps related to skincare. Compared with other apps, SafeSkin is not only limited to analysis of the ingredients used in the product, but a complete set of production-storage-transport-support processes with blockchain technology to show the "lifetime" of each product in detail and transparently. Because the records of distributed ledger technology of Blockchain cannot be altered, the system of SafeSkin is credible for consumers. In order to help users find suitable safe products and products that reduce exposure to harmful ingredients, highlighting the advantages and disadvantages of ingredients can effectively remind consumers.

 

This article has neglected some "skin industry" issues that fell into a more professional field. These issues lay the foundation for further research on how to help users find better products, skin products, and cosmetics-related fields and try to output iterative products will continue to explore and research in the future.

 

 

Overview the complete design

overview

Thanks for scrolling!
Feel free to reach out if you are interested in my project!

Trackler -R

Ru Li

Visual Communication Design MFA 2021

Trackler-wesite

Website

Trackler-email

Email

Trackler-LinkedIn

LinkedIn

Visual
Communication
Design
MFA

Communication
Interaction
Motion & 3D
Design Studies

 

About the Program