Services / Design / Design refresh

A product that works, made to look it, usually without touching the backend

Software that does its job can still be losing you customers on appearance and friction alone. A refresh replaces the surface (layout, type, colour, accessibility and the worst of the flows) while the systems underneath keep running.

Why it matters

The cost is the wait

There is a particular kind of product that is quietly costing its owner money. It works, it is reliable, customers depend on it every day, and it looks like it was designed a decade ago. New buyers compare it against a competitor with a better-looking website and assume the software behind it is equally behind. Existing customers put up with it. Your own sales team apologises for the screenshots.

The instinct is to rebuild everything, and it is usually the wrong call. The business logic, the integrations and the data model are often the most valuable and best-tested things you own, and rewriting them means re-earning years of hard-won correctness. What is dated is the surface (the layout, the typography, the density, the flows nobody has revisited since launch) and that can frequently be replaced against the same APIs, for a fraction of the time and money a rewrite costs.

We start by finding out what is actually wrong, using your analytics, session recordings, support tickets and a few sessions with real users rather than the opinions circulating internally. Then we fix in order of impact: accessibility failures, the flows losing people, the visual system, with dark mode and proper responsiveness picked up along the way. Delivered in phases you can ship, not one enormous switch-over that slips for a year.

What you actually get

Built to be trusted

A refresh is largely an exercise in knowing what to leave alone. Here is what we change, and how we keep it safe.

01

Evidence first, opinions second

Analytics, session recordings, support-ticket themes and a handful of usability sessions, to establish where people genuinely struggle. It is common for the screen everyone hates internally to not be the one costing you customers.

02

Accessibility brought up to standard

Keyboard operation, focus order, screen-reader labels, contrast and form errors fixed against WCAG and tested with real assistive technology. You get an issue-by-issue report ranked by user impact, the document procurement questionnaires and accessibility regulations ask you to produce.

03

New surface, same systems

The interface is rebuilt against your existing APIs wherever it can be. Where a change genuinely needs backend work, we price it separately and tell you before it starts, so it is a decision rather than a discovery.

04

Dark mode and real responsiveness

Both themes derived from one set of tokens with contrast checked in each, and layouts that hold from a small phone to a wide monitor, verified on physical devices rather than a resized browser window.

05

Shipped in phases

A refresh that lands as one enormous release is a refresh that slips and alarms your customers. We sequence it (design system first, then the highest-traffic flows, then the long tail) so value arrives early and every step can be reversed.

06

Speed treated as a design constraint

The cost of a heavy typeface, a hero video or a rich animation is weighed while designing, not discovered in a performance report afterwards. A refresh that makes the product prettier and slower has not succeeded.

Where it earns its keep

Same pattern, different desks

The same brief arrives from very different places: a long-lived product, a rushed launch, or a legal deadline.

B2B software vendors

01 · B2B software vendors

A capable product that demos badly

The problem
The application carries a decade of hard-won functionality and an interface to match. Deals are lost in the demo to thinner competitors that simply look modern, and every renewal conversation opens with an apology about the interface.
What we build
A design system laid over the existing front end and applied first to the screens prospects see in a demo and customers use daily, working against the same APIs, with the dense expert screens kept dense, because power users chose them for that.
What changes
A product that presents as well as it performs, refreshed without pausing the roadmap or putting the logic underneath at risk.
Public sector & education

02 · Public sector & education

An accessibility obligation with a date on it

The problem
A service that must meet an accessibility standard and currently does not (unlabelled form fields, controls that cannot be reached by keyboard, failing contrast, a keyboard trap in the main navigation) with a statement due and procurement asking for evidence.
What we build
An audit run with real assistive technology alongside automated scanning, a fix plan ordered by user impact, remediation of the shared components most of the service is built from, and a conformance statement written from what was actually tested.
What changes
A service usable by the people it previously excluded, and documentation that stands up when somebody asks to see it.
Hospitality & bookings

03 · Hospitality & bookings

A booking flow leaking customers on a phone

The problem
Most visitors arrive on a phone and the booking journey was designed for a desktop. The date picker fights with thumbs, the payment step reloads and loses the selection, and drop-off spikes at the same step every single day.
What we build
Session recordings to pinpoint exactly where people leave, then a mobile-first rebuild of the booking flow: a date picker that works with one thumb, fewer steps, progress saved between visits, and the full price shown before the payment screen rather than after it.
What changes
More bookings completed on the device most people are actually using, and a reception desk fielding fewer rescue phone calls.

The technology

The tools behind it, named

A refresh is half diagnosis and half front-end craft. These are the tools for both halves.

6 layers · 25 technologies

01

Finding out what is actually wrong

Recordings, heatmaps and interviews, so the work is aimed at the screens losing you customers rather than the ones that annoy the loudest person internally.

  • Hotjar
  • Microsoft Clarity
  • Dovetail
  • Maze

02

The audit toolkit

Accessibility and performance measured against published standards, with the manual testing that automated scanners cannot replace.

  • Lighthouse
  • Chrome DevTools
  • axe DevTools
  • NVDA
  • VoiceOver
  • WCAG 2.2

03

Redrawing it

The new surface designed as a system rather than screen by screen, which is what keeps the back half of the project faster than the front half.

  • Figma
  • Miro
  • Framer

04

Rebuilding the front end

Accessible component foundations and tokens, so the new interface is easier to maintain than the one it replaced.

  • React
  • TypeScript
  • Tailwind CSS
  • Radix UI
  • shadcn/ui
  • Next.js

05

Stopping the drift returning

A live component reference plus visual and flow testing, so the design does not quietly decay again over the next two years.

  • Storybook
  • Chromatic
  • Cypress

06

Proving it worked

The same measurements taken before and after, so the improvement is something you can show rather than something we assert.

  • PostHog
  • Google Analytics
  • GrowthBook

Product names and logos are the property of their respective owners and are shown to describe the technologies we work with. Their use does not imply any partnership, sponsorship or endorsement.

How we deliver it

Live behind a human first

Six to fourteen weeks for most refreshes, phased so the first improvements ship long before the last ones are designed.

01

We audit what you have

Every screen inventoried, components counted, and duplicated variants listed. Most long-lived products turn out to have four versions of the same button. That inventory is what makes the rest of the project estimable rather than guessed.

02

We find out where people struggle

Analytics, session recordings, support-ticket themes and a few usability sessions on the product as it stands. This is the step that stops a refresh becoming an expensive repaint of the wrong screens.

03

We test it against the standards

An accessibility audit using real assistive technology as well as automated scanning, plus a performance baseline. Both written down, so improvement can be demonstrated at the end instead of claimed.

04

We build the new surface as a system

Tokens for colour, type and spacing, then a component library covering every state in both themes. Screens are assembled from that library, which is why the second half of a refresh moves faster than the first.

05

We apply it in priority order

Highest traffic and highest pain first, shipped in slices through whatever release process you already run, each one small enough to reverse if it lands badly.

06

We check it landed

The same measurements taken again (task completion, drop-off, outstanding accessibility issues, load time) plus a written record of what changed and why, so the next team does not have to reverse-engineer your reasoning.

Before you commit

The questions worth asking

Our customers say the product is hard to use. Is a refresh enough?

It depends on whether the difficulty lives on the surface or in the model underneath. If people are struggling with layout, labelling, density and inconsistent patterns, a refresh fixes it well. If the underlying concepts are wrong (the workflow does not match how the job is actually done, the permissions model fights the org chart), then a refresh makes a confusing product prettier and no easier. We will tell you which one you have during the audit, and if it is the second we will say so before you commit to the larger piece of work.

Do you have to rewrite our front end?

Not always, and we would rather not. Products built with a component-based front end can often be re-skinned through tokens and component replacement. Older server-rendered templating stacks can frequently be restyled, though hand-rolled CSS accumulated over years sometimes costs more to untangle than to replace. We assess this specifically in the audit and give you both routes with honest costs, rather than defaulting to the one that suits us.

Will our existing users be upset by the change?

Some of them, always. Familiarity is a genuine feature, and moving something costs a daily user real time even when the new arrangement is objectively better. We reduce the damage by keeping structures where they work rather than rearranging for novelty, phasing the rollout, giving your heaviest users advance notice and a way to feed back, and keeping the old view available for a period where that is technically feasible. Expect a burst of complaints regardless. Anyone who tells you otherwise has not shipped a redesign.

Can this really be done without touching the backend?

Often, and it is usually where we start, but "without changing a line" is a goal rather than a guarantee. Some improvements are purely presentational. Others need the API to return something it currently does not, a total count for pagination, a field the old screen never showed, a status the new flow depends on. Those come to you as a separate, costed list so you can decide what is worth the backend time and what to defer.

After the audit, will we be compliant?

An audit tells you where you stand against WCAG at a point in time, and remediation closes the issues it found. That is a strong, defensible position, and it is what a conformance statement is built from. It is not a certificate, and nobody can honestly sell you one. Automated tools catch only a portion of real problems, manual testing catches most of the rest, and accessibility is a state you maintain: every new feature can introduce new issues. We will hand you the audit, the fixes and the process to keep it, and we will not tell you it is finished forever.

Is a refresh cheaper than a rebuild?

Usually and often by a lot, because you keep the business logic, the integrations and the years of edge cases already handled. Not always, though. If the front end is so entangled with the backend that the surface cannot be separated, or the framework is so old that nothing current will run alongside it, a refresh becomes a rewrite wearing a smaller name. We would much rather establish that during the audit and tell you than discover it halfway through and send you a change request.

Is your product being judged on its age?

Send us a link or a few screenshots of the screens your customers use most. We will come back with three honest, specific improvements, and whether a refresh or a rebuild is the better spend, free, no strings.

Start the conversation

Explore more

The rest of Product & Brand Design