Background
A leading multinational bank faced challenges due to design elements inherited from the retail division. This inconsistency didn't meet the needs of the institutional environment, leading to varying user experiences across multiple institutional products. Additionally, developers struggled with inconsistencies as they utilised a fragmented foundation of product design elements published in Storybook. This inconsistency caused different interpretations and implementations, resulting in a lack of unified designs across the various institutional banking products.
Research and Analysis
On analysis, there was no known single source of truth for design teams when building out products. The elements published in Storybook and the partially adopted retail design system highlighted the inconsistency and lack of comprehensive design patterns for Institutional.
This consistency void compromises brand stability and user trust, highlighting the need to establish an institutional focused design system as the foundation for addressing these challenges.
Planning and Strategy
The objective was to bridge the gap between retail oriented elements and institutional banking needs by creating a extensive, compliance focused design system.
We recognised the need for a unified platform that supported collaboration and compliance, the decision was made to implement Figma Enterprise.
Design and Development
The design system was built within Figma Enterprise, allowing multiple designers and development teams simultaneous access. Figma Branching enabled isolated work on design components and simplified approval processes before updating the main Design System documentation.
Implementation and Testing
Figma Enterprise facilitated the adoption of the institutional design system, offering accessibility and collaboration across different divisions. Workshops were organised to support teams unfamiliar with the platform and its features during the onboarding process. These sessions aimed to alleviate concerns and ensure a smoother transition to the new system.
This real time collaboration enabled quick iterations based on feedback.
Maintenance
A design system is never complete and similar to maintaining a database, it's important for the team accountable for the design system to consistently refine and update with the development of new products and improvements to existing ones, the system continually integrates new components and variants.
Outcomes and Impact
The implementation of Figma Enterprise for the institutional design system led to:
Unified Collaboration: Provided a single source of truth, enabling multiple design teams and dev squads to collaborate seamlessly.
Enhanced Efficiency: Leveraged Figma Branching for isolated component work and approval processes, ensuring a more controlled and streamlined development workflow.
Improved Governance: Figma's features supported governance mechanisms, ensuring compliance and adherence to design standards.
Strengthened Consistency: Enabled a unified and consistent design language across the institution's digital products.
Conclusion
The solution to implement Figma Enterprise emerged as an efficient and versatile platform, not limited to the design system alone. It provided a collaborative space where workshops, ideation sessions, templates for presentations, best practices and prototype creation became seamless tasks. Teams across diverse functions found a unified platform that went beyond expectation for product designers and owners .