Modernizing M·A·C, Transforming the Enterprise
Program
brand.com Global Flagship
Client
MAC Cosmetics
Results
16 Global site launches
+30% in SEO post launch
+4.96% CVR post launch
+7% Overall CVR lift
40% Faster site speed
1 Global Design System
I led the product design and experience teams modernizing the M·A·C Cosmetics brand.com customer experience and create their first ever interactive design system (M·A·C Fusion). Throughout this transformation, innovations across brand equity expression, interactivity, shopping, site speed, asset and content creation were key objectives I instilled on the teams involved.
Interactive Design System
M·A·C Fusion was built to streamline production across UX/UI, as well as our ability to increase speed by multiples for go to market New Product Launches in design and development. M·A·C Fusion is used globally by all creatives to power design from the West to the East. This design system became the base for the enterprise across ELC brand as a white label Interactive Design System model.
Equity Pillars: Artistry, Trend, Community
For each of MAC's equity pillars, unique experiences and content shaped the look and feel of the design & design system (M·A·C Fusion), but also to the content and overall experience for customers.
Asset Production and Optimization
5,165 New eCommerce Product and Texture (Smoosh) Images were photographed for a new design to support 5x Resolution. I worked closely with engineers and production artists to test and find the right balance of quality plus load. The end resulting in leveraging webp formats that deliver five times crisper resolution with a smaller kilobyte size than previously.
Across the design, image sizes were shifted from pixels to aspect ratios, and reduced down to common ratios inspired by photography: 3x4, 1x1, 4x3, 16x9. This shift resulted in reduced development complexity, improved site speed and saved over 100 hours in production time.
High Touch Experience
Micro interactions were created throughout the experience to create an app-like fidelity. Loading skeletons were added to pages to eliminate cumulative load shift (CLS). A unique Triple Navigation consisting of filters, search, and conversational commerce made for finding products as easy and efficiently as possible.
From Data to Desire
The Core Commerce experience elevated the product by emphasizing the assets customers wanted to see, and content that was most important. Initial user-testing optimized the UX/UI while constant site analytics monitoring and industry benchmark scores inform optimizations.
Team Credits: M·A·C Digital Creative, Yan Sze Li, Jeffrey Blum, Aude Degrassat, Agency Partner: Media Monks, In partnership with M·A·C Global Online and Estée Lauder Companies Online teams.
More Projects
Prev
M·A·C Cosmetics
360 Campaign
