Evan
MacAlpine

Case studies

About

Evan
MacAlpine

One and done: How a single design system sent five frameworks into sunset mode

One and done: How a single design system sent five frameworks into sunset mode

One and done: How a single design system sent five frameworks into sunset mode

Label

*

Button

Button

Button

Label

*

Text

Error message

Label

*

Text

Error message

Label

*

Text

Error message

Meet Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

In the slums of Burkina Faso, new mother Florence was forced to watch helplessly as a disease took her son’s...

Learn more

Laura Smith

Jan. 21, 2023

Meet Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

In the slums of Burkina Faso, new mother Florence was forced to watch helplessly as a disease took her son’s...

Learn more

Laura Smith

Jan. 21, 2023

Meet Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

In the slums of Burkina Faso, new mother Florence was forced to watch helplessly as a disease took her son’s...

Learn more

Laura Smith

Jan. 21, 2023

Help support Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

$18,500

Funded

Help support Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

$18,500

Funded

Help support Kader, Burkina Faso’s top visually impaired student and a President’s Prize winner

$18,500

Funded

My role

I was the sole designer and frontend developer. I pitched the initial idea to leadership, designed base tokens and components, and wrote unifying design standards. I also created a dev environment in Storybook.js and integrated design and dev documentation using ZeroHeight. I facilitated regular cross functional feedback and inspiration sessions. I also was connected with, and advocated for the global design team, as they on worked the global system.

Summary

At Compassion Canada, we grappled with the inefficiencies of five fragmented design/development frameworks. With executive buy-in, I created our own scrappy design system. But just as our in-house system was taking shape, a global initiative emerged. Adapting quickly, I collaborated with the global team, helping shape the new Compassion Design System (CDS). Advocating for early adoption, I integrated version 1.0 of the CDS into a checkout process redesign, which helped demonstrate both substantial benefits (speed of design) as well as some areas for system growth (more robust dev documentation and components).

Context

A snap shot of the divergent visual frameworks used across Compassion Canada's platforms.

A snap shot of the divergent visual frameworks used across Compassion Canada's platforms.

Compassion Canada was drowning in complexity; 5 different design/development systems had organically appeared over the years and there was a lack of documentation for all them. We wanted to be able to build and iterate quickly, but too much of our time was spent maintaining legacy work and re-building components we’d already created in other systems. On top of this, redundant code and inconsistent design was leading to major performance issues on our platforms which was frustrating for our users.

I wanted to solve these legacy issues and create a good foundation for the future, so I built a scrappy design system that a small team could implement quickly and build on over time.

Compassion Canada was drowning in complexity; 5 different design/development systems had organically appeared over the years and there was a lack of documentation for all them. We wanted to be able to build and iterate quickly, but too much of our time was spent maintaining legacy work and re-building components we’d already created in other systems. On top of this, redundant code and inconsistent design was leading to major performance issues on our platforms which was frustrating for our users.

I wanted to solve these legacy issues and create a good foundation for the future, so I built a scrappy design system that a small team could implement quickly and build on over time.

The process

To begin with, I created a pitch deck and presented it to my team manager and the Director of Marketing and Digital Growth. Once I got buy-in from leadership, I also worked on building excitement and support with implementers across the team. I created a series of fun, gif-filled Design System Explainer videos to share with our remote team. The response was encouraging!

To begin with, I created a pitch deck and presented it to my team manager and the Director of Marketing and Digital Growth. Once I got buy-in from leadership, I also worked on building excitement and support with implementers across the team. I created a series of fun, gif-filled Design System Explainer videos to share with our remote team. The response was encouraging!

“I am here all day for Design Talk with Evan MacAlpine!”

Karla, Social Media & Creative Manager

“I am here all day for Design Talk with Evan MacAlpine!”

Karla, Social Media & Creative Manager

At the same time, I began writing out design guidelines for grid systems, typography, colour, motion, iconography, and photography. I also started building out a base token library and prototyping components to establish best practices for component structure and naming.

I used Storybook.js to surface our development standards and components, and I brought our design and dev documentation together using ZeroHeight. This would be our “single source of truth”; a central reference that would ensure we were aiming at the same target across teams.

At the same time, I began writing out design guidelines for grid systems, typography, colour, motion, iconography, and photography. I also started building out a base token library and prototyping components to establish best practices for component structure and naming.

I used Storybook.js to surface our development standards and components, and I brought our design and dev documentation together using ZeroHeight. This would be our “single source of truth”; a central reference that would ensure we were aiming at the same target across teams.

Colour primitives

Typography tokens

Check out the Figma library

Check out the Figma library

Check out the Figma library

Throughout this whole process I was coordinating regular feedback sessions with potential contributors to the system; managers, our creative director, writers, our UX researcher and our web developers. Wide spread adoption is key to the success of any design system, so I wanted to ensure that the system would serve every stakeholder well.

Throughout this whole process I was coordinating regular feedback sessions with potential contributors to the system; managers, our creative director, writers, our UX researcher and our web developers. Wide spread adoption is key to the success of any design system, so I wanted to ensure that the system would serve every stakeholder well.

Colour primitives

Typography tokens

Check out the Figma library

Overcoming challenges

Buy-in

Exec. pitch points

Efficiency

Drastically reduced project timelines

Focus

Ability to focus on important product problems

Vision

Teams can build independently, but with a unified vision

Compassion was relatively new to modern design and development practices, so initially it was hard for leadership to see the value of investing in a design system. However, one of our primary organizational goals was to “adopt an agile mindset”. I knew how pivotal having easily accessible design and development components would be for our release and iteration cadence. I highlighted real world data that showed how design systems can empower an agile processes by:

  1. Drastically reducing project timelines.

  2. Opening up capacity for teams to focus on important product problems rather than rebuilding basic components and supporting legacy code.

  3. Empowering agile teams to build independently and efficiently, but with a unified vision, built around organizational goals.

After an number of these conversations my leaders could see the real value in what I was proposing and they were excited to invest in the process moving forward.

Compassion was relatively new to modern design and development practices, so initially it was hard for leadership to see the value of investing in a design system. However, one of our primary organizational goals was to “adopt an agile mindset”. I knew how pivotal having easily accessible design and development components would be for our release and iteration cadence. I highlighted real world data that showed how design systems can empower an agile processes by:

  1. Drastically reducing project timelines.

  2. Opening up capacity for teams to focus on important product problems rather than rebuilding basic components and supporting legacy code.

  3. Empowering agile teams to build independently and efficiently, but with a unified vision, built around organizational goals.

After an number of these conversations my leaders could see the real value in what I was proposing and they were excited to invest in the process moving forward.

Limited capacity

Our team was a small one; one designer/frontend dev and two web developers stretched across multiple products. Our capacity was limited and I wanted to reduce the workload of my team, not increase it.

Our team was a small one; one designer/frontend dev and two web developers stretched across multiple products. Our capacity was limited and I wanted to reduce the workload of my team, not increase it.

In order to keep the lift as light as possible I leveraged as many existing, well supported resources as I could.

In order to keep the lift as light as possible I leveraged as many existing, well supported resources as I could.

In order to keep the lift as light as possible I leveraged as many existing, well supported resources as I could. I used tailwind.css for our base token setup to avoid the extra dev time needed to create our own tooling and compiling workflow. I adapted guidelines from open-source, or public facing design systems like IBM’s Carbon and Shopify’s Polaris to quickly build out Compassion-specific documentation. And I used newer, already existing components from Compassion’s current platforms as a foundation for the new design system.

In order to keep the lift as light as possible I leveraged as many existing, well supported resources as I could. I used tailwind.css for our base token setup to avoid the extra dev time needed to create our own tooling and compiling workflow. I adapted guidelines from open-source, or public facing design systems like IBM’s Carbon and Shopify’s Polaris to quickly build out Compassion-specific documentation. And I used newer, already existing components from Compassion’s current platforms as a foundation for the new design system.

This meant that less web development time was required for the initial design system MVP. It also meant that, even though I was the sole designer working on the project, with minimal time allotted for it at that, I was able to create a fairly robust system, quickly.

This meant that less web development time was required for the initial design system MVP. It also meant that, even though I was the sole designer working on the project, with minimal time allotted for it at that, I was able to create a fairly robust system, quickly.

Exec. pitch points

Efficiency

Drastically reduced project timelines

Focus

Ability to focus on important product problems

Vision

Teams can build independently, but with a unified vision

In order to keep the lift as light as possible I leveraged as many existing, well supported resources as I could.

Results

Key progress

  1. MVP design system built

  2. Ongoing global collaboration

  3. Testing and migrating to the CDS

I was able to provide a MVP version of the design system to our team, ready to be given a test run in a smaller project. At this point our global office made the decision to create a company wide design system, so our own implementation was put on hold.

It took some time for the Compassion Design System (CDS) to get to a place where it was ready use, but throughout that time I was connecting with the global team. They referenced my existing design system and I gave user feedback when it came time to test out their design and dev systems.

Recently, version 1.0 of the CDS was ready to go live. I lead the charge to start implementing it in Canada, testing it on our checkout process re-design. It significantly reduced design time when it came to creating complex, multi-step prototypes and gave our design and dev team an idea of how much efficiency a design system could bring to our team.

At the time of the checkout project, CDS was much more robust on the Figma component library side than the documentation and coded components side, so there’s even more efficiency to be gained as the system matures.

I was able to provide a MVP version of the design system to our team, ready to be given a test run in a smaller project. At this point our global office made the decision to create a company wide design system, so our own implementation was put on hold.

It took some time for the Compassion Design System (CDS) to get to a place where it was ready use, but throughout that time I was connecting with the global team. They referenced my existing design system and I gave user feedback when it came time to test out their design and dev systems.

Recently, version 1.0 of the CDS was ready to go live. I lead the charge to start implementing it in Canada, testing it on our checkout process re-design. It significantly reduced design time when it came to creating complex, multi-step prototypes and gave our design and dev team an idea of how much efficiency a design system could bring to our team.

At the time of the checkout project, CDS was much more robust on the Figma component library side than the documentation and coded components side, so there’s even more efficiency to be gained as the system matures.

Key progress

  1. MVP design system built

  2. Ongoing global collaboration

  3. Testing and migrating to the CDS

Learnings & next steps

Learnings

Importance of immediate application: Whether it's deploying prototypes or applying systems to real-world projects, I've learned the value of immediate application. In Compassion Canada's context, nothing showcased the impact of a design system as convincingly as real-world results. In future endeavours, I'll advocate for rapid prototyping and quick deployment to validate a system’s effectiveness.

Nothing showcases the impact of a design system as convincingly as real-world results.

Nothing showcases the impact of a design system as convincingly as real-world results.

Cross-departmental buy-in: This project taught me the crucial role of securing long-term commitment from a variety of stakeholders. Amidst several leadership shifts, the system lost key supporters. The experience highlighted that organization-wide buy-in is essential. As with most complex design problems, people skills and persuasive communication are key tools in a designers toolbox.

As with most complex design problems, people skills and persuasive communication are key tools in a designers toolbox

As with most complex design problems, people skills and persuasive communication are key tools in a designers toolbox

The power of design systems: I still love design systems! This project reaffirmed my belief in their power to bring efficiency to teams and consistency to experiences. Even though my specific system didn’t get fully rolled out, the principles it was built on have become even more important to me. They will definitely guide my approach to future challenges.

Next steps

Contribute to the global design system: My immediate goal is continue to be an active contributor to the international, company-wide design system. In particular, I hope to facilitate easier adoption across our global partner offices by helping them build out more robust design and dev documentation.

Continued CDS integration: We experienced first-hand how the CDS can improve efficiency during our recent checkout project. With a site-wide redesign looming on the horizon, my next step is to advocate for full integration of the CDS into our product. This will not only involve hands-on design and development work but also require fostering conversations between my leaders and the design system team at our global office.

Nothing showcases the impact of a design system as convincingly as real-world results.

As with most complex design problems, people skills and persuasive communication are key tools in a designers toolbox

Next case study

How I used ChatGPT to make letter writing feel fun; decreasing time to completion by 91% and improving experience ratings by 23%.

About: AI, Unfacilitated user testing, Prototyping

Read the study

How I used ChatGPT to make letter writing feel fun; decreasing time to completion by 91% and improving experience ratings by 23%.

About: AI, Unfacilitated user testing, Prototyping

Read the study

How I used ChatGPT to make letter writing feel fun; decreasing time to completion by 91% and improving experience ratings by 23%.

About: AI, Unfacilitated user testing, Prototyping

Read the study