Illustration by Tracy Dai

When designers craft a product, they must not only select relevant content and features but also organize them in a logical way. It’s hard to achieve this goal when you’re only at the beginning of a design process. Fortunately, a simple solution exists for this problem: a wireframe map.

A wireframe map is a result of a combination of two tools—sitemaps and wireframes. A wireframe map matches wireframes to the sitemap of a product. It allows team members and stakeholders to look at wireframes in the context of user flow—a visualization of the path that a user takes to accomplish tasks in the designed product. In this article, we will share a simple, four-step process you can follow to create a productive wireframe map.

Step 1: Get to know your users

Good product design starts with a good understanding of users. Dieter Rams perfectly summarized this idea:

“You cannot understand good design if you do not understand people. Design is made for people“

Dieter Rams

That’s why before designing with wireframes, you need to invest time in user research. The earlier you learn about your users and their needs, the more time and effort you will save down the road.

Clearly define user goals

User goals are descriptions of end states that users want to reach. User goals are always based on real-world scenarios that people want to accomplish. For example, if a person visits an eCommerce website, their end-goal is to purchase a particular product.

User goals should be defined upfront in the early stages of the product design process before any design or development occurs because many design decisions are directly related to these goals. Both the content and features of your product need to contribute to the fulfilment of that goal.

All user research methods can be divided into two large categories—quantitative and qualitative methods. At this step of the process, it’s recommended to rely on qualitative user research methods because they will help you understand the needs and wants of potential/real users.

A few effective qualitative user research methods exist for identifying user goals; they include in-depth user interviews, focus groups, and contextual inquiry. But no matter which method you choose to use, it’s important to select the relevant target audience for user research. Participants should represent your user base. Create user personas and evaluate every research candidate in accordance with that persona.

Understand what functionality you need to offer

Once you know who your users are and what they need, it’s time to think about what you want to offer to them in order to help them accomplish their goals. The list of features should match with activities that users might want to complete in your product. If you design an eCommerce website, you may want to offer a search feature because many visitors will rely on search functionality to find a particular item. Is there a systematic approach to help the product team understand what features to offer? Yes, and it’s called Jobs to Be Done (JTBD). The JTDB framework is a representation of user needs born out of user research. It involves identifying the core problems that your users want to solve by using your product. Using JTBD framework, you will understand the goals, context, and even exact steps involved in the interaction with a product.

The Jobs to be Done framework helps you understand what users want and why they want it.

The Jobs to Be Done framework helps you understand what users want and why they want it. Image credit JTBD.

Storyboard typical scenarios of interaction

Once you know why people will use your product, the next step is to learn how they will do it. To answer this question, product designers need to see the product from the perspective of their users. It’s much easier to get this perspective when you use storyboarding.

Storyboards will help you understand how the product fits in the lives of your users, which tasks they will accomplish in a product, and how exactly they will do it. Storyboard the most important scenarios of interaction with your app. Select them based on user and business value.

Step 2: Define the sitemap

After you define the key scenarios of interaction, you can start creating a hierarchy of content and features with a sitemap. A sitemap is a visualization of the product’s hierarchy that shows where each page/screen fits into this hierarchy. Think of a sitemap as a blueprint for your whole product. It will act as a high-level overview of a product and serve as a basis for the wireframes that we will create in step three.

Break down every task into individual actions

It’s much easier to design a product experience when you break up the tasks a user wants to accomplish into individual actions, they can take to complete the tasks. For example, when users want to purchase a product on an eCommerce website, they typically:

  1. Visit site’s homepage
  2. Type search query in search form
  3. Filter search results
  4. Select a specific product from the list
  5. Read the product description
  6. Read product reviews from other customers
  7. Add a product to their cart
  8. Pay for the product
  9. Wait for the confirmation email

All actions described above can be presented as individual pages/screens that users see and interact with when completing their goal of purchasing a product.

Do site mapping

Site mapping is creating a diagram that communicates the hierarchy of webpages in your website. A sitemap has a tree structure—it shows how individual pages relate to each other. It’s recommended to use a simple format for the sitemap (similar to the one below) to make it easy to understand.

A sitemap of an ecommerce website clearly indicates paths between pages.
Outcome of site mapping: a sitemap of an eCommerce website clearly indicates paths between pages. Image credit Nick Babich.

Evaluate a hierarchy of pages

The more effort the user has to invest in interacting with a product, the less enjoyable the experience becomes. While there are some exceptions to this rule, in most cases it’s recommended to minimize user friction.

Designers should create a hierarchy that minimizes the number of steps a user has to take to complete the goal. For example, suppose a user goal is to purchase a product on an eCommerce website. In that case, designers should minimize the total number of pages that users will see and make the existing pages more efficient. Your sitemap should place product indices and pages at or near the top of the hierarchy, and the pages should convey important information in a manner that’s clear to your audience.

Use card sorting to evaluate the hierarchy

After you finish creating a hierarchy of your content, you need to ensure that this hierarchy works well for your users. You can use closed card sorting to do this properly:

  • Write down all your page/screen names on index cards;
  • Invite people who represent your target audience to review each card;
  • Ask them to sort the cards into categories that make sense to them.

Once that’s done and you’re confident your design works as planned, you can be confident that your new hierarchy works for your users.

Step 3: Design wireframes

If a sitemap is a blueprint of your whole product, wireframes are blueprints of the individual pages/screens within it. Wireframes capture the hierarchy of individual pages—they show which content and interactive elements belong to them.

At this step, you will map wireframes based on your storyboards and your sitemap. A wireframe map that you create will allow team members and stakeholders to see how individual wireframes will flow and function together. After you finish wireframing, you will see how many screens or pages you need to design and how they connect with each other.

Decide the purpose of each wireframe

Every wireframe should play a specific role in the user flow. For example, an eCommerce website can have many page types, including a landing page, product listing page, product details page, product checkout page, and each page plays its part in user flow. For example, a landing page on an eCommerce website acts as a hook for visitors—it greets the visitors and conveys recent offers and popular items.

Review all of the pages you aim to design and add notes to the purpose for each page. Your notes would look something like this: “The landing page gives general information about the available products, product listing pages provide an overview of products that match search criteria, and product detail pages provide all essential information about a selected product.”

At this step, you may notice that some pages you have on your list do not have a clear purpose. In this case, it’s recommended to skip them and see whether you can work without them.

Show the hierarchy of content

Content is what brings value to your users. It’s why users install apps and visit websites in the first place. It’s important to organize this content in a logical way. In this step, you need to decide how a wireframe will shape content. To do this, consider the following questions when working on your wireframe design:

  • What content do we want to show on the page/screen?
  • What should the order of content be?
  • How much space should we devote to each section?

Your answers to each will influence what kind of layout you choose.

This wireframe has a clear hierarchy of content and functionality.
This wireframe has a clear hierarchy of content and functionality. Image credit Balsamiq.

Here are a few simple tips that will help you make this work more efficiently:

  • Start with content strategy. Research your business and user needs and evaluate all content that you have according to the needs of users and business goals.
  • Rank your content items by importance (from high to low). Prioritize content items and put important content front and center so users have no trouble finding it.
  • Avoid visual clutter. Visual clutter has a negative impact on user experience and causes the effect known as information overload. This effect occurs when the amount of information available in a single moment of time exceeds human processing capabilities. Information overload prevents users from consuming, well, anything on your page. The same rule applies to your wireframes: Avoid putting too much content on them. Follow a minimalistic approach throughout your design process and you can reduce the visual presence of unnecessary content and functional elements.

Provide annotations to describe your rationale

Being able to communicate the intended vision is an integral part of a designer’s job. Low fidelity is one of the significant challenges of wireframe design. Because wireframes are schematic, it can be hard for other people to get a sense of the design. For that very reason, provide annotations to make it easier for reviewers to understand what they see on individual wireframes and how the wireframes are connected.

Here are two important points to remember:

  • Explain why you designed a particular hierarchy of visual elements on a wireframe.
  • Describe the role of functional elements (such as buttons). Let reviewers know what will happen if a user interacts with these elements.

Connect the wireframes

Connect wireframes in a way that you think users will travel through them. Use arrows to connect the action (e.g., click on individual functional elements) and the system response (e.g., a page that shows on a click). At the end of this process, you should have an organizational structure that’s similar to your sitemap but a closer representation of the future UI experience.

The red box and arrow create a connection between individual wireframes.
The red box and arrow create a connection between individual wireframes. Image credit Nick Babich.

Test your wireframe map

The goal of product design is to create a smooth user flow for people who will use a product. At the end of the wireframe mapping process, you will have a map with a visual representation of all individual pages. The map should contain both individual pages/screens as well as their visual representations (page layouts). At this step, you will need to test your design to ensure that wireframe design is functioning as intended.

An example of a finished wireframe map, created for an ecommerce product.
An example of a finished wireframe map, created for an ecommerce product. Image credit Hillary Pitts.

Identify and fix areas of friction

Once your wireframe map is complete, it’s vital to validate this map with your target audience. You need to gather feedback from actual (or potential) users that will help you understand what works and what doesn’t work for them. Once identified, eliminate all parts of your product that create friction or force users to invest extra time and effort into an interaction. You can identify these trouble spots by conducting user testing with wireframes. It’s recommended to create a clickable version of your design from your wireframes and run a moderated test with people who represent your target audience.

Adobe XD—a powerful wireframing tool for UX designers.
Adobe XD—a powerful wireframing tool for UX designers. Image credit Adobe XD.

Ask them to complete tasks then observe their actions and reactions. Prioritize your findings based on the level of severity (impact on user experience) and iterate your design to create a better version of your wireframe map. The great news is that you don’t need to run a lot of testing sessions. In fact, it’s possible to identify up to 85% of usability issues with only five participants.

Design better user flows

Sitemaps and wireframes are two excellent tools in a designer’s toolbox that can help strengthen the design process. Sitemaps can break a product down to its pages, while a wireframe design gives more detail of what each page will contain. Used together, they can help you create a wireframe map that will serve as a foundation for clear user flows. When a wireframe map is used from the beginning of the design process, everyone on a team has a better idea of what a product is all about and how users will interact with it.