Beauty Buddy

Interaction Design + Physical Prototyping

Re-imagining the cosmetics shopping experience by integrating a point-of-purchase kiosk and personalized mobile App

Skills | Interface Design, Physical Prototyping Duration | 6 Weeks Tools | Adobe XD, Illustrator, Figma Context | Class Project

Skills | Interface Design, Physical Prototyping
Duration | 6 Weeks
Tools | Adobe XD, Illustrator, Figma
Context | Class Project

 
 

Walking into a beauty store and not knowing which products are right for you?

Beauty Buddy offers timely and personalized recommendations to help you buy cosmetics that suit you. Beauty Buddy reshapes the cosmetics shopping experience by integrating a personalized phone app throughout the process so that customers can be more confident with their purchases. Beauty Buddy uses a smart matching system based upon users’ profile data so that shoppers will know if the product they are interested in is actually a match for them.

This project integrates physical prototyping and digital UI design.

Our group designed a mobile app and point-of-purchase kiosk for the context of in-store cosmetic shopping. We conducted two rounds of interviews and user testing with paper prototype and clickable prototype.

My role was primarily to design the styleguide, screen interfaces, and poster.

Storyboard

Tony uses the recommendation system in the App to buy cosmetics for another person using her Beauty Buddy profile.

 

Paper Wireframes

WeChat Screenshot_20190818133406.png
 

User Flow Screens

mobile app screens flow

kiosk screens flow

 

Poster Design

Kiosk Design

 

Styleguide

Iteration#1

Iteration#1

Iteration#2

Iteration#2

 

Reflection

Through multiple rounds of iterations for the screens, we learned to be more concise and straightforward in our layouts and interactions. We also learned the importance of visual design consistency across different components of a design. In addition, user testing data and interviews should be kept in mind throughout all stages of the design as they present crucial information in making a successful human-centered design.