problem statementartinmorad.com/cosmecca-presentation.pdf · artin morad key user insights –...
TRANSCRIPT
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!