I · Meaning

Two Steps Ahead

The second journey is the real test

Here's where I think most products quietly go wrong, and it isn't on the first feature. It's on the second.

The first journeys gave us a few screens. Now another arrives, and the instinct is to repeat the move: draw its path, derive its screens, add them. And then another. Six months later the product has forty pages, every one of them locally reasonable, and the person using it has to know which of forty pages holds what they came for.

What I try to do instead, every time a new journey comes in, is stop before drawing anything and look at what already exists. How does this path live inside the layout we already have? Sometimes the honest answer is that it's a button, on a screen that's already there, in a place the person already looks. The WhatsApp journey isn't a page; it's an icon next to the number. Sometimes it's a small tool that belongs on the feature's own page, next to the thing it acts on. Merging two contacts happens where the two contacts are, not in a settings screen three levels away. Sometimes it really is a new view, and then it should be one. But that's a conclusion, not a starting point.

The product that argued with its own premise

The clearest time this happened to me, the structure moved under a product I'd already shipped.

Meeny started as one idea: an AI agent that sits on a business's WhatsApp and answers its customers. When the agent couldn't handle something, it escalated to a person. Every journey I drew came out of that premise, and the first version of the interface came out of those journeys: it looked, more or less, like WhatsApp, because the agent was the one doing the talking and the people were there to watch and step in.

Then the first real businesses started using it, and I watched something I hadn't drawn. Every journey I draw is a guess until someone who isn't me uses the thing. I'd drawn these carefully, and they were still guesses. The owners weren't supervising the agent. They were competing with it. A customer wrote, the agent answered, and the owner, who knew that customer by name, who wanted to be the one to answer, was left reading a conversation that had happened without them.

The second journey was theirs, not mine: I want to answer first. Let the agent take over only when I'm not here. It contradicts the product. The whole premise was the agent first and a person only when it couldn't cope, and they were asking for the opposite order: themselves first, the agent only when they weren't there. We built it anyway, and it's the best thing in it. And once the human was first and the agent was the fallback, the screens stopped wanting to look like WhatsApp. The owner didn't need to watch every conversation as it happened. They needed to know what had happened while they were away. So the interface turned into a recap: what came in, who answered, what the agent handled on its own, and a daily summary email at the end of it. And because the agent now answered only when the owner wasn't there, it had to know when that was, so scheduling grew into a real part of the product: the hours when the agent is the one replying. That's what the new journey needed from the structure that was already there.

And the journey kept going. Today the ideal path for the person it serves most, the secretary at a business that uses it, doesn't open the app at all. She leaves the office and hands the shift to the agent. In the morning, a summary is waiting for her: what came in since she left, what the agent answered, what it did, and what's left for her. Then she works her day from WhatsApp on her phone, the way she always has. The most frictionless way to use the product is not to open it. Sounds backwards for a designer, I know. But it's Rami's phone call again. She already had a way to do this, and it worked. What I'd built first was a more complicated way of doing what she already did. Her only friction was the hours she wasn't there, so that's the only part the product had to touch.

Not for everyone, though. When we asked businesses what mattered most, one answered: ten sales reps answering from the same number. At the time, WhatsApp let one number be open on four devices, no more. For them, the app isn't a detour around WhatsApp. It is the solution.

Nothing about that was in the brief. It came from walking the second journey through the first building and letting the building change.

Two steps ahead

The two steps are the user's.

A person who opens the phone book is already somewhere in a journey. They're looking for someone by name. Or they have a number on a missed call and want to know whose it is. Or it's the company roster and they need the marketing director, whoever that is this quarter. Which one depends entirely on what the system is for, but in every case the screen they land on is one step in a path, and they already know what the next two are. Find her. Call her.

An interface that has thought two steps ahead knows that too, and has those steps there, clearly, where the eye falls. The number is something you can tap. The WhatsApp icon sits right beside it, because messaging someone who isn't in your own phone's contacts, with a reminder pulled from the system, is a miserable little procedure without it. The detail view opens on what the person came for, not on the record's metadata.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="262" viewBox="0 0 400 262" role="img" aria-label="the same contact twice: a list of labeled fields, and a view that leads with the name, a Call button and a Message button"><rect x="10" y="8" width="180" height="236" rx="8" fill="none" stroke="#d8d2c8" stroke-width="1"/><text x="24" y="30" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#8f887d" text-anchor="start">Contact</text><text x="24" y="58" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">First name</text><rect x="88" y="53" width="62" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="66" x2="176" y2="66" stroke="#eeeae3" stroke-width="1"/><text x="24" y="81" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Last name</text><rect x="88" y="76" width="70" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="89" x2="176" y2="89" stroke="#eeeae3" stroke-width="1"/><text x="24" y="104" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Phone</text><rect x="88" y="99" width="54" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="112" x2="176" y2="112" stroke="#eeeae3" stroke-width="1"/><text x="24" y="127" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Email</text><rect x="88" y="122" width="80" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="135" x2="176" y2="135" stroke="#eeeae3" stroke-width="1"/><text x="24" y="150" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Company</text><rect x="88" y="145" width="58" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="158" x2="176" y2="158" stroke="#eeeae3" stroke-width="1"/><text x="24" y="173" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Created</text><rect x="88" y="168" width="44" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="181" x2="176" y2="181" stroke="#eeeae3" stroke-width="1"/><text x="24" y="196" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Updated</text><rect x="88" y="191" width="44" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="204" x2="176" y2="204" stroke="#eeeae3" stroke-width="1"/><text x="24" y="219" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Owner</text><rect x="88" y="214" width="50" height="6" rx="3.0" fill="#e0dad0"/><line x1="24" y1="227" x2="176" y2="227" stroke="#eeeae3" stroke-width="1"/><text x="100.0" y="244" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#3a3631" text-anchor="start"></text><rect x="210" y="8" width="180" height="236" rx="8" fill="none" stroke="#d8d2c8" stroke-width="1"/><circle cx="300.0" cy="50" r="20" fill="#e0dad0"/><rect x="256.0" y="80" width="88" height="10" rx="5.0" fill="#c9c2b6"/><rect x="272.0" y="98" width="56" height="6" rx="3.0" fill="#e0dad0"/><rect x="232" y="120" width="66" height="30" rx="15" fill="#7a1f1f"/><text x="265" y="139" font-family="Inter, system-ui, sans-serif" font-size="10" font-weight="500" fill="#fff" text-anchor="middle">Call</text><rect x="304" y="120" width="66" height="30" rx="15" fill="#fff" stroke="#7a1f1f" stroke-width="1.2"/><text x="337" y="139" font-family="Inter, system-ui, sans-serif" font-size="10" font-weight="500" fill="#7a1f1f" text-anchor="middle">Message</text><rect x="256" y="162" width="90" height="6" rx="3.0" fill="#e0dad0"/><rect x="232" y="188" width="96" height="5" rx="2.5" fill="#eeeae3"/><rect x="232" y="204" width="70" height="5" rx="2.5" fill="#eeeae3"/><rect x="232" y="220" width="84" height="5" rx="2.5" fill="#eeeae3"/><text x="100.0" y="258" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">a record</text><text x="300.0" y="258" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">two steps ahead</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">The same contact. One shows what was stored. The other has the next two steps where the hand already is.</figcaption></figure>

None of that is styling yet. Two steps ahead is wireframe work: knowing what the person will reach for, and putting it within reach. Fitts (1954) measured why that matters: the time it takes to hit a target grows with how far away it is and shrinks with how big it is. Far and small is slow, and missed more often; near and large is fast. So the step the person is most likely to take next belongs close to where their hand and eye already are, and big enough to hit without aiming. That's true before anything has a color. How it looks like what it is, how close is close, what the eye finds first, that's semantics, proximity and hierarchy, and it's how the wireframe gets delivered. It comes after.

And when nobody has thought two steps ahead, you get the small absences every one of us has met. The contact that can't be deleted, because nobody walked the journey past "add". The notes feature with no way to edit a note. The number you have to copy, leave the app, paste into WhatsApp, and come back from. None of those are design mistakes in the sense of a wrong color. They're a journey that stopped one step too early.

Where this bends

Fitting each new journey into what already exists has its own failure, too: when "it's just a button" becomes an excuse. A new journey is often a button on a screen that's already there, as the phone book's WhatsApp icon was. Say that feature after feature, though, and the screen fills with things that each made sense on their own: an icon here, a menu item there, a toggle at the bottom. There is a point where a feature folded into an existing screen stops being a convenience and starts being clutter, and the honest move is the new view you were avoiding. I don't have a rule for where that point is. I have a feeling for it: the screen starts to argue with itself. Two things fight for the same spot, the thing the screen is for gets harder to find, and every new addition needs a sentence of explanation. When I feel that, I've learned to trust it.

And it fails when nobody writes the journeys down. A structure that grows needs a record of why it grew the way it did, or the next person, who may be you in a year, adds a page because they couldn't see where else it would go.