How Do You Design App Maps

So, you have a really great app idea. What's the first thing you do? Jump right into designing your app? You could, but there's a good chance that you'll miss out on key aspects of the user experience, and create serious usability issues with the app.

The best way to ensure your users love the way your app looks and functions is by mapping out the way you expect your future users to move throughout your app. We call this a "screen flow" - it's a flowchart of all the screens your app will need, the screens they connect to, and how your users will move through your app.

Simple enough, right? If you have a fairly simple, straight-forward app, sure. But, if you have several user types with a variety of experiences, the user flow might not be so easy to map out. A good user flow will shape the user interface of your app - but how do you get started?

Understanding Your Users

Start by thinking about the purpose of your app, and how users might engage with it in different ways. Who are your target users? What are your user's goals? Motivations? Objectives?

Every element of your app's navigation should make it as easy as possible for your users to accomplish their goals. Good app design allows users to navigate through an app to accomplish their goals without added friction. Any unnecessary friction increases the likelihood your users will stop using your app.

What are some examples of unnecessary friction? Confusing layout, hard to understand navigation, and difficult interfaces - exactly the kind of elements you can avoid by starting with a good user flow.

Understanding your target users, and what they want from your app, will drive your app's interface design and overall user experience.

Making a List of Screens

Now that you've thought about who your target user is, it's time to think about how they'll move through the app.

For example, is there a different path for a user who has to login compared to a user who skips the sign up process? Make a list of every screen you expect a user to encounter throughout their experience.

Take Instagram, for example. Here's a list of all the screens you might encounter when logging into your account.

Login
Photo feed
Comment view
Share view
Direct message list
Message detail
New message
Search view
Search results
User profile
Photo detail
New post
Filter view
Edit view
Comment and share view
Activity feed - you
Activity feed - following
Profile
Grid view
List view
Location view
Tagged photo view
Edit profile
Options
Invite
Follow people
Account settings
Settings
About
Support

That's a lot of screens, divided by top level navigation, sub screens, user management, support, and social settings. But even the most complicated app idea can be simplified by creating a user flow.

Mapping the User Experience for Your App

Once you've established a list of screens, it's time to start mapping out how your users will move through your app. At this point, you're at a good place to put pencil to paper.

Where is the start of the experience? What screens are on the same level, and which are only accessible by drilling down from another screen? Here's an example user flow, based on how navigation works inside of Instagram.

Your own user flow will look different, depending on what your app does, but this should give you an idea of how to map out your screens. Think about the levels of navigation - what's your top level? What are the most important things a user can do with your app? What sub sections will you need for each item in your top navigation?

Think of the user flow as a map to the rest of the creative process. Once you have a solid map in hand, you're ready to move on to designing your app!