Creating a Design System
- Stef Donovan
- Jan 31, 2020
- 5 min read
Project background
The Nest is a shared design language that helps keep Canada Life, Great-West Life, London Life, and Freedom 55's user experiences consistent across all our digital products, services, and platforms. As a product designer for the Nest team I researched, designed, built, launched, and maintained a component library of 50+ components. As a UX strategist, I helped to establish and envision the framework of the system and the team that supports it. The successful launch of the design system launch has helped to establish a common design language for our company, and kickstart a campaign to fund a full-time designated design systems team.
Skills used
Creating UI & documenting interactions
UX consultation
Usability research
Wire-framing
AODA requirement research
Tools used
Sketch
Sketch Cloud
Invision Prototyping
Invision Freehand
Atlasssian Confluence
Atlasssian Jira
Zeplin
Process
I started out by auditing all of our corporate website's existing components and started to organize them by similarities in pattern, and purpose. I collected a list of over 100 components that were considered needed to adopt into our design system. With the help of my team, I prioritized the list of components by what should be done for our MVP launch. Choosing 50 components to move forward with, I began collecting any existing documentation, sketch documents, or wireframes to get the best understanding of how these components are currently being used and began documenting UX best practices, interaction rules, and accessibility design requirements.
Every component was documented initially in word documents that were shared in Sharepoint with the entire team, but later when the components were developed - we created the Nest site with them.
Building the UI libraries
Our design team is familiar with Sketch, and Sketch has features that specifically make it a great tool for building design systems. The ability to create editable symbols and easily swap text styles specifically made working in Sketch a dream for handling multiple brands and colour libraries.
Brands and their layer styles
I was trying to kill two birds with one stone and create both the white-label and branded Canada Life UI library using the same sets of symbols in Sketch. To do this I experimented with creating two UI libraries that contained layer styles that were named by the role they play.
Each component was then made up of these individual layer styles grouped together in a symbol. It made it incredibly easy to copy and paste a symbol from one library to another, and change the layer styles to accurately represent the second brand.
Responsiveness
The Nest and Canada Life UI components libraries were designed to be responsive which is why we created each component in 5 different t-shirt sizes (XS, S, M, L, & XL) to represent how they look/work on different screen sizes that we design for. Although it would be a dream if designers never broke these symbols, that is rarely the case. To try and prevent symbols from breaking often, I built the components individually to be responsive. I used Sketch to set elements within the component to respond in certain ways when the symbols are stretched or shrunk. Using a combination of the settings, symbols, and groups I was able to make each component responsive.
Easy to use
Our UX writers often will hand off high fidelity wireframes by inputting their content in our wireframes within Sketch. Simplicity to edit the content was at the forefront of our mindset when creating these components. To ensure they were easy to use, I labelled and organized the content within each symbol to make it logical to designers and UX writers what field they are interacting with.
Ease of use also meant that the content editor or UX writer that is working in Sketch must also understand what components (by name) do what, and serve what purpose. To ensure ease of use, the library structure is built to match that of the structure of the Nest website's Information Architecture.
The Nest
Design principles
If someone is new to working with the design system or the design systems team, the design principles set the tone for how we build digital products and experiences. We established these principles after doing some competitive research to understand what other major companies like Google, Microsoft, Atlassian, etc. used to define the way they build their experiences. After many meetings with both our design system team and the UX designers that we wanted to use it, we established the following principles: Trust, Human-centered, accessibility everywhere, and meaning. You can read more about those principles below.
Variant examples
Components that were included in the MVP have fully coded variants that can be copied and pasted to be used in a variety of frameworks. This is also a great place for designers and content writers to visualize how the component looks.
Guidelines
Under guidelines, users of the Nest will find the component's best practices, their content guidelines, character recommendations, interaction rules, and accessibility guides. This is helpful as a base knowledge when a designer is new to using our system or when you need to communicate spec requirements to developers.
Sketch Demo
This is a demo of the UI libraries that was put together to demonstrate the speed and ease of use of using a design system to design from scratch.
In the video below the example on the left is of what I am trying to build. Using the libraries I am able to complete the same wireframe and change the content in under 2 minutes.
Responsive components
While it’s simple to build responsive components, it’s not so simple to mockup designs responsively. It’s important to design web UIs that work at different browser widths. Fortunately, using a combination of settings, groups and symbols, you can create a basic responsive UI in Sketch. While this won’t help you with breakpoints, it is powerful for quickly seeing how or if the design works on different browser sizes. All component parts are designed to be responsive, to work as a living system within Sketch.
Next Steps
The Nest was an incredible opportunity for me to research best practices and to learn about interaction design on a deeper level. Systems are incredibly tough to solve around, but I'm grateful to have had the challenge.
The MVP of our design system launched in June 2019 and is campaigning for the funding to back a design systems team. I have returned to my day-to-day work as a UX designer but consult with the current 'upkeep' team 2 hours every week to ensure the Nest stays in-line with our design team's decisions, and needs.
If I were to have had the opportunity to continue working on the Nest I would have loved to perform more usability testing to understand what was working well and what was not. I think it would have helped to better understand where we should focus our efforts on the website. I also would have enjoyed continuing to work on the libraries to make them work for more than just our AEM sites. Not all of the digital products at Canada Life are using Adobe Experience Manager, so the components from a developer's perspective could have been better utilized if it was possible to grab other types of code.
Lastly, I would have looked to explore more product-based UI elements. Our internal products are much more condensed than our external-facing corporate site. The spacing could be better utilized for internal products and we could have expanded to include dashboard elements for our administration products.
Comments