Overview
An accessible, platform-agnostic Figma-based design system to power the modernised NDIS mobile app
The National Disability Insurance Scheme (NDIS) required a modernised approach to its digital product design, triggered by a massive enterprise transformation: the decommissioning of its legacy SAP-based CRM in favour of a modern, cloud-based Salesforce platform known as PACE. To support this shift, I spearheaded the migration of the legacy NDIS Design System from Balsamiq into Figma. This transition was a critical first step and the architectural foundation for a complete overhaul and redesign of the NDIS mobile app.
Problem statement
The original design system was built in Balsamiq, a tool that was highly limiting and whose enterprise license was scheduled for decommissioning. Beyond software constraints, the legacy system could not support the strategic rollout of the new PACE platform (which introduced Faster Payments, Enhanced Portals, and Improved Compliance).
The NDIS was actively managing participants on older SAP-based plans (known as P1) alongside those on the new Salesforce PACE plans (known as P2 and S33). We needed a unified design system that could:
Bridge the Gap
Create visual consistency and alignment for participants across both the old and new platforms.
Ease the Transition
Gently introduce users to new UI patterns on the legacy plans, ensuring a seamless, familiar experience when they phased into PACE.
Fix Legacy Debt
Resolve the severe lack of documentation, eradicate visual inconsistencies, and establish the missing design token architecture that was slowing down development.
Users & audience
The Internal Audience
Fellow UX/UI designers and front-end developers who needed a robust, reliable toolkit to efficiently iterate and expand upon the NDIS app without reinventing the wheel.
The End-User
NDIS participants with a diverse spectrum of cognitive, visual, and motor disabilities. Because of this highly specific user base, the design system had to empower internal teams to build interfaces that were not just functionally compliant, but deeply empathetic and genuinely accessible.
Roles & responsibilities
Role: Lead UX/UI Designer
Responsibilities: Spearheaded the end-to-end migration of the design system from Balsamiq into Figma.
Expanded the system’s capabilities by designing and documenting missing components.
Established a comprehensive design token architecture from scratch.
Acted as the primary bridge between design, engineering, and accessibility teams.
Scope & constraints
This migration was executed under strict time constraints due to the impending expiration of the Balsamiq license. Additionally, there was significant internal pressure to deliver the new system and overhaul the architecture without halting the ongoing feature development cycle. I had to build the plane while flying it—architecting the system while simultaneously using it to design new features for the live NDIS app across both P1 and PACE platforms.
Processes
To ensure a smooth transition while actively designing new features, I took a highly structured, atomic approach to building the new Figma system:
Discovery & Alignment: Collaborated closely with the previous owners of the design system, developers, and product managers to understand historical context, technical constraints, and the rationale behind legacy components.
Establishing Foundations & Design Tokens: Before touching a single component, I built a robust design token architecture from scratch to ensure global scalability. This foundational layer standardised:
Visuals: Colours (ensuring strict AAA high-contrast accessibility), Type Scale, and Elevation.
Structural Elements: Spacing and Radius rules.
Assets: A unified library for Icons and the NDIS Logo.
Building the Component Library: Using the new token architecture, I systematically designed and documented over 30 accessible, responsive components. To ensure logical organisation, I structured the library into key categories:
Core UI & Inputs: Buttons, Button Groups, Input Fields, Select Fields, Checkboxes, Radios, and Toggles.
Navigation & Layouts: Bottom Navigation Bar, Tabs, Page Headers, Page Templates, and Header Shapes.
Complex Modules: Activity Timelines, Cards, Content Blocks, Datepickers, File Uploaders, Filters, and Search Bars.
Data Display & Feedback: Modals, Slide-up Sheets, Notifications, Toasts, Tooltips, Popovers, Progress Indicators, Lozenges, and Pills.
Accessibility as a Core Pillar: Because the end-users rely on assistive technologies, accessibility could not be an afterthought. I worked directly with Accessibility Experience experts to stress-test the foundations (optimizing focus rings, touch targets, and color contrast ratios) to ensure every component was designed with strict inclusivity in mind from the ground up.
Outcomes
Future-Proofed for PACE: Successfully delivered a comprehensive library of 30+ components that unified the UI across both the legacy SAP and new Salesforce PACE platforms, paving the way for a smooth participant migration.
Industry Standard Tooling: Transitioned the entire NDIS design system to Figma, aligning the team with modern industry standards and retiring the decommissioned software.
Systematised Consistency: Delivered a heavily documented system with established design tokens and foundations, completely eradicating the visual fragmentation caused by the old Balsamiq files.
Empathetic & Inclusive by Design: The final design system was rigorously stress-tested for accessibility, ensuring total compliance and creating a significantly more usable experience for NDIS participants with varying abilities.
Lessons Learned
Navigating a major structural migration under a tight deadline—while simultaneously designing new app features—highlighted the importance of extreme prioritisation. Laying down the structural foundations and tokens first was the key to success, as it allowed the complex components to be built rapidly and consistently. It also reinforced that when building for a diverse user base, accessibility must be baked into the foundational tokens, not treated as a final coat of paint.
Next steps
This design system was immediately pressure-tested in the massive project to support the PACE rollout. To see how these accessible tokens and components look in action, read the my NDIS App Redesign Case Study.