Skip to content
06.29.21

Auditing Design Systems

Part of the promise of a design system is having a platform for periodic — if not constant — iteration.

white multi-floor library

Unlike digital projects of the past, design systems aren’t so much torn down and rebuilt so much as they’re gracefully evolved. In theory, everyone wins in this iterative scenario because everything within the system stays stylistically consistent throughout its lifetime.

But is that a realistic expectation?

The Messy Results of Adding to a Design System

Even with the best intentions, the blatant inconsistencies and inefficiencies we use design systems to absolve are susceptible to be substituted with more subtle misalignments. In spite of regular governance and pruning, we’ve seen misalignments like typographical hierarchy shifts and mixed conventions of text-over-photo vs. text-below-photo. If you subscribe to the notions of digital entropy and that websites aren’t a “set it and forget it” thing, you’ll love how design systems amplify this.

How do these misalignments come about? In our experience, stylistic compromises (think: not so much new colors but new shades, not so much new fonts but new type sizes or roles, etc.) aren’t always a product of a wayward contributor or a lack of design discipline. We’ve seen divergent styles borne from new content or initiatives that don’t quite fit existing options, or the desire to feel more emphasized or elevated above what’s available.

Adding something new to a system can work — or it can create a nexus event and branch timeline like Loki did.

As you can imagine, those subtle misalignments can add up across products — but they can also provide an opportunity to clarify what you’re committed to. We recently had such an opportunity with the team at Hormel Foods. Their corporate website is the primary product of their design system. Having launched it in early 2017, we’ve since introduced many new components and variations on original ones. Not only was it time to resolve a few disparate styles — it was time to evolve the design system without rebuilding it.

The Remedy: Audit

Well, well, this should sound familiar. Audits and inventories usually kick-off design system projects, but they’re also valuable in addressing the kind of issues we’re talking about. You might think we’re auditing for misuse of the system, but we’re looking a bit deeper for those subtle shifts as opposed to flagrant compromises.

For example, the post-launch components we added to the system were technically consistent stylistically (the right fonts, colors) and were justifiable as “family-ing” with the rest of the design system. Using one of the misalignments I just mentioned, an audit of all the site components showed that Component X used a text-under-photo convention and Component Y used text-over-photo. Even if we wanted to commit to a healthy split of both approaches, the balance wasn’t quite there to seem intentional. In our case, we saw more value in not obstructing or obscuring photos with text across the board — especially ones with food. And thus, our audit helped us turn an increasing inconsistency into a consolidated, intentional approach.

We used an exhaustive style audit to direct our refresh of hormelfoods.com

In retrospect, it may have been beneficial to have tighter guideposts for such conventions during our initial design phases, like “always preserve the brightness of photography”. However, we weren’t using vignettes and text overlays to muddy photos intentionally, so the audit—and quite possibly only an audit—acted as a catalyst for this revelation and principle refinement.

Here’s how we structured our audit:

Categories

  • Type: have we shifted how we use our two font families?
  • Photos: have we maintained a balance of subject matter?
  • Color: do our colors still create emphasis and relief like we’d hoped?
  • Icons: do they still hang together as a unit? Still contemporary?
  • Actions: have we introduced more links and button styles than we need?
  • Overlays: how do we resolve the mix of text-on- or below-photo?
  • Facts: were we leveraging the flexibility of our fact component?
  • Layout: did our containers have too many dissimilar points of alignment?
  • Motion: were we using animation as a framework or as a siloed feature?
  • Blocks: do we have every component we need?

Breakdown

  • How We Use It: an overview of our original intent for an aspect of style vs. how it’s actually applied
  • By the Numbers: how much do we apply a style?
  • What We’re Seeing: is there anything happening on the web or in this industry that might nudge us towards the evolution of a style?
  • Recommendation: Here’s how we propose altering, consolidating, and solidifying the purpose for this style aspect moving forward

In our team’s case, the audit helped us reduce the total number of components available, unify styles, and commit to conventions we were previously split on.

All with the added benefit of refreshing the site design without ripping up foundational code or site architecture — a No Demo Reno kind of thing (also a super good cost savings kind of thing). Audits can sound scary, but if you’re in the design system business, they’re incredibly helpful — seemingly the more you use them, too.

More About Design Systems