Unifying EMA’s Digital Platforms
with a Visual Design System
by Allan Toh. ~10 min read
Overview
Role
Innovation
Consultant, UX
(NEC Asia Pacific)
Duration
~10 months
Responsibilities
UI audit & discovery
Component library creation in Figma
Stakeholder alignment & dev handoff
Component library leadership & governance
Impact
The design system unified our visual language across three platforms, accelerated design‑to‑dev delivery by 3X, eliminated repeat UAT failures, and established a scalable foundation for future growth.
Context
I joined NEC to work on the Energy Market Authority(EMA)’s digital transformation project two months after kickoff. EMA’s ecosystem comprises of 3 digital platforms:
Corporate Website – consumer‑facing
ELISE Licensing Portal – client‑facing
MP Scholarship Portal – candidate‑facing
Problem
At the time, the team had just failed its first UAT. Multiple UI inconsistencies—misaligned components, inconsistent font sizes, and missing breakpoints—had surfaced across platforms, suggesting the lack of a shared design foundation and exposing deeper workflow gaps.
Approach
Understand
Discovery
I conducted UI audits, reviewed design files across platforms, spoke with developers, and mapped key inconsistencies to identify root cause of the UAT failure.
Audit Existing Designs
Audit revealed inconsistent icons, spacing, and typography across platforms
Typography:
2 families were used inconsistently;
mobile sizes were undefined
Colours:
Undefined greys, no standardised state colours,
colours not WCAG‑compliant
Space:
Designers applied arbitrary padding and margins, creating misaligned layouts.
Icons:
Mixed sizes/styles, e.g different icons for ‘print’
Breakpoints:
Undefined
💡 Key Insights:
Audit Findings:
Preliminary audit of design files revealed multiple inconsistencies across font usage, icon styles, spacing, and component behaviours.
People:
Offshore designers worked in silos, each creating their own components with little cross-team communication and no shared library. Without a design engineer to enforce reuse, developers hardcoded UI from scratch, and no breakpoints or responsive standards were defined.
Process:
There was no end-to-end workflow. Design handoff was informal, with no shared documentation, version control, or governance.
Tools:
Screens were designed in XD, but the tender deliverable was required in Figma.
(Offshore designers were unfamiliar with Figma)
Assess & Strategize
Constraint #1
XD-Figma mismatch
Response
Start new sprints
on Figma, fast.
Trade-off
Left old XD files as-is, migrate progressively
Constraint #2
No shared library, poor communication
Response
Built Figma system, begin weekly design standups
Trade-off
Extra onboarding effort
Constraint #3
No Design Engineer
Response
Set naming conventions, manually govern design consistency for now
Trade-off
Manual consistency checks
Act
1
Secure Stakeholder Buy-In
Positioned lean design system as a UAT risk mitigation + efficiency measure
2
Build Lean, Tokenized Component Library (Iterative)
Established a first‑cut component library in Figma
Foundations:
Standardized typography, color, spacing, and breakpoints to enforce cross‑platform consistency.
Semantic Tokens:
Defined reusable tokens for key styles (e.g., Primary Blue/500, Heading Desktop/H1/Bold) to unify naming and reduce ambiguity.
Contextual Tokens:
Applied selectively to interactive components like buttons (Default, Hover, Disabled) to manage states efficiently.
Structured to allow future extension to other components
(e.g., cards) as the system scales.
Components:
Core - Icons, buttons, SG Gov Banner
Extended - Logos, tables, pagination, article templates
Semantic Tokens
Contextual Tokens
*Rationale: Focused on rapid alignment and risk reduction; advanced token layers deferred due to tight timeline and absence of a dedicated design engineer.
3
Establish Governance
Rights:
Only one on-site designer and I had edit access;
published assets were shared with the wider team.
Communication:
Weekly 20‑min design stand‑ups for alignment and improve cross-platform collaboration
Rule:
Lean‑first principle: add only widely reusable components. Avoid unnecessary variants; discourage detaching components
4
Scale and Migrate
Migrated XD → Figma screens in 2 months without delaying sprints
Expanded component library as needs emerged (cards, filters, modals)
Enforced adoption across Corporate Website, ELISE, and MP portals
Monitor
UAT / QA Feedback: Confirmed components rendered correctly and fixed any visual inconsistencies before the next sprint.
Team Usage Tracking: Monitored Figma library usage to ensure designers and developers relied on shared components without detaching.
Ongoing Checkpoints: Performed occasional visual audits during early sprints to confirm component adoption, then shifted to ad‑hoc checks once usage stabilized.
Outcome
Unified visual language across 3 public‑facing platforms
No subsequent UAT failures; significantly reduced inconsistency
Better Efficiency. Cut design turnaround time by 3X
Improved collaboration between onshore & offshore designers
Foundation for future full design system + dev integration
Learnings
Workplace constraints are inevitable, but a tokenized component library can still unify multi‑platform design language, build user trust, and establish a foundation for future developer‑ready libraries.
Early stakeholder alignment and clear governance are crucial for time and support, as design systems are long, iterative efforts whose real impact becomes visible only over time.
