Designer / Retoucher / Photographer
FUI.gif

Get Ready With Me

Get Ready with me

UI, Interaction, Animation

 

Project Introduction

A lot of the videos in the fashion / beauty community on Youtube are makeup tutorials and “get ready with me videos”. Here I have designed an interface intended to be used on a mirror for the user to interact with in the morning as part of their daily routine. Follow along with a “beauty guru” from a youtube tutorial, and have an interactive user guide connected with the video to help step-by-step.

 
 

UI Design Elements

greeting.jpg

Feature 1

Upon approaching the mirror it will light up and greet the user, clock & weather will be active in the corner

FUI_001.gif

Feature 2

User will then check their calendar for the day to see what sort of look they need to be getting ready for

FUI_002.gif
Day-Cal-2.jpg

Genre.jpg

Feature 3

User pulls up youtube tutorial panel of saved looks, and look for appropriate video to follow along with for their planned day’s activity (some options to show: job interview, night out, daily, natural, glam, party, etc.)

FUI_003.gif

Feature 4

Once a makeup Style is selected a scrolling list of videos will appear for the user to make their selection

FUI_004.gif
tutorial+scroll.jpg

video+play.jpg

Feature 5

As video is loading and playing through the ads, it will tell the user what tools and products they will need for the tutorial, you can scan and store a list of what products you have so if you don’t have the exact same product as the one used in the tutorial, it will tell you what product you already own that is closest.

FUI_005.gif

FUI_007.gif

Feature 6

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 various products to. (not pictured above)


Share.jpg

Feature 7

At the end of the application the interface will ask the user if they’d like to take a selfie and post to instagram

FUI_009+.gif

Mood Board

FUI Deck4.png

Styleboard

FUI Deck5.png

Visual Design

Color, Typography, & Iconography

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 all of the elements

 
Assets.png
 
Artboard 1@4x copy.png