User experience
Flows beforescreens. Wordsbefore pixels.
How I get from a vague problem to a screen someone can act on. The artefacts below are samples drawn for this site, using the cases in the work section.
Method
Who decides, under what pressure, with what information.
Interviews · field visits · analytics read
The one decision the screen exists to support.
Problem statement · success measure
Flows before screens. Words before pixels.
Flow · wireframe · prototype · final copy
A spec engineers can build from, with every state drawn.
States · acceptance criteria · handoff
What people did, not what they said.
Usability rounds · instrumentation · review
Journey map
Where the anxiety actually is.
“Did I eat too late? Who drives me?”
Design response. One next step at a time. Confirm the ride home.
User flow
The flow is the design. The screens are the evidence.
Send money, step by step. Click any step, switch the path, or press play and watch the point walk the flow. Every step shows its screen and the call behind it.
Start
- The customer’s money, and one obvious way to move it.
- One primary action. Everything else waits.
- “Send money”, not “Transfers” or “Payments”.
- No connection: show the last known balance, and say when it was true.
Who’s getting it?
- A short list of people they already pay, and a way to add someone.
- People, not account numbers. Most payments are repeats.
- “Who’s getting it?”, not “Beneficiary”.
- No match: offer “Someone new” instead of an empty screen.
New person?
- Nothing. The app quietly checks whether this person has been paid before.
- The only branch in the flow exists to protect the customer.
- No words at all. A question the customer can’t answer shouldn’t be asked.
- If the check fails, take the safe path and confirm the name.
Confirm name with bank
- The name their bank holds for that account, beside the name they typed.
- Slow the customer down exactly once, at the moment fraud happens.
- “Their bank says this account belongs to…”
- No match: say so plainly and stop. Never soften a mismatch.
How much?
- One number, and where it comes from.
- The amount is the only big thing on the screen.
- “What it’s for”, not “Remittance information”.
- Over the limit: say the limit, and offer the largest amount allowed.
Review, in one sentence
- The whole transfer as one sentence, then the details.
- If the sentence is hard to write, the flow is wrong.
- “You’re sending $250.00 to Sam Rivera. It arrives today.”
- Anything changed since the last step: show what, and ask again.
Sent
- Proof, and what happens next.
- End on certainty. Money anxiety starts after the button.
- “On its way” until it has landed. Then “Arrived”.
- Held for review: say so, say how long, and say who to call.
Wireframe to final
Same decisions. More confidence.
Drag the handle. Structure and words are settled in grey, long before colour arrives.
Review
Eight questions every screen has to pass.
- The screen names the decision it supports.
- The scariest state is the clearest one.
- Every number has one meaning and one place.
- The final string is written, not lorem ipsum.
- Errors say what happened, why, and what to do next.
- The primary action is reachable with one thumb.
- Nothing depends on colour alone.
- It works with motion off and a keyboard only.