sephora - sephoria
a metaverse experience for sephora’s
largest beauty event
To bring Sephoria to life, the team designed out tons of collateral including but definitely not limited to, social posts, motion graphics, all in-person print collateral, and creating an entire free metaverse experience for those who couldn’t attend. There were so many moving parts to this project. This project included skills from website asset creation in Figma, 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.
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 use their knowledge of beauty products
or facts about Sephora. Similar to Beauty Match Up, overlays
and the in-game screen would guide the players. 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 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
