Enzo
Addresses gaps in the current design system to improve consistency across RBC Wealth Management’s products. Internship project.
TIMELINE
May – Aug 2024
TEAM
Sean Z. Martin (Manager)
tools & skills
Design Systems, Accessibility
BACKGROUND
A new design system.
During my internship, our design system was in the process of a major overhaul. My role was to kick off the creation of Enzo by researching existing design systems and identifying best practices in terms of structure, documentation, and component standards.
problem
Designers and developers lacked a centralized, consistent reference for components and patterns which led to duplicated work, inconsistent interfaces across Wealth Management products, and slower developer handoff.
pain points
Existing design system is missing details on component usage guidelines.
New designers may not be familiar with restrictions outlined in the brand guidelines.
Designs are created without awareness of developer constraints, delaying the process.
challenge
How can we reduce friction and improve the workflow between designers and developers?
My challenge was to design a comprehensive component reference tool; one that would streamline the design process, maintain consistency, and enable smoother developer handoff across Wealth Management products.
goals
Streamline designer and developer collaboration.
Ensure thorough component documentation to cover all use cases.
Improve consistency across Wealth Management products.
competitive analysis
I researched how other companies organized and documented their design systems in Figma, identifying common patterns and best practices. Most design systems included individual component cards (which ours didn’t) and the strongest ones also had:
Extensive documentation
Outlined best practices, usage guidelines, do's and don'ts, accessibility checks, etc.
A clear, consistent layout
The vertical, single card layout worked best to easily scan information.
Ease of access
Had an accompanying "sticker sheet" so designers could quickly copy and paste components/variants to their files.
Information for developers
Mapped the attributes of components to the respective code, so developers could better understand the visual aspect of their work.
design
Making complex design information easy to scan and understand.
After picking three design systems I deemed most effective, I researched them further in depth and paid particular attention to the sections they included in their documentation. Since developers would also use the reference cards, there needed to be sections dedicated to implementing components in code as well. The final output needed to be easily scannable, visually appealing, and large enough to accommodate both visuals and text.
Designing the reference tool required several iterations. My initial layout was hard to scan and too narrow, so I refined it to maintain visual interest while keeping the documentation clear and easily scannable despite numerous sections of text and diagrams.
During the design process, subtle changes (such as adding a purple icon to indicate copyable variants and placing do’s and don’ts within each section) ensured important rules would be clear and easy to follow.
solution
The final product was a detailed and flexible component reference tool. Due to confidentiality purposes I'm unable to show the full project, but these highlights illustrate its key features.
A colour-coded header system to differentiate component types at a glance, with isometric illustrations for visual interest.
An annotated attributes table for developers, to provide visual context to written code.
In-line diagrams to guide users through the process of editing component variables in Figma.
Diagrams for colour interactions and whether they pass or fail accessibility guidelines.
lessons learned
A strong design system → efficiency, consistency, scalability.
Overall, this project gave me a strong understanding of the importance of design systems and how they are best implemented. It enhanced my understanding of user-centred design as the main objective was to lay out information considering the perspectives of both designers and developers.