( ⊹₊⟡ 🧑🎤 )
Introduction
M·A·C partnered with MediaMonks to create a new e-commerce platform that reflects the brand's pillars while being highly modular. Bright colors, high-contrast typography, and bold logo usage were employed to convey M·A·C's confidence in the world of cosmetics.
Did
UI Art Direction
Ecom Platform
Kinetic Type
Used
Figma
Aftereffect
Cinema 4D
With
Creative Director
Alex Otto
Designers
Gaia Zeyp
UX Designer
Anna Chau
At
Senior Designer
MediaMonks
Strategy
Based on the brand pillars provided by M·A·C—punk, vibrant, and authoritarian. We started the concepting phase to explore the vibes.
Punk
Vibrant
Authoritarian
Process
This is how I gradually approached to the final design through bold layout experiments. Take note of the M·A·C logo placement (>ᴗ•)
System
M·A·C's new strategy transforms the e-commerce platform into a branded magazine, with UI components designed to achieve this vision.
Kinetic Type
Experimenting with a set of dynamic typography templates to reflect the M·A·C brand's pillars. (This is where I started to learn 3D and Cinema 4D)
Impact
Ultimately, these designs not only shaped M·A·C's e-commerce platform but also influenced its OOH, in typography (Ditching trade gothic, and Ano Bold), logo application (Large logo layout), and color choices.