Jennifer Maggio
Design System.jpg

Appcues Design System

 

 

 

 

 

Appcues Design System

How might we scale our operations and design to ultimately deliver a better product?

 

overview

⁠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.

 

MY ROLE

Senior Product Designer | Appcues

Project management, specs, maintenance, policing, evangelizing

May 2018 - present

Appcues.png
 
 

—— 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.

Look familiar? Just a sample of the many dialogs floating around

Look familiar? Just a sample of the many dialogs floating around

An illustration of the  old workflow . Whenever a new feature is required, a developer would end up creating custom components for that feature, before moving on to the next, and the next, leaving behind an array of styles.

An illustration of the old workflow. Whenever a new feature is required, a developer would end up creating custom components for that feature, before moving on to the next, and the next, leaving behind an array of styles.

Our  new workflow . When a new feature is required, designers come together (with developer input) to create or revise components that fit multiple use cases and then deliver designs using those components.

Our new workflow. When a new feature is required, designers come together (with developer input) to create or revise components that fit multiple use cases and then deliver designs using those components.

 

—— 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:

Figma notifies you when component updates are available, let’s you scroll through the changes and either individually or bulk update them into your file.

Figma notifies you when component updates are available, let’s you scroll through the changes and either individually or bulk update them into your file.

Search for the component you need by name or by thumbnail, and override text with one click directly into the component. No need for special overrides!

Search for the component you need by name or by thumbnail, and override text with one click directly into the component. No need for special overrides!

Figma provides a “Go to Master Component” link, snapping you right to that component so you can make changes to the master, make changes if you wish, and go along with your designing.

Figma provides a “Go to Master Component” link, snapping you right to that component so you can make changes to the master, make changes if you wish, and go along with your designing.

You can choose which libraries of components you wish to include in a file by simply toggling them on or off.

You can choose which libraries of components you wish to include in a file by simply toggling them on or off.

 
Building a table with pre-built components and styles!

Building a table with pre-built components and styles!

—— 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.

Designcu.es is our developer resource, with real React components and documentation.

Designcu.es is our developer resource, with real React components and documentation.

 

—— 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.