01
Design starts with a colour scheme
Fonts, colours and a hero image before anybody has decided what the page is for. The structure is whatever fits around the pictures, and it is discovered to be wrong after the build.
UX, wireframing and prototyping
Drawing it in grey boxes is the cheapest it will ever be to change your mind.
Most expensive redesigns begin with a good idea that was never tested. A wireframe takes a morning and a prototype takes a few days. Five people clicking through it will find most of what would have gone wrong, before anybody has paid for a line of code.
When something exists and is not working, the instinct is to redesign it. The cheaper first step is watching five people try to use it and writing down where they stop. The answer is usually one or two places, and not the whole thing.
Three minutes, twelve questions, no email needed to see or copy your result.
Changing one decisionIllustrative, not measured
- Change it on paperMinutes
- Change it in a prototypeAn hour
- Change it in the buildDays
- Change it after launchDays, and the visitors lost meanwhile
The same change, four different pricesTest early and the expensive ones never arrive
4xWhat we do before anything is built
User research
Wireframes
User flows
Clickable prototypes
Testing with people
Accessibility
Information structure
Handover to build
Judged by whether a stranger can finish the task, not by how the design looks.
Where we come in
Three ways a design goes wrong before it is built
Most expensive design problems are decided in the first week, quietly. Usually it is one of these.
Products that are hard to use got that way gradually. Usually it is one of these.
02
Everybody in the room is the wrong customer
The people choosing between layouts know the business too well to be surprised by anything. Five strangers will be confused in places nobody inside the company can see.
03
The first working version is the first test
The first time anybody uses it is after it is built. Every problem found then costs a developer's time, and some are so structural that they get left in because fixing them would be too expensive.
01
Nobody has watched a stranger use it
The analytics say people leave at the third step. They do not say why, and the redesign that follows is built on a guess about the reason.
02
It was designed around how the company is organised
The menu mirrors the departments, the forms mirror the database and the terms are the ones used internally. The visitor arrives with a task and finds a diagram of the business.
03
Every addition made it a little harder to use
A banner, a popup, a new menu item and another button, each added for a good reason. Nobody ever took anything away, so the thing the visitor came for is surrounded.
The wireframe lab
Draw the top of a page in grey boxes and see where the decisions are
Set five controls, then change them one at a time. The wireframe redraws, the fold line moves and the checks count what a first-time visitor has to work out. It is an argument about structure and not a test of a real design.
Your page, as it stands
Five decisions. Each costs a few minutes to change on paper.
The main action
The order of the page
The form
Testing
0/5clear checks. A checklist, not a usability test.
Nothing here is stored, sent to TWV Media or used to look up your site. It runs entirely in your browser.
Decisions before the fold0
Steps from landing to done0
Set the controls to match your pageThe verdict changes as you do.
A generic wireframe. Block heights and counts are illustrative.
The design process scorecard
Twelve questions, a score out of a hundred, and the three things worth fixing first
It scores how a thing gets designed rather than how it looks: whether anybody knows who it is for and what they are trying to do, whether the structure was drawn before the pictures, whether it was tested early with strangers, and whether what was designed reaches the build intact. Your answers stay in this browser.
Design process scoreQuestion 1 of 12
What we actually do
Six jobs, from the first conversation to the final check
You can bring us in for the whole process or the one stage currently worrying you. Either way, one senior person stays responsible for it rather than a rota.
01Users and their tasks
Who is arriving, what they came to do and what is stopping them. Learned from your inbox, your search terms, your sales calls and a handful of short conversations.
02Information structure
What the site contains, what it is called and how it is grouped, built from the words your customers use, tested with a card sort when it is worth the time.
03User flows
The path from arriving to finishing, drawn step by step with every decision and dead end visible. A flow that takes nine steps to do a three step job shows up on paper.
04Wireframes
Every key page in grey boxes, in the order a visitor reads it, with real words instead of placeholder text. Quick to change and honest about what matters.
05Clickable prototypes
The important journeys made clickable, so that people can try them. Built to be tested and thrown away, and not to be handed to a developer as finished.
06Testing and handover
Five people, a task each, and a short written report of where they stopped. Then a handover the developers can build from, and a check against it once it exists.
What testing early is worth
A prototype costs a little, and rework costs a lot more
Rework is the cost of finding out after the build. This sum compares the two routes using your own numbers. It cannot say how much rework you would have had, only what the difference is worth if a prototype halves it.
Your project, roughlyMove the sliders to something close to your plan.
Rework if untested£0
Prototype and tests£0
Rework after testing£0
Difference£0
Move a slider to see the verdictOne of its three answers is that testing does not pay for itself on this project.
Both rework shares are your estimates, and the whole sum depends on them. Ask the people who built the last project what share of it was redone, and use that figure. Rework also costs time and the visitors who met the wrong version, which is not counted here.
The most expensive design decision is the one nobody got to react to until it was live.
Commercial resultTasks finished and enquiries or sales
The lever you ownStructure, wording and the number of steps
The lever you rentVisitors arriving from ads and search
Useful context onlyBounce rate and time on page
How it runs
Four stages, and you can stop after any of them
Every stage produces something you own and could hand to somebody else. Nothing is held hostage and there is no long contract behind it.
Find out who and why
Who arrives, what they came to do and where they stop. Learned from what you already have, plus a few short conversations.
Draw the structure and the flow
The content in the order people read it and the path they take, on paper with real words and no visual design to hide behind.
Prototype and test with five
The key journeys made clickable and tried by five strangers, each with a task and nothing explained to them.
Hand over and check
A specification the developers can build from, then a review of the build against it, so the design survives the translation.
A usability review
For a site or product that exists and is not working, and needs to know exactly where people stop.
- Five people try the main task
- Where they stopped, in a short written report
- Quick fixes separated from structural ones
- A prioritised list you keep
Wireframes and a prototype
For something new, or a redesign that needs to be right before the build starts.
- Users, tasks and flows agreed first
- Wireframes with real words
- A clickable prototype tested with five people
- A specification ready for the build
Design support during the build
For teams who want a designer checking the build against the intent, and fixing what the translation loses.
- Reviews at each stage of the build
- Answers to developers' questions in a day
- Fixes drawn before they are coded
- A final check against the specification
Before you ask
The questions that come up on every first design call
What is the difference between a wireframe and a prototype?
A wireframe is a drawing of a page that shows what goes where, with no visual design. A prototype links wireframes or designs together so people can click through a journey. The first is for deciding structure, the second is for finding out whether it works.
Why five people for testing?
Because most of the serious problems show up in the first few sessions, and each further person mostly repeats what the earlier ones found. Five is a practical starting point, not a rule, and a complex product with several kinds of user needs more. The point is to test early and often, not to test once.
Do you test with our customers or with strangers?
Whichever is available and relevant. People who resemble your customers are best, and a few members of the public doing the task are far more use than colleagues, who know too much. We will say if the people you suggest are too close to the business.
Can you test a site that is already live?
Yes, and it is the quickest way to find out why it is not working. We set each person a task, watch where they stop, and write down what they said and did. It frequently turns out that the problem is one or two steps, which is a much smaller job than a redesign.
Do you design the visuals as well?
We design the structure and the flow, and we can take it through to visual design or work with whoever does your branding. The branding and visuals page covers that side. The order matters, though: structure first, then the look.
What tools do you use?
Whichever the team will be able to open afterwards. Wireframes and prototypes can be built in several common design tools, and what matters is that you can read, comment on and change them without us.
How long does it take?
A wireframe set and a tested prototype for a focused project usually takes a few weeks, depending on how quickly people are available to test and how many journeys matter. We will give you a date before we start, and not after.
How do you cover accessibility?
From the start rather than at the end: readable contrast, labelled form fields, a sensible order for people using a keyboard or screen reader, and tests with those tools. It costs far less to draw it in than to retrofit it.
Is anything I type into this page stored?
No. The wireframe lab, scorecard and cost sums run in your browser. Nothing is sent to us, nothing looks up your site, and everything disappears when the tab closes. If you copy your score, that copy goes to your own clipboard. Our privacy notice covers the rest of the site.
Tool and method specifics on this page were last reviewed in October 2026. If something here no longer matches what you are seeing, tell us and we will correct it.
Also worth a look
A good design still has to be built, found and filled with words
Websites and landing pages↗Building the pages once the structure is settled.E-commerce and product pages↗The product page, drawn for the questions a buyer asks.Branding and visuals↗The look that goes on top of a structure that works.Content, copy and photography↗The words and pictures that fill the boxes.Analytics and tracking↗Telling whether the new design did any better than the old one.WordPress↗The platform four sites in ten run on, and the four reasons it gets slow.Shopify↗A hosted store, and the apps and theme that still need an owner.Claude↗Drafting and checking copy, labels and user flows with a person in charge.Our work↗The case studies, with the numbers left in.
Book a call
Twenty minutes, no pitch
Send us the address of what you have, or a short description of what you want to make, before the call. We will have tried the main task as a stranger would. You get the first thing we would change and why, whether or not you ever hire us.
Book a free 20-minute callBook a call with TWV Media20 minutes, on Google Meet or by phone
20 minThis month
MTWTFSS
09:0010:3011:1513:0015:3016:15
Open the booking calendar↗