Digital Experience

What it is

Digital experience design is the discipline of making a company legible on screen: what appears first, what a person is asked to understand, and what they can do next. It covers interface design, interaction, editorial layout and the accessibility of both.

The mechanism

The interface as a sequence of decisions a visitor makes.

A journey is designed as stages with one job each, a page as a hierarchy of claim, evidence and action, and every control as a set of states — including the ones where something goes wrong.

experience / interface logicCoordinated

01Journey map

One job per stage

landingArriveConfirm they are in the right placeReady
navigationOrientShow what exists and whereStructured
evidenceEvaluatePut proof beside every claimVerified
comparisonDecideAnswer the last objectionMapped
contact_form_startActAsk only for what is neededTracked

02Content hierarchy

What a page is made of, in order

Page

Claim
- Heading
- Lead
Evidence
- Proof
- Examples
- Limits
Action
- Primary
- Secondary

03Interaction logic

A form field, as its states

:placeholderIdle
:focus-visibleEditing
aria-busyChecking
aria-invalidError
role=statusAccepted

An error returns to editing, with the input kept

A drawing of the structure this discipline produces. It describes the shape of the work, not a product, and shows no client data.

Who it is for

Companies whose site looks acceptable on a laptop and fails on a phone
Product teams who need an interface designed as a system, not as screens
Marketing teams shipping pages faster than design can hand-craft them

What usually breaks

The mobile layout is the desktop layout, shrunk, with the hierarchy lost.
Every page is designed from scratch because no component library exists.
Accessibility is a fix applied after launch, which means it is applied badly.

What we change

Design components, compose pages

We design the smallest repeating units first. A page becomes an arrangement of decided things instead of a fresh set of decisions.

Mobile is its own design

Small screens get their own layout decisions — not a narrowed desktop grid — because the reading order and the thumb reach are different.

Accessibility from the first frame

Contrast, focus order, target size and reduced-motion behaviour are design inputs. Retrofitting them changes the design anyway, so we do it upfront.

Deliverables

Component library with states: default, hover, focus, active, loading, empty, error
Page compositions for desktop, tablet and phone
Motion specification: what moves, how far, how fast, and what stops when motion is reduced
Accessibility annotations: heading order, labels, focus behaviour
Design tokens shared with the engineering build

What it does not do

We do not promise a conversion rate. We design the page to answer the question the visitor arrived with, and we measure what happens.
Accessibility is taken to WCAG 2.2 AA wherever it can be met. Where a requirement conflicts with a brand decision, we put that in writing instead of quietly skipping it.
We do not design screens we are not also going to build, or hand over as a system someone else can build.

Process

Structure

Content order and hierarchy per template, decided in plain text before any visual work.

Direction

Art direction proven on the two hardest pages, not on a stylised homepage.

System

Components, states and tokens built out until a new page needs no new design.

Proof

Reviewed on a real device at 320px and above, with a keyboard and with motion reduced.

Questions

What does a website redesign include?

At minimum: a content and page architecture, a design system with components and states, responsive compositions down to 320px, accessibility work to WCAG 2.2 AA where it can be met, and a production build. A redesign that only replaces visuals leaves every underlying problem in place.

Do you work in Figma?

Yes, for structure, exploration and handover. But the design system is finished in code, because that is the only version that ships and the only one that cannot silently disagree with production.

How do you handle animation without hurting performance?

We animate transform and opacity only, keep the motion budget inside the page budget, and build reveals with the platform rather than a large animation library. Everything reduces to no motion when the visitor asks for that.

Do you build the website as well as design it?

Yes. Design and engineering are listed separately because they are separate disciplines, not separate engagements. Most projects run both, and the design is drawn by people who know what it will cost to render.

03Concept study

work / commerce-frame2026

01Objection-ordered layout
02Evidence next to claim
03Checkout as one surface

Commerce Frame

A self-initiated study of what a specialty retailer’s product page owes the buyer — and how much of the usual store can be removed without losing a sale.

Specialty retailExperienceCommerceSearch

View project

02Internal system

work / atlas2025