How to count & pay down design debt
Design debt can increase churn
Poll Everywhere is a live-polling SaaS company, serving 75% of the Fortune 1,000.
What exactly is design debt?
According to Austin Knight, design debt is the total amount of user-facing inconsistency in a product that affects the integrity of the user experience.
Design debt is easy to see. You see it in apps with six different button styles, websites with 4 different modals, or microcopy that is obviously written by different people.
Design debt looks like this:
Why is design debt bad? Churn.
Variety in UI creates a disconnect between the user’s memory of how the product works and the reality of how it actually works. It also reduces consistency and ease-of-use, two primary ingredients in the experience.
If a product needs to be constantly re-learned and feels hard to use, it will create a poor user experience, resulting in churn.
Design debt also slows developer velocity because each visual variation comes with code that needs to be understood and maintained.
Where does design debt come from?
Most products start out with zero design debt. Debt is accrued as teams ship incrementally, building upon the product over many months.
While this incrementalism helps build validation and provide customer value, it also makes the product incrementally harder to use. A product that’s hard to use is also hard to sell and exhibits lower retention.
How to identify design debt
At Poll Everywhere, we tackle design debt head-on by collecting screenshots, URLs, and instance names of every single UI element in the product.
These screenshots are organized into a slide deck. Arranging the screenshots side-by-side is an easy way to expose variety. We have slides for types of UI, like buttons, modals, notifications, headers, footers, and even logos.
How to count design debt
We decided early-on that our formula for design debt should be understandable by anyone in the company. We should be able to jot it down on the back of a napkin.
Here’s our formula:
Here’s a few examples of this formula in use (variants - 1) x (instances x 2)
- 4 different buttons across 20 pages = design debt score of 120
- 2 different modals across 20 pages = design debt score of 80
- 1 type of drop down across 20 pages = design debt score of 0
Here’s a sanitized copy of our design-debt spreadsheet.
Always subtract one from variants because having one version of each UI pattern is the goal and shouldn’t be counted as debt.
We double the instance’s effect on its design debt score because its impact on the user is compounded each time a new variant is identified and learned.
How to kill design debt in 4 steps
1. Get buy-in
The first and most important step is to help non-designers make the connection between design debt and churn.
Have a 1:1 with each stakeholder to make sure they understand design debt’s impact on the user’s ability to learn the product, and are able tell this truth to someone else on their team.
We phrase it like this:
Consistency and ease-of-use are high-leverage areas for reducing churn. Design debt is our metric quantifying inconsistency.
2. Identify and prioritize
We keep a design debt balance sheet, it looks like this:
You’ll likely find some “quick-win” design debt. That is, high-impact and low-effort debt. Address these quick-wins first, because they will help you keep momentum for the more complex debt to follow.
3. Maintain a single source of truth
Designers and developers maintain a library of design system files in Sketch. We call this library Whisk. Whisk is where the visual design system ingredients get mixed together. We’ll write a followup about this later.
The structure, naming, and models mirror their counterparts in our design system codebase.
Centralizing UI in Sketch upfront helps us avoid the introduction of new debt.
4. Celebrate every pixel
You’ll be hard pressed to pinpoint a particular debt payment’s influence on churn. Instead, keep the momentum going be celebrating the impact for those who work on it and an increase in velocity.
Update
Since we started cataloging design debt, last Fall (2017), about 12% has been paid down.
Matt Diebolt contributed to this post. Maxwell McGee edited it.
