Building a successful design system: the StyleQ journey at QuillBot

Introduction

At QuillBot, we recognized the need for a cohesive design system to support our rapid growth and evolving product suite. What began as a simple styleguide evolved into StyleQ, a comprehensive design system that transformed not just our visual identity but our entire approach to product development.

Focus on engineer's goals

At QuillBot, we focused on engineers' goals and what they wanted out of the design system. That set our course of action and started at the atomic design level. Storybook would make the design system accessible to all engineers—a milestone and achievement far beyond the simplistic styleguide we started with.

Take a collaborative approach

Understanding users is a significant aspect of our work as designers and user experience professionals. We excel at comprehending humans in the field of human-computer interaction. Yet, we don't utilize that skill adequately to fully grasp the motivations and constraints our partners and cross-functional teams face. We also need to focus more on understanding and collaborating with our cross-functional partners in engineering and product management, just like we do with our end users.

Being a design leader in an engineering-driven company requires a deep understanding of engineers' motivations to successfully shift the culture towards user experience. Promoting a design system based solely on the benefits it offers is usually not advisable. The objective is to emphasize the values that are important to the design system users.

Start where progress is visible

One of the main areas of focus when we began discussions were the immediate surface-level pain points on the site. Color, typography, components, and illustrations are just some of the elements. We followed by implementing the surface changes to low-risk pages that were outside of ongoing AB tests.

As progress advanced, a UI refresh was quietly taking place, ultimately replacing the existing design system. This change was well-received and provided the site with a necessary update.

Adoption is what makes success, not finishing

My lead designer and I identified adoption as the crucial metric for success. Dealing with adoption metrics can be quite complex, and it's crucial to acknowledge that adoption rates may not always be within our control

.

At QuillBot, a strong sense of urgency is ingrained in our culture and we use it to our advantage. Weekly meetings were held to review the design system, instructional videos were shared on Slack, documentation was improved, and StyleQ updates were rolled out every Friday. All the work was divided into easily understandable segments, enabling the team to learn at their preferred speed.

Measuring success

We established clear metrics to measure adoption across the organization. Rather than focusing solely on component usage, we tracked metrics like:

• Reduction in design inconsistencies across products

• Decrease in time spent on design QA

• Engineering implementation velocity

• Cross-team satisfaction surveys

These metrics helped us demonstrate tangible value to leadership and guided our roadmap prioritization.

Express your independence and strong opinions

Operating as an independent team, StyleQ enabled us to make quick decisions and take a strong stance on our executions. The team functioned seamlessly due to their close collaboration. They established a unique startup culture focused on resilience. They provided insights on style, code, and architecture. Several rejections stemmed from differing opinions. However, having strong opinions and understanding that it's impossible to please everyone was crucial for the team's long-term success. Making everyone happy from engineering, UX, product management, and leadership isn't the way to develop a system. Listening to your customers' needs is crucial, but ultimately, decisions should be made based on a comprehensive understanding of all available information and what you think is best for the engineers and designers.

Having the freedom to be independent and express opinions is a privilege that not all design teams have. If you have the opportunity, seize it. Having strong opinions isn't a walk in the park; it's a daily challenge, but people respect that.

Governance model

One critical aspect we hadn't initially considered was establishing a clear governance model. As StyleQ grew in adoption, questions arose about who could contribute, how changes were approved, and how we maintained quality. We implemented a lightweight governance structure that balanced control with collaboration:

• A small core team maintained final approval rights

• Regular "office hours" where anyone could propose changes or components

• Clear contribution guidelines and documentation

• A transparent roadmap accessible to all teams

This structure ensured StyleQ remained cohesive while still incorporating diverse perspectives.

Building it right can change design

StyleQ is undoubtedly transforming design at QuillBot. It's provided us with the credibility that other teams want to mirror. StyleQ has elevated design quality for us and our customers. Thanks to the strong foundation StyleQ provided and the subsequent layers we've added, QuillBot is gracefully transitioning into a design-focused company with plenty of room for growth.

Looking forward

As we look to the future of StyleQ, we're focused on:

• Expanding beyond UI components to include content patterns and UX guidelines

• Building more advanced documentation with interactive examples

• Creating automated testing and accessibility validation

• Developing design tokens that can extend across multiple platforms

Wrapping it all up

Your design system journey is ongoing, with a significant impact that extends beyond just the design system itself, potentially leading to the improvement of both the design team and the company. The most successful design systems aren't those with the most components or the prettiest documentation—they're the ones that become an invisible yet essential part of how teams work together to create cohesive, high-quality experiences.