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

Color SysteM