Pre-planning your mobile app design

How to create a user journey map

The first development pre-planning strategy is called "user journey mapping." A user journey map is a visualization of the process a user takes to achieve a goal or complete a task within a product. Where a lot of app development focuses on implementing individual features and building out core functions, user journey mapping helps the developer stay focused on the most important characteristic of any app: how it feels to the user.

What does a user journey map look like?

While user journey maps can come in all shapes, sizes, and designs, they are commonly represented as chronological diagrams that include all the user touchpoints that occur within a specific process. As such, user journey mapping is particularly useful for visualizing processes that require multiple discrete steps. Journey maps also help collect and record detailed information about users' thoughts, feelings, pain points, actions, and expectations throughout each step in their process.

The scope of your users' journey can vary depending on the scale of the project you're working on. A basic map may focus on a single interaction, like a customer checkout flow or onboarding process. A more comprehensive map might show every user touchpoint within your app and across your brand, including things like support, customer retention, and re-engagement.

Deepen your user journey map with proto-personas

A user persona is a high-level representation of your customers or target audience. While personas, in the most formal sense, are most useful and valid if they've been drawn from direct user research, independent developers can create "proto-personas." Where a full persona is based on empirical user reseach data, a proto-persona can be a little less rigorous. Think of it as user segmentation with some additional data and characteristics attached.

Imagine you're building an app that helps homeowners connect with plumbers. In this case, you might have three possible personas: homeowners, plumbing specialists, and plumbing company managers. Each group has a different set of concerns, pain points, goals, and tasks. By writing down everything you know about each group, you can get a clearer picture of how they will engage with your app.

Take those personas and consider which key processes they will engage with. The homeowner will need to request a quote, set up an appointment, and pay their bill. The plumbing specialist will interact with the same quoting, scheduling, and billing systems, but they'll approach them differently. What feelings does each group bring to each process? What are the different pain points? What are the different struggles or impediments?

Creating your user journey map

Once you've answered all of these questions for each of your personas and processes, you're ready to create your complete user journey map! There are several great programs to help you build digital journey maps, like Miro, Sketch, AdobeXD, and Figma, to name a few. But the only thing you really need is good old fashioned pen and paper. If you still feel like you need additional guidance, Nielsen Norman Group has some great free templates that you can print out and use.

As you flesh out your journey map, make sure you include information about who your personas are, and what scenarios they are experiencing. For example, if you're solely focusing on your app's onboarding, you could include a brief description of what your personas are trying to accomplish, or what their goals are during the onboarding process.

Better development through better understanding

Understanding how users actually experience your app is critical to achieving long-term user adoption and success. It's easy to build out an app that suits your own individual needs, but how can you be sure that users will experience your app the exact same way that you do? User journey mapping can help you pin down users' expectations and motivations while keeping user experience at the forefront of your mobile app design strategy.

When done well, customer journey maps can help uncover the truth about how your users experience your app so that you can identify opportunities for improvement. As long term assets, they can help point you in the right direction while making a positive impact on your users.

How to write a feature requirements document

Any developer who has built an app for someone else or with someone else will be familiar with feature requirements documents. While a feature requirements document isn't strictly necessary if you're building the app yourself, we still recommend using one if you're looking to optimize your mobile app design process.

Not only does it give you the flexibility to pull a friend into the project if you need reinforcements, but a good requirement documents can act as a living record of all your ideas, plans, and goals. This ensures you don't forget any great ideas, as well as reducing the cognitive load you're carrying as the sole developer on your project. Offloading all of those details into a document means you won't have to carry so much in your own working memory, which frees up more of your mental bandwidth for creative problem-solving.

You can also use your requirements document to pause and restart your project without any loss of continuity, or even share the detailed specs of your app with any collaborators or stakeholders before you have a functional prototype ready.

What is a feature requirements document?

In the same way that a set of blueprints plots out the construction of a building, a feature requirements document acts as the single source of truth for your app. In short, this document is a written record of the features you plan to build within your app, and how they interface with one another. When done properly, it should be clear and descriptive enough that you can hand it off to another developer with the reasonable expectation that you'll get a functional version of your app as you've envisioned it.

Start broad, then get into the specifics

While there's no formal process for creating a requirements document, it's important that you keep things organized and efficient. Remember, your main goal is to capture the purpose and function of your app—anything you can do to make it easier to understand, the better.

A simple, but effective organizing principle to follow when drafting your document is to start broad, and then move into specifics as you progress. Open with a mission statement that sums up the big picture. Fill in the "who, what, when/where, and why" of your app: who is your audience, what does the app do, when will people use the app, and why will people choose it over other options. Working to establish the big-picture vision of the app early on will provide crucial context that will help piece together the individual features.

As you list out your app's specific features, try to organize them in the sequence that they would be encountered within the intended app experience. This will give a sense of how you expect your users to use the features under normal circumstances. So, if a user's first interaction with the app would be signing up for an account, your first feature requirement will be the signup page. Once this ideal user journey is complete, you can then move on through the secondary and tertiary features, like app settings, or the account deletion process.

Focus on functionality

When you're creating a feature requirements document, the writing should be clear, descriptive, and focused primarily on functionality. Avoid mentioning details about aesthetics or appearance unless it's absolutely essential. Things like the color of a button on a page, or the shape of a loading icon are often subject to change throughout development, and can be swapped out with minimal impact on time or labor. Changing what happens in the background when a user clicks on a button can be much more complicated, however.

To that end, make sure that you give sufficient detail to the functional aspects of your features. For example, if a user needs to fill out a form, you should list every piece of information that they'll need during each consecutive step. This will ensure that, if need be, you can confidently hand your document off to a collaborator to create the feature themselves.

Provide detailed use cases and examples

If you have a feature in mind that works similarly to something in another app, don't be afraid to use it as a reference. Especially for mobile app design, it's much easier to point to something that already exists than trying to conjure a concept from thin air. For example, if you were designing a podcast player, and you wanted it to have a specific system for bookmarking clips to share with friends, you could reference YouTube's system for sharing time-stamped video links.

It's also helpful to add use cases throughout your document whenever possible. Not only do use cases help communicate the specific feature you're describing, they can also provide a narrative throughline that makes it easier to understand how all of your app's features are meant to fit together. There are likely multiple ways to interact with any given feature that you will need to account for, including the possibility of a user making mistakes.

Think in terms of MVP

If you're interested in adopting a more agile approach to app development, you can use the MVP ("minimum viable product") method to structure your requirements document. MVP is a development strategy founded on the theory that you can produce a higher quality app, much faster, if you prioritize the minimal features needed to make it work. This allows you to quickly produce a working prototype, which you can build on and test with users to eventually reach your planned feature set. The advantage of the MVP strategy is that it gives you the opportunity to both evaluate and improve upon your mobile app design during the development process, resulting in a more refined final product than can be achieved with more maximalist development methods.

If you're interested in taking the MVP approach to your own app, your feature requirements documentation will be central to your planning process. Since the method is based on implementing only the core features needed to make your app perform its primary function, your first task will be to prioritize your feature list.

There are a variety of methods for ranking your feature list for MVP development. One option is the MoSCoW method ("Must have, Should have, Could have, and Won't have"), an approach that's intuitive enough to apply to nearly any kind of project.

You'll simply go through your features one-by-one, and sort them into each of the four categories.

• Must have features will make the app non-functional or useless if they aren't included in your core app.
• Should have features are not essential, but have the potential to significantly improve the quality of your app.
• Could have features have the potential to improve your app by either moderately enhancing the primary goal or by adding a secondary function to the app.
• Won't have features are essentially a wishlist of things which you may like to add to you app, but don't currently have the resources for.

Once you've completed the exercise, you'll separate your features document in the following sections:

• First iteration: All of your M category features will be placed here, which will make up your MVP prototype.
• Second iteration: Fill this in with the S category features, which will likely be added in your second build, with some possible changes based on feedback.
• Third iteration: The features from the C category will be collected here to plan out a speculative third build, which may be subject to significant alterations from two rounds of app testing.
• Future iterations: The features from your W category, which you will re-evaluate once you have access to more resources, or even cut entirely from your plans.

As you move forward in your project, you can reassess your rankings based on feedback from each iteration of the app that you've completed. Throughout this process, your requirements document will serve as a guide, which you can reference and revise as you make progress.

How to create wireframes for your app

Wireframes allow you to nail down the functionality of an app before diving into the visual design of it. It lets you lay out the details of the user experience—what it needs to work, where everything needs to be, and how you'll navigate from one place to another. Most importantly, it'll save you a lot of time and effort later, because changes to a live app are a hassle and can be met with pushback from users. Wireframes are especially useful for mobile app design, as they can help you fine-tune how your users interact with your features within a limited amount of space.

What is a wireframe?

At its core, a wireframe is a visual representation using basic grayscale shapes to plan out the different elements of your app. This includes buttons, hyperlinks, banner locations, and any other important assets. Whether you use a pen and paper or wireframing software, the point is to get the important details of your UI and navigation in place before you begin actually building the app.

A low-fidelity wireframe is the equivalent of a rough sketch or draft. You plan out the main screens, how users will navigate from one screen to another, the basic UI, and anything else that's essential to the workings of your particular app.

A high-fidelity wireframe is more detailed and polished. It includes everything you'd have in a low-fidelity wireframe, but with most of the blanks filled in. Instead of only wireframing the main screens, you'll plan out all the screens, with actual images and content instead of placeholders and sample text.

Why are wireframes important?

Wireframing helps prevent or eliminate many of the challenges of building an app. It allows you to:

• Test multiple variants of your mobile app design before investing time and money building the full version
• Focus on the user experience and journey before getting bogged down in the business of beautifying your app
• Iterate quickly based on feedback
• Create a reasonable facsimile of the app to share with collaborators, or to use in marketing materials

Before getting started

Now that you've learned the benefits of wireframing, it's time to get to work. Here are some tips to help the process go more smoothly:

Don't reinvent the wheel

If you're new to app building, it's a good idea to take a look at some of your favorite apps and see how they handle navigation and layout for the app's different elements. Remember, an important part of designing a top-notch user experience is making sure everything is where your users expect it to be. Popular apps are often great examples to take cues from. This is even more true when it comes to analyzing how and where your competitors are dropping the ball. Better to learn from their mistakes than to make your own!

Make sure to note:

• Any icons that feel unclear or confusing.
• How their user onboarding takes you through the app, what features it explains and doesn't explain, how clearly you feel it explains the app, etc.
• The navigational flow of the app—how many screens does it take for you to perform the most common functions, such as navigating to the "settings" menu?
• Anything that makes the app especially intuitive.

Choose a wireframing tool

While pen and paper is good for early sketches, you're going to want a digital solution as your ideas move from low- to high-fidelity. A digital solution is also especially useful as you start to map out the actual user flow and what screens will be seen in which order. Wireframing software will help you organize and clean up your mobile app designs and make them easier to share with colleagues, stakeholders, and test users.

We recommend Figma, Balsamiq Mockups, Wireframe.cc, and Sketch. These programs are all basic enough that even people without much experience will be able to use them.

While some of these tools overlap with the ones we recommended for user journey mapping, in general, we suggest going with a dedicated wireframing tool for this stage of the process. These kinds of tools allow you to move from wireframe to clickable prototype to functional prototype with minimal rework. In the case of user journeys, that functionality isn't as crucial.

Making your first wireframe

With all of that planning in place, the process of creating a wireframe should be fairly straightforward. Starting with your login screen, begin to draw out the main page elements. For example, you might add long rectangles for the username and password boxes, a circle for your company logo, rectangles or squares with X's where any images will be, a "play" symbol to denote videos, and so on.

Depending on what tool you're using and the purposes of this wireframe, you might start with stock icons (to be customized later) or you can create your own lo-fi icons. Either way, the idea is not to get bogged down in too many details right now, so don't worry if things aren't perfect.

If you're using a wireframing app, it should allow you to show the navigational relationships between screens with a visual cue. This will usually take the form of a line that goes from each button and attaches to the screen it will take the user to.

Continue the process until you have every screen—or at least every major screen—designed, along with which buttons lead to where. If you're working with other people, this is a good time to collect feedback. Whether you're working with a team or solo, this is also the ideal time to do usability testing and research. After getting outside feedback, it's time to implement any changes that still need to be made.

As more feedback comes in and more iterations are made, you can also begin to increase the fidelity of the wireframe, adding more details and elements that bring you closer to what your finished product will look like. Eventually, you'll get to the point where you move from a wireframe to a mockup, then a prototype, and a full-fledged, ready-for-release app!

Refine your mobile app design with development pre-planning

App development is all about efficiency vs. effectiveness. On the one hand, you could rush every major decision to reach launch as quickly as possible, but how many mistakes would you make along the way? On the other, you could endlessly consider every aspect of your app, but how do you build up the momentum to actually deliver a finished product? User journey mapping, requirements documents, and wireframing are all designed to offer developers the best of both worlds.

They're quick and inexpensive strategies, but they allow you to consider the fundamental components of your app with great care. Do yourself—and your future users—a favor by taking the time to do some careful pre-planning. You'll be surprised how much time and effort you'll save in the long run if you do a little extra work at the outset.