A playbook for creating a custom design system at a fast-paced startup

Time frame: 2020–2023

About BigSpring

BigSpring is a social LMS platform that facilitates quick bite-sized learning, practicing and critiquing skills with a coach and/or colleagues, and tracking skill proficiency over time.

Upon joining BigSpring there was ample opportunity to lead the team in both user and design thinking. Central to that effort was convincing and then proving that a design system was critical to product, customer, and business success.

What is a design system?

The term "design system" is often a misnomer and can be a bit confusing. A design system is a collection of design principles, standards, and processes intended to guide the design of the product experience as well as its development at both speed and scale using a library of dynamic and reusable styles, components, and patterns.

What problems did we face?

• No design principles, standards, or processes were in place.
• No reusable styles, components, or patterns to work with.
• No consistency across the experience.
• The quality bar was low.
• No central design tool.
• Design artifacts were unusable and scattered.

Why did we need a design system –– pros/cons?

There are many compelling pros to having a design system that directly impact product strategy, objectives, and the overall user experience:

• Saves time and money.
• Brand differentiation.
• Promotes collaboration across disciplines.
• Simplifies and streamlines design, dev, and product processes.
• A source of truth for design principles, styles, components, and patterns.
• Promotes design consistency, coherence, and cohesion.
• Raises the quality bar in usability, accessibility, performance, and aesthetics.
• And much more…

There are also a few cons to consider and balance when having a design system:

• Initial design time and resource investment may be a hard sell.
• Onboarding others, especially non-designers, could be time consuming.
• Design is never done with ongoing optimizations and maintenance.

After careful consideration of the pros/cons as well as conversations with key stakeholders, it was clear that a custom design system was not only a nice to have but a must have to ensure the best product experience for our customers.

Strategy

Having worked on design guidelines, UI toolkits, and design systems for many years while at Expedia and Newegg, I had a solid playbook in place to ensure that I could successfully create, implement, optimize, and maintain a custom design system.

Now, I couldn't just lock myself away for a couple months to create the design system, I had to approach it progressively in stages while I also worked on redesigning and improving the product experience for our users.

To quote Mando, "This is the way". So here it goes…

Audit the current product experience and other design systems

The best place to start is to take an account and document the holistic product experience to understand any and all styles, elements, and components that will need to be considered for the new design system.

After we have an audit perspective document, then we should review other design systems to form a perspective on how we want to structure and organize our design system. I recommend checking out Apple HIG, Material, Carbon, Polaris, and others. These design systems are comprehensive, so don't get overwhelmed. Just learn from the best.

Figma

In my opinion no other software out there right now can compete with Figma for building and maintaining a design system. And not only can you build a static design system, but you can build a robust dynamic design system with micro-interactions and relationships designed right into the components themselves.

Define design principles

Design principles are a set of truths and laws that form the foundational expectations of the product. These principles guide design and the collective product team to make consistent and rational considerations and decisions for the user.

Now you don't have to define all of them before continuing on, but you should have a solid understanding of design so that you can share and demonstrate that out to the team.

Create the style guide

Now this is where we need to pump the breaks for a second. We will be defining our standards for typography, color, spacing, and elevation. So we must think through accessibility, scalability, localization, platform and device support, and many other considerations before moving forward.

Begin with typography, then spacing because it ties into the type ramp, followed by color, and ending with elevation. These styles should be required before taking on any projects. Without them you'll just be wasting time manually designing elements, components, and views.

This is also a good time to think through and define your naming conventions and tokenization (variables).

Begin designing the component and pattern library

This is where the fun begins. Now that you have your styles in place, start playing legos and framing your first elements and components. Start small with buttons, tabs, tags, and input fields then work up to more complex components such as alerts, tooltips, and cards. All these elements and components are editable and reusable.

Be mindful when designing each new element and component, that they will work coherently, cohesively, and consistently within the system. Battle test everything. Also, remember that the little details matter immensely and any changes you make going forward will have a ripple effect. This is a good time to consider and define versioning and archiving processes.

Publish, share, and educate the team on the new design system

With styles in place and a few elements and components created, it's time to publish the library so that you and your team can quickly access and begin testing and using the design system. But we're missing something. We need a name for our design system that ties into our brand. For BigSpring, I decided on Kinetic because it played well on our brand and the system being a dynamic force.

It's one thing to build it, but now it is time to evangelize and get the team onboard and excited for the new hotness. Take some time getting comfortable with the new system, do some working sessions with developers and product owners to work out any kinks, and begin documenting processes and best practices so that you can successfully teach the greater team.

Learn, optimize, and grow

With a functional, usable, and growing design system in place, go back to the beginning and refine, iterate, and push the limits of the system. The vision for our design system needed to meet and be flexible to the current and future needs of the user, the product team, and the overall brand/business.

Every so often there will be optimizations and new feature additions to Figma, so be mindful of how to pivot and prioritize micro and/or macro changes to the component library.

A few learnings

• We now had a source of truth for design principles, standards, and processes, as well as reusable styles, components, and patterns.
• We saw a significant boost in productivity and reduction in time to create, edit, and publish design and code.
• We saw systemic improvements in consistency, coherence, and cohesion across platforms and experiences.
• The quality bar was raised dramatically and increased with each new release.
• Designs were now easy to find, create, edit, and publish within Figma.

Takeaways

• A design system is never finished.
• Tradeoffs and compromises will be made along the way.
• Balancing time and product priorities is key.
• Welcome critique and feedback from everyone.
• Publish and share progress with the team on a regular cadence.

What's next for us?

Expansion of the component and pattern sets, light + dark mode support, complex responsive prototype templates, and so much more…