Co-creating a unified design system from multiple fragmented systems leading to more efficient work and more focus on product problems.
Thinkific is a platform that helps creators take their business to the next level by growing their online presence through paid course systems. In 2023 their existing Design System had fragmented and fallen out of use. We were tasked to rebuild and modernize their system to enable better product work for their whole design team.
Design Lead (Me)
100%
Principal Designer
100%
Brand Designer
25%
Design Director
20%
Product Delivery Manager
50%
Building a system with designers, for designers
Design systems need to have real world impact on the products and teams they support, and so establishing a great relationship with those designers was essential right off the bat. We knew this would set it up to better address real existing issues, and smooth eventual adoption, which would be critical for later success.
Our kick-off for the project started with aligning on key deliverables and understanding the situation at a high level. But by the end we had scheduled discussions with a wide variety of team members over the following 2 weeks.
The takeaways from their team included some common problems:
Several recurring issues that led to individual designers and teams making their own branch systems, out of sight of the rest of the org. Some of these issues included:
Difficulty in finding the right components in the old system
Bottlenecked system teams caused delays
Confusion on common decisions
It was clear that are more robust system would help resolve some of these, while better communication and processes would also be needed to save future work from falling out of sync again.
Equipped with this knowledge we outlined a plan for our order of operations. Just as importantly we started to re-engage the same designers and teams to be consulted all the way through. We wanted to start the new processes right away to build trust while learning more about their needs.
Deliverables & outcomes
Kick-off workshops to uncover issues and opportunities
Rounds of designer interviews and corresponding summary to the stakeholders
Establishing a Slack channel for larger group for ongoing conversation and collaboration.
Does a design system ever finish? How does this project end?
While we had defined objectives and a project timeframe, we needed to align on what “finished” meant. Our goal was not only to complete the project but also to ensure it would be maintained and used effectively.
During my research, I found an insightful article by Chase McCoy. His team used a Health-based framework to categorize their design system components as Healthy, Withering, or Dormant.
I adopted this approach to describe design system work as an ongoing process, rather than a start to finish project. Our task was to revive a system that had fallen out of use—to make it healthy again. And when we handed it off, the responsibility to keep it healthy passed to the client. With the right processes, maintaining a healthy system is much easier than starting from scratch.
Outcome
Healthier stakeholder alignment for the engagement and the eventual deliverables
What happens when a rebrand is happening in parallel to a new design system?
Structurally we knew from the start we’d be rebuilding things from the ground up. Starting with Foundations and token systems all the way up to individual UI components into full UI patterns.
However in parallel we also had another designer on a branding workstream. But rather than a problem, this ended up feeling like a great opportunity for us on the system side. Elements of the old system had a variety of colours, icons, and type that had diverged from a core point. We could provide structural refinements and suggestions, but fundamentally some decisions also involved branding work as well.
Fortunately we were able to set up proper primitive tokens leading into semantic ones with placeholder values, so as the branding work advanced, we were able to embed those decisions on the fly.
Colour, typography, spacing all were set up with starter values, and then iterated on while the branding work matured. This also enabled us to align with both the client and the brand designer, leading to a tokens foundation that wasn’t just cleaning up, but helping lead the way forward.
Deliverables & outcomes
Foundational systems (Primitive and semantic tokens, typography, colour, spacing, radii, grids, icons, etc…)
Components (form elements, controls, badges, skeletons, etc..)
Patterns (navigation structures, message posts, data tables, etc…)
Reference materials - Docs and Looms on best practices, techniques
Project Outcomes
A design system project has several clear technical parts to it. But working to set up it’s eventual users and stewards for success was a crucial part of the whole effort.
We consolidated disparate parts from 3 sub-teams into one modernized, efficient system to serve all teams.
Enabled more efficient design work through a streamlined systems for both design system managers and users.
Resolved several long standing issues such as systemic inconsistency and accessibility non-compliance.
Enabled a full redesign (which they did after our delivery) based on our system structure. A great example of a better foundation enabling faster and better design work.