attaboy.ca
Site theme: Toronto

 

Return to My work

Case study

Building a design system from scratch

When I joined Assembled in 2019, engineers had the product with an old version of Bootstrap and a grab bag of mismatched, off-the-shelf components. The product had valuable functionality, but with serious accessibility issues, substandard interaction quality, and a low level of polish.

  • Identifying the need — I built alignment around the need to invest in a design system and in a team with the right level of expertise. I used a combination of group experience audits, user research, and interviews with customer-facing teams to understand known pain points.
  • Collective and individual ownership — With a team of designers and UX engineers meeting regularly through supportive rituals, I built a culture of shared ownership and accountability over the system, while also encouraging individuals to own specific components and patterns, allowing them to deepen their expertise.
  • Re-use the best, sweat the rest — We used Radix as a base library to create a strong foundation, and we tried to re-use the best of what design decisions had already been made, but with emphasis on systemizing and simplifying those decisions. This helped save us time, and allowed for transitional change. Where appropriate, we invested in custom components, like a date range selector optimized for our users’ specific workflows.
  • Measure both customer and internal impact — We used a combination of product usage metrics and direct customer involvement to release and improve components. To measure our internal impact, we did quarterly surveys of the engineering team, and focused on frequent pairing and collaboration.
  • Built for AI — With the rise of AI-assisted coding, the investment into the design system and into documentation in particular helped accelerate product feature work without harming the experience, especially after tuning prompts in the codebase. We also built a style guide AI agent to improve and review product content, and we were able to harness AI to migrate legacy components en masse.

More broadly, we were able to iteratively but massively improve the experience of the product over a period of years, without any risky big bang moments. This built confidence with larger, strategic customers, and earned Assembled a reputation for having an intuitive, attractive interface. In the words of one user, “I love it. It just works.”