MAC Cosmetics
ux/ui design
My Roles
UX Designer, Consumer Researcher
Team
Caitlin Yackley
Duration
4 months
Tools
MAC Cosmetics
ux/ui design
My Roles
UX Designer, Consumer Researcher
Team
Caitlin Yackley
Duration
4 months
Tools
MAC Cosmetics
ux/ui design
My Roles
UX Designer, Consumer Researcher
Team
Caitlin Yackley
Duration
4 months
Tools
overview
A responsive website design for MAC Cosmetics, with an aesthetic refresh.
A responsive website design for MAC Cosmetics, with an aesthetic refresh.
The Problem
Cluttered and outdated design, with large elements that overwhelm users and thin, sans-serif display font usage that detracts from the site’s visual appeal.
The Solution
Breathing room allows for additional product cards in one viewport. Introduce bold, fun fonts and bright accent colors to create a visually engaging design.
The Problem
Cluttered and outdated design, with large elements that overwhelm users and thin, sans-serif display font usage that detracts from the site’s visual appeal.
The Solution
Breathing room allows for additional product cards in one viewport. Introduce bold, fun fonts and bright accent colors to create a visually engaging design.
01 Analyze
01 Analyze
about mac
about mac
Founded in 1984, MAC Cosmetics became iconic with its accessible high-end products and commitment to social causes, like Viva Glam lipsticks supporting HIV/AIDS research. Known for pioneering bright colors and stage makeup, the brand's legacy remains strong.
Founded in 1984, MAC Cosmetics became iconic with its accessible high-end products and commitment to social causes, like Viva Glam lipsticks supporting HIV/AIDS research. Known for pioneering bright colors and stage makeup, the brand's legacy remains strong.
Founded in 1984, MAC Cosmetics became iconic with its accessible high-end products and commitment to social causes, like Viva Glam lipsticks supporting HIV/AIDS research. Known for pioneering bright colors and stage makeup, the brand's legacy remains strong.
02 Define
02 Define
Design Principles
Design Principles
Design Principles
refreshed
Bright pops of color and balanced compositions create a refreshed and modern feel.
Bright pops of color and balanced compositions create a refreshed and modern feel.
made for everyone
“All Races, All Sexes, All ages”
Showcase makeup on all skin tones and all types of people.
“All Races, All Sexes, All ages”
Showcase makeup on all skin tones and all types of people.
Brand archetype
The Creator (primary)
The Explorer (secondary)
adjectives
Vibrant, Geometric, Playful, Editorial, Artistic
design statement
design statement
MAC Cosmetics believes in makeup as art for the body; it is the storyteller of your unique journey. Makeup is for everyone - all ages, ethnicities, and genders.
MAC Cosmetics believes in makeup as art for the body; it is the storyteller of your unique journey. Makeup is for everyone - all ages, ethnicities, and genders.
MAC Cosmetics believes in makeup as art for the body; it is the storyteller of your unique journey. Makeup is for everyone - all ages, ethnicities, and genders.
03 Wireframe
03 Wireframe
04 Design Direction
04 Design Direction
moodboard
Color SysteM
05 UI Design
05 UI Design
mobile walkthrough
mobile walkthrough
category page
category page
ar try on feature
ar try on feature
PRODUCT DETAIL PAGE
PRODUCT DETAIL PAGE responsive design
PRODUCT DETAIL PAGE
PRODUCT DETAIL PAGE responsive design
PORES
REDNESS
DRY PATCHES
DARK CIRCLES
WRINKLES
UNEVEN SKIN TONE
TEXTURE
SCARS
ACNE
PORES
REDNESS
DRY PATCHES
DARK CIRCLES
WRINKLES
UNEVEN SKIN TONE
TEXTURE
SCARS
ACNE
product quiz ui
product quiz ui
Users struggle to buy makeup online without trying products first. A product quiz can help by guiding them to the right choices based on their preferences.
Users struggle to buy makeup online without trying products first. A product quiz can help by guiding them to the right choices based on their preferences.
Category page Responsive Design
desktop walkthrough
06 Design System
06 Design System
colors
Buttons
Buttons
Cards
Cards
Cards
icons
icons
select controls
select controls
headers
headers
headers
footers
footers
footers
footers
typescale
footers
typescale
footers
typescale
want to see more?
want to see more?
want to see more?
Color SysteM
