How Should Product Managers Use Wireframes?
Wireframes are often overlooked as we sprint towards shipping new features out the door, but they can be an important tool for product managers to gather feedback, ideate quickly, and to prototype complex workflows without a lot of overhead.
I’ve been straddling the world of product management and UX design for most of my career and have found wireframes to be an important tool in the product design process. While they are a great way to visualize ideas and to create low fidelity prototypes, they’re also great for building alignment across teams.
What Is A Wireframe?
Balsamiq, creators of one of the most popular wireframing tools on the market, refers to a wireframe as “a schematic or blueprint” that helps you and your colleagues think about the structure of what you’re building.
Let’s dive into that definition a bit more closely. As a blueprint, a wireframe helps to establish the foundations of the final product—whether that's for web pages, mobile apps, or sophisticated web applications.
Rather than focusing on the finer details of your product’s user interface design, such as colors, fonts, and styles, the wireframe helps shift the focus to big structural considerations such as layout, information architecture, and high-level functionality. Design elements are of course important, but focusing on them too early in your process can distract you from spotting big structural problems that become headaches later in the product development process.
An important characteristic of a good wireframe is that it is low-fidelity, meaning that it can really be as simple as some boxes in a design collaboration tool, or even a drawing on a whiteboard or scribbles on the back of a napkin. Placeholders for many UI elements such as photos and text are used heavily as you’re focusing on the overall page layout, rather than the specifics of the content.
Wireframes don’t need to be perfected — they’re meant to be rough and nimble.
Who Uses It?
Wireframes make for a great communication tool that helps bridge the many multi-disciplinary conversations PMs find themselves in. Everyone on a product team including product managers, designers, and developers can all benefit from the wireframing process.
Rather than focusing all communication in words that can be misunderstood, a wireframe provides a quick way to see the intent you are aiming for. Show people what you mean, rather than just trying to explain it in text.
The more diverse your feedback is on the wireframe, the more ideas you’ll be able to evaluate—whether the product manager, designer, or developer creates the wireframe shouldn’t matter, as long as you are all using it to build collaboration.
Who’s Responsible for Wireframes?
In some organizations, finding out who might be “in charge” of creating the wireframes can create confusion. If your team has designers, I would recommend that you have a conversation about who should be accountable for the creation of the wireframe. Ultimately it should be a tool that everyone uses—it’s just another way to help communicate ideas clearly which creates stronger teams.
Not Just for Internal Stakeholders
As wireframes are seen as low-fidelity and unrefined, it can be easy to assume wireframes are just for internal communication purposes, but don’t forget that these are a great way to help drive conversations with customers, testers, and other external stakeholders.
Why Should Product Managers Use Wireframes?
Wireframes Simplify Your Communication
The old adage of “a picture is worth a thousand words” is quite right! Writing is often touted as a critical skill for product managers, and I absolutely agree! However, out of habit, it can often be our default method of communication even when simpler ways exist. Throwing together a quick wireframe can save you so much time you’d otherwise spend on wordsmithing.
Wireframes Help You Understand Complex User Flows
Wireframes provide you with a tangible way to explore ideas that you need to turn into user stories or requirements. Hidden constraints become more visible, new opportunities that might have been missed also present themselves when you start imagining a solution in a more tangible way.
Wireframes Are Cheap
A fantastic thing about wireframes is that they provide you and the product development team a very lightweight opportunity to test ideas without having to over-invest in high-fidelity design or production-quality code.
If you’re staring down something that looks complicated or even risky to build, take the cheap route and put together some quick wireframes to conduct some early usability testing. It can be all it takes to actually evaluate whether an idea is worth investing in or not.
Another Skill to Advance Your Career in Product Management
Having a strong understanding of user experience best practices is a key hard skill to have as a product manager, so getting comfortable with wireframes as another tool you can use is a great way to brush up on your marketable skills to advance your career in product management.
Your wireframing skills can show potential employers that you know how to move past concepts and into real products.
How Can Product Managers Effectively Use Wireframes?
User Testing and Stakeholder Feedback
Getting validation on your ideas early is always a good practice. Wireframes make ideas more tangible and make it easier for people to give you their feedback during your user research activities. This is true whether you’re gathering feedback from internal stakeholders, or talking directly to users.
Don’t let the fact they look unfinished hold you back from seeking feedback on them. People will appreciate you seeking their input in the early stages in the product design process.
Wireframes Bring Context to Your Specs
Many of today’s popular product design and wireframing tools have built-in integrations to link user stories and requirements directly to the most recent versions of your wireframes. Including visuals in your specs and user stories can help bring additional context to your words, so don’t forget to include them.
Best Practices
- Keep it simple: Effective use of wireframes means you’re not over-investing in making them look perfect—you shouldn’t be aiming for a high-fidelity wireframe. If you find yourself spending too much time adding polish in your wireframing process, take a pause and come back to it with a fresh mind. Remind yourself that you are trying to see how the big pieces of an idea can come together. The finer details can come later as you iterate.
- Encourage Others to Use Wireframes: It can be hard to describe the complexities of product workflows. Encourage others to show you what they mean using wireframes so you can help build that habit together. You may find it easier to talk through complex interaction design or technical problems when you’re all using a visual aid to guide the conversation in real-time.
What Wireframing Tools Can I Use?
My first recommendation is to check out what you already have on hand. Paper works when you just need to jot down a quick idea, but when you want to create something you can easily update and share with others, there is luckily no shortage of great tools.
With many pre-built UI elements that you can drag and drop, these tools save you a lot of time. Most also have templates you can start from so wireframing beginners or experts can get started quickly.
While some of the tools are specific to wireframing only, other UI design tools that are used to create more sophisticated interactive mockups can still be used. Here’s just a small sample of tools you can check out:
- Balsamiq: One of the oldest and most popular wireframing-specific tools is Balsamiq. They purposely keep their tools and visuals simple so that you can focus more on the functionality you are trying to focus on rather than getting distracted by styling.
- Figma: While Figma is a great tool for building complex visual design assets, it can also easily be used to build simpler layouts and wireframes.
- Miro: While not a design tool per se, Miro takes a much more free form approach to using a variety of tools from sticky notes to mind maps. With some wireframing capabilities baked-in, it can be an easy way to start creating your low-fidelity wireframes.
- Whiteboard If you are in the office, don’t forget that quick sketches on a whiteboard surrounded by your peers can be a quick and easy way to iterate through an idea! Are you remote? The tools mentioned above are great for virtual collaboration!
Related Read: 10 Best Wireframing Tools To Design Apps & Websites
Wireframes Can Make You A Stronger Product Manager
Being versatile in your approaches and the tools you use will always make you a confident and respected product manager. Wireframes are an important tool in your toolbox so don’t forget to use them to help communicate your thoughts and ideas, and to gather feedback early and often.
Approaching the wireframe as a communication tool removes the burden of who owns it, and focuses its energy on what matters most—building alignment across your teams, gaining and sharing feedback, and to bring clarity to those you work with.
For more insights and tips on developing your skills as a product manager, subscribe to The Product Manager newsletter.
Related Read: Product Manager In Digital Transformation: How To Make It Work
Also check out: Best Mockup Tools for Product Managers