Winnie.N®LearnPress × Eduma
Turning fragmented LMS UI into a scalable system for learners, instructors, administrators, and education businesses.
- Role
- UI/UX Designer at PhysCode
- Scope
- UI audit · Product journey · Semantic tokens · Components · Migration · Design QA
- Outputs
- Foundations · Components · Patterns · Migration documentation
UI accumulated over time into scattered components, non-semantic values, and inconsistent behaviour.
Ninety-three screens were mapped to seven journey stages before foundations and components were rebuilt.
Global tokens were separated from Alias tokens so components use meaning instead of raw values.
Only measured design-file and migration results are reported; no business outcome is inferred.
One LMS core. Many journeys and expressions.
LearnPress supports core learning tasks; Eduma brings that platform into different education and brand contexts. One component change can surface in a course listing, learning flow, assessment, and several demos. The design scope therefore had to follow journeys and shared decisions—not isolated screens.
The problem was not to make the UI look cleaner and more consistent.
How might the system support more journeys and brand contexts without multiplying repeated UI decisions?
This is framing from the design-file audit, not a usability-testing conclusion.Move the unit of design from screens to shared decisions.
LearnPress had accumulated scattered components, non-semantic values, multiple role journeys, and WordPress constraints. The work began by mapping 93 screens to seven journey stages before rebuilding the system from raw tokens to reusable product patterns.
- 01Product ecosystem
Define the relationship between LearnPress core, add-ons, themes, and Eduma demos.
- 02User journeys
Organise 93 screens into seven stages instead of disconnected file sections.
- 03Semantic system
Route raw values through Global and Alias tokens before they reach components.
- 04Reusable patterns
Standardise anatomy, variants, states, and responsive behaviour around tasks.
- 05Product & handoff
Check the system against real UI, WordPress constraints, and implementation guidance.
Each decision must remove complexity from more than one screen.
The decisions below describe reasoning traceable to the design files. They do not imply that every alternative was tested.
Start with journeys, not components.
- Problem
- The same pattern appears across screens but serves different moments in the learning journey.
- Constraint
- Auditing by Figma page or frame name would hide relationships across discovery, learning, assessment, and administration.
- Decision
- Map 93 screens to seven stages and four role groups before deciding which components should converge.
- Consequence
- Components are prioritised by journey reach, not by how easy they are to clean up.
Put meaning before hex values.
- Problem
- Eduma supports multiple brand directions, so the same action role may use different colours across demos.
- Constraint
- Hard-coding brand colour into a component would turn every demo into a separate system branch.
- Decision
- Separate Global from Alias tokens; components reference roles such as action, surface, border, and feedback.
- Consequence
- Shared structure remains stable while brand expression can change by context.
Control combinations instead of multiplying variants.
- Problem
- Combining type, size, state, and layout in one matrix makes variants grow faster than their value.
- Constraint
- An over-general library becomes hard to maintain; one component per case creates new fragmentation.
- Decision
- Organise Input as Base–Composite and keep ten type variants instead of an approximately 300-combination matrix.
- Consequence
- Properties have clearer responsibility, reducing ambiguity about the canonical source.
Migration must preserve traceability.
- Problem
- Existing screens and more than 1,000 icon instances could not be replaced in one pass without UI risk.
- Constraint
- Detaching for a quick fix breaks the link to the source and makes the next update more expensive.
- Decision
- Relink in controlled groups, isolate legacy values, and audit detached instances after migration.
- Consequence
- Thirty-one duplicate icon masters were removed while migrated instances stayed connected to the source.
Fix the structure. Let expression change.
System thinking does not mean every demo must look the same. LearnPress keeps task logic, states, and accessibility stable; Eduma needs enough freedom for academy, university, kindergarten, or coaching contexts to feel distinct.
- Component anatomy and states
- Semantic-token meaning
- Information order within tasks
- Responsive rules and touch targets
- Naming and handoff specifications
- Brand colour mode
- Expressive typography
- Imagery and art direction
- Audience-specific education content
- Landing-page density by goal
Connect the core system to real UI and delivery.
- 01
Audit & architecture
Review screens and patterns; organise Global/Alias tokens, typography, components, variants, and states.
- 02
Product application
Apply the system to LearnPress UI, Eduma demos, and landing pages; test shared structure across contexts.
- 03
Migration & handoff
Relink instances, audit detached components, specify responsive behaviour, and document implementation rules.
- 04
Release touchpoints
Design landing pages, thumbnails, covers, and release illustrations so product and message share one language.
Measure system change. Do not borrow missing metrics.
The migration produced measurable design-file outcomes: all spacing properties in the Eduma Component Source were token-bound, more than 1,000 legacy icons were relinked, 31 duplicate icon masters were removed, and detached instances remained at zero. These are system-quality results—not claims about conversion, delivery speed, or learning outcomes.
A Design System does not start with a component library. It starts by deciding which product choices must remain consistent—and which need permission to change.
The next step is to track component adoption, exception rate, and changes introduced as the system grows. That is how to verify whether the system actually reduces delivery complexity.
Review the full reasoning and live products.
The full case study preserves the complete audit, reasoning, and visual narrative. The other links lead to Eduma Theme and LearnPress; source Figma files are intentionally not exposed as portfolio calls to action.
Turning fragmented UI into a coherent system?