TRUELEARN
CV

Enter the Password

The TrueLearn logo — a faceted blue gem mark beside the wordmark — on solid brand blue

Scroll down

Project Overview

TrueLearn is a question-bank platform for medical and allied-health exam prep, pairing practice questions with performance analytics.

  • E-learning
  • Product design team
  • Competitor analysis · Wireframes · Design system
  • 2025

Challenge

TrueLearn's legacy visual guidelines didn't scale. My challenge: translate them into a maintainable design system.

Process

I worked with TrueLearn's design team in Scrum, alongside features like flashcards integration and mobile app improvements. My focus stayed on the design system — building the new token architecture and migrating the product onto it.

Deliverables

A three-level token workflow diagram — Reference Tokens/Brand/Primitives feeding Semantic Tokens/Alias/Roles (including a text-styles branch) feeding Contextual Tokens/Mapped

A three-tiered design system, built from scratch on TrueLearn's legacy visual guidelines and meeting WCAG AAA standards. A flashcards feature, delivered end to end — from competitor analysis to A/B testing.

A component-states sheet: search fields, text fields, and select dropdowns each shown empty, filled, focused, error, and disabledA color-ramp and contrast-checking tool, showing the blue ramp at steps 100–900 with APCA and WCAG contrast scores for the selected step

What I've Learned

TRUELEARN gave me the chance to dive deep into three-level design tokens and build a system that scales.