Canada Life
The Nest: A New Design System for Canada Life
Background
The Nest is a corporate design system that unified Great West Life Co’s 4 corporate brands: Canada Life, Great West Life, London Life, and Freedom 55. I joined a team of product designers to research, design, and document the components used in all of GWL’s digital products.
Skills and Tools
Usability Research and Testing
Wireframing
Illustration and Icon design
Sketch
Atlassian Confluence and Jira
Zeplin
Process
The Nest Design System started by auditing Canada Life’s existing components and consolidating them based on functionality. 50 components were chosen out of a list of over 100 for our MVP launch.
The library of components was built in Sketch - which was chosen for its features that support the building and maintenance of design systems. This was the software that the design team was familiar with as well.
The Nest Design System was created with a set of standards and visual guidelines to adhere to AODA standards. This was an important aspect of the project from the start to ensure consistency and accessibility while allowing flexibility in the construction of digital products. Each component was designed to be responsive and able to adapt to different screen sizes to accommodate for different use cases.
The Nest
Design Principles
The Nest’s design principles offer an introduction for someone new to working with the design language and emphasizes the fundamental tone of how products and experiences are created.
Guidelines
Each component in the Nest includes guidelines that offer best practices and rules, as well as accessibility guides. This is helpful for collaborating with developers, and is important knowledge for anyone new to working in the system.
Variant Examples
Components that were included in the MVP have fully coded variants that can be copy and pasted to be used in a variety of frameworks. This is also a great place for designers and content writers to visualize the component and the context in which they are used.
Building with The Nest in Sketch
The Nest design language and component library was built to be easy for Canada Life’s internal team to use, which made building pages and mapping out user flows much faster and more efficient.
The video below is an example of how quickly a page can be built. A designer on the team is able to recreate the page shown on the left in a few minutes.
Responsive Design
Each component was built to be responsive for any screen size, both after implementation and within Sketch.
Reflection
Being a part of this team and contributing to this initiative was an amazing opportunity to learn about researching best practices and accessibility standards, as well as building an atomic design system from scratch. Having such a big and impactful project to work on as a co-op position was incredibly valuable to my learning and growth as a designer. Principles and methodologies that I learned from my mentors at Canada Life strengthened my skills moving forward and gave me the confidence to take on more leadership roles.
Minda 2023
Toronto