In our prototype-or-die world, a wireframe for apps 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.

A typical wireframe

What Is Wireframing?

Not a rough sketch drawn hastily on a piece of a 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, just a simple template of an idea created from scratch … No wonder the value of a wireframe is not so self-evident. Neither is it clear how much time and expertise building 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.

This is what discussing a wireframe with a client is often like.

Basic is a very proper word for a wireframe, although 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; it’s the absence of “decorations.” It turns out that app design wireframe, for example, doesn’t have the whole ‘design’ party, and that 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 creation of a mobile app wireframe.

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 make a wireframe for an app, web page or software—the one that requires understanding business, technology, marketing, user experience, and what’s the hardest—everything in between.

What Does It Really Take to Create a Wireframe for Mobile App?

1. 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 when brainstorming ideas for our own product. Therefore, here is an example of how wireframe app development can save the day.

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 app wireframe with the real users, it turned out that they didn’t want to spend their time staring at the screens of their phones and trying to make the “right” decision; they were fine with the options offered by the app. Since we discovered that, Stickerbox as we know it now has been officially born.

Screenshot of a Stickerbox interface: before and after

2. Understanding the market

Along with studying users, wireframing an app 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 future projects (software, websites, apps – whatever), you’ll inevitably have to keep up with the market trends while also 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 project. 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.

3. 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.

4. 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. How to wireframe an app which has a list of “the main features” that is larger than Santa’s list of both nice and naughty children? The austere design of wireframes encourages the accurate prioritization of the app features and content. It helps to concentrate on essential things first and, as a result, avoids overloading the app with redundant functionality.

5. 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

Conclusion

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.

discussing wireframes with a client

The rest of the dialog

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?

wireframes