One of the important jobs of a product owner is to communicate how a product or feature will work. It is vital that stakeholders, developers and designers understand what is being built. One of the most effective ways of doing this is by creating wireframe simulations of functionality.
The ability to show how a piece of functionality works for users is a valuable tool in the Product Owners box of tricks. It serves several functions:
Showing the development team what we are creating
Developers can use the wireframes to work out the data structure of the page. This allows them to plan API calls and data loading sequences. It helps to inform them of the complexity of the data they need produce for the front end.
Informing the design
The purpose of the wireframes that I create are to give an accurate indication of what will be on the page. It also shows how the user interaction with the pages will work. It is not to show the design of the pages or give an accurate representation of the look and feel of the functionality. The designer can however, use these wireframes to go to the next step and work up a prototype. The wireframe will help the designer to ensure that they have included all necessary elements.
Ironing out any issues or interface dead ends
Wireframes can be very useful for working out the user flow of an interface. You can link up various interface elements to show what happens when a user chooses a particular route. If you cover all possible options you can ensure that there are no choices that lead to dead ends or ambiguous pages.
Demonstrating to stakeholders
One of the most valuable reasons for producing wireframes is to show proof of concept to stakeholders. This can be internal business stakeholders or representatives of a client. Showing detailed prototypes or designs can lead to viewers concentrating on the appearance of the software, rather than the functionality being demonstrated.
Using sketchy, stylised wireframes clearly communicates to the stakeholder what they are looking at. It is clear that they are trialing a simulation of the system, not a representation of the interface. This means they are more likely to concentrate on whether the wireframe is showing the required functionality. Hopefully you are unlikely to get comments about colours and typefaces at this stage.
Avoiding ambiguity and feature creep
Wireframes are vital to pin down exactly what the functionality will cover. This will help to manage expectations as it describes exactly what is to be delivered. It should prevent disagreement about exactly what was expected to be created. The sign-off of a wireframe means no uncomfortable conversations after comments that “I thought it was going to…”
How to create wireframes
My tool of choice for this task is a great piece of software called Balsamiq Wireframes. It allows you to create ‘sketchy’ looking wireframes. This helps to describe how a software will behave, not how it will look.
Balsamiq’s drag and drop interface contains hundreds of interface building blocks that you can combine. Form elements, containers, icons and other objects are used to create pages that simulate how an application might work. It shows familiar controls but in a bland, hand drawn style so that the look and feel becomes irrelevant.
A sequence of pages can be simply linked together. When the wireframe sequence is exported as a PDF, the links allow a user to click through and use the wireframe as if it is a functional interface.
Over the years I’ve found it a vital tool to help to inform and manage the expectations of stakeholders.