E-Learning Modules For Global Cosmetics Brand

E-Learning Modules For Global Cosmetics Brand

E-Learning Modules For Global Cosmetics Brand

NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.
NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.
NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.

PROJECT TYPE:

PROJECT TYPE:

Interface Design

Interface Design

CLIENT:

CLIENT:

Beauteschool (For NARS Cosmetics)

Beauteschool (For NARS Cosmetics)

LOCATION:

LOCATION:

New York

New York

INPUT:

INPUT:

Word Doc (Outline)

Word Doc (Outline)

DELIVERABLES:

DELIVERABLES:

Figma

Figma

STACK:

STACK:

Figma

Figma

NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.

NARS Cosmetics is one of the world's leading cosmetics and beauty brands. Based in Paris, France, they employ roughly 250,000 stylists globally at their retail locations. I was brought on by one of their education vendors to come up with the course module design vision for their new e-learning initiative. These modules would be used to train stylists on product knowledge and customer care.

The NARS brand carried strict guidelines right down to kerning and font size for various uses so from a design standpoint, I was working under a more restricted environment than I was used to. The NARS look is very "high fashion" with sharp blacks, ultra thin all caps fonts, and lots of strong product and model visuals.

I needed to capture all of this and come up with a series of course slides that would make discovering the brand fun, engaging, and highly interactive. One key design consideration was navigation. To help with navigation clarity, I kept all learning slides white backdrop, all title slides black, and I built a full screen black overlay menu with chapter blocks that would light up if the learner was in that chapter. These techniques provided visual cues to the learner where they were situated in the module.

NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.
NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.
NARS Cosmetics e-learning module interface design showcase displaying multiple screen layouts on dark blue textured background, featuring product training screens, founder biography, makeup technique tutorials, and interactive quiz elements designed by Chadd Weston.
NARS Cosmetics e-learning interface wireframe mockup displaying NARS Skin course template with navigation icons, progress indicator, topic selection menu featuring François Nars, Brand, and Philosophy & Technique modules on white background.
NARS Cosmetics e-learning interface wireframe mockup displaying NARS Skin course template with navigation icons, progress indicator, topic selection menu featuring François Nars, Brand, and Philosophy & Technique modules on white background.
NARS Cosmetics e-learning interface wireframe mockup displaying NARS Skin course template with navigation icons, progress indicator, topic selection menu featuring François Nars, Brand, and Philosophy & Technique modules on white background.
NARS Cosmetics e-learning UI component library wireframe showing NARS Skin course template with navigation icons, topic menu, progress indicator, and François Nars portrait with modal overlay on clean white interface.
NARS Cosmetics e-learning UI component library wireframe showing NARS Skin course template with navigation icons, topic menu, progress indicator, and François Nars portrait with modal overlay on clean white interface.
NARS Cosmetics e-learning UI component library wireframe showing NARS Skin course template with navigation icons, topic menu, progress indicator, and François Nars portrait with modal overlay on clean white interface.
NARS Cosmetics e-learning module hero screen mockup showing "New To NARS" welcome page with stylized logo typography alongside product photography of lipstick collection in coral and nude shades on black background with course information card.
NARS Cosmetics e-learning module hero screen mockup showing "New To NARS" welcome page with stylized logo typography alongside product photography of lipstick collection in coral and nude shades on black background with course information card.
NARS Cosmetics e-learning module hero screen mockup showing "New To NARS" welcome page with stylized logo typography alongside product photography of lipstick collection in coral and nude shades on black background with course information card.
NARS Cosmetics New To NARS e-learning hero screen featuring stylized outline logo typography with collection of nine lipsticks in red, coral, pink, and burgundy shades displayed in branded packaging on black background.
NARS Cosmetics New To NARS e-learning hero screen featuring stylized outline logo typography with collection of nine lipsticks in red, coral, pink, and burgundy shades displayed in branded packaging on black background.
NARS Cosmetics New To NARS e-learning hero screen featuring stylized outline logo typography with collection of nine lipsticks in red, coral, pink, and burgundy shades displayed in branded packaging on black background.
NARS Cosmetics e-learning welcome screen showing "New To NARS" title with "Welcome Let's Get Started" messaging and next arrow navigation on minimal white interface designed for employee training.
NARS Cosmetics e-learning welcome screen showing "New To NARS" title with "Welcome Let's Get Started" messaging and next arrow navigation on minimal white interface designed for employee training.
NARS Cosmetics e-learning welcome screen showing "New To NARS" title with "Welcome Let's Get Started" messaging and next arrow navigation on minimal white interface designed for employee training.
NARS Cosmetics e-learning welcome screen mockup showing "New To NARS" title with "Welcome Let's Get Started" call-to-action and navigation arrow on clean white interface with World of NARS course indicator.
NARS Cosmetics e-learning welcome screen mockup showing "New To NARS" title with "Welcome Let's Get Started" call-to-action and navigation arrow on clean white interface with World of NARS course indicator.
NARS Cosmetics e-learning welcome screen mockup showing "New To NARS" title with "Welcome Let's Get Started" call-to-action and navigation arrow on clean white interface with World of NARS course indicator.
NARS Cosmetics World of NARS e-learning navigation wireframe showing course and module title component with explanatory text describing persistent header navigation element on clean white interface.
NARS Cosmetics World of NARS e-learning navigation wireframe showing course and module title component with explanatory text describing persistent header navigation element on clean white interface.
NARS Cosmetics World of NARS e-learning navigation wireframe showing course and module title component with explanatory text describing persistent header navigation element on clean white interface.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing vertical navigation with François Says quotes, Did You Know facts, Artistry Tips & Techniques, and Resources sections with dotted progress indicators.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing vertical navigation with François Says quotes, Did You Know facts, Artistry Tips & Techniques, and Resources sections with dotted progress indicators.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing vertical navigation with François Says quotes, Did You Know facts, Artistry Tips & Techniques, and Resources sections with dotted progress indicators.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing Main Menu component with placeholder description text and dotted progress indicator on minimal white interface with navigation icons.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing Main Menu component with placeholder description text and dotted progress indicator on minimal white interface with navigation icons.
NARS Cosmetics World of NARS e-learning sidebar wireframe showing Main Menu component with placeholder description text and dotted progress indicator on minimal white interface with navigation icons.
NARS Cosmetics World of NARS main menu interface showing three learning modules: François Nars founder portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with dark navigation panel on textured blue background.
NARS Cosmetics World of NARS main menu interface showing three learning modules: François Nars founder portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with dark navigation panel on textured blue background.
NARS Cosmetics World of NARS main menu interface showing three learning modules: François Nars founder portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with dark navigation panel on textured blue background.
NARS Cosmetics World of NARS main menu screen dark mode version displaying three module cards: François Nars portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with navigation links on black background.
NARS Cosmetics World of NARS main menu screen dark mode version displaying three module cards: François Nars portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with navigation links on black background.
NARS Cosmetics World of NARS main menu screen dark mode version displaying three module cards: François Nars portrait, History & Heritage product imagery, and Philosophy & Technique makeup application photo with navigation links on black background.
NARS Cosmetics World of NARS course introduction screen featuring black and white portrait of founder François Nars in studio setting with 5-minute course duration indicator and navigation controls on split dark/light interface.
NARS Cosmetics World of NARS course introduction screen featuring black and white portrait of founder François Nars in studio setting with 5-minute course duration indicator and navigation controls on split dark/light interface.
NARS Cosmetics World of NARS course introduction screen featuring black and white portrait of founder François Nars in studio setting with 5-minute course duration indicator and navigation controls on split dark/light interface.
NARS Cosmetics World of NARS course introduction full-bleed screen featuring black and white portrait of founder François Nars seated in studio with 5-minute duration indicator and next navigation arrow on split layout.
NARS Cosmetics World of NARS course introduction full-bleed screen featuring black and white portrait of founder François Nars seated in studio with 5-minute duration indicator and next navigation arrow on split layout.
NARS Cosmetics World of NARS course introduction full-bleed screen featuring black and white portrait of founder François Nars seated in studio with 5-minute duration indicator and next navigation arrow on split layout.
NARS Cosmetics New To NARS light mode landing screen showing course overview with three learning module thumbnails: François Nars biography, History & Heritage products, and Philosophy & Technique application demonstration on white background.
NARS Cosmetics New To NARS light mode landing screen showing course overview with three learning module thumbnails: François Nars biography, History & Heritage products, and Philosophy & Technique application demonstration on white background.
NARS Cosmetics New To NARS light mode landing screen showing course overview with three learning module thumbnails: François Nars biography, History & Heritage products, and Philosophy & Technique application demonstration on white background.
NARS Cosmetics World of NARS History & Heritage e-learning module screen displaying product collection grid with Laguna Liquid Bronzer featured product and product story description explaining versatile bronzing formula.
NARS Cosmetics World of NARS History & Heritage e-learning module screen displaying product collection grid with Laguna Liquid Bronzer featured product and product story description explaining versatile bronzing formula.
NARS Cosmetics World of NARS History & Heritage e-learning module screen displaying product collection grid with Laguna Liquid Bronzer featured product and product story description explaining versatile bronzing formula.
NARS Cosmetics World of NARS History & Heritage screen showing François Nars Says quote tooltip overlay describing Laguna Liquid Bronzer product benefits with product collection grid in background.
NARS Cosmetics World of NARS History & Heritage screen showing François Nars Says quote tooltip overlay describing Laguna Liquid Bronzer product benefits with product collection grid in background.
NARS Cosmetics World of NARS History & Heritage screen showing François Nars Says quote tooltip overlay describing Laguna Liquid Bronzer product benefits with product collection grid in background.
NARS Cosmetics World of NARS Philosophy & Technique e-learning module showing makeup face chart illustration with numbered product application guide featuring Orgasm Blush, Concealer, The Multiple, Liquid Blush, and Bronzing Powder.
NARS Cosmetics World of NARS Philosophy & Technique e-learning module showing makeup face chart illustration with numbered product application guide featuring Orgasm Blush, Concealer, The Multiple, Liquid Blush, and Bronzing Powder.
NARS Cosmetics World of NARS Philosophy & Technique e-learning module showing makeup face chart illustration with numbered product application guide featuring Orgasm Blush, Concealer, The Multiple, Liquid Blush, and Bronzing Powder.
NARS Cosmetics e-learning interactive quiz screen mockup for Philosophy & Technique module showing "Who Am I?" drag-and-drop product matching exercise with Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer products.
NARS Cosmetics e-learning interactive quiz screen mockup for Philosophy & Technique module showing "Who Am I?" drag-and-drop product matching exercise with Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer products.
NARS Cosmetics e-learning interactive quiz screen mockup for Philosophy & Technique module showing "Who Am I?" drag-and-drop product matching exercise with Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer products.
NARS Cosmetics World of NARS Philosophy & Technique interactive quiz screen showing "Who Am I?" drag-and-drop exercise matching products including Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer to skincare benefit descriptions.
NARS Cosmetics World of NARS Philosophy & Technique interactive quiz screen showing "Who Am I?" drag-and-drop exercise matching products including Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer to skincare benefit descriptions.
NARS Cosmetics World of NARS Philosophy & Technique interactive quiz screen showing "Who Am I?" drag-and-drop exercise matching products including Orgasm Blush, Concealer, Bronzing Powder, Liquid Blush, The Multiple, and Liquid Bronzer to skincare benefit descriptions.

© 2025 Weston Media Inc. All Rights Reserved.

0

DESIGN HOURS

$0

RAISED WITH MY PITCH DECKS

0+

HAPPY CLIENTs

© 2025 Weston Media Inc. All Rights Reserved.

0

DESIGN HOURS

$0

RAISED WITH MY PITCH DECKS

0+

HAPPY CLIENTs

© 2025 Weston Media Inc. All Rights Reserved.

0

DESIGN HOURS

$0

RAISED WITH MY PITCH DECKS

0+

HAPPY CLIENTs