The Product Thinking Playbook Explained: Wireframing

Chris Johnston

Senior Software Engineer

When developing software, one of the key principles in agile is rapid feedback cycles. The faster the feedback, the easier, less expensive, and more extensive the possible changes. And more changes result in delivering better products to users. 

To obtain more meaningful feedback, it’s effective to provide people with something real to play with—instead of trying to discuss abstract ideas. In software development, this means that the more prototypes, spikes, and working code you can put in front of users, the more feedback you will get, and the better the final product will be.

This is why we advocate wireframes. 

Wireframes are low-fidelity images—sometimes as low-fidelity as markers on a whiteboard—created to provide a more concrete representation of how a particular part of an application will function and how users will interact with it and accomplish tasks. They provide stakeholders with something they can play with without the complexity and wasted resources required to program before an idea is definitively defined. Since they are low fidelity, they are fast to produce and change. 

Another advantage of wireframes is that it has been shown that people are likelier to provide feedback, especially negative feedback, when the design is low fidelity and looks unfinished. As the Nielsen Norman Group puts it,

If a design seems incomplete, users usually have no idea whether it took a minute or months to create it. They may better understand that you are indeed testing the design and not them, feel less obliged to be successful, and be more likely to express negative reactions. 

So, what is a wireframe diagram? Usually, it is a simple black-and-white diagram of what a page or screen will look like in a software application. It contains no images, logos, or anything fancy, and it offers no cool animations or interactions. Its form fields and buttons are simple rectangles, and it has no branding elements. The key word here is simple. However, even though they are simple, they should be real. In other words, the content of their pages should resemble real content and not be dummy text, such as Lorem ipsum

These days, wireframes are usually created using software such as Sketch, Figma, or Adobe XD. However, you can create them using basically anything. This flexibility is what makes them so useful. If all you have is a pen and a napkin, you can start drawing wireframes for your team to look at. In fact, the lower tech you go, the easier the images are to change and to talk about. And remember, one of the reasons for using wireframes is for the fast feedback cycles that they provide.

Probably one of the best wireframing exercises is to gather your team and a few users around a whiteboard to brainstorm. The whiteboard allows you to make almost instant changes, and because it’s erasable, no one is afraid of making suggestions, and, even better, no one is afraid of making mistakes.

Wireframes usually sit between wireflows and prototypes. Wireflow diagrams provide a tool that cross-disciplinary product development teams can use to think through all the little steps that a user must take to accomplish a task, while prototypes provide a means for testing the usability of the screens and flows that the team has developed. If you create wireframes in Figma or Adobe XD, it is trivial to turn them into a prototype. If you use Sketch, you can use a tool like InVision to create a prototype. And, once again, because they are low fidelity, it’s easier for users to offer opinions and critiques. 

A study was done with student potters, in which half of the class was asked to create the best pot possible, but only create one each. The other half of the class was instructed to make as many pots as possible as quickly as possible. At the end of the experiment, the group asked to produce quantity over quality produced the higher-quality pots. 

The ability to create something fast and then produce as many variations as possible is probably the greatest strength of wireframes. Remember that you want quantity over quality. If you’re looking to build better products, then the more ideas you can generate, the better you will understand the problem, and the better your final solution will be.


Subscribe to Our Newsletter

Join the Connected newsletter list to receive curated content that exemplifies our Product Thinking approach.

Related Posts