If you’ve gotten to this stage of the MVP app specification process, you’re so close you can see the finish line—alas there is a steep incline you must surmount before reaching the end of your journey. Designing an intuitive user flow can be a challenge for first-time app inventors, especially for those who are nontechnical or lack graphic design training. At this point, you know exactly how and why you intend to service your target app users—you just need to turn the core objectives and user class definitions you defined at the start of the technical specification process into a reality. So long as you’ve done these two things, whether you’re an amateur or pro, you can safely define your app’s frontend design or outsource the job of defining user flows to an experienced designer with confidence.
STEP 1. TIME FOR SOME RECONNAISSANCE
If your app idea is any good then at least a handful of indirect or direct competitors will already exist. Download every one of your competitors’ apps. Study every detail. Read every review, complaint and praise their apps received. Take screenshots of the features from their apps that stand out to you the most. Which of those features align with the purpose and scope of your app? What could be done better? Are any of the pain points you plan to address neglected by the apps that are currently on the market? Are their sign up processes too long—too short? Is their app too simplistic or too complex to navigate? Your answers to these questions should directly reflect the assumptions made about your target users, often referred to as personas.
STEP 2. DECIDE WHICH SCREENS ARE ESSENTIAL
Should your app have a multi-step or one-step signup process? Should there even be a sign up process at all? Answers to questions like these rely on the defining characteristics of your user classes as well as your app’s core objectives. Social networking apps, for instance, tend to have multi-step signup processes that request data that will later be used to hook users into their app’s community. Transactional apps and apps that serve as resource guides or content hubs generally either don’t bother forcing users to create an account, or wait for users to engage in certain interactions before prompting users to sign up for an account.
Every app regardless of its user access requirements will have a splash screen and a home screen. Apps that require users to validate their credentials should also as a rule of thumb have a signup screen, login screen, log out screen and forgot password screen. The rest of the screens associated with your user flows will depend on the unique service propositions (USPs) of your app.
Consult this list of screen elements when mapping out the interface of each screen in your user flow:
-
Text entry fields
-
Buttons (log in, sign up, exit, back, add photo, submit, etc)
-
Menus: options, features, settings (where should they be located?)
-
Search (which folders will need to be searched through? )
-
Viewing options: list or grid
-
Alert symbols
-
Links
STEP 3. FOLLOW THESE APP DESIGN HACKS
Protect your app’s real estate. Screen size is the most precious commodity of user flows, especially when designing for mobile devices. Ask yourself whether it is essential for the app screens you’re working on to have a header/screen title area? Can the screen headers/titles disappear based on certain interactions or can they not appear at all? Are your target users savvy enough to understand the meaning of the hamburger icon? Could users navigate your app from a single footer? Is a footer even necessary? Do some research on the current app design trends by looking at popular applications like Facebook, SnapChat, and Instagram to see whether there are any emerging best practices that you can apply to optimize your app’s real estate.
Choose your colors with purpose. First, familiarize yourself with the cultural and emotional associations of colors. Red tones, for instance, are associated with errors and alerts. From a branding standpoint, choose a minimum of 2-3 colors to be incorporated into the color scheme of your app screens and the app’s logo . Colors should also be used to denote hierarchy of purpose. Therefore, the most vibrant button on the screen should be the most important or favorable one.
Design your app screens on an invisible grid. For every screen of your app flow, the padding and margins of these grids must be defined. You can easily meet this requirement in design softwares like Adobe Photoshop and Illustrator, Pixelmator and Inkscape with a few clicks. You simply need to activate grid view, rulers and guide in your settings.
Establish design patterns. If one of the first screens you design contains a button with rounded edges, then the buttons used on every screen that follows should also have rounded edges. Consistency and uniformity in design is an essential part of user experience (UX) design. Be sure to review the latest iOS and Android design guidelines for their recommendations on UX/UI.
Pay attention to fonts. Just as with colors, fonts also have cultural and emotional associations. A handwritten script, for instance, better aligns with the branding of an educational app targeting children. That same typography class would appear out of place in enterprise apps. Tens of thousands of free fonts exist on the Internet. Spend some time researching what types of fonts are most popular in your industry before deciding between which free font to use. Choose no more than 2 fonts for your app. Keep readability in mind when deciding how fancy or simple your font can be.
Rely on typography hacks. Text alone can serve as a secret weapon for experienced app designers. All lowercased, all uppercased, indented, title cased text—such typography can be used to indicate a sectioning or hierarchy of features within the app.
Assume your users are impatient. People quickly exit apps when they believe it’s crashing on them—they just can’t. Every interaction on your app should provide users with feedback. A swipe, click or tap should have some sort of animation that lets the user know the app is processing their interaction.
Align your user flows with app design trends. Flat design, for instance, is more aesthetically appealing to app users of today. Familiarize yourself with app design trends affecting all app sectors. The last thing you want is for potential users to dismiss your app because of an outdated appearance. No matter how amazing your app’s features are, your app will primarily be judged based on its looks.
STEP 4. OUTLINE YOUR FLOW
Now that you’ve defined the fundamentals of your app screen designs you can start mapping out your app’s user flows. You can outline the design patterns of user flows with simple flow charts and diagrams or free app prototyping tools like Invision. You may even want to sketch out the most basic elements of your prototype’s user flow on paper beforehand so that you can focus on whether the screens are being linked in a rational way.
The specifications defined in app user flows serve as the foundation of mobile, web and IoT apps’ frontend designs. Your app’s screen flow will dictate the overall user experience of your solution. In addition to testing out the user journey yourself, ask people who are representative of your target user base to demo your app prototype. Don’t be afraid to share your app prototype with other people. As many of you should have learned by now, building a unique app takes work! The odds are slim that someone in your circle is going to take your idea and run with it. The odds are much higher that they will provide you with critical feedback and perhaps even offer some market validation. Remember your app will be a living, breathing creation that will be fed and grow from customer feedback.
