Enzo
Addresses gaps in RBC Wealth Management's design system to improve consistency across products.
Timeline
May – Aug 2024
Team
Sean Z. Martin (Manager)
Tools & Skills
Design Systems, Accessibility
Solution
The final product was a flexible, detailed component reference tool designed to support both designers and developers. Due to confidentiality constraints, only selected highlights are shown.
Color-coded headers distinguish component types at a glance, paired with isometric illustrations for visual clarity and interest.
Annotated attribute tables connect visual components to their corresponding code.
In-line diagrams guide users through editing component variables in Figma.
Diagrams that clearly indicate WCAG compliance through colour interaction audits.
Background
A new design system.
RBC Wealth Management's design system was undergoing a major overhaul. My role was to kick off the creation of Enzo by researching existing design systems and identifying best practices for structure, documentation, and component standards.
Problem
Designers and developers lacked a centralized, consistent reference for components and patterns. This led to duplicated work, inconsistent interfaces, and slower developer handoff.
Pain Points
Component usage guidelines were missing or unclear.
New designers were unfamiliar with with brand and system constraints.
Designs were often created without awareness of developer limitations, causing delays.
Challenge
How can friction between designers and developers be reduced in the new design system?
Goals
Streamline collaboration between designers and developers.
Ensure thorough, standardized component documentation.
Improve consistency across Wealth Management products.
Competitive Analysis
I analyzed how other teams organized and documented their design systems in Figma to identify common patterns and best practices. While approaches varied, the most effective systems consistently included:
Extensive documentation
Clear usage guidelines, do’s and don’ts, accessibility considerations, and best practices.
A clear, scannable layout
Vertical, single-card layouts made information easier to digest.
Ease of access
"Sticker sheets" enabled designers to quickly copy and reuse components.
Information for developers
Component attributes were mapped to code, bridging visual and technical understanding.
Design
Making complex design information easy to scan and understand.
After selecting three strong design systems as benchmarks, I studied their documentation structures in depth, focusing on how information was grouped and prioritized. Because developers would also rely on these reference cards, sections dedicated to implementation and code context were essential.
Designing the reference tool required several iterations. Early iterations revealed that my initial layout was too narrow and difficult to scan. I refined the structure to balance visual interest with clarity, ensuring the numerous sections of text and diagrams remained easily scannable.
Subtle design decisions (such as adding purple icons to indicate copyable variants and embedding do’s and don’ts directly within each section) helped emphasize important rules without requiring extra navigation.
Lessons Learned
A strong design system → efficiency, consistency, scalability.
Designing Enzo strengthened my ability to present complex information in a clear, user-centred way because I had to consider how both designers and developers would interact with this tool.