SyncTrix logoSyncTrix
All articles
Experience8 min read

Audit the interface before redesigning

Most redesigns start by drawing new screens. Counting what already exists usually reveals the real problem is inconsistency, not aesthetics.

By Lena Voss
Audit the interface before redesigning

A redesign usually begins because the product feels dated. The work that follows is a set of new screens, a new palette and a rollout that takes a year and leaves half the application on the old design. The step that gets skipped is counting what already exists, which almost always shows that the problem is not that the interface looks old but that it contains eleven variations of the same button. This is where experience design work should start.

01Count first, and expect the number to be bad

An interface inventory means walking the application and recording every distinct visual treatment of each element: every button style, every input, every modal, every table, every empty state, every shade of grey in use. It is tedious and it is the most informative thing available before a redesign.

The result is consistently worse than the team expects. Applications that feel reasonably coherent turn out to contain dozens of near-identical greys and many variants of the primary button, each introduced by a different person solving a slightly different problem under deadline. That inventory reframes the project from making it look better to making it consistent.

ElementExpected variantsCommonly found
Primary buttonOneSeveral, differing subtly
Greys in useA small scaleMany, most unintentional
Input fieldsTwo or threeMore, with inconsistent validation
ModalsOne patternMultiple, behaving differently
Empty statesA consistent treatmentFrequently none at all
Error messagesOne patternSeveral tones and placements
What an inventory typically reveals

02Variation is a symptom of a missing decision

Each variant was added by a competent person. The reason there are eleven buttons is that there was no accessible answer to which button to use, so each developer made a reasonable local choice, and eleven reasonable local choices produce an incoherent product.

This matters for the fix. Drawing a twelfth, better button does not remove the other eleven, and a redesign that does not also change how decisions get made will regenerate the same sprawl within a couple of years. The durable output is a decision-making mechanism, not a picture.

03Separate the three things people call a redesign

Redesign conflates distinct projects with very different costs and risks, and naming which one is intended prevents most of the disappointment that follows. A visual refresh changes appearance. A systemisation makes the existing interface consistent. A restructure changes navigation and workflow.

Stakeholders asking for a redesign usually want the first, frequently need the second, and occasionally require the third without realising it is the most disruptive of the three. Establishing which is in scope is a short conversation that prevents a long argument at delivery.

  • Visual refresh: colours, type, spacing. Low risk, limited durable benefit alone.
  • Systemisation: one component set, applied consistently. Highest lasting value.
  • Restructure: navigation and workflows change. Highest risk, needs user research.
  • Most products asking for a refresh actually need systemisation.
  • Never restructure on aesthetic evidence alone; that requires research.

04Audit accessibility while you are counting

The inventory pass is the cheapest opportunity to check contrast, focus states, target sizes and whether interactive elements are reachable by keyboard. Doing it later means auditing the new design, discovering the same problems, and reworking components already built.

Contrast failures in particular tend to be inherited from a brand palette chosen for print or marketing, where the constraints differ. Finding that during the audit lets the palette be adjusted before it is embedded in a component library, which is a great deal cheaper than afterwards.

05Sequence by usage, not by visibility

Rollouts usually start with the marketing site and the login screen because they are visible and self-contained. Users experience the product mostly elsewhere, in the screens they work in daily, so visible-first sequencing delivers the least perceived improvement for the effort.

Order the rollout by measured usage. The screens with the most time spent in them should convert first, even where they are the least glamorous, because that is where consistency is actually felt. It also surfaces the hard component requirements early, when the library can still absorb them.

  • Pull real usage data before deciding the order.
  • Convert the highest-traffic workflow first, end to end rather than partially.
  • Do not leave a workflow half-converted; mixed treatments read as broken.
  • Delete old components as they are replaced, or both sets will persist indefinitely.
  • Track coverage as a metric so the migration does not quietly stall at seventy percent.

06The audit is the estimate

A redesign quoted without an inventory is priced on an assumed scope. The inventory converts it into a countable one: a known number of components, a known number of screens, and a known amount of inconsistency to reconcile.

That is why the audit is worth paying for separately even if the redesign goes to someone else. It is the artefact that makes every subsequent quote comparable, and it routinely changes what the organisation decides to do, often toward something smaller and more useful than the redesign originally imagined.

Topics

design system auditinterface inventory before redesignui consistency auditdesign debt assessmentexperience design services

Lena Voss

Lead Architect · SyncTrix

Writes about the engineering decisions behind production systems - architecture, delivery and the trade-offs that only show up at scale.

Building something like this?

SyncTrix engineers AI, SaaS, platform and cloud systems for enterprises and high-growth teams. Tell us what you're shipping and we'll scope it with you.