Chalk's Design System

A system to improve consistency, scalability, and

company brand. 

Team​

  • 1 Design Lead
  • 1 Product Designer
  • 1 Illustrator
  • 1 Front-End Dev

My role

As the Product Designer in the team, I shared the responsibilities with the team on every step.

Timeframe

Approximately 8 months, with ongoing efforts of keeping the internal WiKi up-do-date. 

Tools

  • Sketch
  • Abstract
  • Figma
  • Internal Wiki site
  • Google Docs

Why?

 Consistency    Scalability    Branding    Design Debt 

​

As Chalk was beginning to grow, there was a need for a scalable solution to improve our process and company branding. Years of inconsistent designs were showing up as design debt in our process. It was time to create a system that allowed us to create more consistent designs. 

What's the process?

Audit.png
1. Audit
We began our process by conducting an audit of our UI elements across the web and mobile apps, such as colours, typography, components, and interaction behaviours.
​
We documented the entire process for the purpose of understanding our status quo, and also to give us a good starting point. 
Design (1).png
2. Design
Following​ the Atomic Design Methodology by Brad Frost, we put together different elements of the system on a weekly basis. This step involved a lot of debates, discussions, and feedback. Accessibility was always a priority when it came to making decisions on elements such as colours and typography.
Iterate.png
3. Continuous Iteration
Upon collecting qualitative research from the company, and sync ups with developers, we head back to the drawing board every other week to address concerns and feedback.

Where does it live? 

How do we feel?

Aside from gaining more knowledge and hands-on experience with the craft, there were other several learnings that I took away from this project. One of the key takeaways for me was the importance of understanding the why behind every decision we made. This was necessary, as it prepared us to answer questions from the rest of the organization.
 
I also realized the importance of involving a developer throughout the process. This not only made us aware of the realities of technical limitations that existed within our apps, but it helped to align the designers and engineers towards an achievable goal.
Frame 4 (2).png
Internal Wiki
In order to ensure the Design System was accessible to the entire company, it had to be located on a platform that was available to everyone. For this reason, we decided to place the documentation and guidelines within our internal Wiki site.
Frame 5_edited.jpg
Figma
One of the main drivers behind having a design system was to increase efficiency within the design team. For this reason, we put together a library of components within Figma. This reduced significant amount of time in building components from scratch.