Rebuilding a scalable, learner-friendly interface through a mid-product design system shift
User-Centric Redesign
This case study presents the redesign of Zosi’s client-facing UI as part of a UX-driven rebranding effort. It covers the introduction of an updated white-theme visual system and the creation of consistent, scalable components across key learner interfaces.
Company Overview
Zosi, part of Intertek Alchemy, is a learning platform that delivers professional training and industry-recognized certifications, particularly in food and safety. It offers a wide library of courses for individuals and teams, with options for companies to purchase training packages in bulk for their employees.
Objective
Reimagine major components and flows to support the new white-theme direction while rebuilding core UI elements from the ground up.
Ensure accessibility, readability, and visual consistency across all redesigned components.
Collaborate closely with developers to align structures for smooth, scalable implementation.
My Role
Contribute as a UX Designer, building components, designing key screens, and supporting the design system while collaborating closely with product, design, and development teams.
Team: Designers, Product Managers, Developers, Business Analysts
Tools: Figma
Understanding the problem
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. Branding Considerations
User research from the marketing team showed that the previous dark color palette felt too intense and didn’t align with the approachable, learner-friendly experience the platform intended to create.
The significant differences between Intertek Alchemy’s (Parent company) and Zosi’s brand identities made co-marketing difficult and visually inconsistent.
Black is often associated with luxury in branding, which contrasted with Zosi’s audience of individuals and businesses.
2. Technical constraints
Dark email backgrounds are hard to deliver reliably.
Outlook often inverts colors, causing emails to appear messy or even unreadable.
Parent company uses a light theme; Zosi is the only brand with a dark theme.
3. User Preference
Developers strongly prefer dark themes
They spend much longer continuous hours on screens than the general population.
Research suggests dark themes can slightly reduce eye strain, reinforcing this preference.
While Zosi users said they preferrred light theme.
Email distorted Zosi’s brand blue color.
"We prefer the brighter, friendlier, lighter feel of Intertek Alchemy’s lighter color scheme"
- Devon Ortega, has achieved 5 Zosi certificates.
Design Approach
Screen-Level Revamp
We started working on some sample mockups, using branding style prepared with various stakeholders.
Main focus was on clarity, accessibility, and reducing cognitive load. The white theme made the interface feel lighter and more approachable.
01
Rebuilding the Foundations
Color tokens for backgrounds,
text, functional states, and surfaces
Typography scale to ensure comfortable reading
Spacing system to maintain predictable rhythm
Shadows & elevation for hierarchy
Border radius & stroke definitions for consistent visual shape
02
Creating Scalable Components
Creating common components like nav bars, course cards, side nav, tabs, buttons, etc.
Creating their states (default, hover, disabled, etc).
03
The redesign required close collab with devlopers, Product managers, Business Analysts, Marketting teams.
We held syncs, shared component reviews, and iterated based on team feedback. This helped ensure the new system worked not only visually, but also functionally across different user journeys.
Collaboration & Workflow
Although the design system was not officially published before my departure, the work delivered:
A new design direction for light theme experience.
Cleaner, scalable screens that aligned with user feedback.
Improved design consistency across client-facing flows and a foundation that future designers can extend
Impact
Design system work isn’t always a linear, step-by-step process. In this project, the workflow evolved organically starting with redesigned screens, gathering feedback, and then refining foundations and components as patterns emerged. The system grew through iteration, collaboration, and continuous input rather than a strict, predefined sequence.
What I learned
Redesign
Shown below is a comparison of the old and redesigned website. Key improvements include clearer information architecture, updated layouts, and a more minimal, consistent visual style.
Before
