M.A.C

M.A.C COSMETICS
Lipstick Heroes SHade
UX / UI / CD / AD

Mobile & Desktop
Updating the UX/UI on the top part of the SPP and bring more storytelling to the bottom of it.
The color filter will shuffle and size of the shades will evolve in function of the numbers of sku's.
Larger is the inventory, smaller the shades swatches will be displayed, and vice versa.
We defined 3 buckets. From 1 to 4 it will be the biggest swatches.
From 5 to 17 it will be 50% smaller from size 1. Size 3 will be 30% Smaller than size 2.
The example underneath is size 2
For the bottom of the page, I conceptualized and design the main framework/template
and let our team work with the template and make various iteration for each product and pages.

Creative Direction/Art Direction: Jeffrey Blum
Senior Designer: Sue Kwon, Adam Collins
Editorial: Lindsay Bishop
Project Manager: Katherine Simon
FrontEnd/Backend: ELC Online

M.A.C COSMETICS
Lipstick Shade Finder
UX / UI / CD / AD

Mobile & Desktop
We wanted to come up with a tool to let
our customers find our shade pretty quickly.
I can up with a user-friendly UX and a clean UI layout.
It is easy for clientele to navigate
and find their perfect shade. With one click they can filter between Skin Tone, Finish and Colors, try the product in A.R. and buy it.

MAC_HEROES_Responsive-showcase-presentation

Challenge

During covid19 online was the only way to attract new consumers and 2nd purchase buyers.

Opportunity

Educate and facilitate lipstick discovery and benefits through color and finish/texture entry, while communicating
product benefits and payoff with consumer-centric messaging.

Countries adapting it

Team members

+ 6%

Conversion

Concept

Bringing storytelling to the end of the funnel, users don't have time to browse and we decided to try a new approach on our SPP's.We came up with a new bold and colourful theme.