Enzo
Addresses gaps in RBC Wealth Management's design system through a modular documentation system to improve consistency across products.
Timeline
3 months
Team
Sean Z. Martin (Manager)
Skills
Design Systems, UX Design, Accessibility
background
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.
Lack of Documentation
Only a few components had usage guidelines, but they were inconsistent and didn't have enough information.
No Onboarding for Designers
New designers who were unfamiliar with brand constraints had no resources to consult or learn from.
Slower Developer Handoff
Designs were often created without awareness of developer limitations (or from detaching components), causing delays.
challenge
Create a standardized documentation method for components in the new design system.
My goal was to create a modular, scalable documentation tool. It had to be flexible enough that it could be used for any component, and anyone could easily contribute to it by adding or rearranging sections.
Ensure thorough, standardized component documentation.
Improve consistency across Wealth Management products.
Streamline collaboration between designers and developers.
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:
1
Extensive documentation
Clear usage guidelines, do’s and don’ts, accessibility considerations, and best practices.
2
A clear, scannable layout
Vertical, single-card layouts made information easier to digest.
3
Ease of access
"Sticker sheets" enabled designers to quickly copy and reuse components.
4
Information for developers
Component attributes were mapped to code, bridging visual and technical understanding.
design process
After selecting a few 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.
Early iterations were too narrow and difficult to scan. Having images directly under headings broke the natural flow of reading text from the top of the card downwards.
So, I changed the layout within each section to read left to right. This way, all of the text would fall in one column, making it easier to find the necessary section.
Moreover, embedding rules (such as do’s and don’ts) directly within each section helped emphasize important rules without requiring extra navigation.
final design
The final product was a flexible, modular documentation tool designed to support both designers and developers. Due to confidentiality constraints, only selected highlights are shown.
Color-Coded Headers
Distinguishes component types at a glance.
Annotated Attributes Table
Connects visual components to their corresponding code.
In-Line Diagrams
Guide users through editing component variables in Figma.
Accessibility Audit Diagrams
Indicate WCAG compliance through each colour interaction.
key Takeaways
A strong design system → efficiency, consistency, scalability.
This project strengthened my ability to present complex information clearly because I had to consider how people that are unfamiliar with WM's design system (like new designers) would navigate this tool and quickly scan for the information they need.