How to Maximize Customer Satisfaction using Functional Wireframes

The Cone of Uncertainty

It’s the final demo of the project and the sponsor and all the stakeholders have assembled to see what the team has been working on for the past several months.?Buckets of digital ink have been spilled to document every requirement in detail.?The system is new and complicated, with many users, pages, and workflows. The development and the QA team worked hard to deliver each requirement exactly as specified.?The demo begins and the stakeholders are shown the various user scenarios.?Perhaps there are lot of questions, perhaps there are few, maybe a stakeholder brings up an alternate flow that would have been more efficient or asks why a specific dialog has been implemented the way it has.?“That is what we agreed on in the requirements” would likely be the response.

The demo does not go poorly, but it does not go great either.?Once it is over, there is a celebration and a sense of accomplishment, after all the stakeholders got what they requested. Unfortunately, the celebrations do not last very long.??Soon come more questions, suggestions, and change requests.?But it is too late to make any changes, the contract is nearly over.?Sometime later the team learns that the new system is not going to be adopted.??“Why?” they ask themselves.??

It turns out that the client and the team selected and committed to a solution too early in the project.?Because it was a new system, there were a lot of unknowns. And because the system was complex, it was hard to visualize all the pathways the users could take.?There were mockups, but they were static and focused on the graphic design of a few important pages.?A lot of effort was placed on writing text requirements, and not enough on validating them against the user experience expected by the stakeholders.?“The users won’t know what they don’t like until they see it”, goes a parallel of a popular saying.?In this case, the team fell victim to the Cone of Uncertainty.?Could they have used functional wireframes to keep their options open?

Choose Your Own Adventure

Wireframes are?visual design tools?used to communicate basic ideas like layout, navigation and user flows for a website, a mobile app or a desktop application.?They tend to be low fidelity (simple sketches or line drawings), contain placeholder content (dummy text, no images) and not a lot of design detail (no colors, fonts, etc.).??

Functional wireframes simulate interactive elements, like links, menus, and forms.?They can be drawn on?paper?or?sticky notes. They can be shuffled around or organized into a?flip book?to simulate user activity.?They can also be created using a variety specialized tool and stored in the cloud as an?interactive user experience.

Static?mockups?full of graphic design details or high-fidelity dynamic?prototypes?are both valuable tools, but should not be considered wireframes.?

Your Mind’s Eye

“A rifle clicked in the darkness. America’s feet hit the wagon box floor. Her hand closed on the stock of her rifle. Liberty stirred in her rocking cradle. America inched forward and parted the flaps that closed off the front of the wagon. A gibbous moon hung bright in the sky and reached fingers of light to touch the silver sagebrush.”?–?Janalyn Voight

Anyone who enjoys reading loves to imagine the characters and the world the author created.??But no two readers will imagine things in the exact same way.??In the example above, everyone will visualize a different rifle, wagon, or cradle.??Even with descriptive text, some people will have a hard time?visualizing?any details at all.

The same applies to technical writing.?No matter how detailed a requirement is, each reader will visualize a different menu, button, or a dialog, for example.?The purpose of wireframes is to help technical and non-technical team members communicate visually and align their expectations early on.?Functional wireframes specifically allow team members to take the same?journey?as the user. To quietly get out of bed, sneak around the cradle to the front of the wagon, and try to spot the intruder in the moonlight outside. From the user’s point of view, it is easier to see any potential issues. Is the rifle loaded? is the cradle in the way? Is the moon bright enough to see outside?

Functional wireframes also allow the stakeholders and the team to easily experiment with different options.??It is much cheaper to create?multiple versions?of a functional wireframe during refinement, than to change functionality after it has been developed.??Perhaps America will take her pistol instead of the bulky rifle. Maybe she will sneak out of the back of the wagon so as not to disturb the child.??And the writer could make the moon full to help her see better, or new, to give her more cover in the darkness.??In this metaphor, wireframes are like audience testing for a movie, or the director trying multiple different takes.?

Threading the Needle

With active wireframes, the team and the stakeholders can easily visualize the requirements, intuitively map out user flows and identify edge cases, and quickly evaluate multiple options to build consensus.??Functional wireframes are especially useful when planning a brand-new user experience or a particularly complex user flow.?Demonstrating them to the stakeholders (or better yet, allowing the stakeholders to dive in and play around) validates the team’s understanding of the planned work and elicits the?early feedback?necessary for avoiding dead ends, sunk costs, or a clunky product.??

Developing a set of simple, yet functional wireframes for each potential solution allows the team and the stakeholders to quickly identify what works and discard what doesn’t.?In this manner they can continuously adjust the overall product to give it the best chances of delivering the maximum possible business value.??

The Toolbox

https://balsamiq.com/?(my personal favorite)

https://www.lucidchart.com/?(also good for diagrams & process flows)

https://www.uxpin.com/?(dev)

https://www.axure.com/?(good for prototyping)

https://www.figma.com/?(focused on visual design)