Back to blog overview

September 9, 2022

How to Create an Application Map

Sunjay Armstead



UI/UX Designer and Engineer II
Louisburg, NC

Create Your First Application Map

Previously, we revealed some core components of ZEAL’s design process. In this and following articles, we’ll walk you through how to execute each component individually. In this post, I’ll show you the steps we take to create application maps.

What Are Application Maps?

Application maps show the hierarchy of pages needed to fulfill core functions of an application. Such maps are similar to site maps in traditional web development, but are more robust in that separate maps are constructed for each user group.

Creating application maps is important because it forces design teams to think through the information architecture of the application. That is, how can we help “the user to focus on their tasks, not on finding their way around”? While building application maps, our goal is to think about the needs of each user group and determine the best ways to meet those needs by the flow of information throughout the app.

How to Create an Application Map

Start First with Data

By this point, you should have already conducted some initial research that can inform which features each user group needs in order to solve their problems. So start with the data! Organize the information you have and try to construct a general sense of your user personas. Affinity mapping is a great method to do just that.

Sketch the Big Picture

With your data in mind, create an overall map of your application. Imagine you’re playing Starcraft and there are no dark areas on the map. What pages do you see and how might users generally end up there? Make a box for each page. Then show relationships and dependencies with arrows.

Full application map of the Software Residency app
Full application map of the Software Residency app
Curriculum feature of Software Residency app
Curriculum feature of Software Residency app

In the maps above, a user starts on the Dashboard and moves deeper into each feature like curriculum. The mentor can see an overview of the curriculum available, and can chose to create a new course or lesson. The mentor can also access existing courses and lessons.

For the Software Residency application, we used Figjam to build our application maps. You can certainly do this on paper first, or a different application altogether, just make sure you have a way for all team members to eventually contribute together!

Dial it In

Application map for mentor persona
Application map for mentor persona

Your job now is to break the overall application map into smaller maps for each persona. Not all users will see the same pages, so diagram these differences in your various maps.


And just like that, you have a comprehensive picture of the number and types of pages (or views) your team should account for while building your application. These maps can inform your team on writing user stories, diagramming application states, designing wireframes, and writing code.

What Do You Say?

Building a software application can feel like climbing a steep cliff face. The odds don’t seem to be in your favor and good luck if you need a potty break!

At ZEAL, not only do we believe that you can make it to the top, but we also find great joy in joining you on the climb. So what do you say? Want to climb together on your next application? Let’s talk.

More from this Series

  1. Putting Together the Design Puzzle
  2. How to understand users with User Research?
  3. How to synthesize research with Affinity Mapping
  4. How to Create an Application Map
  5. How to Create UI Flows
  6. How to Write Great User Stories
  7. How to Create Wireframes and Prototypes

This article has been written in collaboration with Lisa Panke.

Let's Chat

Are you ready to build something brilliant? We're ready to help.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RedwoodJS Logo

for builders

Grants Pass, Oregon • September 26 - 29, 2023
View All