Modernizing M·A·C, Transforming the Enterprise
Program
brand.com Global Flagship
Brand
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
3x Faster Design to Launch for Campaigns
Brought Figma to M·A·C Globally
Introduced Figma across the ELC Enterprise
+200 Figma Editors across the Enterprise
My Role
Creative Leadership
Systems Direction
Digital Design
Challenge
M·A·C’s flagship brand.com experience needed to be modernized for a global digital audience operating across devices and markets. The goal was to transform a legacy digital storefront into a flexible, high-performance platform that reflected the brand’s equity pillars of Artistry, Trend and Community, while improving customer experience, reducing production bottlenecks, and increasing performance metrics like speed, search presence and conversion rates.
Strategy
The strategic approach centered on reimagining the flagship site as both a brand experience and a scalable digital platform. I pushed the teams in this direction by introducing an interactive design system (M·A·C Fusion) that could streamline creative and UX workflows and enable consistent execution across global launches. This system would support not only visual equity and interactive behavior but also improve performance and operational efficiency for go to market launches.
Key strategic pillars included:
Interactive Design System: Create a reusable component system powering creative output, UX, and eliminating engineering costs across regions.
Performance-First UX: Prioritize speed, interaction quality, and ease of product discovery.
Scalable Production Efficiency: Reduce complexity in image assets and layouts to accelerate iterations and market launches.
Execution
The execution phase combined design strategy, technical optimization, and cross-disciplinary collaboration. The team delivered:
A global rollout of 16 regional site launches, ensuring consistency in brand experience while accommodating local nuances.
Development of M·A·C Fusion, an interactive design system used by creative and digital teams from West to East, forming the base for future enterprise design systems.
A revamped asset production pipeline that generated 5,165 new commerce-ready images with optimized resolution and file size, reducing production friction and improving site speed performance.
High-fidelity micro-interactions, including improved navigation filters, search, and conversational commerce pathways, enhancing the overall customer journey.
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.
Results
The modernization initiative yielded measurable performance improvements and efficiency gains:
Performance Metrics
16 global site launches finished within a consolidated rollout strategy.
+30% increase in SEO traffic post-launch, signaling improved findability and organic reach.
+4.96% conversion rate increase and +7% CVR lift overall, demonstrating improved user engagement and purchase behavior.
40% faster site speed, contributing to performance and SEO benefits.
The new design system reduced production complexity and supported 3x faster design to launch globally.
Operational Impact
The interactive design system became the enterprise standard for ELC brands and power creative workflows across regions.
Asset optimization and streamlined production workflows saved over 100 production hours on imagery and interactive content buildouts.
Eliminated the need to outsource production builds for new product launches to agencies
Executive Summary
This flagship initiative showcases how strategic design leadership, systems thinking, and performance optimization can drive both business outcomes and operational excellence. By building an enterprise design system and modernizing the brand.com experience, the project elevated site performance, improved global SEO and conversion rates, and introduced repeatable systems that empower creative teams to deliver faster, more consistent work.
The creation of M·A·C Fusion became the model for an enterprise-wide design system for the portfolio of brands across the company. During this project, I introduced M·A·C to Figma, and also the enterprise. To this day, Figma is used across the vast portfolio and by hundreds of users, completely modernizing how Estée Lauder Companies collaborates and operates.
Team Credits: Drew Elliott, 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
