Building a Mobile App: A Guide to Planning Your User Journey

Wireframes

This is usually the first stage of planning your user journey. We covered the basics of wireframes earlier on. The purpose is to clarify and communicate features and tie them together in a cohesive journey between screens. Wireframes do not incorporate the apps look and feel.

Mockups

A mockup is a version of a wireframe that is more detailed. It’s static, like a wireframe, but it contains more visual aspects like the branding colors, buttons, graphics, icons, and typography. Mockups help designers add in aspects of the user interface into the user journey.

Prototypes

Prototypes differ from wireframes and mockups for the main reason that they aren’t static. They include UI elements and animations, with buttons that are clickable. The idea of a prototype is to get the complete experience of using the app. It lets you test and discover any user journey issues before moving on to the development stage.

1. Refine Your App Idea

When your app idea is just an idea, a lot flies under the radar. You may not see some glaring gaps in the execution or design. There may be some features that simply won’t make sense but you won’t know until it’s built out. An easier way is to wireframe your app idea so you can virtually interact with all the features and clarify your app idea.

2. Streamline Design and Dev Work

Wireframes are much easier to make than actually building out features on an app. You get to track and analyze the user experience and make the journey as easy and intuitive as possible before starting the process of design and development.

3. Helps You Focus on The End Users

Different people may engage with your app in different ways – and that’s a good thing. Doing simple persona-building helps you define the types of users you may have so that you can carve out specific user journeys for them. Wireframes help you visualize those journeys so that you can make them as seamless and effective as possible.

STEP 1: Sketch Out Your User Flow

Think of the different journeys your user may take if they’re given your app – how they’ll behave, what they’ll be drawn to, when they might leave. User flow is a chart that draws out the specific steps a user can take to complete a task. This chart will help you figure out how many screens you need to complete each task and interact with features.

This diagram typically just has rectangle frames and arrows connecting them. It doesn’t necessarily have to be linear, since users can take different paths to complete the same task. The objective is to provide clarity as you move to the following steps.

STEP 2: Design Your App Screen

Now it’s time to roughly piece together what the app screen may look like. This will give your user flow some structure and will be one step closer to a mockup. You can sketch out where particular elements, buttons, and graphics will be.

Generally, boxes are used to represent content in a clear visual hierarchy. These boxes represent how you want your user to process the information on each screen, and their sizes are sketched out accordingly.

This means the important information is placed in bigger boxes from the top to bottom, and left to right in order of priority.

STEP 3: Add Your Copy

No more dummy text! Goodbye, ‘Lorem Ipsum’! Now it’s time to add the actual copy to your screen sketches. It may seem a bit early to do this, but as you start adding copy, you may realize that some UI elements don’t fit the way you thought. Or it might make more sense to rework some parts of the user flow entirely. If you need a simple guide to writing copy for your mobile app, check out this guide.

STEP 4: Link Up Your Screens

Now comes the fun part. Up until now, you’ve only sketched out individual app screens, and now it’s time to connect the screens. This helps your dev team understand how the app will function and how it’s to be built out. To make it easier, assign a reference number to each app screen so you can collaborate with other teams to work on the design and development.

STEP 5: Build Your Prototype

Now it’s time to transform your wireframe into a working prototype. This involves adding more details to your wireframe to end with a version that looks and feels like the final version of your app.

A clickable prototype is an even better option because it gives you a more comprehensive insight into what the final user experience will be like.

Sketch

Sketch is a popular wireframing tool, available on Mac only. According to their website, “Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff.” Key features of Sketch include vector editing, pixel-perfect precision, ability to sync with hundreds of plugins, ability to export presets and code, prototyping, and tools for collaboration.

AdobeXD

AdobeXD is one of the most widely-used tools for wireframing and prototyping. Adobe calls it the “fastest and most reliable UX design solution on the market for companies of 10 or 10,000. Break through bottlenecks, iterate rapidly, and scale for the future.” It’s made for design and backed by a solid infrastructure. You can design with reusable elements (and edit), responsively resize groups and objects, and create universal assets, styles, or a repeat grid.

Zeplin

Zeplin is a collaboration and handoff solution, which enables enterprises to share ideas, organize projects and create products using a digital workspace. The platform assists users with generating global style guides, enabling designers and developers to organize, update and share design system colors, text styles, codes, and other components in a centralized repository with drag-and-drop capabilities. It integrates well with software like Adobe XD and Sketch.

Figma

Figma is an online, cloud-based, collaborative, vector design tool. On your browser, you can create your wireframe and prototype it in one place. Because of its real-time collaboration capabilities, Figma makes it possible for multiple designers and stakeholders to work on the same project at the same time.

‍