City National Online
City National Bank Digital Design System – Partnership with RBC (Case Study)
Dave McKay (CEO, RBC) inspired the CNB Digital Experience Design team to find ways to partner with RBC when he said: “We want to leverage what RBC already has to put every dollar focused in our clients”
- How Might We... consolidate our existing style guides & design systems and leverage the work RBC has done and have it meet our brand guidelines that serves as our Northstar.
- In the spirit of reuse, CNB Digital Design and RBC P&CB and WM Design teams have been collaborating regularly for 4 months to leverage matured Design systems and frameworks created and iterated over the years at RBC.
- The RBC teams developed 2 POCs and CNB teams assessed the POCs feasibility and integration with CNB Design and technology platforms, tools, and roadmaps.
- The MVP of the CNB Design system has been customized and launched in a record time of 2 months. Existing work has continued since then with UX/UI updates and style changes.
- Principal UX Designer
- Design System Manager
- Lead UI Designer
- Brand Ambassador
- Iconography Designer
- Team for Meetings
- Mural for Collaboration
- UX Department
- Front End Developers
- Accessibility Specialist
- UX Copywriters
- RBC Personal & Commercial Banking
- RBC Wealth Management
- CNB Digital
- CNB Technology and Innovation
My Key Contrubutions
- Workshop Facilitation
- Research & Discovery
- Team Lead & Facilitator
- Principle Designer
- Creating Figma Components
- Training Additional Designers
- User Testing
- Delivery & Implementation
- Design System MVP Overview
We know that a design system is a set of re-usable/scalable components with the flexibility to solve multiple problems and serve multiple purposes. However...It's also an ecosystem of tools, templates, guidelines and mindsets that will allow us to focus on bringing consistent UX, quality design and best practices to our work.
Development/tech efficiency along with design/UX consistency - allowing our teams more time to focus on UX challenges and building better experiences.
- Design System UI Kit Roadmap
Map out the value and user needs at stages of your project's development.
"CNB Design System through partnership with RBC resulted in savings of ~$1,000,000 plus vs. using an outside agency."
The MVP of the CNB Design system has been customized and launched in a record time of 2 months. Some of the key benefits include:
Reuse from RBC P&CB RIG:
- 150+ Components reused from RIG Figma Design Framework
- 300 + Icons reused from RBC to design new CNB.com
- Cost savings: ~ $400k
- Time saving: ~ 1.3 years
- Designer can speed up their production by 3x
Reuse from RBC WM Front End Framework:
- 7 Front end development framework libraries (Vue, React, CSS, HTML, Accessibility)
- 100+ Components reused
- Cost savings: ~ $500k
- Time saving: ~ 1.5 years
- Developers can speed up their production by 5x
X1 (Design Thinking) Playbook: Enabled RBC Innovation and Design teams to facilitate Design Thinking across digital product engagements
Reuse from RBC WM Design Strategy:
- 80+ Design Thinking tools, tutorials and templates
- Cost saving: ~100k
- Time saving: ~6 months
I had the privilege of reviewing the CNB Digital Design System and I was amazed with the progress of work, but more inspired by the collaboration between our teams.
This is a massive win for both organizations, and exemplifies the entrepreneurial spirit City National was founded on. I cannot wait to find future opportunities for our teams to work together. Thank you again.
All other copyrights and trademarks are the property of their respective owners.