Client
Link
UX/UI
Design Systems
Building a Scalable Mobile App Design System
The University of Canterbury had developed a new app that aimed to be a central resource for students to access information and tools during their time at University. This was a quickly evolving product that would be central to the University's digital strategy. Years of design and development had resulted in inconsistencies, mixed files, and missing documentation which made scaling difficult and created inefficiencies for both designers and developers.
The Challenge
The newly developed app lacked a cohesive design system, which led to several challenges. There was no clear documentation for the final design and styles, causing inconsistencies between design and development and leading to misaligned user experiences. The product was also worked on by numerous designers leading to mixed files and no single source of truth. As this was growing into a core business unit, the app required a scalable, future-proof solution.
The Solution
I conducted a thorough audit of existing design styles, components, and patterns in the app. This process revealed gaps and inconsistencies between design and development. An extensive component library was built out utilising new colour, spacing and typography tokens.
The design system was published as a Figma library, making assets easily accessible and significantly reducing time spent on new designs. Boolean and variant component states were utilised to streamline workflows. Extensive testing was conducted to meet WCAG standards, ensuring accessibility across colours, typography, and interactive elements.
Design Token Architecture
I developed a robust token architecture to define and manage design styles, including colours, typography, and spacing. The system leveraged simple naming conventions and categorisation, ensuring scalability as the app evolved. Additionally, an atomic UI structure was implemented to organise the component library effectively.
The token-based design system enables a more efficient approach to managing dark mode, allowing seamless transitions between light and dark themes across all designs. Unlike the previous system, which relied on component variants and primitive colours, often resulting in inconsistent conversions, the new system allows for instant previews of light and dark mode screens. This was crucial for the app as it used dynamic dark mode, automatically transitioning during morning and evening hours.
System Integration
After establishing the design system in Figma, I collaborated closely with developers to plan an end-to-end release process. This included maintaining up-to-date documentation through Storybook, ensuring consistency across all mobile and web applications in the future.
The new design system provides clear guidelines for UI components, creating a solid foundation for the team. While still evolving, it has improved collaboration between designers and developers with helpful documentation and a shared Figma library.
