Case Study

Liquid Luxuries

Professional Education Booking Platform

Professional education and booking platform for Toronto Barber & Beauty Supply, designed to help busy beauty professionals discover and reserve educational courses across multiple brands. The project focused on streamlining discovery, reducing decision fatigue, and creating efficient booking experiences.
UX/UI Designer
My Role
End-to-end design
2024
Year
Live Project
75%
Time Reduction
15-20 min to under 5 min
90%+
Task Completion
User testing success rate
View Live Project
Liquid Luxuries Booking Platform

Project Overview

Professional education and booking platform for Toronto Barber & Beauty Supply, designed to help busy beauty professionals discover and reserve educational courses across multiple brands. The project focused on streamlining discovery, reducing decision fatigue, and creating efficient booking experiences.
Core Challenge: How can we help busy beauty professionals quickly discover relevant courses and reserve spots without friction or information overload?
  • Multiple beauty brands (Alfaparf, Eleven Australia, ASP, MEGIX)
  • Fragmented course information across brands, locations, and dates
  • Time-constrained professionals struggling to compare offerings
  • Complex booking processes requiring multiple steps
8
User Interviews
Beauty professionals
5
Competitors Analyzed
Education platforms
3 Steps
Booking Process
Down from 7+ steps
75%
Time Reduction
Discovery to booking

The Problem

Toronto Barber & Beauty Supply hosts professional education courses from multiple beauty brands. Professionals needed to navigate fragmented information across brands, locations, and dates to find relevant courses.

User Pain Points

  • Time-constrained professionals struggling to compare course offerings
  • Overwhelming number of brands, courses, and session options
  • No centralized view of upcoming educational opportunities
  • Complex booking processes requiring multiple steps and contacts
  • Lack of clarity around course details, prerequisites, and outcomes

Research Findings

Decision Time Challenge

Average decision time of 15-20 minutes to find and book relevant courses

Impact: Professionals often abandoned booking due to complexity

Brand Loyalty Pattern

70% of users prefer browsing by brand due to existing brand loyalty and familiarity

Impact: Brand-first navigation aligns with user mental models

Booking Abandonment

Professionals often bookmarked multiple courses but abandoned booking due to complexity

Impact: Need for simplified, minimal-step booking process

Research & Discovery

The research phase combined user interviews, competitive analysis, and information architecture challenges to understand the problem space and identify design opportunities.

User Research

  • Interviewed 8 beauty professionals about current course discovery habits
  • Identified average decision time of 15-20 minutes to find and book relevant courses
  • Discovered professionals often bookmark multiple courses but abandon booking due to complexity
  • Found 70% of users prefer browsing by brand due to existing brand loyalty and familiarity
User Journey Map - Discovery Phase
Complete User Journey Map

Competitive Analysis

  • Audited 5 similar education platforms in beauty and professional education spaces
  • Identified successful patterns: clear filtering, visual course cards, minimal-step booking
  • Noted common failures: buried course details, multi-page booking funnels, poor mobile experience

Information Architecture Challenges

  • Multiple entry points needed (by brand, by date, by topic)
  • Course information had varying detail levels across brands
  • Needed balance between comprehensive information and scanning efficiency
Service Blueprint - Frontstage vs Backstage

Design Strategy

The design strategy focused on aligning with user mental models, progressive disclosure, and minimal friction in the booking process.

Information Architecture

Site Map - Information Architecture

Primary Navigation

  • Browse by Brand (Primary path - aligns with user mental models)
  • Events/All Courses (Date-driven discovery)
  • Quick Book (Returning user fast-path)

Course Detail Hierarchy

  • What: Course title and brand
  • When: Date and time
  • Why: Key learning outcomes
  • How: Prerequisites and requirements
  • Book: Clear CTA with availability

Key UX Decisions

1. Brand-First Navigation

Respected user mental models and existing brand loyalty. Professionals think in terms of "What does Alfaparf offer?" not "What courses exist?"

2. Progressive Disclosure

Course cards show essential information at a glance. Details expand on demand. Prevents cognitive overload while maintaining comprehensive information access.

3. Minimal Booking Steps

Reduced booking to 3 steps: Select Course → Confirm Details → Reserve. Eliminated unnecessary form fields and confirmation pages.

4. Visual Brand Differentiation

Each brand maintains subtle visual identity within system (colors, thumbnails). Helps professionals quickly scan familiar brands.

5. Responsive-First Design

Many users book during breaks or commutes. Mobile experience prioritized touch targets, reduced scrolling, and thumb-friendly interactions.

Design Process

The design process followed a systematic approach from wireframing through development, with user testing at key stages to validate decisions.

Wireframing

  • Created low-fidelity flows for three primary user journeys
  • Tested information hierarchy with 5 target users through card sorting
  • Iterated navigation structure based on findability issues

Visual Design

  • Developed clean, professional aesthetic appropriate to beauty industry standards
  • Established typography hierarchy prioritizing scannability
  • Created consistent card system adaptable to varying content lengths
  • Designed touch-friendly interactive elements (minimum 44x44pt targets)

Prototyping

  • Built interactive prototype in Figma for user testing
  • Tested booking flow with 6 beauty professionals
  • Refined based on hesitation points and questions during testing

Development

  • Built responsive web application using React
  • Implemented filtering and search functionality
  • Optimized performance for mobile networks
  • Deployed via Netlify for reliable hosting

Key Interface Screens

The interface was designed around four primary screens supporting the core user journey from discovery to booking confirmation.

1. Homepage/Brand Browse

  • Grid of brand cards with visual identity and taglines
  • Quick-scan course counts and next upcoming session
  • Clear CTAs: "View Courses" and "Quick Book"

2. Brand Course Listings

  • Filtered view of all courses for selected brand
  • Sortable by date, topic, or popularity
  • Visual cards showing course title, date, brief description, availability

3. Course Detail View

  • Full course information with learning outcomes
  • Clear scheduling details and location
  • Prerequisites and materials needed
  • Prominent "Reserve Spot" CTA
  • Related courses suggestion

4. Booking Confirmation

  • Simplified form collecting only essential information
  • Calendar integration option
  • Email confirmation with course details

Outcome & Impact

The platform successfully addressed user pain points and delivered measurable improvements in both user experience and business value.

User Experience Improvements

  • Reduced average course discovery time from 15-20 minutes to under 5 minutes
  • Streamlined booking process to 3 steps (down from 7+ in previous system)
  • Achieved 90%+ task completion rate in user testing
  • Zero confusion about booking status or confirmation

Business Value

  • Created scalable structure supporting unlimited brands and courses
  • Reduced administrative overhead through self-service booking
  • Improved course visibility leading to higher enrollment rates
  • Established professional digital presence aligned with brand positioning

Technical Achievement

  • Built fully responsive web application deployable across devices
  • Implemented efficient filtering and search functionality
  • Created maintainable codebase for future feature expansion
  • Demonstrated end-to-end product design and development capability
75%
Time Reduction
Discovery to booking
3 Steps
Booking Process
Down from 7+ steps
90%+
Task Completion
User testing success
100%
Mobile Optimized
Responsive design

Reflection & Learnings

Designing for Time-Constrained Professionals

The project reinforced that efficiency isn't about removing information—it's about structuring information to match mental models and decision-making patterns. Beauty professionals didn't need less information; they needed it organized around how they actually think about courses (by brand) and presented in scannable formats.

Balancing Brand Diversity with UX Consistency

Managing multiple brands within a single system required careful balance. Each brand needed enough visual presence to maintain identity, but not so much that it fragmented the overall experience. The solution: consistent structure with subtle brand differentiation through color and imagery.

Progressive Disclosure in Practice

The project demonstrated effective progressive disclosure: course cards show just enough to support decision-making, with full details available on-demand. This prevented overwhelming users while ensuring all necessary information remained accessible.

From UX to Implementation

Taking the project from research through live deployment reinforced the importance of technical feasibility in design decisions. Designs that ignore implementation constraints create friction between design and development. Understanding technical capabilities enabled better design decisions and smoother collaboration.

More Case Studies

Seed Interactive

Seed Interactive

2020
View Case Study →
 Portugal Pavilion

Portugal Pavilion

2024
View Case Study →
 PASSEN

PASSEN

2019
View Case Study →