Some things can’t be wireframed

Main illustration: Cory Loven

Research and analysis help show you the workflows, usability principles ensure it’s clear and intuitive, but how do you get to delightful? You’re on your own there.

What wireframes discourage

The grayscale box-and-line nature of wireframes discourages emotive design, eschewing it for hierarchy, structure, and logic. That’s correct when your goal is to deliver logical easy-to-follow experiences, but when you’re trying to make something fun, memorable, remarkable, or thoroughly engaging, it’s best to cast them aside.

It’s unlikely that a designer, least of all a consultant, would be comfortable presenting something that looked like this:

Yet that’s precisely what’s behind popular sites such as the following:

The nature of deliverables is that they have to do something, usually to justify their cost/time. If someone was to wireframe a site for any of the above sites they couldn’t just hand in an empty square and say “Insert Really Emotive Audio Visual Piece Here”.

So they’d analyse the benefits, summarize the case for calm.com, and produce something more like this:

The whole project would take a different turn because hundreds of ideas have been dismissed. The fact that wireframes can’t play a sound, show a video background, or show interactions effectively further limits the depth of the experience.

Wireframes restrict your vision for components, as they’re just re-usable blocks. They tell you, for example, that all text editors look the same. If you accept these limits you’ll never create something like Medium’s text editor. In fact you’d skip past that opportunity without even noticing it. The limits of your stencils become the limits of your creativity. Obstacles upstream propagate downstream.

Some Products Can’t Be Wireframed

Keezy is a iOS app that lets you create tunes. It’s an 8-track, if you know what that means. You record 8 tracks per board, and you can play tracks in parallel or consecutively. The “UX Approach” here would have you follow previously established patterns, and so-called best practices. You’ll assemble it from pieces in your toolbox:

And then you’d output wireframes that are usable but without even a hint of delight. Something like this:

But Keezy doesn’t look this this. Keezy’s primary interface is just 8 big loveable rectangles daring you to play. And it works beautifully.

The point isn’t that you should download Keezy. The point is that, much like there’s a difference between synthesis & analysis, there is a difference between creation & assembly.

For some design work you need to minimize friction: you can’t introduce new concepts or break any conventions. But when you’re shooting for fun, remarkable, memorable design, you need to take a look around and say “Let’s show the world something they haven’t seen before”.

It’s messy, risky, and difficult. You’ll hear the siren call of your stencils and patterns, begging you to return. Using those you can make progress in hours; they’ll rescue you from a blank canvas with their pre-defined headers, footers, buttons, and menus.

You’ll have cynics and doubters. “No one will bother to learn this app”. “This’ll bomb in usablity testing”. “Why can’t we just do what the other apps do?”

You’ll be told that this crazy idea will never work. Until it does.


Want to read more of our product best practices? Download our free book, Intercom on Product Management. It’s recommended by folks like Ryan Singer, Hunter Walk, and Dharmesh Shah.