Get Ready With Me 

Futuristic User Interface

Discipline  FUI, Animation, Interaction Design

Duration  5 weeks

unsplash-image

Introduction

There is a large fashion / beauty community on Youtube. Many of these videos are makeup tutorials and “get ready with me" videos. I designed this interface to be integrated with a mirror so the user could interact with it in the morning as part of their daily routine, follow along with a “beauty guru” from a youtube tutorial, and access an interactive user guide connected with the video to help step-by-step.

Greeting

Upon approaching the mirror it lights up to greet the user, displays the time & weather forecast, which move to the corner but remain active during the rest of the session.
The user can access more detailed information by tapping.

FUI_001-sm
FUI_002-sm-new

View Schedule

The user can then check their schedule for the day to
see what sort of look they need to be getting ready for, and choose between a variety of options.

Browse by Category

The user can then pull up a youtube tutorial panel of saved looks, and browse for appropriate videos to follow along with for their planned day’s activity (ex: job interview,
night out, daily, natural, glam, party, etc.).

FUI_003-sm
FUI_004-sm

Select Tutorial

Once a makeup Style is selected a scrolling list of videos appears for the user to make their selection, which they can edit based on materials on hand or the amount of time availble to get ready.

Itemized Products

As a video loads and plays through the ads, it tells the user what tools and products they need for the tutorial. Users can scan and store a list of what they have, and the interface will suggest the best alternatives for any missing items.

FUI_005
FUI_007

Face Mapping

As the user is following along with the tutorial, the interface will highlight/preview the specific areas of the face they need to apply the next products to. 

Share Finished Look

At the end of the application the interface will ask the user
if they would like to take a selfie and post to instagram,
or simply save the look in the system as a reminder of a favorite tutorial, for future reference.

FUI_009
moodboard

Mood Board

Knowing your audience in this scenario was key. Many women interested in this niche are Millenial women. Therefore I decided to make the interface have the classic "beauty guru" aesthetic: pink, marble, & inspirational quote typography. 

Inspiration Board

When it came to the feel of the interface, I wanted the buttons to be as clean and minimal as possible, putting more emphasis on the user's appearance and colors of the products used, rather than having the interface be too distracting. 

style-board

Style Guide

Clean, Minimal & Modern; Very millennial, blush pinks & white. Pulling a lot of inspiration from the “beauty vlogger” aesthetic. Due to the interface being on a mirror, much of it is low-opacity, so the user can still see themselves through the elements.

style-guide-fui

Final Thoughts

I learned a lot with this project, and have several ideas on how to push the concept & visuals further. Since the main focus of this project was on animation, timing, mapping  animation into physical space & masking out hand gestures, I would love to be able to push the project into stronger UI visuals, for a more well-rounded piece. 

©2022 Emma Canfield
Multimedia Designer