sephora - sephoria
OBJECTIVE:
We were tasked with making Sephora’s Sephoria beauty conference come to life.
DESCRIPTION
To bring Sephoria to life, the team designed out tons of collateral including but definitely not limited to, Social Posts, Motion Graphics, all in-perseon print collateral, and creating an entire free metaverse experience. There were so many moving parts to this project. This project flexed many various skills of mine from website asset creation in figma to complex motion graphics in After Effects, as well as 3D mockups and small animations in C4D. I also had the pleasure of designing the UI/UX and motion graphics for the metaverse games - Beauty Match Up and Beauty Trivia. Graphics extended from all the individual metaverse pop-up cards, glowing house beacon, and many motion assets for the master classes presented there.
The goal of the metaverse was so users who weren’t able to attend the event itself could still participate in a free gamified interactive experience, as well as watch masterclasses and earn rewards.
Role: Lead Motion Designer/UI UX Designer/Game Designer
Client: Sephora
Creative Direction: Kelsey Rubbelke
Lead Metaverse Creative: Grace Chee
Creative Team: Hibah Khan, Miles Vallejos, Wendy Campos, Melissa Poe, Emily Pasternack, Ariel Wilchek
Metaverse Team: DeModern
Illustrations/Graphics/Logo Animation: Provided by Sephora
© OBE
BEAUTY TRIVIA
Beauty Trivia challenged users to their knowledge of a series of beauty
|or Sephora related questions. Similar to Beauty Match Up, overlays
and the in-game screen would guide the players through the game.
Once players got 5 answers right, they received a lipstick.
Tile Design: Hibah Khan
UI/UX + Motion Graphics: Ashley Frohlking
BEAUTY MATCH UP GAME
The Beauty Match Up game was a simple version of Apples to Apples. Players had 10 seconds to memorize the tiles that appeared on the floor. Then the tile that they needed to stand on to match would appear both on the user’s screen underneath the score counter and timer and on the in-game screen. Once the timer was up, an overlay would appear on the users screen letting them know if they got it right or wrong. Players had to match 5 tiles correctly in order to obstain a lipstick. Lipsticks were found throughout the space by playing games, watching videos, or interacting with other elements.
Tile Design: Hibah Khan
UI/UX + Motion Graphics: Ashley Frohlking
Theatre Screens — WELCOME EXPLAINER MOTION / in situ
THEATER SCREeNS - MASTERCLASS INFO
BEACON PROGRESS SHOTS TO VIRTUAL ENVIRONMENT
UI/UX Elements
The virtual world required UI/UX design for a series of pop-ups, instructions and announcements.
Each card was made in figma and designed out in corresponding colors to each area or topic. UI/UX for
the lipstick feature was also a necessity- including a progress bar and counter.
Progress Shots / Final UI
