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”
Challenge Statement
- 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.
Approach
- 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.
Solution
- The RBC teams developed 2 POCs and CNB teams assessed the POCs feasibility and integration with CNB Design and technology platforms, tools, and roadmaps.
Outcome
- 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.
My Role
- Principal UX Designer
- Design System Manager
- Lead UI Designer
- Brand Ambassador
- Iconography Designer
Tools Used
- Figma
- Team for Meetings
- Mural for Collaboration
The Team
- 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
Process
- Design System Business Value Model
Within our Strategic Design competence we apply design thinking to articulate business strategy, in a methodology called Business Value Proposition (BVP).
Process (cont)
- Design System Challenges and Outcomes (Strategy Blueprint)
The UX Strategy Blueprint helps you see all the moving parts in a single overview. In doing so, it simplifies strategy, making an abstract concept more tangible for all involved.
- 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. - Goals
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."
Impressive results
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.
Linda Duncombe, CMO, City National Bank
CNO Design System
The CNO Design System consists of:
- The main component file with final approved components
- Production file with components that are under construction
- The main typography master tokens
- The color token master
- Iconography master for CNB & CNO
- Elevation & Shadows
Copyright & all rights reserved.
All other copyrights and trademarks are the property of their respective owners.
All other copyrights and trademarks are the property of their respective owners.