Wireframes in Discovery: How Detailed Should They Be?

ยท 6 min read

In discovery, a wireframe should be rough enough to change in minutes and specific enough that two people read it the same way. Show what is on each screen, what the person can do, and which requirement the screen serves. Leave colour, typography and polish to design. Below is how to pick the level of detail, how to link screens to requirements and what to hand over.

What wireframes are for in discovery

A discovery wireframe is not a design. It is a way to check understanding. Words like "the technician sees the visit details" mean different things to different readers, and a rough screen makes the difference visible in one look: is the phone number on it, is the history there, where is the button to decline?

In discovery they do four jobs:

They do not decide the visual style, and they are not a promise of exactly how the screen will look. Say that at the first review, or the client will give feedback on the colour of a button that does not exist yet.

The right fidelity

Choose the lowest fidelity that still answers the question. A useful way to think about it is three levels:

Level What it shows Use it when
Sketch Boxes and labels on paper or a whiteboard Exploring several ideas with the team
Wireframe Real labels and real content, rough layout, no styling Reviewing with the client in discovery
Mock-up Colours, fonts, spacing and final text Design work, after discovery

For discovery, the middle level is usually right. A few rules make it work:

A screen with no requirement behind it is a feature nobody asked for, and a requirement with no screen may be forgotten. Make the link explicit, in both directions:

In the example report of an invented project, Fieldwise, the screens are listed with the requirements each one covers. The Day list covers REQ-001; Visit detail covers REQ-001 and REQ-006; Close visit covers REQ-002 and REQ-007; the Dispatcher board covers REQ-004 and REQ-008:

UI screens list from the Fieldwise example report, invented project: four screens (Day list, Visit detail, Close visit, Dispatcher board), each with the requirements it covers

When you check the list, you find gaps from both sides. A requirement that no screen covers is a question: where does the user do this? A screen that covers nothing is another: why is it there? The functional requirements examples article shows how to write requirements specific enough to draw.

Review with the client

A wireframe review is short and structured, so it does not drift into taste:

  1. Say what you are reviewing. Content and actions, not style.
  2. Walk through a journey, not a list of screens. "A technician opens the day list, taps a visit, reads the history, starts the visit." Following the path finds missing steps.
  3. Ask the right questions. Is anything missing from this screen? Is anything here that nobody needs? What happens if this is empty, or fails?
  4. Write down every change with the requirement it touches. A change to a screen is often a change to a requirement, and it may change the estimate.
  5. Get the decision maker's agreement that the screens cover the first release. Silence is not agreement; ask for it by name.

If the client keeps suggesting visual changes, note them for the design phase and move on. They are valid, but they are not discovery questions.

What to hand to designers

The designers should receive more than the pictures. A useful handover contains:

Tell them clearly what is fixed (the content and the actions, because the client agreed them) and what is free (layout, visual style, micro-interactions), so they do not feel boxed in or, worse, copy the rough layout as if it were final.

Here is one invented example, the Visit detail screen of the Fieldwise app, as it appears in the example report. It is a wireframe, not a design: a phone frame, three numbered notes and the two actions that matter, Decline and Start visit:

Visit detail screen from the Fieldwise example report, invented project: a phone wireframe showing customer details, equipment history and Decline and Start visit buttons, with three numbered notes beside it

Wireframes are one of the deliverables of a discovery phase. The full list, and what each should contain, is in discovery phase deliverables. Screens also affect the plan, because each complex screen is a piece of effort in a milestone: see the software project roadmap template. You can open the example report to see how screens, requirements and the rest of a discovery fit together.