A Cohesive Scalable UI Revamp for Zosi Learners
A UX driven redesign from dark to light theme for Zosi learners, reimagining colours, typography and design system to align with parent company.
Company
Alchemy Zosi (Encora)
Domain
EdTech
Timeline
2 Months (2023)
Role
Senior Product Designer
Before - Dark Theme
After - Light Theme
Problem
Zosi’s client-facing platform launched with a dark theme that increasingly diverged from Intertek Alchemy’s light brand system. User feedback later confirmed a preference for a lighter, more readable interface, especially for extended learning. Shifting to a light theme two years into the product required rethinking core design foundations without disrupting existing workflows.
Solution
The platform was redesigned using a light-theme visual system focused on clarity, accessibility, and consistency. A scalable design system was created to support the new theme, unify UI patterns across key learner experiences, and align Zosi visually with Intertek Alchemy, while preserving product identity and flexibility for future growth.
Anticipated Impact
While the redesigned light-theme UI and scalable components were not implemented during my time on the project, the design choices are projected to deliver the benefits based on UX research and best practices:
A lighter, more readable interface is expected to reduce visual fatigue and create a more comfortable learning experience over extended sessions.
Refined color contrast and typography foundations support WCAG AA standards, improving accessibility across core learner workflows.
Clear visual hierarchy, consistent components, and simplified navigation help users scan content faster and focus on learning rather than interface complexity.
Project objectives
What were we looking to achieve?
Improve Learning Comfort
How can we reduce visual strain and improve readability for users engaging in long learning sessions?
Establish Visual Consistency
Colour system for Zosi and Intertek Alchemy is vastly different, how to align Zosi’s interface with Intertek Alchemy’s broader brand system while maintaining a distinct product identity?
Build a Scalable Foundation
Create reusable components and tokens that support future features and design evolution.
Enhance Navigation Clarity
Simplify key user flows to make course discovery, progress tracking, and actions easier to understand.
Process
How did we approach this?
Research & Discovery
Before starting the revamp, I reviewed the existing UI and identified issues across typography, spacing, color usage, and patterns. I also synced with PMs, other designers, and BAs to understand recurring user concerns.
Insights from stakeholder discovery
-
Learner Users showed preference to light theme because of cognitive load during long learning sessions.
-
Marketing team preferred light theme because it aligned with broader brand and created less problems for mailers and other marketing materials.
-
Certification partners wanted to be associated to broader brand rather than smaller Zosi, as it had more recognition.
Component-First Design
Designed core components and interaction patterns before expanding to full screens, ensuring consistency and reusability across the platform.
Before - Dark Theme
After - Light Theme
.jpg)
01
Understanding the Problem
The Dark Theme Dilemma
Zosi’s platform originally launched with a dark theme that, while visually striking, presented usability challenges. Feedback indicated that learners experienced eye strain during longer sessions and found some content harder to read.
The bigger problem? The design had never considered a light theme alternative. Colors, contrasts, and visual hierarchy were all optimized for dark backgrounds, making a simple theme switch impossible without rebuilding the entire UI system.
Typography
Thin font weights optimized for dark backgrounds became unreadable on light surfaces
Color Theming
No light theme color palette existed; contrast ratios failed WCAG standards
Brand Inconsistency
Dark theme didn't align with Zosi's other bright, energetic brand touchpoints
What Users Were Saying
"The dark theme hurts my eyes during long training sessions. I have to take breaks frequently."
"It feels disconnected from the rest of Zosi's branding. Very confusing when switching between products."
The Core Challenge
How might we transition Zosi's enterprise learning platform from a dark theme to a light, accessible design system that aligns with brand guidelines, improves usability, and maintains design consistency across all products without disrupting the learning experience?
02
Research & Discovery
Understanding User & Stakeholder needs
Before starting the revamp, I reviewed the existing UI and identified issues across typography, spacing, color usage, and patterns. I also synced with PMs, other designers, and BAs to understand recurring user concerns.
Key Insights
1. Dark-first assumptions: Components, colour contrast, and visual hierarchy were originally designed exclusively for dark surfaces, making direct translation to white impractical.
2. Brand continuity: Zosi’s brand needed to remain recognizable while adapting to a lighter, more neutral environment aligned with Intertek Alchemy.
3. Reduce Client Confusion: Co-marketing Intertek Alchemy and Zosi looks terrible due to drastically different brand identities
4. Technical Considerations: Email delivery of dark backgrounds difficult. Email platforms can invert colors, looking messy at best, illegible at worst (e.g., white font on white background)
03
Design Approach
The process was intentionally iterative, shaped by feedback and real usage scenarios rather than a strictly linear design-system rollout.
1. Color System Rebuild
Created a comprehensive light theme color palette with semantic tokens for backgrounds, text, borders, and interactive elements.
• Defined primary, secondary, and accent colors
• Ensured all combinations pass WCAG AA
• Tested with color blindness simulators
2. Screen- Led Exploration
We began by redesigning key client-facing screens to validate how a light theme could improve clarity, navigation, and learning flow. These early explorations helped identify gaps in hierarchy, spacing, and navigation patterns.
3. Navigation & Usability Improvements
Based on insights from screen-level work, refine navigation patterns to:
• Improve wayfinding across course discovery, enrollment, and learning flows
• Reduce visual noise and improve content prioritization
4. Component Refinement
Refine core components to support consistency and reuse.
• Navigation elements
• Course cards on website and Learner Portal
• Buttons, tags, interactive states, etc
04
The Solution
A Modern, Light-Themed Design System
While the design system was not published during my tenure, the revamp established a clear, extensible direction for the product’s continued evolution.
🎨
Unified Color System
Semantic color tokens ensured consistent, WCAG-AA compliant components.
✨
Consistency & Future Scalability
Reduced inconsistencies & improved scalability for future features
🌟
Brand Alignment
Consistent visual language matching Zosi's energetic, modern brand identity
What Changed
→
Visual Clarity
Improved contrast ratios, larger touch targets, clear visual hierarchy, and consistent spacing throughout the interface
→
Optimized Learning Experience
A cleaner, more approachable client interface optimized for learning
Refreshed Light theme Marketplace Website
Design System
Refreshed design system to match the brand
As part of the shift from a dark-first interface to a light theme, the existing color palette had to be rethought, many dark-theme colors did not meet accessibility contrast requirements when applied to light surfaces. The updated palette was refined to ensure WCAG-compliant contrast, visual clarity, and consistency across UI components, while staying aligned with Intertek Alchemy’s broader brand system.
New Light theme screens
Landing Page
The homepage opens with a cinematic hero section that instantly draws visitors into Aina Films’ storytelling approach, creating an emotional first impression that visuals can deliver better than words. This is followed by sections that highlight why clients choose Aina, authentic testimonials for trust-building, and a clear contact call-to-action that simplifies the next step.
My Orders
The My Orders screen was reworked using the new light theme to improve readability and reduce visual fatigue. Updated spacing, color usage, and UI styling helped surface key information such as order status and actions more clearly.
Anticipated Impact
What do we hope to achieve?
User Satisfaction
With Zosi aligning with overall brand identity, there would be consistency. Not only learners, partner companies would also be satisfied
WCAG Compliance
All colors contrasts meet AA accessibility standards.
Reduced cognitive load.
Clear hierarchy and simplified navigation will improve scanability.
Anticipated Impact
While the redesigned light-theme UI and scalable components were not implemented during my time on the project, the design choices are projected to deliver the benefits based on UX research and best practices:
User Satisfaction
Users reported loving the new light theme
WCAG Compliant
All color contrasts meet AA accessibility standards
Reduced Cognitive Load
Clear hierarchy and simplified navigation improved scanability.