BLEND —thesis book by Yuhan Kim

BLEND

iPad Application for Do-it-yourself Beauty

Final Thesis Proposal Yuhan Su / 03220100 415 298 3493 kimsu777@gmail.com Academy of Art University, Graduate School of Web Design & New Media 05.02.2014 / 3:45 PM

BLEND

Table of Contents

BLEND

07 08 09 10 11 12

AUTOBIOGRAPHY

RESUME

ELEVATOR PITCH

THESIS ABSTRACT

STATEMENT OF INTEREST

PROOF OF CONCEPT

22 32 44 58 60 57

STRATEGIC PROCESS

VISUAL PROCESS

USER EXPERIENCE PROCESS

TECHNICAL PROCESS

PORTFOLIO

PROJECT LINKS

“A healthy attitude is contagious but don’t wait to catch it from others. Be a carrier.“ —Tom Stoppard

BLEND

BIOGRAPHY

My name is Kimberley, I’m a Taiwanese student at Academy of Art University. The reason I chose architecture and interior design as my undergraduate study, because I like room decorations and arrangements, and it can affect people’s mood. I continued to study visual ar ts abroad, two years of focusing on graphic design also affect me a lot on my visual design studying. I like traveling, watching movies, playing games and exploring different applications. This is the main reason that helped me to choose New Media and Web design study too, it’s so popular and widespread that we could not ignore it. I hope to learn more about web design, interface design in the future. I am also interested in motion graphic too, since it can increase the attraction of a work. I like to combine illustration into my work as I love the feeling of hand drawing, which is more natural and organic. I believe the fonts and colors are so powerful that they can represent a lot of emotions.

RESUME

YUHAN SU / KIM

OBJECTIVE

415.298.3493

To apply my designing skills and knowledge to gain experience through

kimsu777@gmail.com

a design team in the field of visual/web designing.

yuhankimsu.com

EXPERIENCE The Humanistic Education Foundation Architecture Education Camp for kids June–August 2007 Architectural Assistant • Helped and assisted kids with architectural knowledge

EDUCATION Academy of Art University

San Francisco, California

MFA Web & New Media Academy of Art University

Current San Francisco, California

MFA Graphic Design

2010 —2012

Da-Yeh University

Zhanghua, Taiwan

Bachelor degree of Architecture and Spatial Design

2006—2009

SKILLS Design

CorelDRAW

Usability testing

SketchUp

Information architecture

HTML5/CSS3, JavaScrip

Interface design

Languages

Softwares Adobe After Effects Adobe InDesign Adobe Illustrator Adobe Photoshop

English, Mandarin

BLEND

ELEVATOR PITCH

Core Concept Design an iPad application about homemade beauty recipes.

Problem Women will try anything to make their skin more beautiful and healthy, but often using lots of complicated, expensive products that arenâ&#x20AC;&#x2122;t right for their skin.

Solution Help people to find beauty recipes that right for their skin.

ABSTRACT BLEND is an application wants to promote the idea of avoiding toxic chemicals, and encourage people to make their own homemade personal care products. BLEND is an iPad application that wants to promote the idea of avoiding toxic chemicals and encourage people to make their own homemade skin care products. BLEND will motivate people to be healthier, fresher, more knowledgeable and active. Users can find suitable homemade beauty recipes by analyzing their skins. Users can also learn about the benefits of ingredients, and track their skin status to see the progress. BLEND doesnâ&#x20AC;&#x2122;t ask people to make all the homemade personal care, but encourages and motivates them why not make their own if itâ&#x20AC;&#x2122;s simple, easy and healthy. Making their own beauty products means not only avoiding toxic chemicals, but also making a beauty product that they know what exactly inside in them.

BLEND

STATEMENT of INTEREST

The first time I noticed that many ingredients in our products have potential risks for our health was a few years ago when I saw a video: The Story of Cosmetics which is about the truth of beauty products, and then I started to read though labels of my products, which are full of complex chemical lists. Unfortunately, I can’t understand them; but, I do care care this issue. Like every person, I like to use many personal care products to make my skin, hair or body healthy and beautiful. After I came to US, my skin became sensitive, and it’s hard to find the products that can make it be stable and healthier. Moreover, as an international student in San Francisco, it’s hard to get used to the high costs in this city. It’s a good chance to save money and get less health risks by making homemade skin care products by our own.

PROOF OF CONCEPT Task 1: User wants to know how this app works and what other users said.

8:00 PM

1/3 User sees the homepage and taps the button â&#x20AC;&#x153;learn moreâ&#x20AC;&#x153;

8:00 PM

How BLEND works

Step 1:

Step 2:

Step 3:

Find beauty recipes that

Grab the fresh,natural

Now, you can enjoy your

are perfect for your

ingredients and tools,

homemade products.

skin by identifing your

then start making it.

skin type.

What customers say Kelly P. When I found out that I could make my own beauty products that actually worked better for my skin and my body, I was sold for life.

2/3 User sees how BLEND works, and scroll down to see what other customers said.

BLEND

When I found out that I could make my own beauty products that actually worked better for my skin and my body, I was sold for life.

8:00 PM

What customers say Kelly P. When I found out that I could make my own beauty products that actually worked better for my skin and my body, I was sold for life.

Grace W. I love this DIY facial scrub! My all time favorite scrub (even over any other store brand) is brown sugar and buttermilk. It leaves my skin feeling sooo smooth!

Nicnac Beautiful recipes. Easy to follow and use ingredients that you already have in the home.

3/3 User sees what customers said

PROOF OF CONCEPT Task 2: User wants to sign up, and find a mask recipe for her skin type.

8:00 PM

1/11 User sees the homepage and taps the button â&#x20AC;&#x153;Sign upâ&#x20AC;&#x153;

8:00 PM

Choose username

Create a password

Confirm your password

Create an account or

Connect with Facebook

2/11 User sees the sign up page, and input information to create an account

BLEND

8:00 PM

Congratulations you have successfully registered

Create your profile now

Create later

3/11 After create an account, user taps “create your profile now.”

8:00 PM

Create personal profile 1

Know your skin, then find the right recipes for you.

or Analyze your skin

Take quiz to find out

skip this step

4/11 User taps “take quiz“ button to see her skin type.

8:00 PM

Create personal profile 1

What should your skin regimen be?

1. What does your skin look like first thing in the morning? Usually slick and oily—I make a dash for my face wash. Lackluster—I always look like I haven’t gotten enough sleep. About the same as it always does, with a little oiliness around my forehead and nose.

dry

2. Which of these products do you find yourself reaching ... 3. How visible are your pores? 4. How often do you get chapped lips? oil

normal

5. You’re going out right after work—do you need to ... 6. How often do you need to lather up to prevent your ... 7. How does your skin feel immediately after you exfoliate?

5/11 User take quizs, and taps “next” button to the the result.

8:00 PM

Create personal profile 1 Your skin type is...

DRY SKIN When your skin loses moisture, it becomes drier, more sensitivie and prone to irritation and flaking. Untreated skin can become red and irritates. Formulated with ingredients like milk, honey and shea butter to nourish skin, they are clinically proven to moisturize for up to 24 hours.

dry

Recommended ingredients :

Milk

oil

Shea Butter

Honey

normal

6/11 User see the result,and taps “next” button to the next step.

BLEND

8:00 PM

Create personal profile 2

Upload your profile picture

Upload

skip this step

7/11 User uploads her profile picture, and go to the next step.

8:00 PM

Create personal profile 2

Upload your profile picture

Upload

8/11 After upload picture ,userd goes to the next step.

8:00 PM

Create personal profile 3 Tell us about you Name

Location

E-mail

Pick your concern Hydration

Gender

Balancing Relieve Acne

skip this step

9/11 Fill out the information and go to the next step.

8:00 PM

Create personal profile

Hello, Jillian. Your profile has been created View your profile

Find recipes for you

10/11 User taps â&#x20AC;&#x153;Find recipes for youâ&#x20AC;&#x153; to see what beauty recipe are right for her skin.

BLEND

8:00 PM

Beauty Recipes Categories

all

Concerns

all

Sea Salt Scrub

Exfoliating Conditioning Face Mask

Sandalwood Anti-Wrinkle Mask

Sort by

last upated

Calming Oat Cleanser

11/11 Now,user can explore beauty recipes.

PROOF OF CONCEPT Task 3: User wants to know what ingredients she needs to prepare for a certain beauty recipe.

8:00 PM

1/3 User goes tp beauty recipe section, and taps a recipe she is interested in. 8:00 PM

2/3 User taps ingreditned icon.

BLEND

8:00 PM

3/3 User sees the ingredients she needs

STRATEGIC PROCESS Competitive Analysis

Do It Gorgeously This app contains the how to on beauty, pets, home,

Pros

children, etc. These simple to follow videos will show you

— Uses graphic icon to show each category

how to make everything in a non toxic manner from your

— Used video instead of text to show

own Vitamin C Face Serum and skin masks to organic doggy treats and baby bubble bath. It features Sophie showing you step by step how to cook incredible organic and healthy dishes and even a herbal cough remedy.

skills professionally Cons — No words to describe a recipe. Users can’t get the information about ingredients and steps quickly.

BLEND

BeautyCraft BeautyCraft contains lots of recipes to teach you how to

Pros

craft your own simple hair and skincare

— Beautifully illustrated with photographs

products. Each recipe is simple to follow and uses only natural ingredients.

that show you how to make all the recipes. — Categorize details of each ingredient’s nutrition from A-Z. Cons — There is no function where users can edit their favorite beauty recipes.

STRATEGIC PROCESS Competitive Analysis

FacialSkin Care An iPad app that provides 50 facial care recipes, tutorials and tips. Pros — Contains step-by-step video tutorial Cons — Poor UI/UX design — Recipes are hard to read trough.

BLEND

Make Your Cosmetics MakeYourCosmetics is a informative site that combines the

Pros

joy of making your cosmetics with the peace of mind that

— Provides user some wholesale where they can buy ingre-

the products you make and use on your skin contain a high

dients

percentage of natural ingredients like pure essential oils,

— Provides ingredients encyclopedia

honey, aloe vera...etc.

Cons — Visual design is weak — Poor UI/ UX design

STRATEGIC PROCESS Competitive Matrix

Do it Gorgeously Benefit of ingredients

Add to favorite

Comment/ Share

Video supported

Photos supported

Skin analyzer

Checklist reminder

Usability

BeautyCraft

Face Careâ&#x20AC;&#x201D;DIY

BLEND

FacialSkin

BLEND

good average poor n/a

STRATEGIC PROCESS Project Statement

Based on my comparative product research, I found that the many homemade beauty websites/ app don’t have a good balance between aesthetics and content. Also the UX is not good. “BLEND” project will be more focused on UI, UX design, and it will be customized for users to find the beauty recipes based on their skin type. Additionally, I want to provide a place that users can communicate and share more tips and ideas to enhance the experience and knowledge about homemade beauty products.

BLEND

VISUAL PROCESS Inspiration for Visual Design

Your Daily Dose of Water

VISUAL PROCESS Inspiration for Visual Design

Your Daily Dose of Water

BLEND

PANNA

VISUAL PROCESS Mood Board

Logo Inspiration

BLEND

VISUAL PROCESS Mood Board— refined

BLEND

VISUAL PROCESS Logo Sketch

VISUAL PROCESS Logos—sketch

BLEND

VISUAL PROCESS Logos—final

Do-it-yourself Beaut y

App Icon

VISUAL PROCESS Branding

Color Palette

Fonts #01abc4 #6fd8d3 #98bb5f #609e48 #df583b #e88436 #e8af4d #fff3a2 #f7f0e0 #c2ac85

Gill Sans (TT) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^7&*()_+ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^7&*()_+ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^7&*()_+ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^7&*( )_+

BLEND

VISUAL PROCESS Different Versions Visual Design (landing page)

Start it

Do-it-yourself Beauty

Learn more

VISUAL PROCESS Different Versions Visual Design (home page)

8:00 PM

Beauty Recipes Categories

all

Concerns

all

Sea Salt Scrub

Exfoliating Conditioning Face Mask

Sandalwood Anti-Wrinkle Mask

Sort by

last upated

Calming Oat Cleanser

BLEND

Different Versions Visual Design (about page)

Different Versions Visual Design (beauty recipes page)

BLEND

Icons Design

USER EXPERIENCE PROCESS Target Audience

Primary Audience

Secondary Audience

Age: 22-34

Age: 25-50

Gender: female

Gender: female & male

Women who are in tight budget and have sen-

People who are natural cosmetic ingredients

sitive skin; also, they care about environmental

seller, and want to make a profit.

issues.

BLEND

USER EXPERIENCE PROCESS Personas—Primary Users

Thrifty Student

JILLIAN COLON

Name: Jillian Colon Gender: Female Location: San Francisco Occupation: Student Tech skill: Average Platform: iPhone, iPad, Desktop Favorite sites: Sephora, Beauty. com, Pinterest

“My skin is a little bit fussy, and my budget is tight so I really want to spend less money on skincare products.”

Jillian is a hard-working student who has part-time job in a restaurant. She likes shopping and watching movies with friends or roommates to relieve her stress. In her daily life, Jillian has to go to classes and work during daytime. At night, she often works on her projects and sometimes she needs to stay up overnight to complete them. Because of this irregular schedule, her skin became sensitive and unstable. Jillian has tried many skin care products, which it spent lot money to find a suitable one with more natural ingredients in it. Since most of the skin care products with natural ingredients are costly, she needs find a budget-friendly way to solve her skin problems. Current behavior / Pain • She had looked around online and in store to try many products, but she had hard time to find the one that is suitable for her skin. • She knows that the products with more natural ingredient in it will minimize her skin sensitivities, but most of them are costly, and her tight budget doesn’t allow her spend too much. • She wants to find methods that might relieve her skin condition from online, but she afraid that some of information online is not reliable.

Mindset As a woman who has dry and sensitive skin, I want to minimize my skin sensitivities in an inexpensive way so that I can keep my skin healthy and stay on budget. Needs: • Need beauty products that can minimize the risk of her skin sensitivities • Need simple beauty recipes that can make easily • Lean more about toxic ingredients • Spend less on skincare products • Be able to communicate with others • Where to get some ingredients Goals: • Keep her skin healthy • Relieve her tight budget • Meet people who have same problems • Make beauty products successfully

BLEND

USER EXPERIENCE PROCESS Personas—Secondary Users

Receptive Environmentalist

Angela Bright

Age: 30 Occupation: strategic planner Martial Status: single Tech Skill: average Hobbies: online shopping, yoga, hiking Angela works in an advertising company and is also a blogger who concerned about environment and health. In her daily life, she prefers to cook by herself and work out after work to keep healthy. During the weekend, she likes to do some outdoor activities and volunteer in environment-related organizations. Also, she likes to discover different new

“I sometimes make some beauty recipes by myself because it’s healthy and eco-friendly. I want to learn more about natural ingredients”

apps on her blog and share experiences with friends. Needs: Get more information about natural ingredients Less packaging waste Share recipes with friends Goal: Share her recipes with friends Learn benefits of natural ingredients

Bulk Store Manager

Ardith Zimbel Age: 35 Occupation: housewife Martial Status: married, 2 children Tech Skill: beginner Hobbies: cooking, gardening Ardith has been married for 7 years, and has two lovely children, Allie (6) and Jay (2). She likes to cook and sometimes help her husband to do gardening. Since her little son has an allergic constitution, she has started to pay attention to ingredients in whatever they eat or use, to make sure her son is safe. Now, her husband and she own a wholesale

â&#x20AC;&#x153;I manage a beauty ingredients store to encourage people to make their own skin care products and want to make a profit from that.â&#x20AC;?

store and sell natural beauty ingredients and containers. Needs: More customers Goal: Increase profits of her store

BLEND

USER EXPERIENCE PROCESS Information Architecture

Landing page (login/sign up)

Home Page ( Recipe)

Ingredients

About

Natural Ingredients

Aâ&#x20AC;&#x201D;Z categories

My Profile

Activities

Instructions

Shopping Lists

Reviews & photos

Favorites Personal Info

USER EXPERIENCE PROCESS Low-fidelity mockup test

Feedback 1. too many icon buttons around it. It’s confusing. 2. couldn’t sure about witch icon goes where. 3. User was confusing about “star“ icon on each beauty recipes 4. about page—they felt it needs to many steps to get into homepage

changes: 1. narrow down about page. 2. delete “star“ icon and clarify the homepage 3. main menu— add words near each icon so they will be more clear for users 5. refine icons 4. rethink and rearrange icon buttons, and hide main navigation to left panel

BLEND

USER EXPERIENCE PROCESS High-fidelity mockup test

Feedback 1. still too much steps to get to the homepage 2. “search icon” in ingredients page is confusing 3. about page—could combine “how it works and testimonial“ into just one page 4. about page—user were more interested in seeing how this works first, not what customers said 5. users were wondering the reason of creating profile? It’s not clear 6. Shopping lists—color makes info not clear 7. Users would like to see some reviews and ingredients instead of instructions first

Changes

BLEND

PROJECT LINKS Prototpye: yuhankimsu.com/kim/Blend/welcome_to.html

Concept Video: vimeo.com/93215934

Technical Process Data Flow

iPad (HTML5, CSS3, JavaScript)

Web service DF:JSON

DF:JSON

Web server SQL Database

Medical Database

BLEND

Project From iPad Application HTML5 Prototype Open with Google Chrome

Technology Used HTML5 CSS3 JavaScript jQuery jQuery UI

PORTFOLIO Photoshop

BLEND

Responsive Web: Portfolio site http://yuhankimsu.com/kim/portfolio/index.html

BLEND

Illustration

BLEND

Sat & Sun, 7/25.26 10:00am–6:00pm San José Park—200 East Santa Clars Street San José, CA 95133 for more information: www.jeremiah.com

Build bonds; not bullies. Our mission is to provide parents opportunities to communicate with their children and strengthen their relationships. Bullying does not just happen to one type of kid, it can happen to anyone. Some people think being targeted by bullies is a part of growing up, a “rite of passage.”—but, its not. Its like a cancer and we need to cut it out. Try to spend time with your children at this weekend.

Sat & Sun, 7/25.26 10:00am–6:00pm San José Park—200 East Santa Clars Street San José, CA 95133 for more information: www.jeremiah.com

BLEND

CONCLUSION

Making your own beauty products means not only avoiding toxic chemicals, but also making a beauty product that you know what is exactly inside in them.