Most product designers want to create solutions that will be useful and joyful for their users. But just intending to design great products isn’t enough to design great experiences. When designers craft a product, they need to organize content and features in a logical way, but 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—a sitemap 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: Identify the user journey

The process of design should always start with defining a user journey. It’s vital to understand which tasks users will accomplish in your product and how exactly they will do it.

Clearly define user goals

User goals are descriptions of end states that users want to reach. User goals should always refer to real-world end states. For example, if you design an ecommerce website, your goal is to have users purchase products. Designers should understand user goals 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 fulfillment of that goal. A few effective qualitative user research methods exist for identifying user goals; they include user interviews, focus groups, and surveys. But no matter which method you choose to use, it’s important to select the relevant target audience for user research.

Understand what functionality you want to offer

Think about the functionality you want to offer in order to help the user accomplish the goals. For example, ecommerce website users often search for available products. That’s why the functionality of a search bar and search results filtering provide a lot of value for the target audience. A framework called Jobs to be Done can help identify the functionalities. The Jobs to be Done 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. This framework is based on task and use-case analysis. Using this 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.

Step 2: Define the sitemap

After you define the user journey, you can create a hierarchy of content and features with a sitemap—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. A sitemap 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 a task into individual actions

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

1 – Search for product

2 – Filter search results

3 – Select a specific product

4 – Read the product description

5 – Add a product to their cart

6 – Pay for the product

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

Create a hierarchy

It’s important to create a hierarchy that minimizes the number of steps a user has to take to complete the goal (e.g., buy a product). This means you should minimize the total number of pages that users will see and make 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.

A sitemap of an ecommerce website clearly indicates paths between pages.
A sitemap of an ecommerce website clearly indicates paths between pages. Image credit Nick Babich.

Use card sorting to evaluate the hierarchy

After you finish creating a hierarchy of your content, you need to ensure that this hierarchy works for your users. Use 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, and ask them to sort the cards into categories that make sense to them. Once that’s done, 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 define the layout of individual pages and show which content and interactive elements belong on them. (Familiarize yourself with wireframing fundamentals to make the process of wireframe design more efficient.)

A wireframe map will allow team members and stakeholders to see how individual wireframes will flow and function all together. At this step, you will map wireframes based on the user journey and your sitemap. At the end of this step, you will see how many screens/pages you need to design and how they will connect.

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 more. If you’re deciding the purpose of each, 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.” 

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. Your answers to each will influence what kind of layout you choose.

  • 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?

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

  • Start with content strategy. Conduct content inventory to understand what content you have right now in your design. 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 major 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 important part of a designer’s job. 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. Be sure to describe the role of functional elements, such as buttons, and let reviewers know what will happen if a user interacts with these elements. It’s also worth mentioning in your annotations why you stuck to a particular hierarchy of visual elements on any given wireframe.

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.

Step 4: Test your wireframe map

The goal of product design is to create a smooth user journey 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).

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 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 that force users to invest extra time and effort into an interaction.

You can identify these trouble spots by conducting user testing with wireframes. Create paper prototypes from your wireframes and run a moderated in-person test with people who represent your target audience. 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.

Conclusion

The wireframe map allows you to take your wireframes to the next level. Sitemap and wireframes work together to create a clear user flow—a sitemap breaks a product down to its pages, while a wireframe gives more detail of what each page will contain. As a result, both you and your team will be able to look at the wireframes in the context of the user journey.