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?

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.

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.

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.

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.

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.

Chalk's Design System

A system to improve consistency, scalability, and

company brand.

1 Design Lead

1 Product Designer

1 Illustrator

1 Front-End Dev

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

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

Sketch

Abstract

Figma

Internal Wiki site

Google Docs

Why?

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?

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.

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?

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.

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.

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.