l'oreal · matrix/biolage

l'oreal · matrix/biolage

SoColor Certification

Creating a centralized digital education platform that empowers salon professionals to master Matrix's SoColor hair color line through structured certification.

Creating a centralized digital education platform that empowers salon professionals to master Matrix's SoColor hair color line through structured certification.

Role

Role

Digital Designer

Digital Designer

Timeline

Timeline

8 weeks

8 weeks

Platform

Platform

Web (Desktop/Mobile)

Web (Desktop/Mobile)

Overview

Overview

The Challenge

The Challenge

Matrix needed to educate salon professionals on their SoColor hair color line and certification process, but lacked a centralized digital platform. Colorists were learning through fragmented resources, leading to inconsistent color application techniques and reduced product mastery.

Matrix needed to educate salon professionals on their SoColor hair color line and certification process, but lacked a centralized digital platform. Colorists were learning through fragmented resources, leading to inconsistent color application techniques and reduced product mastery.

The Goal

Create a dedicated certification hub that standardizes SoColor education, establishes Matrix as a thought leader in professional color education, and builds a qualified network of certified color specialists.

Create a dedicated certification hub that standardizes SoColor education, establishes Matrix as a thought leader in professional color education, and builds a qualified network of certified color specialists.

MY ROLE

MY ROLE

UX Design Lead

UX Design Lead

I owned the end-to-end experience design, creating a flexible educational platform that balances technical color information with professional usability.

I owned the end-to-end experience design, creating a flexible educational platform that balances technical color information with professional usability.

👤

User Experience

Created intuitive navigation, clear CTAs, progress indicators, and mobile-optimized learning flows.

Created intuitive navigation, clear CTAs, progress indicators, and mobile-optimized learning flows.

🎨

Design System

Designed responsive layouts, component library, and photography art direction emphasizing color accuracy.

Designed responsive layouts, component library, and photography art direction emphasizing color accuracy.

🔁

Brand Integration

Balanced Matrix's professional identity with educational clarity within L'Oréal brand guidelines

Balanced Matrix's professional identity with educational clarity within L'Oréal brand guidelines

research

research

User Insights

User Insights

Identified key user needs and industry context to inform design decisions.

Identified key user needs and industry context to inform design decisions.

73%

73%

of professional colorists surveyed need flexible, self-paced learning.

of professional colorists surveyed need flexible, self-paced learning.

01

Visual learning is critical for color education

02

Credibility certification matters for professional development

03

Gap in mobile responsive design for on-the-go learning

Key Insight

Color formulation is one of the most technical aspects of professional hairdressing—colorists need to see formulations and results, not just read about them.

Key Insight

Color formulation is one of the most technical aspects of professional hairdressing—colorists need to see formulations and results, not just read about them.

personas

Understanding Our Users

Designed for two distinct professional archetypes with different needs and learning styles.

Persona 1

Rachel Smith, 23

Rachel Smith, 23

Recent Graduate, Salon Employee

"I want to learn more about the products my salon carries and show clients they can trust me as a new stylist"

Personality

• Loves watching Instagram reels on her phone

• Inspired by all things colorful and helping clients express themselves

• Passionate about fashion, makeup and hair

Frustration

• Wants product information in video format

• No free online or in-person experiences

• Not able to build trust with new clients

"I want to learn more about the products my salon carries and show clients they can trust me as a new stylist"

Persona 1

Sharon Connors, 45

Sharon Connors, 45

Experienced Salon Owner

"I do a lot of curly and coily hair and need to know if this product will suit my clients hair-types"

Personality

• Is a pillar in her local community

• Caters to mostly black and hispanic clientele

• Centers her family and is busy with them outside of work

Frustration

• Needs to digest educational content quickly

• Limited in-person experiences

• Wants to feel up-to-date on current trends with clients of all ages and hair-types

"I do a lot of curly and coily hair and need to know if this product will suit my clients hair-types"

INFORMATION ARCHITECTURE

Three Core Sections

The user journey needed to be easily completed on mobile and touch-friendly devices.

Program Overview

Value proposition and certification benefits.

Learning Modules

SoColor technology, formulation techniques, and application methods

Certification Path

Requirements, assessment, and credential issuance

SOLUTION

SOLUTION

Design Approach

Design Approach

Structured the experience around three core sections

with distinct content types.

Shipped 20+ P1/P2 features to close the capability gap between managed service and self-service.

01

Hero-Driven Storytelling

Hero-Driven Storytelling

Used bold, full-width hero section with professional salon imagery to immediately establish credibility and aspirational positioning.

Used bold, full-width hero section with professional salon imagery to immediately establish credibility and aspirational positioning.

02

Visual Hierarchy for Scanning

Visual Hierarchy for Scanning

Organized content in digestible sections with clear headings, allowing busy salon professionals to quickly understand program structure between appointments.

Organized content in digestible sections with clear headings, allowing busy salon professionals to quickly understand program structure between appointments.

03

Trust-Building Elements

Trust-Building Elements

Incorporated professional photography, clear program structure, and Matrix brand authority to establish legitimacy and value.

Incorporated professional photography, clear program structure, and Matrix brand authority to establish legitimacy and value.

04

Color-Accurate Presentation

Color-Accurate Presentation

Ensured high-fidelity color rendering throughout; critical for professional hair color education where accurate color perception is essential.

Ensured high-fidelity color rendering throughout; critical for professional hair color education where accurate color perception is essential.

PLATFORM ADAPTATION

Responsive Design Strategy

Responsive Design Strategy

The user journey needed to be easily completed on mobile and touch-friendly devices.

Desktop

Full-width immersive experience with detailed content sections filmed in-studio for in-salon learning.

Mobile

Streamlined vertical flow maintaining visual impact while optimizing for quick reference during client consultations.

Touch-Friendly

Appropriately sized interactive elements for mobile learning and on-the-floor reference.

Lancome Quiz GIF
Lancome Quiz GIF
Lancome Quiz GIF

TECHNICAL INNOVATION

TECHNICAL INNOVATION

Content Management Considerations

Content Management Considerations

Designed a flexible content structure that allows Matrix to evolve the platform over time.

Designed a flexible content structure that allows Matrix to evolve the platform over time.

01

Update certification requirements as SoColor formulations evolve and add new learning modules for product launches without redesigning the entire system.

02

Showcase certified colorist success stories and transformations while maintaining clean, professional aesthetic that doesn't compete with color education content.

impact

impact

Results

Results

Results are under NDA and available upon request.

Results are under NDA and available upon request.

REFLECTION

REFLECTION

Key Learnings

Key Learnings

01

Clear value proposition

Clear value proposition

Immediately communicating certification benefits and career advancement opportunities increased engagement.

Immediately communicating certification benefits and career advancement opportunities increased engagement.

02

Professional aesthetic

Professional aesthetic

High-quality visuals shot in-studio in partnership with celebrity colorists established program credibility within the professional beauty industry.

High-quality visuals shot in-studio in partnership with celebrity colorists established program credibility within the professional beauty industry.

03

Logical content flow

Logical content flow

Structured information architecture made complex color theory and formulation content accessible.

Structured information architecture made complex color theory and formulation content accessible.

REFLECTION

REFLECTION

Future
Opportunities

Future
Opportunities

01

01

Interactive color formulation calculators and mixing tools

Interactive color formulation calculators and mixing tools

02

02

Community features for certified colorists to share formulas and results

Community features for certified colorists to share formulas and results

03

03

Integration with salon management systems for client-facing certification badges

Integration with salon management systems for client-facing certification badges

04

04

Gamification elements to increase completion rates

Gamification elements to increase completion rates

04

04

AI powered AR color visualization tools for client consultations

AI powered AR color visualization tools for client consultations

© 2026, Ama Corrieri

Made with Framer

© 2026, Ama Corrieri

Made with Framer

© 2026, Ama Corrieri

Made with Framer

© 2026, Ama Corrieri

Made with Framer

© 2026, Ama Corrieri

Made with Framer