Appcues Design System

2018 marked the growth of the Appcues team from 40 to 75, the start of its mobile product, and a company rebrand. It was time to kick design into high gear and take the company from fledgling startup to forward-thinking industry leader. Developing a design system would help set the direction and pace for the organization to scale.

2018 marked the growth of the Appcues team from 40 to 75, the start of its mobile product, and a company rebrand. It was time to kick design into high gear and take the company from fledgling startup to forward-thinking industry leader. Developing a design system would help set the direction and pace for the organization to scale.

2018 marked the growth of the Appcues team from 40 to 75, the start of its mobile product, and a company rebrand. It was time to kick design into high gear and take the company from fledgling startup to forward-thinking industry leader. Developing a design system would help set the direction and pace for the organization to scale.

My goal was to create, maintain and evangelize a design system for Appcues. What that entailed—creating components, applying the brand, and coordinating with devs.
May 2018 - present
My goal was to create, maintain and evangelize a design system for Appcues. What that entailed—creating components, applying the brand, and coordinating with devs.
May 2018 - present

ABOUT THE ORG

Appcues is an experience layer for your product that enables you to build customizable, targeted, and measurable onboarding, feature adoption, and surveying experiences, to better engage your users and grow your business. In more concrete terms, it means you can insert modals, tooltips, checklists and Net Promoter Surveys (NPS) into your app, code-free.

Problem

Problem

Haphazard styles floated throughout the product—different dialog menus on every screen, off-brand and custom colored buttons, strange menu and form behaviors…no consistent design, and tons of custom code. Support tickets frequently cited UI bugginess as sources of frustration and distrust of the product.

Meanwhile, marketing had just completed a rebrand, giving us the motivation, and added pressure, to rethink our product's UI and UX.

GOAL

Create an on-brand, consistent and scalable design system to decrease support tickets and increase team efficiency.

Solution

Solution

Design system
Our primary solution was a design system, based on the best practices of atomic design

Developer documentation
We did not just need a UI / UX kit, but a dedicated internal site for developers to view and understand components and their usage in the product

Challenges

Challenges

Prioritization and planning
Balancing the design system as its own project amidst other product work, especially as a young start-up

Designing across product domains
The Appcues platform is made up of a management dashboard Web App, and two Builders for web and mobile. Each have different workflows and design—how would we build components that met the needs of three domains?

Laying the foundation

Laying the foundation

We needed our new design system's components to work across the entire app in a scalable and structured way. Components should be consistent throughout the app, and linked up well enough together that updates to any one individual button or dialog would be reflected in all their instances.

Enter atomic design—the organization scheme that breaks down pages of an app into small, independent atoms assembled into larger, more complex molecules and organisms. Atomic is widely adopted by today's leading companies, with Google's Material Design and IBM's Carbon Design being two examples.

First, we mapped components

First, we mapped components

With a kickoff meeting between the product designers and a lead front-end engineer, we drafted a list of components and assigned them to the general style, atom, molecule, and organism categories. It was important to have a front-end developer on-board from the start to ensure alignment and success.

With a kickoff meeting between the product designers and a lead front-end engineer, we drafted a list of components and assigned them to the general style, atom, molecule, and organism categories. It was important to have a front-end developer on-board from the start to ensure alignment and success.

comp spreadsheet
Components, base

Then, we made a starter set

Then, we made a starter set

Our first foray contained the basics—color palette, typography, iconography, buttons, and inputs. This of course didn't cover all our needs, but it allowed each designer to start from somewhere in mockups. We iteratively built up to more complex molecules and organisms, redefining the behavior and design of simpler atoms along the way.

Our first foray contained the basics—color palette, typography, iconography, buttons, and inputs. This of course didn't cover all our needs, but it allowed each designer to start from somewhere in mockups. We iteratively built up to more complex molecules and organisms, redefining the behavior and design of simpler atoms along the way.

Our first foray contained the basics—color palette, typography, iconography, buttons, and inputs. This of course didn't cover all our needs, but it allowed each designer to start from somewhere in mockups. We iteratively built up to more complex molecules and organisms, redefining the behavior and design of simpler atoms along the way.

Our first foray contained the basics—color palette, typography, iconography, buttons, and inputs. This of course didn't cover all our needs, but it allowed each designer to start from somewhere in mockups. We iteratively built up to more complex molecules and organisms, redefining the behavior and design of simpler atoms along the way.

A shoutout to Figma

A shoutout to Figma

Initially, we used Sketch, leveraging its symbols and libraries capabilities, for all of our design work, pairing it with Invision for prototyping and Abstract for change management. But as we added more screens and more symbols, files became sluggish. Simple things like setting overrides on symbols or adjusting type styles for alignment or color were slow and frustrating to navigate.

We switched to Figma, and it immediately turbocharged our workflow. There were so many great features—multi-player mode, commenting, prototyping, in-browser designing, version control, developer specs...but on top of the speed and tool consolidation, it just seemed especially suited to streamline systems work!

Initially, we used Sketch, leveraging its symbols and libraries capabilities, for all of our design work, pairing it with Invision for prototyping and Abstract for change management. But as we added more screens and more symbols, files became sluggish. Simple things like setting overrides on symbols or adjusting type styles for alignment or color were slow and frustrating to navigate.

We switched to Figma, and it immediately turbocharged our workflow. There were so many great features—multi-player mode, commenting, prototyping, in-browser designing, version control, developer specs...but on top of the speed and tool consolidation, it just seemed especially suited to streamline systems work!

Initially, we used Sketch, leveraging its symbols and libraries capabilities, for all of our design work, pairing it with Invision for prototyping and Abstract for change management. But as we added more screens and more symbols, files became sluggish. Simple things like setting overrides on symbols or adjusting type styles for alignment or color were slow and frustrating to navigate.

We switched to Figma, and it immediately turbocharged our workflow. There were so many great features—multi-player mode, commenting, prototyping, in-browser designing, version control, developer specs...but on top of the speed and tool consolidation, it just seemed especially suited to streamline systems work!

Switch to Figma

Our component library and documentation grew...

Our component library
and documentation grew...

typography
iconography
buttons
Inputs

...and lots lots more....

Designs translated to code

Designs translated to code

Designs translated to code

We didn’t just make a Figma UI kit—we have live components documented in an internal site, Designcu.es. While obviously still a far cry from the depth and breath of more robust systems, it hits the basic notes. Anyone on the team, not just developers, can see our React components true to form and with available properties listed. 

We're still improving the documentation, planning to add component descriptions, examples of their use in the product, and a search to make it easier to use.

Problems solved and features shipped

Problems solved
and features shipped

Problems solved
and features shipped

Key projects unlocked by the design system work were updates to the Web App's navigation and page layout and the rapid release of our first Reporting page.

The Web App simplified

The Web App simplified

The Web App simplified

The Web App, our management dashboard, had grown increasingly complex. We applied new system components throughout the web app first, both for the greatest user impact and to prove out whether the system met our needs. Customers expressed delight at both the new look and intuitive navigation.

The Web App, our management dashboard, had grown increasingly complex. We applied  new system components throughout the web app first, both for the greatest user impact and to prove out whether the system met our needs. Customers expressed delight at both the new look and intuitive navigation.

The Web App, our management dashboard, had grown increasingly complex. We applied  new system components throughout the web app first, both for the greatest user impact and to prove out whether the system met our needs. Customers expressed delight at both the new look and intuitive navigation.

The Web App, our management dashboard, had grown increasingly complex. We applied  new system components throughout the web app first, both for the greatest user impact and to prove out whether the system met our needs. Customers expressed delight at both the new look and intuitive navigation.

web app simplified

A new Reporting page

A new Reporting page

A new Reporting page

A new Reporting page

Using pre-built components and developer docs all on his own, our product manager created a new reporting page during a two-day hackathon. With some quick clean-ups and linking up to data shortly after, he rolled it out as a Beta feature, to the cheers of many customers who had been begging for something like it for months. This rapid release of an oft-requested new page by a non-developer was previously impossible without a design system.

Using pre-built components and developer docs all on his own, our product manager created a new reporting page during a two-day hackathon. With some quick clean-ups and linking up to data shortly after, he rolled it out as a Beta feature, to the cheers of many customers who had been begging for something like it for months. This rapid release of an oft-requested new page by a non-developer was previously impossible without a design system.

Using pre-built components and developer docs all on his own, our product manager created a new reporting page during a two-day hackathon. With some quick clean-ups and linking up to data shortly after, he rolled it out as a Beta feature, to the cheers of many customers who had been begging for something like it for months. This rapid release of an oft-requested new page by a non-developer was previously impossible without a design system.

Using pre-built components and developer docs all on his own, our product manager created a new reporting page during a two-day hackathon. With some quick clean-ups and linking up to data shortly after, he rolled it out as a Beta feature, to the cheers of many customers who had been begging for something like it for months. This rapid release of an oft-requested new page by a non-developer was previously impossible without a design system.

reports

The overall impact

The overall impact

The overall impact

Besides providing consistency, design systems boost efficiency. On the designer side, prototoypes were much faster to whip up on the fly for feedback. Developers could plug and play code that had been tested for functionality and behavior, and work on larger infrastructure challenges. Confident in the system, we could comfortably start turning our attention to the trickier, more pressing, and more fun user needs than making sure our dialogs weren't broken.

Customers felt the impact, writing in saying the app felt cleaner, snappier, and more intuitive, and that they felt the product was always improving. Meanwhile, support tickets for UI-related bugginess steadily declined.

A FINAL NOTE

Design systems are never done

😉

Design systems
are never done

😉

Almost every day, I contribute a little bit more to our system. It doesn’t have to be big—it could be small like fixing erroneous padding or alignment, applying Figma's new auto-layout to our buttons, or adding one more icon to the library. It could be larger, like working out a consistent display for various pieces of data. Point is—your design system is the backbone of your product, and like your product, it is never done evolving.