Wireframing User Flows Tips

Before the era of Google Maps, I remember I used pen & paper to explain my home location to friends.

Interestingly, I find that exercise had a lot in common with wireframing user flows for a product.

‍

Tips:

1. Start from the familiar

For a map to be effective, the reader needs to be familiar with the starting point.

Similarly, a wireframe journey should start from a screen that previously existed, NOT from the first screen of the new flow.

‍

2. Don't go off scale

I'd often redraw my map when it overflowed beyond the paper I was working on.

If you wire frame without the right device resolution, it won't translate well during implementation.

‍

3. Paper first

Using a pencil for maps allowed for quick fixes.

Similarly, I prefer drawing flows on paper first.

Sure, you may be adept on your digital tool but it can push you to fix alignments, resize etc. - something you can skip initially.

‍

4. Labels matters

I couldn't afford to label key landmarks on my maps with Lorem ipsum otherwise the reference was lost.

Similarly, headlines, CTA, tool tips etc. text on wire frames matter, even if they aren't perfect.

‍

5. The shortest path

I'd always sketch out the quickest way to get to my place. When designing wire frames, aim for the leanest path to value.

‍