Related case study
A look at how I fixed a problematic design system at Allica.
The design system team
My responsibilities
When I joined Allica as a Senior Product Designer for the "Alchemy" Design System team, I was told the design system was on fire. I held a workshop to understand the problems, gathering Product Managers, Engineers and Designers to put their thoughts on a Miro board. Here's a summary of the key findings.
The design system's process is confusing
Nobody understood how the design system team operated or how they should request things.
It's bottlenecking squads
Squads were always waiting for new components or updates, holding up the delivery of feature work.
We don't know what's current
Components in Figma had low parity with the build, and some didn't even exist in production.
Poor communication
Designers and Engineers were not being informed of the latest updates, and stakeholders had no understanding of how much value was being delivered.
After using idea napkins to collaboratively figure out the best resolution to the problems, I held a session to prioritise the most impactful actions with the quickest turnaround.
Thematically, it was clear my priorities were to:
At the time I was the only dedicated Design resource to Alchemy, so to ensure rapid delivery, I proposed a hybrid contribution model where all Designers and Engineers could create the components we needed, whilst the Alchemy Engineer and I would act as quality assurance for all contributions.
There were no component reviews happening up to this point, so I worked with the Designers and Engineers to define our acceptance criteria for Figma components and their corresponding production build. Accessibility was an important factor, but rather than call it out specifically in the QA checklists, it was woven in to the rest of the criteria. This was to prevent it from feeling like a 'nice to have', and to become embedded in peoples habits.
The demand for components was high, so teams needed to know their status and the delivery plan ahead. I create a page in Confluence that displayed each ongoing front-end project, and listed which components each project was dependent upon. Each had a link to the corresponding Jira ticket so progress was visible. This page was shared with Product Managers so they could keep an eye on dependencies.
As well as the usual meetings such as stand-ups and sprint planning, I established some ceremonies that would ensure we were delivering high-quality output in good time.
To keep up with the demand, I held two refinement sessions a week where I'd gather requirements for any work coming in to the Alchemy team, and ensure the Jira board was up to date.
The Product Managers were really concerned about the bottlenecking the design system was causing their squads, so I wanted to meet with them every two weeks to make sure they knew the Alchemy team was delivering the things they needed for their next sprint.
At the end of each sprint, the Alchemy Engineer and I would demonstrate the latest additions and changes to the squad Designers and Engineers, so everyone was aware of them.
When noteworthy changes were made to the Figma component library, I'd make a quick video showing the updates so that the Designers could keep abreast of it in their own time.
Once the new governance model and processes were defined and written, it became clear that there was a lot of information that people would have to sift through. I needed a way fo colleagues of all professions and experience levels to find the information they need for any situation they find themselves in. I'd seen people make decision charts for this before, and I didn't think people were likely to use them, as they seemed a bit impractical. Instead, I put together an FAQs page that contained details and links to everything they'd need to know in common situations.
Once the fires were put out and the urgent components were delivered, it was time to plan for a sustainable design system. The road ahead needed to align with the business' goals, so that's how I approached defining our objectives.
Alchemy objective: Maximise scalability
Description: By designing and building the system in a scalable manner, workflows are streamlined and we can easily roll it out to other products.
Alchemy objective: Adopt strategically
Description: By migrating codebases to our design system with a systematic approach, and building components well, squads can enjoy the productivity benefits that a design system offers.
Alchemy objective: Measure the value
Description: We need to keep track of how the design system is performing, so we can identify areas that need improvement, and act upon it.
Alchemy objective: Empower our squads
Description: We can enable our teams to use and contribute to the design system effectively if we provide them with all the knowledge they need.
Alchemy objective: Improve accessibility
Description: Make our products better for everyone by devising a strategy for designing, building and reviewing components with accessibility in mind.
I collaborated with the Alchemy Engineer to define the actions that would help us reach those objectives in 2024. I made them available for anyone to see in Confluence with links to all the tickets so progres was clear. Here's an example of Q4:
I wanted to make sure stakeholders understood the value the Alchemy team was delivering, so I defined and reported on key metrics every business quarter. I think it's important to go in to the detail of this, so you can see the approach taken in the next case study.
