In this pivotal role, I lead the re-design and optimisation of a company-wide Figma Design System.
This project will significantly enhance the UX team’s ability to service over 1.3 million members with several products and applications.
The following is a prototype built using this Genesis UI design system.
Multiple design systems – The Aware Super UX team utilising multiple design systems, many of which are unmaintained and poorly developed.
No consistency – The legacy systems lack consistency and scalability and are not aligned with the Figma design system standards.
No Accessibility – Little to no consideration of Accessibility, and the front-end code has been previously given.
This fragmentation has led to inefficiencies in design and development processes, inconsistencies in user experiences, and increased maintenance overhead.
Consistency – We need to consolidate these disparate design systems into a single, cohesive system that is modern, maintainable, and scalable.
By doing so, we will address the need to maintain consistency in design and quality in Figma production and bake in core UX considerations such as Accessibility.
Minimal Disruption – The consolidation process must ensure minimal disruption to ongoing projects and facilitate smooth adoption by cross-functional teams.
Step 1: Conduct a thorough audit of existing design systems components.
Step 2: Create or select a scalable architecture that supports all design and development needs.
Step 3: Develop a unified design system based on the selected architecture and train users to start testing and using it.
Step 4: Implement a transition plan that minimizes disruption, ensures stakeholder buy-in, and promotes organisational adoption, especially at the development level.
Step 5: Establish a governance model to maintain the integrity and consistency of the new design system.
We use the Atomic Design methodology by Brad Frost to create a more consistent, scalable, and efficient design process.
Atomic Design is a framework that breaks down the components of a user interface into five hierarchical levels: ⚛️Atoms, 🦠Molecules, 🐙Organisms, ⭐️Templates, and 🚀Pages.
This approach starts with the smallest building blocks (atoms), like buttons and input fields, which combine to form more complex elements (molecules and organisms) like search bars and navigation menus.
By organizing our Figma Design System in this way, we ensure that every component is reusable, easy to update, and consistently applied across our projects.
