post

Footer About

Footer Get Involved

Footer Links

Mind the Product

General

Product Unplugged Episode 3 with Pierce Healy

Product Unplugged Episode 2 with Lorilyn McCue

Product Strategy

Building Product Teams

Diversity and Inclusion

Digital Transformation

Artificial Intelligence (AI) & Machine Learning (ML)

Product Leadership

Product Management Career

Product Ethics

Minimum Viable Product

Enterprise Product Management

OKRs

Customer Research

Hypothesis and Testing

Business Strategy

User Research

👩‍🚀🚀   Live now for MTP members: <a href="https://mtp2017stg.wpengine.com/membership/#events" style="color:#FFFFFF;text-decoration:underline;">Driving Innovation AMA with Tendayi Viki</a>

Roadmaps: Break the rules without breaking the principles

Got questions about your product career?

Product roadmaps vs data – Jeremy Levy on The Product Experience

From engineering to product management at Google

Mind the Product joins Pendo

Leon Barnard is a Designer, Writer, and Educator at Balsamiq. He uses his 10+ years of experience as a UX designer to teach user interface design basics and wireframing to Balsamiq's audience of mostly non-designers.

Education Team Lead

Leon Barnard

<p>Wireframes are often underused in the product development process but, as I&#8217;ll explain in this post, they can be invaluable in facilitating communication and knowledge transfer.</p>
<p>Using pen and paper to sketch out concepts and designs for software began with the birth of the graphical user interface (GUI) in the 1980s. It was a simple yet powerful technique used by visionaries, makers, and salespeople to communicate ideas for products and features that didn&#8217;t yet exist.</p>
<p>But over time, as digital user interface design tools have proliferated and grown in complexity, UI design has become the realm of dedicated designers, often taking away the ability of big thinkers and product people to show their own ideas. Yet one of the early digital design techniques, <a href="https://balsamiq.com/learn/resources/articles/what-are-wireframes/" target="”_blank”" rel="”noopener” noopener noreferrer">user interface wireframes</a>, persist because <span style="font-weight: bold;">they can be created (and understood) by anyone</span>.</p>
<figure style="width: 898px" class="wp-caption aligncenter"><a href="https://mtp2017stg.wpengine.com/wp-content/uploads/2020/01/a904f399-a1ca-4b1a-b91e-c5410b0b46f2_sHZXaQoZIr2FCrhBXHSiDcJL0wdWJfG9u5lhQ66YnjXL6kGomtdhVs2AHbiqCPnPmV_uxzI4tNf3XRq7BVkZJ7lr3sPgD_T4mvKrvFprqPwzos1nq3PzYxb3FMFl4TdFPZiTaM3r.png"><img loading="lazy" decoding="async" src="https://mtp2017stg.wpengine.com/wp-content/uploads/2020/01/a904f399-a1ca-4b1a-b91e-c5410b0b46f2_sHZXaQoZIr2FCrhBXHSiDcJL0wdWJfG9u5lhQ66YnjXL6kGomtdhVs2AHbiqCPnPmV_uxzI4tNf3XRq7BVkZJ7lr3sPgD_T4mvKrvFprqPwzos1nq3PzYxb3FMFl4TdFPZiTaM3r.png" alt="Wireframes are used to translate requirements and ideas into a visual language " width="898" height="600" /></a><figcaption class="wp-caption-text">Wireframes are used to translate requirements and ideas into a visual language</figcaption></figure>
<h2>Wireframes as a Tool for Product Managers</h2>
<p>The purpose of wireframing is not to draw a picture of a user interface for its own sake.  Wireframing is not so much a technique for creating as it is for <span style="font-weight: bold;">translating requirements and ideas into a visual language</span> that can be easily understood. This translation role, conveying and explaining the needs of the customer to a software team, is a big chunk of what product managers do.</p>
<p>Let’s look at two specific ways that wireframes can help product managers perform this role more effectively.</p>
<h2>Wireframes as a Communication Tool</h2>
<p>You&#8217;ve probably heard stories of successful product ideas that began with a proverbial sketch on a napkin. The spark that happens there is ignited when <span style="font-weight: bold;">communication happens between the right people</span>, such as an idea transferred from thinker to builder or introduced by innovator to connector.</p>
<p>We are often told that the best way to communicate is to show instead of tell. Or that a picture is worth a thousand words. The instant &#8220;Oh, I get it now&#8221; reaction that wireframes can produce is the best reason for product managers, who may rely heavily on written and spoken communication, to use them.</p>
<p>Wireframes are the solution to the problem of developers not reading giant functional specification documents or zoning out during sales and marketing meetings. It’s a concrete way to get the same picture in everyone’s mind.</p>
<h2>Wireframes as a Thinking Tool</h2>
<p>Once you start to see wireframes as a communication tool more than a design tool, it can be easy to see them as only that. But why, then, do they generally look rough and unfinished? Wouldn&#8217;t it be better to present design proposals that look like the final product you want to create?</p>
<p>Going back to the idea of drawing on paper, think about a notebook or sketchbook that someone carries with them at all times. This conjures up visions of the owner jotting down notes or quick chicken scratches at times that would otherwise be inopportune &#8211; waiting in line, riding on the train, walking up stairs. Putting the pen to paper <span style="font-weight: bold;">reifies the thought</span> and then creates a jumping off point to continue it.</p>
<p>The rough nature of wireframes has a similar effect. Working with a tool that evokes sketching on paper encourages exploration and open-endedness. How often do you have an incomplete thought that you don&#8217;t want to lose? Simply <span style="font-weight: bold;">making visible the seed of an idea helps you see the next step</span>. Wireframes are a tool for capturing incomplete thoughts as well as for feeding them.</p>
<p>Wireframes can encourage product managers and other non-designers to <span style="font-weight: bold;">be creative at just the right time in the process</span>, when the problem is clear but before an optimal solution has been found.</p>
<h2>5 Steps to Great Wireframes</h2>
<p>There is a big gap between knowing why, as a product manager, you should wireframe and how to actually do it. A good start is to break it down into distinct phases.</p>
<h3>Step 1: Articulate</h3>
<p>My top tip for doing design of any kind is to <span style="font-weight: bold;">know the problem that you&#8217;re trying to solve</span>. And the biggest mistake I see is when people <span style="font-style: italic;">think</span> they know it, but actually don&#8217;t, or don&#8217;t know it well enough. The solution to this is to take some time to <span style="font-weight: bold;">articulate the problem before you do anything else</span>.</p>
<p>Wireframes can be a great repository for this information, simply because they exist somewhere between a notebook and a visual design tool.</p>
<p>Here&#8217;s the question template that we like to use at <a href="https://balsamiq.com/" target="”_blank”" rel="”noopener” noopener noreferrer">Balsamiq</a>:</p>
<ol>
<li>Who will be using it?</li>
<li>What is their goal? What problem does this product or feature solve for them?</li>
<li>What are some of the actions or operations they are likely to perform? (You can try drawing a diagram or flowchart for this if it helps.)</li>
</ol>
<p>Here&#8217;s an example:</p>
<p><a href="https://mtp2017stg.wpengine.com/wp-content/uploads/2020/01/a0447ace-cb3e-414c-b56a-cec9e5aca076_rYG8u6ZgclFvxUcd-_zcb_V4kokEXi9W1MXjvjWL6XCxhfrH3knUH6E-z4OjOcuN637tiZReruCMGv9N4bAZSmooc7ETYi2De23SGfnOk3425KH7WJwcwl2sRNz1tNGaDJuYhBF.png"><img loading="lazy" decoding="async" class="aligncenter" src="https://mtp2017stg.wpengine.com/wp-content/uploads/2020/01/a0447ace-cb3e-414c-b56a-cec9e5aca076_rYG8u6ZgclFvxUcd-_zcb_V4kokEXi9W1MXjvjWL6XCxhfrH3knUH6E-z4OjOcuN637tiZReruCMGv9N4bAZSmooc7ETYi2De23SGfnOk3425KH7WJwcwl2sRNz1tNGaDJuYhBF.png" alt="" width="926" height="521" /></a></p>
<p>This might not look like a wireframe, but it’s often the starting point for creating them. Time spent answering these questions will be more than made up for when you start designing.</p>
<h3>Step 2: Generate</h3>
<p>Time to start the process of making the wireframe. But don&#8217;t think of it as a beginning-to-end construction process. I use the word &#8220;generate&#8221; over &#8220;make&#8221; or &#8220;create&#8221; because it makes me think of ideas rather than tangible products. The goal here is to <span style="font-weight: bold;">generate visual ideas, not create the final product</span>.</p>
<p>So free your mind, take off your decision-focused PM hat, get into a creative zone, and start adding shapes and controls to the canvas. If you get stuck, don&#8217;t spin your wheels, just move on. Try a different tack or a new concept entirely.</p>
<p>The result of this should be <span style="font-weight: bold;">a mess of half-baked concepts that nobody but you will understand</span>. That&#8217;s what success looks like here! This result should help you see which solutions <span style="font-style: italic;">won&#8217;t</span> work and which ones are worth investigating more.</p>
<p>Here are four variations on a mobile to-do app:</p>
<div class="row gallery">
            <div class="col-md-6">
                <a data-gallery="gallery" href="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/c8b6a39f-76f4-4623-9ee6-ba861f03ca14_RAA60uHeHXNfg4rEqmBN7mH8pUPStg6SBrimvjV4mhV786daJEJ4YigPwjz3ZVss7iJCtwz1Xz9PKIP4Kwmr1X98oHIPmZ06q2x5-uj-VDnItH8GlvQ1LMac7-koQ0rxkLgcyqRu.png">
                    <img decoding="async" src="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/c8b6a39f-76f4-4623-9ee6-ba861f03ca14_RAA60uHeHXNfg4rEqmBN7mH8pUPStg6SBrimvjV4mhV786daJEJ4YigPwjz3ZVss7iJCtwz1Xz9PKIP4Kwmr1X98oHIPmZ06q2x5-uj-VDnItH8GlvQ1LMac7-koQ0rxkLgcyqRu.png" alt="" class="img-responsive">
                </a>
            </div>
            <div class="col-md-6">
                <a data-gallery="gallery" href="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/todo-app-2.png">
                    <img decoding="async" src="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/todo-app-2.png" alt="" class="img-responsive">
                </a>
            </div></div><div class="row gallery">
            <div class="col-md-6">
                <a data-gallery="gallery" href="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/4c567a48-090b-44c0-8200-e2f76aa16086_5lAHbRLEMs-ft_Agfxl5w-IxLNPliF9UXJM9RTfQafy7BSOHp4g_A2KU36Q16ZTEwSKnLKISIUxZABGuuNpeq8S0O9HKLMO9DbSjuuBMBOHsUg6g83HQuELEM9ZXAj08qeIhqpzr.png">
                    <img decoding="async" src="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/4c567a48-090b-44c0-8200-e2f76aa16086_5lAHbRLEMs-ft_Agfxl5w-IxLNPliF9UXJM9RTfQafy7BSOHp4g_A2KU36Q16ZTEwSKnLKISIUxZABGuuNpeq8S0O9HKLMO9DbSjuuBMBOHsUg6g83HQuELEM9ZXAj08qeIhqpzr.png" alt="" class="img-responsive">
                </a>
            </div>
            <div class="col-md-6">
                <a data-gallery="gallery" href="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/c1cdf17e-2f35-4303-a702-6335f4f7378c_3QuvB5MYoTJW_kzWHIWGWDzGqnkJOCZmZn2VuGzBuxE-mezwIfO0NOxTEK9pvJcCeKYF0_mXtramY2FRVeFRZVJEyvpib8N1gLq9WinTZrV8sPC2R3SdYPUguFdl4VMj2MZhJ-n6.png">
                    <img decoding="async" src="https://staging.mindtheproduct.com/wp-content/uploads/2020/01/c1cdf17e-2f35-4303-a702-6335f4f7378c_3QuvB5MYoTJW_kzWHIWGWDzGqnkJOCZmZn2VuGzBuxE-mezwIfO0NOxTEK9pvJcCeKYF0_mXtramY2FRVeFRZVJEyvpib8N1gLq9WinTZrV8sPC2R3SdYPUguFdl4VMj2MZhJ-n6.png" alt="" class="img-responsive">
                </a>
            </div></div>
<p>&nbsp;</p>
<h3>Step 3: Iterate</h3>
<h3><span style="font-family: Merriweather, serif; font-size: 1rem;">The next step is to reach out and refine.</span></h3>
<p>First, call in the other part of your brain, the less creative, more goal-driven part. You can put your PM hat back on. Let it help you refine and improve the ideas with potential. Add those few extra details that help make it tangible, such as the actual names of buttons or menu items.</p>
<p>Next, bring in a colleague or partner who knows the problem and/or the users. Explain your ideas (you should still have more than one at this point, ideally 3-5) and talk through the workflows with them. Let it be a cooperative process where you use your shared knowledge to imagine the end user using these screens. Capture any hiccups or missing pieces and fix them there or after you&#8217;ve gone through the whole thing together.</p>
<h3>Step 4: Communicate</h3>
<p>Wouldn&#8217;t it be great if we could just draw a product on the screen and push a button to make it real? Or if we had the skills to expertly conceive, design, create, and distribute software all by ourselves? If anyone claims to do all these things well, be wary.</p>
<p>In nearly all cases the next step will be to communicate your fleshed out idea to the person or team who will be building it (and possibly another team who will be marketing it).</p>
<p>If you work for a small company, the process may be similar to the previous step, where you walk the developers through your idea, step-by-step. Regardless, you&#8217;ll probably want to invest some time into making your solution idea easy to understand by people not intimately familiar with the users and their goals.</p>
<p>This can be done by adding notes and annotations to your wireframes to explain specific use cases and scenarios and by adding links between screens to demonstrate the intended workflow.</p>
<p><img decoding="async" class="aligncenter" src="https://mtp2017stg.wpengine.com/wp-content/uploads/2020/01/6ba0298d-9e45-4f5c-9188-fbdcd3ca60dd_lpkfBVceOMy7WbBYOHm69ML5d4uuJgnpjDTlMw3-Ma4CVqnC8_NeHp0YpToqOcfVUPJvBVVmOcimduARMSlxHEOcXnGmdfWlNWae2Tl6H4KtFAW6gFzQyQz2zGhCwTVO4soyfrEx.png" alt="" /></p>
<h3>Step 5: Validate</h3>
<p>Depending on your company&#8217;s approach to shipping, you may have several validation stages in your software process already, such as QA testing or even formal user testing. Use them here too.</p>
<p>The reason that you want to validate your wireframes is that you can <span style="font-weight: bold;">catch potential problems early</span>. Fixing problems during the design phase is <span style="font-weight: bold;">much</span> faster than fixing them during development.</p>
<p>Most critically, there are <span style="font-weight: bold;">two key things to validate</span>:</p>
<ol>
<li><span style="font-style: italic;">Does this actually solve the problem my users are having?</span></li>
<li><span style="font-style: italic;">Can this be built?</span></li>
</ol>
<p>The danger in &#8220;playing designer&#8221; is that you can adopt the habits that designers are negatively associated with, namely designing things for yourself rather than considering the full context.</p>
<p>So, <span style="font-weight: bold;">make sure that you haven&#8217;t overlooked who you&#8217;re designing for</span> and that you haven&#8217;t become too attached to your wireframes just because you created them! A feature that doesn’t solve a real problem can&#8217;t be fixed in a software update.</p>
<p>Second, ensure that you haven&#8217;t created an idealized vision that can&#8217;t be coded in the allotted time frame or with the current technology stack. <span style="font-weight: bold;">Show your wireframes to the developers</span> and do a reality check with them. If they push back, you may need to scale it back a bit in order to get the most important functionality in the hands of your customers sooner.</p>
<p>You can always add the remaining features later. The great thing is that you already have the design for them!</p>
<p>If you have the luxury of a user research or user experience team, you can have them test the usability of your design using informal/discount usability testing methods such as (digital) paper prototypes, 5-second tests, or hallway testing.</p>
<p>In short, the beauty of wireframes is that they can be easily understood by anyone, so don&#8217;t be shy about showing them to all the departments or teams that care about the product you&#8217;re designing. Show them that you recognize their role in the process. If nothing else, they&#8217;ll appreciate not being surprised when they see the real thing on their screen for the first time.</p>
<h2>Summary</h2>
<p>Wireframes are often misunderstood and underused in the software process. They occupy a grey area that can seem too artsy for business people and developers and not detailed enough for designers. Yet one of the main reasons why so many software solutions fail is the <span style="font-weight: bold;">silo-ed nature of most tools and processes</span> used by these roles. Tools that can <span style="font-weight: bold;">bridge these gaps</span> are desperately needed.</p>
<p>Wireframing is a technique that <span style="font-weight: bold;">facilitates communication</span> and knowledge transfer in order to help create better solutions and experiences for the end user. And by following a repeatable recipe for creating them, they are an easy and effective way for product managers to do what they do better.</p>
<div class="g g-21"><div class="g-single a-75"><a class="gofollow" data-track="NzUsMjEsMSw2MA==" href="https://mtp2017stg.wpengine.com/product-management-training/public-workshops/"><img decoding="async" src="https://mtp2017stg.wpengine.com/wp-content/uploads/2021/10/General-Training-Level-up-FOOTER-scaled.jpg" /></a></div></div>

Wireframes Aren’t Just for Designers

Leon Barnard

Read more

Comments