Tarte Cosmetics
Tarte Cosmetics
Tarte Cosmetics
Giving clean beauty the main character treatment.
Giving clean beauty the main character treatment.
Project Type
Project Type
UI UX Design
UI UX Design
Role
Role
Art Director
Art Director
Brand Designer
Brand Designer
UI/UX Designer
UI/UX Designer
Team
Team
Debbie Ortigoza
Tools
Tools
Figma, Photoshop,
Figma, Photoshop,
Illustrator, Claude MCP
Illustrator, Claude MCP
Duration
Duration
3 Months
3 Months
CASE STUDY
The Main Character
The Main Character
The Main Character
From the campaign homepage to a live try-on, every flow in one video.
From the campaign homepage to a live try-on, every flow in one video.
01 · Art direction
01 · Art direction
A campaign-first look
A campaign-first look
A campaign-first look
Soft lilac light, glossy close-ups and editorial type give a beauty campaign feel that carries from the homepage to the phone in your hand.
Soft lilac light, glossy close-ups and editorial type give a beauty campaign feel that carries from the homepage to the phone in your hand.
Photography
Photography
Campaign, product, application and community imagery share one soft, glossy lilac look.
Campaign, product, application and community imagery share one soft, glossy lilac look.
Editorial
Editorial
Magazine-style sections give the homepage a campaign rhythm.
Magazine-style sections give the homepage a campaign rhythm.
Homepage
Homepage
An editorial hero, soft surfaces and generous space, from top to footer.
An editorial hero, soft surfaces and generous space, from top to footer.
Mobile
Mobile
The same look rebuilt for a 390px screen, in light and dark.
The same look rebuilt for a 390px screen, in light and dark.
Light and dark
Light and dark
Every token has a dark value, so the whole page switches cleanly.
Every token has a dark value, so the whole page switches cleanly.
02 · Features
02 · Features
Designed to answer “which shade is mine?”
Designed to answer “which shade is mine?”
Designed to answer “which shade is mine?”
Every feature on the product page helps shoppers choose with confidence, from the shade picker to a live try-on and real customer proof.
Every feature on the product page helps shoppers choose with confidence, from the shade picker to a live try-on and real customer proof.
Shade picker
Shade picker
Each swatch updates the product shot, shade name and three skin-tone previews at once.
Each swatch updates the product shot, shade name and three skin-tone previews at once.
Ask tarte · AI
Ask tarte · AI
Quick answers drawn from product details and reviews, right on the page.
Quick answers drawn from product details and reviews, right on the page.
How to apply
How to apply
A tabbed how-to pairs a short video with four simple steps.
A tabbed how-to pairs a short video with four simple steps.
Customer photos
Customer photos
Tap any customer photo to open the full review in a lightbox.
Tap any customer photo to open the full review in a lightbox.
Before & after
Before & after
A draggable slider shows real results, paired with the science behind them.
A draggable slider shows real results, paired with the science behind them.
03 · DESIGN SYSTEM
03 · DESIGN SYSTEM
Tokens, type and components
Tokens, type and components
Tokens, type and components
A small, token-based system keeps light, dark, desktop and mobile consistent: three tonal ramps, semantic color tokens, two typefaces and a shared component library.
A small, token-based system keeps light, dark, desktop and mobile consistent: three tonal ramps, semantic color tokens, two typefaces and a shared component library.
Typeface
Typeface
Instrument Serif for editorial headlines, Jost for everything you read and tap.
Instrument Serif for editorial headlines, Jost for everything you read and tap.
Typescale
Typescale
Every text style in the system, and how they work together on the page.
Every text style in the system, and how they work together on the page.
Color, tokens & variables
Color, tokens & variables
Primitive ramps feed semantic tokens with light and dark values, alongside the spacing and radius scale.
Primitive ramps feed semantic tokens with light and dark values, alongside the spacing and radius scale.
Icons
Icons
Benefit and social icons, drawn on a 24px grid, shown here at 3×.
Benefit and social icons, drawn on a 24px grid, shown here at 3×.
Buttons & chips
Buttons & chips
Four button styles and selectable chips, shown in their default and selected states.
Four button styles and selectable chips, shown in their default and selected states.
Shade swatches & lip previews
Shade swatches & lip previews
Swatches, the full shade selector and the skin-tone previews that update with every shade.
Swatches, the full shade selector and the skin-tone previews that update with every shade.
Controls & badges
Controls & badges
The small pieces that make the page feel finished.
The small pieces that make the page feel finished.
Accordion
Accordion
Details, Ingredients and How to use, shown open with real copy, plus both states.
Details, Ingredients and How to use, shown open with real copy, plus both states.
Cards
Cards
Product, review and community cards, reused across the homepage and product page.
Product, review and community cards, reused across the homepage and product page.
Reflection
Reflection
What I’d do next
What I’d do next
What I’d do next
Test the try-on
Test the try-on
Test the try-on
Run usability sessions on the camera permission and shade switching to see where shoppers hesitate.
Run usability sessions on the camera permission and shade switching to see where shoppers hesitate.
Real photography
Real photography
Real photography
Replace the AI placeholder model and close-ups with shot imagery across a wider range of skin tones.
Replace the AI placeholder model and close-ups with shot imagery across a wider range of skin tones.
Accessibility pass
Accessibility pass
Accessibility pass
Audit contrast in dark mode, focus states and screen-reader labels for swatches and the try-on.
Audit contrast in dark mode, focus states and screen-reader labels for swatches and the try-on.
Concept project for portfolio purposes. Not affiliated with or endorsed by tarte cosmetics. Model and lip close-up images are AI-generated placeholders.
Concept project for portfolio purposes. Not affiliated with or endorsed by tarte cosmetics. Model and lip close-up images are AI-generated placeholders.
Next project
Next project
Queens
Queens
Queens
A one-line description of the next case study.
A one-line description of the next case study.
View case study
View case study
→
→