Appcues Design System
How might we scale our operations and design to ultimately deliver a better product?
Oh the beauty of design systems. I could go on and on! I'm proud to have created, managed and evangelized ours at Appcues! First designed in Sketch, it was transferred over to Figma, and now a base set of components are live in React, in active use by our developers, and documented in our very own DesignCu.es.
Immediately upon joining in May 2018, when Appcues was still around 40 people, I advocated for the creation of a design system. My prior experience at Crimson Hexagon (now Brandwatch) and Toast, both larger orgs, had taught me just how much tech and design debt accumulated trying to scale workforce, process, and product features without one.
My goal was to create, maintain and evangelize a design system. What that entailed: pixel-perfect specs and documentation, building scalable and nested components, applying brand look and feel, scouting opportunities in the app to use better UI/UX patterns, policing the system, working with devs to build it, and encouraging designers and devs to use it.
Senior Product Designer | Appcues
Project management, specs, maintenance, policing, evangelizing
May 2018 - present
—— what is a design system?
It’s a source of truth, a time saver, and your best friend.
When you start on a project with approved, consistent and scalable solutions and stop reinventing the wheel each time for basic page designs, you have way more time for the more complex user needs.
A design system is a systematic way to conceive, design, and implement UI / UX components and patterns across a product or group of products. It’s both the set of documentation and the philosophy behind that documentation.
It should accomplish a number of things:
deliver greater consistency in look and feel and overall product behavior to users
describe the design language and rationale for UI / UX components and patterns
create a “kit” for designers and developers to draw from, dramatically speeding up their workflow
allows design and code artifacts to be updated quickly in a centralized and controlled way
—— the problem at appcues
Our source of truth was missing, creating inconsistent experiences. Unifying and scaling our product quickly without a system would be untenable.
You should easily be able to picture our issue, since it wasn’t unlike that of every other organization—there were haphazard styles floating throughout the product: different dialog menus on every screen, wrongly colored buttons, strange menu and form behaviors… no consistent design language and tons of custom code.
—— a quick plug for figma
Designing in Sketch and managing changes via Abstract was initially doable, but became unwieldy at scale. We switched to Figma. ❤️
Sketch has been the gold standard for years in interface design. It accommodates systems work with Symbols and Libraries, but as we added more screens and more symbols, the master files became sluggish. Simple things like setting overrides on symbol instances or adjusting type styles for alignment or color were slow and frustrating.
Figma was calling to us—for many reasons, like multi-player mode, commenting, native prototyping, price point, in-browser designing. But it seemed especially designed to streamline systems work! Though it meant respeccing everything in Figma, I set aside time (about 2 weeks) to migrate everything from Sketch.
See how nicely Figma optimized working on design systems:
—— designing with components
You cannot underestimate the time savings.
I wish I had some magic way to estimate how many hours…days…weeks worth of time is saved for designers and developers using a system. Instead of making everything from scratch, you have pre-approved, pre-specced components!
—— developer adoption
A design system doesn’t matter if no one uses it.
We didn’t just make a Figma UI kit—we have live components documented in Designcu.es. While obviously still a far cry from the depth and breath of Google’s Material UI, IBM’s Carbon Design, or Hubspot’s Canvas, it still hits the basic notes. Anyone coming to Designcu.es can see our React components true to form and with available properties listed.
—— a final note
Design systems are never done 😉
Almost every day, I contribute a little bit more to the system. It doesn’t have to be a big effort—it could be something small like fixing an erroneous banner layout or adding one more icon to the library. It could be larger, like working out a consistent page header design across the web app.
Point is—your design system is the backbone of your product, and like your product, it is never done evolving.