Spread the love

How often have you found yourself in a discussion when you’re trying to explain a feature to your designers? Or you were simply brainstorming ideas to improve on an existing feature? Did you ultimately put it down on paper in the form of a design or what you thought the feature should look like? If so, you already know how to make wireframes!

What are wireframes?

A wireframe is a schematic, a blueprint to help you and your programmers and designers to think about the structure of the feature/software you’re trying to build. The purpose of a wireframe is to provide a visual understanding of the product in the early stage before the next creative phase begins. Just like the blueprint of a building, a wireframe describes specific details and provides an overview of the project (feature). 

A quick guide to wireframes
A simple wireframe

Well, now that we understand what wireframes are, let us try to understand “why” would you actually make a wireframe?

Why are wireframes important?

Wireframes help you answer 2 questions:

  1. What are some ways in which you solve a problem the customer is facing?
  2. How do you know if your solution actually solves their problem?

Wireframes tell you how to prioritize content, what actions you intend the user to take on the screen, all features and functions you wish to show on the screen and how you intend to transition between two screens. They give you a clear picture of the use cases, screen elements and visual brand elements.

Once you have your wireframes ready, you’ll show it to others in order to validate and improve your ideas. Ideally, your wireframe should help others understand and visualize your ideas. Since wireframes are simple to make and used in the early design process, it is easier to implement feedback and changes to wireframes rather than the final mockup.

Here are a few reasons why wireframes are important:

  1. Wireframes are simple to make.
  2. They also allow you to map the problems and functionality on each screen and catch issues at an early stage.
  3. Wireframes ease the transitions in a project.
  4. They reduce the cost of the overall project.
  5. They safeguard you from any unpleasant surprises during implementation.

Types of Wireframes:

There are two major types of wireframes:

  1. Low fidelity wireframes or Lo-Fi: Usually rough sketches on paper with the most basic visual elements and are not interactive.
  2. High fidelity wireframes or Hi-Fil: Higher detailed than Lo-Fi and contain details missing from Lo-Fi wireframes.
Low fidelity wireframes wireframe
An example of low fidelity wireframes
An example of high fidelity wireframes
An example of high fidelity wireframes

When do you make wireframes? 

Well, don’t just go jumping into creating a wireframe now! Before you actually start making a wireframe, have a clear idea of the intended actions you expect the user to perform, the various user journeys, the number of screens and how you want users to interact with them.

For every screen you design, remember to ask 2 questions:

  1. What is the purpose of this page/screen?
  2. How does the page/screen help a user/business achieve its goal(s)?

How would you explain the purpose of what you’re creating to a friend or colleague? Every feature or add-on you make solves a problem for the user, right? (Even if your add-on is just a UX enhancement, you’d expect it to impact your most important metrics in some way or the other.) Hence, you should, in layman’s terms know exactly what the change will do. In order to simplify this, you must write down how you think the feature/change will add value to the user in a layman language. Since it is the user who will benefit from the feature/change, write it down from their perspective. 

Congratulations! You’ve just written your first “user story”.

User Stories and Flows

A user story is a short and informal description of the feature from the perspective of the user. It captures the value the user receives out of this feature. Ideally, a user story consists of “who”, “what” and “why”, i.e., “who” gains value out of this, “what” is the goal which the user wants to accomplish and “why” does the user want this feature. This is done in order to provide context to the development team even before they start working on a project.

Although there is no formal format to a user story, the end result is usually 

“As a who, I want what so that why”.

For example, one of the user stories for an online shopping portal can be:

“As a user, I want to view the list of products so that I can select what to purchase.”

User stories can be further broken down into smaller tasks depending on the complexity of the feature.

A user flow is a series of steps the user takes to achieve a specific goal. However, the user can take multiple paths to reach the same goal. Hence, user flows are not always linear. As a result, it is imperative for you to have an idea of the various user flows to understand what wireframes you need to create and how to connect them. 

An example of a user flow for mobile app
An example of a user flow for mobile app

Once you’ve identified the user flows and stories, it is advisable to sketch them on paper rather than directly jump into a prototyping tool. Again, we say this since it is easier to create, share and make changes on sketches.

How to create wireframes?

We say it again and again, you don’t need a fancy tool to start wireframing! Pen and paper work just fine! However, you’d want to capture screen transitions and user journeys, which might be difficult on paper. There a number of tools available for you to do so such as (in no specific order):

  • Balsamiq
  • Invision
  • MarvelApp
  • Axure
  • Moqups

and many more.

Example

For the purpose of this article, let us consider a typical supply chain problem. A product by brand XYZ is to be delivered to the customer. The obvious nodes are Manufacturer -> Distributor -> Retailer -> Consumer. Let’s understand how products will be transferred from Manufacturer -> Distributor. Say that the brand creates an order, unique tracking codes for each product in the order and sends them to the manufacturer. The manufacturer then assigns these codes to products in the assembly line. Once the manufacturing process is complete, he’d like to know which product needs to go to which distributor. The brand XYZ has solved this need with an app. The manufacturer can simply log in and scan a product’s unique code (assigned by XYZ) to check the product’s destination.

Below are the wireframes for a basic Android app at the manufacturer’s end.

App Homepage wireframe
App Homepage

As mentioned, the manufacturer can do the following:

  • Scan a product to view its details.
  • Search for a product with its unique ID.
  • Update a product’s status.
  • Update his profile.
  • Get help or watch tutorials.
Scan a product wireframe
Scan a product

Note: Arrows on the icons signify a link in the app.

Product Search Wireframe
Product Search
Product Details Wireframe
Product Details
Watch Tutorials Wireframe
Watch Tutorials

Conclusion

Wireframing is an essential part of the UX process. Wireframes not only give you a clearer picture of what how you intend the feature to work and the value customers can expect out of it. It also ensures you and your team is on the same page before you actually start burning money on the development process. Since wireframes are easy to make and change, it is also easier to receive early feedback and implement them.

What are some things you like to consider before creating wireframes? Comment below or write to us at [email protected]

For more:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.