Issuu

UX Process & Documentation Charm Skin Care

Eva Alradaideh

Charm | 3

CONTENTS 1: PROJECT BRIEF

3: USER EXPERIENCE

Who Are We? 6 Problem Statement 7 User Goals 8

Storyboard 20 Affinity Map 21 Content Strategy 22 SWOT Analysis 26 Task Analysis 27 User Flow 28 Site Map 31 Visual Identity 32 Iconography 33 Wireframes 34 Prototypes 38 Ad Campaigns 46

2: RESEARCH Research Plan 10 Survey Results 11 Interviews 12 Personas 13 Competitive Analysis 17

Charm Mobile App

Project Brief Charm | 5

Who Are We? To put it simply, we are a skincare movement. Charm is a mobile skincare application that aims to help itâ€™s users improve both their spending and skincare habits. Charm allows users to conveniently input their kitchen ingredients into a database that will generate various recipes for face masks, exfoliants, body scrubs, and more! We make it easy to get cheap, personalized, and accessible care straight from the comfort of your own home!

Whatâ€™s the Point? Problem: Skincare is a very over saturated market that makes it difficult for people to find the best product for their skin types in a costly manner.

Solution: Charm allows users to access recipes based on the ingredients available in their own kitchens.

Charm | 7

User Goals The user goals are important to consider as they dictate the direction the application is heading through content and design. These goals also allow for the indication of target audiences and evaluation of personas.

1 2

Provide all users with access to skincare remedies.

Personalize search results based on userâ€™s skin profile.

Give access to various useful articles to further the userâ€™s knowledge on skincare

Compile data summaries of skin progression and improvement to give further insight on how recipes impact their skin.

Research Charm | 9

Research Plan 1

Mindmapping

Affinity Map

Group Meetings

Milestone 1 Competitive and Visual Audits

Milestone 2 Conduct online survey

Milestone 3 Conduct persona interviews and develop personas

Milestone 4 Create content strategy

Milestone 5 Create storyboard

Milestone 6 Create user flows and sitemaps

Wireframes

Low Fidelity Prototype

High Fidelity Prototype

User Testing

Research will be conducted over the course of 15 weeks. All research should be done in order to ensure that results are satisfactory to create the most effective user experience for Charm.

Survey Results

87%

Of population are female. 8.5% are male, and 4.3% listed as other.

63% 55%

follow a skincare routine, 29% do not. 40% of those people have daily routines, whereas 11% have weekly routines.

have problem skin (acne, dryness, skin disorder), whereas 45% do not. 55% also have no preference with organic products

89% 21%

use facewash in their routines, 42% use exfoliators, and 38% use facemasks.

prefer to make their own face masks. 51% have the ingredients to make a mask at home, and 47% are interested in an app that helps them create masks.

The survey was conducted using Google forms and distributed via email, text message, and word-of-mouth. 47 people responded, most attend George Mason University. Future studies for this app should expand their population range between different universities and maybe high schools.

Charm | 11

Interviews The interviews conducted aimed to better understand the potential user base’s skin and haircare habits. I asked them questions pertaining to income, occupation, budgeting, habits, goals, and expectations.

Interview Script: [EVA] Hello, and welcome to the User Study interview for the Charm Application concept. Now, before we get started – do you consent to a recording of this for internal use? [EVA] Great, now to start – tell me something about yourself. [EVA] How old are you? [EVA] Are you currently in school? Tell me about what you study. Do you work? How many hours a week do you work?

[EVA] Would you go out of your way to purchase ingredients you don’t have to supplement a recipe? [EVA] What are your biggest complaints about the products you currently use? How could we make this process more convenient for you? [EVA] Are you willing to, or have you ever, created your own mixtures for a mask or exfoliant? [EVA] Describe that experience for me. What went well?

[EVA] Do you find that your school or work hours impose on your daily skincare routines?

[EVA] What didn’t go well? Or how you thought it would? Did you see that you got the results you wanted?

[EVA] What is your skin type?

[EVA] Do you find the process of finding facial/hair care recipes online convenient and/or credible?

[EVA] Do you follow any type of skin or hair routine? Tell me about it. [EVA] What kind of products do you use? Are they on the pricier side? [EVA] Are you actively searching for better methods of budgeting and saving your money, especially with hygiene and care?

[EVA] Now, we are currently in the works of developing a mobile application that allows you to input whatever kitchen ingredients you have available and generate various masks and skincare recipes at your convenience. How does this concept sound to you? Would it be something you would be interested in downloading? [EVA] What are your expectations with an app like this?

Persona Analysis The persona analysis based off the surveys helped unveil many new paths for the Charm app! The main discovery from the interviews and survey was that haircare was not as large a concern compared to skincare. For this reason, Charm will focus solely on skincare. This will allow the information and experience to be more in depth and personal. The three personas are: someone who loves skincare, someone who wants to love skincare but does not have the time/money, and someone who is not all that concerned about their skin.

Charm | 13

Samantha Leonard

“ Managing my skin is tough, especially at my age” AGE OCCUPANCY LOCATION SALARY STATUS ARCHETYPE GENDER

15 Student Fairfax, VA None Single The Awkward Female

SKEPTICAL

OUTGOING

DRY SKIN

ORGANIC

Who is she? Sam is a high school sophomore with little knowledge about how to care for her skin efficiently. She wants to fit in with her peers and focus more on her self care routines whilst also maintaining her studies.

Routine

Goals: • • •

Learn more about skincare Improve habits Save on money/avoid spending it

Frustrations: • • •

No consistent income Little understanding about skincare Social pressure to have good skin

Samantha spends less than $50 monthly on skin & hair products.

Christian Vazquez

“I’m not too concerned about my skin right now, but am willing to try” AGE OCCUPANCY LOCATION SALARY STATUS ARCHETYPE GENDER

22 Student Chicago, IL 25,000 Dating The Charmer Male

CURIOUS

INFORMED

OILY SKIN

BUSY

Who is he? Christian is an accounting major at Robert Morris University. He currently interns as an accountant and works an extra job on the side. Christian finds it difficult to manage his time when it comes to skincare and wants to improve that.

Routine

Goals: • • •

Build a consistent skincare routine Track skincare progress Avoid chemical filled products

Frustrations: • • •

Finding products that work Overspending Losing motivation to care for skin

Christian spends about $25 monthly on skin & hair products.

Charm | 15

Fadyah Kayal

“I’m not too concerned about my skin right now, but am willing to try” AGE OCCUPANCY LOCATION SALARY STATUS ARCHETYPE GENDER

34 IT Director Washington DC 45,000 Married The Genius Female

INFORMATIVE

VEGAN

COMBO SKIN

BUSY

Who is she? Fadyah is a ful time IT Director with a good work/life balance. She often finds herself indulging in skin and hair care to stay refreshed and healthy. Even when she’s tired, it doesn’t show. Fadyah is a vegan and wants her products to be as well.

Routine

Goals: • • •

Transition all products into vegan Utilize what she has at home Maintain her routine

Frustrations: •

•

• •

Some products she love are not vegan Finds herself spending too much

Fadyah spends about $100 monthly on skin & hair products.

Competitive Analysis TroveSkin

Skin360

Think Dirty

Features

Skin analysis, goals, daily challenges, incentive program, social feed, routine recommendations, camera.

Connects to physical scanner, Skin 360 score, expert tips & product recommendations.

Shop, add products, verifies brands, rating system, camera.

Price

Free

App: free Scanner: $59.95

Free

Skincare coach (AI) that guides users to improve and track skin care routines. TroveSkin also offers an incentive coin program to encourage users to stay vigilant about their skincare.

Skincare application developed by wellknown beauty brand Neutrogena. The app allows users to scan their skin using a scanner to get a skinscore. It also offers product recommendations.

Think Dirty is an app that helps users buy products that are made with certified & clean ingredients. It uses a camera to scan the product QR.

Clean visual interface

Understandable statistics

Learn ingredients and compare

Incentive program for loyalty

Tracks progress over time

Bar-code scanner

Skincare tips

Personalized products

Add products

Tracks progress over time

Monthly discounts

Understand clean shopping

Only recommends Neutrogena products, lack of credibility

Not all grocery products are available to scan, leads to uselessness

Rating

Who are they?

Strengths

Lack of comprehensive navigation Analysis camera feature rated poorly

Weaknesses

Lack of hierarchy in design No clear focus on one feature, instead general clutter of multiple half-focused features

Accuracy of scanner is questionable

Available products are not sold locally

Charm | 17

User Experience

Storyboard

Affinity Map Charm

Custom

Rec. Products

Forums

Livechat

Drugstore

Questions

Specialist

Analyze Skin

Add

Reviews

Community

Skintype

Camera

Quicktype

Coupons

Answers

Prescreen

Feedback

Skintype

Hairtype

Ask

Reviews

Charm | 21

Content Strategy Page Name vLogin

Welcome/Sign Up

Personal Information

Content Login Create account Reset password Full name Email Phone number Password Confirm password Back button Gender Skin type Back button

Time Spent

How much time do you typically spend on skincare per day? Back button

Products

What products do you normally use? Back button

Media None

Add profile photo.

Select

Description Users are first met with a screen prompting them to login or create an account. Full name is to address the user throughout the app. Email is to send updates, account info and additional news. Phone number is to add extra account protection. Password must be confirmed twice to ensure accuracy. Gender consist of male and female options. In future developments, an other option will also be added. Skin type varies from dry, oily, to other. This is to personalize the results generated in future screens.

Drag bar

The user can drag the circle to select a timeframe between 0 and 60 seconds.

Select

The user can select various options from an image set. The products include: facemasks, exfoliants, scrubs, suncreen, oil, serum, facewash, cream, toner, and other.

Content Strategy Page Name Letâ€™s Get Started

Home: Create

Home: Ingredients

Home: Recipes

Content Face Mask Scrub Wash Search Favorites Ingredient list Bookmarks

Ingredients Edit Recipe amount Make button

Back Bookmarks Recipe List

Media Select

Select Search Swipe up

Select Swipe up

Select

Description Users will select what product they would like to create Searching is available to look for ingredients not presented on the main list. The user also has the option to select the more popularly used ingredients seen in front of them. Bookmarks are accessed to view marked recipes. After selecting an ingredient, a popup tab will appear at the bottom of the tab to indicate that there is an ongoing recipe list. The user is able to edit this list and can proceed to the recipe screen from here as well. Auto generated recipes will appear on this screen based on the users ingredient input. Back is used to return to the create screen. Bookmarks can still be accessed on this screen.

Charm | 23

Content Strategy Page Name

Content

Profile: Menu Bar

Name and Profile photo Calendar Overview Recent Logout

Profile: Calendar

Months with days and weeks Add button Highlighted dates

Profile: Calendar Edit

Profile: Overview

Month of November Time Type of event Reminders Add Change month Statistics Skin history Add button Back button Expandable stats Notes

Media

Description This menu bar is specific to the profile pages of the app. It allows users to further navigate their skincare habits.

Edit calendar contents

In this page, a summary of the calendar is shown to the user. Dark blue dates indicate the day of.

Edit calendar contents

The user sees the month of November in this page and can view what tasks are available for the day. They can also add new tasks or events.

Edit stats

The profile overview is where the user is able to get a glimpse of their skincare progress and their skincare history.

Content Strategy Page Name

Articles: Main

Articles: Featured

Content

Media