Creating a Design System

Project in process

Problem
The Dynamic Funds website was recently redesigned and before we start development on the website we thought it would be best to create a Design System for the new site to best prepare ourselves for the design and development for our components.

Goals
  • Use the existing designs to create a Design System for Dynamic Funds
  • Work with the Scotiabank Canvas design team to leverage the work that they have done to create our own
Project Adelaide

Proposal
Break the Design System down into smaller parts and work through each section.

My role

I am the designer working with one other designer and our design director.

Design process

Understand the site. Review each layout to better understand the new components.

Component list. Work closely with our development team to understand what each component is capable of.

Break down the list into smaller sections. Put together a list of all the sections that need to be completed and break it down into smaller subsections and divide the work between myself and the other designer.

Discuss Create all of the individual elements in all of their different possible scenarios. Meet with the other designer, director and development lead to discuss the layouts.

Leverage our existing system Scotiabank has a Design System known as “Canvas”. Meet with the Canvas team to discuss how we can leverage the work that they have done

Document After all of the different elements have been created, add them to our internal documentation so that the development team can leverage what we’ve created to create the components. This system will be accessed by designers and developers after the site is created to design and develop new pages on the Dynamic Funds website.

Photo of the print outs
Photo of the print outs
Photo of the print outs
Photo of the print outs

Next steps
This project is still ongoing. We recently met with the Canvas design group and bounced some ideas back and forth with them. We are currently nearing the end of putting together all of the pieces in Sketch. Our next large part of this project is to document everything. We’ll be leveraging what the Canvas team has already done for their documentation. We also need to send our concepts to our accessibility team to get their approvals on what we’re proposing. Once we have received all of our approval and put together our documentation we’ll start working closely with our development team to make sure everything is on track.

Say hello!

Don't hesitate to reach out. I'm always interested in sitting down for a nice cup of tea.