BeED LMS
Building a Design System and Product from Zero for Malaysia’s Largest IB School Network
Introduction
BeED LMS is the web-based learning management system used across Fairview International School’s network – Malaysia’s largest IB school group, spanning 6 campuses in Malaysia and the UK. As Lead UI/UX Designer, I owned this system end-to-end: not just the interface, but the design system, logo, iconography, illustration, and every graphic asset in it, across 14 modules covering everything from curriculum building to gradebooks to internal communication.
This is the project where I did the most complete version of the job — brand identity through component library through shipped, developer-handed-off UI, at the scale of a real multi-campus institution.
DClient
BeED (in-house) — deployed to Fairview International School, Malaysia’s largest network of IB schools.
My role
Lead/Senior UI/UX Designer—led end-to-end: design system, logo, icons, illustrations, all graphic assets, UI
Team
Led 2 junior designers on the project; worked directly with the Product Manager, stakeholders, and product owners
Services
Product Design · Design Systems · Brand & Visual Identity · Icon & Illustration Design · Frontend Handoff
Industry
EdTech
Platform
Web (Angular) –14 modules
Scale
2,000+ students and their parents, 6 campuses across Malaysia and the UK
Problem
BeED LMS replaced a legacy system that had become clunky and outdated — the UI was inconsistent across modules, and completing everyday tasks took more clicks than it should have. The mandate was a full revamp: a modern, consistent interface built on a new tech stack (Angular), designed to work coherently across 14 modules for a multi-campus institution rather than patching the old system module by module.
Legacy System
Goals
BUSINESS GOALS
Deliver a unified, scalable LMS across 14 modules for a large multi-campus IB institution, with a design system robust enough to support fast, consistent feature development as BeED’s product line grows.
User Goals
- School admins — Manage enrollment, curriculum structure, and cross-campus operations from one coherent system
- Teachers — Build curriculum, manage gradebooks and question banks, and communicate (forum, announcements, messenger) without switching mental models between modules
- Academic leadership — See meaningful analytics across campuses, not just per-module data
My Role & Ownership
This is the project where I owned the whole system, from design through dev-ready handoff:
- Design system — built and owned the full Angular design system and component library from scratch
- Brand & visual identity — created the logo, icons, illustration style, and all graphic assets used across the product
- UI across 14 modules — Dashboard, Admin Panel, Curriculum Builder, Library, Gradebook, Question Bank, Analytics, and the Connect suite (Forum, Announcements, Messenger, BMeet), among others
- Developer handoff — delivered structured, developer-aligned Figma files built for direct production implementation
- Governance — audited and rebuilt legacy Figma architecture, establishing design system governance and file-management protocols still used across the product team today
- Mentorship — led and mentored 2 junior designers working within the system
Design System (Revamped)
Process
- Discovery / Research — audited the legacy system and its existing Figma files to identify what was outdated, inconsistent, or no longer serving users, forming the baseline for the revamp
- User flows — mapped user flow charts based on requirements from the Product Manager, defining how each module’s tasks should work before any visual design began
- Stakeholder alignment — discussed and validated direction directly with stakeholders and product owners throughout
- Design system foundation — established the component library, a token system built on Figma variables, visual language, icon set, and Figma architecture before individual module design began
- Module-by-module design — low- to high-fidelity design across all 14 modules, built on the shared system
- Developer handoff — structured Figma files for direct Angular implementation
- Iteration & governance — ongoing refinement and design system governance as the product scaled
- Discovery / Research — audited the legacy system and its existing Figma files to identify what was outdated, inconsistent, or no longer serving users, forming the baseline for the revamp
- User flows — mapped user flow charts based on requirements from the Product Manager, defining how each module’s tasks should work before any visual design began
- Stakeholder alignment — discussed and validated direction directly with stakeholders and product owners throughout
- Design system foundation — established the component library, a token system built on Figma variables, visual language, icon set, and Figma architecture before individual module design began
- Module-by-module design — low- to high-fidelity design across all 14 modules, built on the shared system
- Developer handoff — structured Figma files for direct Angular implementation
- Iteration & governance — ongoing refinement and design system governance as the product scaled
Final Designs
Selected screens across the system: Dashboard, one academic module (Curriculum Builder or Gradebook), one communication module (Connect/Forum), and Analytics — showing range across the 14 modules without turning the page into a full module-by-module catalogue.
High-Fidelity Interactive Prototype (Figma) – Question Bank Module
High-Fidelity Interactive Prototype (Figma) – Overview Dashboard
BeED LMS in production — recorded from the live, shipped Angular application
Impact
- Live system serving Fairview International School — 2,000+ students and their parents across 6 campuses in Malaysia and the UK
- Design system and governance protocols established here are now used across the wider BeED product team
- Following the revamp, users found the new UI easier for day-to-day tasks—replacing an interface that required more clicks to complete common actions—with positive reception from the school and its users compared to the legacy system
Leadership & Mentorship
Led and mentored 2 junior designers on the project, guiding their work within the design system, alongside rebuilding the team’s legacy Figma architecture into governed, scalable file-management protocols still in use today.
What I Learned
BeED LMS was the first project where I owned the full stack of what “design” actually means at scale — not just screens, but the system underneath them: the components, the tokens, the icon set, the governance that keeps 14 modules feeling like one product instead of 14 different ones. Rebuilding the team’s Figma architecture taught me that a design system isn’t just a file of reusable components — it’s a set of decisions about how a whole team will work for years after you’ve moved on to the next module.