Artin Morad

Art in Morad

Problem Statement

The problem is that people have a hard time understanding skincare ingredients and finding products that work for them.

Art in Morad

Objective

To educate skincare consumers on cosmetic ingredients and to help them find new and effective products.

Art in Morad

Original Ideas– A barcode scanner to quickly bring up product information.

– A dictionary of cosmetic ingredients with easy to understand definitions.

– An in app Dermatologist/Specialist service.

– A feed of skincare products personalised for each user.

Art in Morad

Competitor AnalysisCompetitor Analysis

Websites RedditCommunities CosDNA Beautypedia /

Paula’s Choice Think Dirty Cosmetic-Ingredients.net Hwahae (화해)

Easy to use interface ! " ! " " −

Only in Korean

Mobile App " ! " " Mobile only

! " Mobile only

Customer Reviews " " " ! ! "

Scan Products ! ! " " ! !

Ingredient Definitions

− Scattered in comments

− Only one word definitions

that people won’t understand – E.g. Solvent,

Emollient

" "−

Only one word definitions that people won’t

understand – E.g. Solvent, Emollient

"

Ingredient Ratings ! " " " " "Messaging / Community " ! ! ! ! !

Links to Purchase " ! " " ! !

Compare Products ! ! ! ! ! !Filter by

Ingredients " Through search

" Through search

" Through search

! " Through search

!

General Tips and Advice " ! " ! ! !

Artin Moradalizadeh UXD32

Art in Morad

User Interviews7 people.

45 minutes.

16 questions.

Friday, September 23 to Tuesday, September 27.

Art in Morad

Key User Insights– Skincare has a high learning curve. – Reviews provide validation and can easily sway their decision. – Ingredients are intimidating and too scientific. – Wish they knew more about skincare. Can never know enough. – Dermatologist consultation are too expensive. – Skincare is subjective. – Learning more about ingredients is of interest. – A barcode scanner sounded useful and fun. – Cautious of marketing claims and sales people.

Art in Morad

Key User Insights“My skin affects me more than

it should. Skincare has become a habit for me.”

“Many consumers simply aren’t aware, and the cosmetic

companies would like to keep it that way. Building up ingredient

awareness is ideal.”

“Even when I’m in Priceline I’m on my phone researching

about the products I look at before I buy […] I want to

make informed decisions.”

“I’m allergic to Sodium Lauryl Sulfate so I need to avoid

anything with that.”

Art in Morad

Personas

Sophie20yrs / Student

Jen33yrs / Marketing Manager

Art in Morad

Sophie20yrs / Student

“My skin affects me more than it should. Skincare has become a habit for me.”GOALS- Clearer skin - An easier way to find products she loves and avoid the bad - A better understanding of ingredients

PAINPOINTS- Struggles with acne - Lacks understanding of ingredients & what will work for her skin - Can’t afford high-end skincare products

Personas

Art in Morad

Jen33yrs / Marketing Manager

“Many consumers simply aren’t aware, and the cosmetic companies would like to keep it that way. Building up ingredient awareness is ideal.”

GOALS- Wants to prevent the signs of ageing - Find products that truly work - To buy products based on ingredients & not through marketing - A skincare personal assistant to help her in store

PAINPOINTS- Knows very little about skincare and ingredients - Lacks the time!

Personas

Art in Morad

User FlowDecision to make a purchase At store looking for products Just after the purchase After using the product

😐 😖 😀 😤The user has decided they need

a new product to address a skincare need.

The user is feeling incredibly overwhelmed at the store. So

many products, marketing claims and scientific ingredients. They just want something that works.

After all that confusion and indecisiveness, the user is super excited to try their new product. It’s going to fix all their problems

and be their next “holy grail”.

Unfortunately, the product isn’t everything they had hoped. It

hasn’t fixed their problems and it didn’t do what was said on the

packaging.

Art in Morad

User FlowDecision to make a purchase At store looking for products Just after the purchase After using the product

😐 😖 😀 😤The user has decided they need

a new product to address a skincare need.

The user is feeling incredibly overwhelmed at the store. So

many products, marketing claims and scientific ingredients. They just want something that works.

After all that confusion and indecisiveness, the user is super excited to try their new product. It’s going to fix all their problems

and be their next “holy grail”.

Unfortunately, the product isn’t everything they had hoped. It

hasn’t fixed their problems and it didn’t do what was said on the

packaging.

Art in Morad

User Flow with CosmeccaDecision to make a purchase At store looking for products Just after the purchase After using the product

😐 🤓 😀 😍The user has decided they need

a new product to address a skincare need.

The user uses Cosmecca in store to compare product reviews, look up ingredients and find out more

about the product. They feel informed and in control.

The user is super excited to try their new product. It’s going to fix

all their problems and be their next “holy grail”.

Since the user made an informed decision by looking up what other

people had to say about the product and understanding the ingredients, the product works

well for their original need.

Art in Morad

User GoalsTo learn more about skincare productsand ingredients.

To find new products based off newly learnt knowledge or existing knowledge.

Art in Morad

Original Ideas! A barcode scanner to quickly bring up product information.

! A dictionary of cosmetic ingredients with easy to understand definitions.

" An in app Dermatologist/Specialist service.

! A feed of skincare products personalised for each user.

Art in Morad

Minimal Viable ProductTaking into consideration the feedback from our user interviews, user goals, competitor analysis and the user flow, we narrowed down the feature set to 5 key features for the MVP.

1. Barcode Scanner 2. Ingredients Dictionary 3. Reviews 4. Products Feed 5. Likes/Dislikes Filtering System

Art in Morad

Feature PrioritisationHigh Impact

Low Impact

Expected Unexpected

Barcode scanner

Ingredients definition

Reviews

Search

Product Discovery Feed

Filtering

Likes/Dislikes

Push notificationsof product reformulation

Syntax highlightingof ingredients

Add productsto database

Buy products

Wishlist

Messaging

Profiles

Photo diary

One-on-one specialist advice

Skincare quick start guide

Art in Morad

Feature PrioritisationHigh Impact

Low Impact

Expected Unexpected

Barcode scanner

Ingredients definition

Reviews

Search

Product Discovery Feed

Filtering

Likes/Dislikes

Push notificationsof product reformulation

Syntax highlightingof ingredients

Add productsto database

Buy products

Wishlist

Messaging

Profiles

Photo diary

One-on-one specialist advice

Skincare quick start guide

Art in Morad

Card SortingFor the most part, the users sorted the cards in the expected categories.

The use of language was very important. Understanding the difference between a user’s liked ingredients or a product’s ingredient.

Art in Morad

Sitemap

(1) Home

(1.1) Product Feed

(2) Search

(2.1) Search Results

(3) Barcode Scanner

(3.1) Barcode Camera

(4) Dictionary

(4.1) List Of Ingredients

(4.1.1) Definition of Ingredient

(5) Profile

(5.1) Loved Products (5.2) My Ingredients

(5.2.2) Disliked Ingredients

(6) Product Page

(6.1) Product Information (6.2) Photo Gallery (6.3) Ingredients (6.4) Reviews

(6.3.1) Definition of Ingredient

(5.2.1) Liked Ingredients

Cosmecca

Successful scan

Art in Morad

Wireframe Sketches

User taps on scan tab Aligns barcode to scan Product details is shown Tapping on ingredientwill bring up definition

Art in Morad

Usability Testing

You’re in Priceline looking at a skincare product on the shelf. Find out more about the product.

You’ve discovered a new ingredient you love and one that causes a breakout.

Art in Morad

Usability Test Results & Actions• The “Quick Learn” filter button in the product

ingredients section was confusing to most people. While they like the idea, it definitely needs some work. The use of the word “filter” confused them.

• The “Add Product to Database” would be cumbersome. Users didn’t feel like they would add a product while on the go and they weren’t going to type all the ingredients on a mobile.

Art in Morad

Usability Test Results & Actions• Liking/Disliking an ingredient brought up a box to

confirm their action and take them to their Liked/Disliked ingredients list. This confused many of the users and they didn’t like it. Was suggested to just fill in the icon of the Like or Dislike icon and animate it to confirm their action instead taking over their screen to confirm.

Art in Morad

Usability Test Results & Actions• Being able to add

ingredients to their Liked and Disliked lists from the “My Ingredients” section was mentioned instead of just from the definition page. I’ve decided to include an Add button that will bring up the Dictionary list in a modal plus a search bar.

Art in Morad

Text field to enter user details.

Segmented bar to select gender. Only one can be selected.

Continue to the next step. Button will float above keyboard or sticky at bottom.

Wireframe - Sign Up1

2

3

1

2

3

Art in Morad

Buttons to select skin type. Only one can be selected.

Buttons to select skin concerns. Up to two can be selected.

Wireframe - Sign Up1

2

1

2

Art in Morad

This part can be skipped, but it’s not something we want them to do.

The list of ingredients is in a little window that can scroll.

Ingredients selected are checked with a tick.

Wireframe - Sign Up1

2

3

1

2

3

Art in Morad

This part can be skipped, but it’s not something we want them to do.

The list of ingredients is in a little window that can scroll.

Ingredients selected are checked with a tick.

Wireframe - Sign Up1

2

3

1

2

3

Art in Morad

Wireframe - Home1

2

3

45

Image of the product.

Number of the user’s Liked Ingredients that are in the product.

Name of product. One line only.

The product’s brand. One line only.

Tapping on this tab will open a camera view straight away for the user to scan a barcode. Camera view will slide in from the bottom.

1

2

3

4

5

Art in Morad

Wireframe - Barcode1

2

3

Close the Barcode Scanner view.

Once focused the barcode will automatically be scanned and open the product page if there’s a match. No need to tap a button to take a scan.

Tapping on the screen will focus the camera.

1

2

3

Art in Morad

Wireframe - ProductTapping on heart icon will add the product to the user’s Loved Products. Will animate on tap to confirm.

On tap will smooth scroll to reviews section below.

On tap will open alert view to confirm notification for when there’s a product reformulation.

On tap will open definition of ingredient in a seperate view.

Liked/Disliked ingredients will be highlighted to stand out.

On tap of the button, the ingredients list will expand and push the content below down.

1

2

3

1

2

34

5

64

5

6

Art in Morad

PrototypeYou can view the high fidelity prototype for Cosmecca below:

https://invis.io/TZ9B8LLB6

Art in Morad

What’s Next?– Continued validation and user testing.

– The “Quick Learn” ingredients solution.

– Syntax highlighting of ingredients by type.

– Price comparisons and option to buy products.

– A photo diary to check progress.

– Look into replacing Ingredients selection in sign up to products they like.

Thank you!