In our prototype-or-die world, a wireframe is a kind of a stepson, whose role in the design process sometimes remains ambiguous even to the fellow design squad. Let alone the purpose, even its look often leaves clients asking questions.
Not a rough sketch drawn hastily on a piece of napkin (inspiration never waits for the right time to come), not yet a full-fledged prototype. Plain, gray-colored, with Lorem Ipsum instead of text and crossed rectangles instead of images… No wonder the value of a wireframe is not so self-evident. Neither is it clear how much time and expertise creating a wireframe actually requires.
We at Yellow never skip the stage of wireframing when we start a new project. As true advocates of wireframes, we believe that they do and will remain a powerful and efficient tool for refining concepts, experimenting, testing and gathering user feedback at the earliest stage of product development. You’ll have the chance to see it for yourself in the coming chapters of this article.
However, our clients are usually not so enthusiastic about wireframes as we are.
Basic is a very proper word for a wireframe, though many would probably use it with a negative connotation, as in the case above. Actually, the dialog above uncovers the major reason why wireframes are so underestimated — that’s the absence of “decorations.” It turns out that the lack of “beauty” and design makes people think that the stage of wireframing is optional in the development cycle and can be safely skipped for the sake of saving time and money.
However, wireframes are not about beauty. Their primary purpose is to show what underlies good design and animation: functionality, information architecture, user flow, and navigation.
One may think of a wireframe as of a backbone. Just as the backbone holds together muscles and tendons, giving a human’s body strength and structure, a wireframe outlines the app’s interface, focusing on how it will function rather than on how it will look. That’s the reason why wireframes are so basic: unnecessary beautification only distracts attention from the essential components.
Stemming from the argument above is a typical question clients often ask us. Why is creating a wireframe so difficult then? Why does this “basic thing” require so much time and effort, and — what is even stranger — the whole group of professionals?
The answer is as simple as the wireframe itself.
To create a wireframe is to create a product.
Sure, there’ll still be a lot of engineering ahead, but given proper rigor, the skyscraper is usually not much worse than the blueprint. That’s why it takes a truly holistic approach to create a wireframe — the one that requires understanding business, technology, marketing, user experience, and what’s the hardest — everything in between.
So, what does it really take to create a wireframe?
Understanding the audience
The biggest mistake most clients are prone to is associating their own needs with the ones of their users. No doubt, there is a huge temptation to think that all people look at the world through the same lens. However, it’s a sure way to fall into a trap of empty assumptions.
To eliminate guesswork from the development process, we encourage our clients to get to know their users better and figure out if the future product is what they really need. Wireframing helps a lot with the task as it has proved itself to be one of the greatest tools for testing assumptions.
Showing wireframes to potential users for review and comments is the easiest and quickest way to validate a product concept. From the way users interact with the product wireframes, it becomes clear if the app-to-be is going to spark interest among the target audience, or if it’s able to deal with the user problem in a manner.
Besides, wireframes can be further used as an unflagging source of usability insights. As users don’t get distracted by their design, they focus on the layout, functionality, and navigation in terms of convenience and ease of use, providing the engineering team with detailed feedback on the future app’s usability. During further iterations, the testing–getting feedback–refining cycle is repeated up to the moment when the users’ pains are fully covered.
That’s the algorithm we proved working while brainstorming ideas for our own product.
Yellow’s case study: Stickerbox
When we just started working out the concept of Stickerbox, we weren’t sure long enough what the app should be. It took us several wireframing iterations to find ourselves on the right track.
Our first assumption was that users would like to make fully customized stickers out of their photos. That’s why the earlier versions of Stickerbox included the functions needed to tweak every little detail.
However, as we further tested the wireframes with the real users, it turned out that they didn’t want to invest any time or effort; they were fine with the options offered by the app. Since we discovered that, Stickerbox as we know it now has been officially born.
Understanding the market
Along with studying users, wireframing also requires thorough market research. Sometimes, in an aspiration to bring the product to life asap, clients tend to ignore the real needs of the market, while wireframing encourages to constantly keep an eye on them.
While validating ideas for the future app, you’ll inevitably have to keep up with the market trends, asking yourself a bunch of critical questions. Has the problem ever been tackled before? Was it successful? If no, why? If yes, are there still issues uncovered? And the most important one — if the problem hasn’t been tackled, does the market for a future product truly exist?
Finding answers to the above questions allows identifying if there is a market niche for the future app. And if it turns out no, pivoting towards an unoccupied niche at the wireframing stage is a no-brainer compared to the major upheavals that may follow at the later stages of the development cycle.
Experimenting
Finding the right concept for the product always takes time and effort, and the first idea coming to mind is not always the best one. Besides, the market is flexible and changing all the time. That’s why we should always be ready to experiment — read: admit that our assumptions are wrong and act accordingly.
A wireframing stage is perfect for experimenting as it imposes no restrictions on the team. As we mentioned in the previous chapter, testing, refining and rejecting concepts at the wireframing stage costs literally nothing compared to the cost of making even minor changes to the functionality during the engineering phase. Therefore you can try any ideas that come to your mind until the right one is found.
Simplifying
The golden rule we encourage our clients to stick to is “one app — one key feature.” Adding more features to the app after its core functionality has been defined sometimes makes the app worse. Sounds like a paradox, but good products are often so good because they DON’T include many things.
Wireframes help keep this argument in mind. Their austere design encourages accurate prioritization of the app features and content. It helps concentrate on essential things first and, as a result, avoids overloading the app with redundant functionality.
Managing budget
While wireframing itself doesn’t require massive money injections, it’s literally the best investment at the project start. First and foremost, it helps outline further development stages as it allows to estimate how much money and time each stage will take, and what technology and design kit will be required throughout the development cycle. At the same time, in case you have to deal with strictly fixed funds, it helps fit the future app into the existing budget by means of well-calculated trade-offs.
What kind of team is required to create a wireframe?
Wireframing indeed requires thoughtful teamwork, which can’t be simply boiled down to a designer’s responsibility. So we at Yellow involve a whole bunch of professionals in the process:
Designer — for visualizing concepts
CTO — for making sure the concept is feasible from the technology perspective
Product manager — for putting everything together and identifying bottlenecks
Product owner — for getting insights into the client’s wishes, local market, local budgeting, etc.
Business analyst — for identifying user pains and turning them into business goals
As you see, wireframing is indeed a complex process, the value of which is not always clear at the first sight. Only after we’ve gone through all the stages of creating wireframes with clients do, they also begin to see the true value behind them.
Wireframing is a big journey, but the good news is that in the end, you’ll find yourself with a perfectly polished concept that is very likely to take off. We think this makes wireframing worth every minute and dollar invested in it. Do you?
Originally published at yellow.systems.
