← Home
The Challenge
While Great Southern Bank has an established design system, it lacks scalability. The system contains a high number of custom components created to support individual design solutions, which has led to fragmentation rather than reuse. As a result, components are often tailored to specific use cases instead of being flexible enough to scale across products and platforms.
Additionally, there is no consistent shared language between design and development. Differences in terminology, component definitions, and usage guidelines create misalignment during handoff, increasing rework, slowing delivery, and reducing overall efficiency. This inconsistency makes it difficult to maintain design quality, ensure accessibility standards, and evolve the system sustainably over time.
Role
Senior UX/UI Designer
Team Model
Federated
Tools
Figma, supernova.io, squiz platform
Federated Team Model
The adoption of a federated model aligns seamlessly with our organisational needs, offering a distributed and decentralised structure that accommodates the diverse functions and autonomy required within our teams. This model empowers individual units with a degree of independence while maintaining overarching coordination and governance, ensuring flexibility, adaptability, and efficient collaboration across our multifaceted operations.
What are the Benefits
Recognising the significance of streamlining and unifying our maturing digital team, the implementation of a Design System emerges as a strategic initiative. This systematic approach aims to optimise workflows, mitigate interruptions, and empower squads to singularly focus on the efficient delivery of impactful products.
Common Language
Improve collaboration between teams by providing a shared vocabulary and set of tools.
This help teams to work more efficiently and effectively, and it can also help to improve the quality of the interfaces that they build.
Scalability
Easily adapted to different projects and scales well for larger teams.
This is because it uses established patterns and conventions that are easy to follow. As a result, you’ll be able to create designs faster and with fewer errors, which will save time and money.
Deployment Speed
Help to reduce development time by providing teams with a library of pre-built components that they can use to build new interfaces.
This can save teams time and money, and it can also help to improve the quality of the interfaces that they build.
User Experience
Enhances the user experience by providing a consistent and predictable interface.
This can help users to learn and use interfaces more quickly, and it can also help to improve their overall satisfaction with the product.
Methodology
With our foundation established, we must adopt a systematic and collaborative approach that garners team consensus. Employing Atomic Design as our methodology emphasizes a modular and systematic method in developing our design system. Proposed by Brad Frost, this approach entails deconstructing design elements into distinct components—atoms, molecules, organisms, squiz component and templates.
Foundations
Components
Each component has been meticulously developed with the perspective of a new employee in mind. By referencing the live document, they can comprehensively grasp the principles and varied usage scenarios of the component across our product line.
Conclusion on my journey
Over the past three months, the team successfully established a scalable, living design system. The system now includes 118 reusable components, providing a single source of truth that improves consistency, accelerates delivery, and reduces design and development rework. Clearer standards and shared language have strengthened collaboration with stakeholders, enabling faster decision-making and smoother implementation across teams. As a result, the design system has become an essential operational tool, supporting reliable, high-quality experiences across all products.
With its inception we have successfully:
- Reducing design duplication by ~50–60% through increased component reuse and standardisation.
- Improved design-to-development handoff efficiency by ~40% by establishing clearer component definitions, templates, and shared language between design and engineering.
- Introduced design templates that largely eliminated final content design handover, reducing late-stage dependencies and delivery delays.
- Reduced clarification cycles and rework by ~25% through improved documentation, governance, and cross-team alignment.