In this pivotal role, I lead the re-design and optimisation of a company-wide Figma Design System designed to bring much needed consistency across the Website and several other products the fund currently uses to engage with its 1.1 million members.
Apart from architecting a pivotal design system, I contributed to several small and large projects in the Web and Onboarding teams.
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.
The Aware Super Design System has been instrumental in transforming the online events and education section of the Aware Super website into a seamless, engaging, and user-centric experience.
Leveraging in-depth research and user insights, the design system provided a consistent framework that enhances accessibility, usability, and visual appeal. By streamlining navigation, optimizing content delivery, and ensuring a cohesive brand experience, the new section is designed to significantly boost engagement and increase website traffic. This strategic overhaul directly addresses previous usability challenges, making it easier for members to discover, register for, and benefit from Aware Super’s educational offerings.
