Design

Low-fidelity wireframes

Grey screens, no styling, to validate structure and content before design.

When. Discussing in grey lets you talk about logic without getting lost in colours.

Duration
3 h
Participants
Design + PM + tech
Output
Validated key screens
Stage
Idea · Pre-PMF · Post-PMF · Scale-up · Mature
Screen 1Screen 2Screen 3
Open in FigJamFind the right sequence

In FigJam: File → Duplicate to your drafts, then keep this workshop's section. Get the file on Figma Community

Filled example

Screen 1Screen 2Screen 3Job list with a grey'offline' banner atthe topBig 'Start' buttonon the next jobEach job: customer,address, time, syncbadgeIntervention form:parts, time, photosSave button alwaysenabled, neverblocked by networkPhoto thumbnailswith a small clockicon while queuedJob closed screen:'Saved on thisphone, will sync'Link to the queue:'3 jobs waiting tosync'Signature area,greyed out ifoffline in v1

Example data. Fieldnote is a fictional company used to fill all 61 boards, so the examples tell one consistent story.

Post-PMF, Ana sketches the three screens of the offline flow in grey so Tom and Karim argue about logic, not colours.

What the team took away

Tom spotted that the Save button on screen 2 was greyed out in the first sketch; it is the one thing that must never depend on the network. Two other screens were cut.

How to run it

Preparation

Agenda

  1. 15 min
    Walk the flow
    Read the flow step by step and confirm the screen list. Write on each frame the one thing the user must do on that screen. If you cannot write it, the screen does not exist.
  2. 30 min
    Solo sketch, round one
    Each person sketches every screen alone with boxes and lines only. Ten minutes per screen. Words in the boxes, no icons.
  3. 30 min
    Compare
    Put the three versions of each screen side by side. For each screen, name what the versions agree on (keep it) and the one difference worth discussing. Two minutes per difference, then vote.
  4. 45 min
    Converge, round two
    The designer redraws each screen from the winning elements while the other two watch and challenge. Add the empty state and the error state for every screen with a form or a list.
  5. 35 min
    Content pass
    Replace every 'Lorem' and every 'Button' with the real words. Real labels reveal half of the layout problems. The PM writes, the designer adjusts.
  6. 20 min
    Tech check
    Tech lead marks anything that costs more than a day or needs data the product does not have. Those marks go into the estimate, not into a redesign.
  7. 5 min
    Close
    Number the screens in flow order and export. The board is now the reference for the sprint; visual design starts from it, not from scratch.

Pitfalls

Afterwards

The numbered wireframes go to visual design and into the sprint as the definition of each story. Test them with three users before high fidelity if the flow is new; skip the test if it is a redesign of a known step.

Related workshops

Back to the compassAll workshopsVersion française