How to Design Mobile App Experience for Success: Mobile Flow Mapping

1450
mobile flow map

Building Blocks to Mobile Success

When it comes to creating a mobile app, many organizations jump right into wireframes, thinking that wireframes will solve all their design decisions. Though wireframes are not costly as outright iOS or Android development, if created in the absence of user personas, user journey, and mobile flow map, it’s potentially a time-consuming endeavor that could yield the wrong conclusion. If you have read my previous articles on getting the problem right in “How to Create a Mobile App That People Love”, understanding your target user segment in “How to Better Understand Your Users Through Mobile Personas”, and mapping a mobile user journey in “How to Avoid a Mobile App Flop”, you know that jumping into wireframes without the proper pre-work on user-centered design will only contribute faster to your mobile app’s failure.

An important prerequisite before embarking on wireframes is a mobile flow map. Mobile flow mapping is an efficient and cost-effective means of vetting out the interaction data flow of your mobile app. In this article, I will walk you through the logical progression of developing a mobile flow map, starting with examination of uses cases to zeroing in on the most compelling, bite-size use case to solve with your mobile app and then visualizing the organization of a mobile app through flow mapping.

Another benefit of creating a mobile flow map before wireframes is that your project team is not going to get distracted by color, UI visual elements, and style preferences. They can stay focused on the skeleton of the mobile app experience without getting caught up prematurely with the aesthetics of usability.

Document Use Cases

Once the problem that your are solving is validated by quantitative user research, to the best degree possible prior to actual user interaction with the app, use cases can be constructed to show the list of steps, defining interactions between the user and the app to achieve a goal. The use case should concisely represent the mission or goal of the mobile app user. Use cases should map to personas and the type of actions that they want to undertake. Depending on the need of the project, this can be depicted through behavioral UML diagrams or through a simplified flow map demonstrating the activities and actions to accomplish a user’s goal.

Figure 1 Sample UML Use Case

UML Use Case

Take Small Bites

For most enterprise executives, the basis of evaluating a system is the sum of its features. Over the years, whether it’s web assets, ERP or cloud-based solutions, the marching mantra has been more functionality, not less. Mobile app requires a fundamental shift in status quo thinking.

Because a user interaction with an app is a point in time event when the need is at its zenith, it’s not uncommon for some app interactions to be in seconds and then it’s all over until the next trigger point. Trying to replicate an enterprise system with all it bells and whistles into a mobile app is a costly experiment destined to fail.

The key is to take small bites with efficacy in mind. Out of the gate, it should accomplish one task better than any other app in the app store. This is a lot harder to accomplish than it appears not because of technical infeasibilities but sponsors’ and stakeholders’ unwillingness to let go of the old world view of evaluating the merit of a system.

Example Case Study: Velocity Systems

As a sample case study, let’s walk through a use case. Velocity Systems is a mid-sized, publicly traded company specializing in technology enabled business solutions and services. The company licenses a leading enterprise CRM platform with the following capabilities:

  • Mass email
  • Campaigns
  • Product tracking
  • Real-time quotes
  • Contract management
  • Customizable forecasts
  • Customizable dashboards
  • Ideas community
  • Workflow & approval automation
  • Sales teams
  • Territory management
  • Enterprise analytics
  • And more

Velocity Systems is in a highly competitive landscape and senior sales executives believe that mobile can give them a leg up on the competition. Deploying their CRM on mobile devices is integral to this plan, to provide cloud-based customer relationship management. The mobile app will enable field sales teams to work more directly with potential customers, by providing a mobile office on the iPad for managing the sales process and running sales presentations at customers’ premises, while allowing people on the road to stay in touch with the office via email and mobile video-conferencing.

An executive steering committee is formed to determine the scope of the mobile initiative. In evaluating the user roles in the CRM system, the committee comes to a consensus that the mobile app should be developed with the sales rep and sales manager in mind since they have the highest mobility requirements. Though their CRM system has a mobile client, it does not meet the decision makers expectations. A project team consisting of sales stakeholders, project manager, business analysts and an outside mobile consultancy is formed to develop the business requirements and use cases by actors and objectives.

The project team short list the use cases to the following:

  • Sales reps are able to perform core CRM functions – lead generation, qualification to its closure, and managing accounts – CRM for iPad
  • Sales reps are able to showcase products to help customers select the customized product and place an order – interactive product catalog with shopping cart on iPad
  • Sales managers can view dashboards and customized reports across product/ service categories and see performance by product and sales rep – business intelligence on iPad
  • Sales reps are able to access all the important sales documents and files anytime, anywhere in a secured way – document management on iPad
  • Sales reps are able to collaborate with sales managers in the form of messaging and a bulletin board to enable the sales team to share information – chatter collaboration on iPad

Each of these use cases are converted into flow maps. The exercise helps the team to think through the complexities, potential capabilities needed, cost implications and the user experience considerations. What’s taken for granted on a desktop, does not necessarily apply to mobile. Copious sales meeting note taking on an iPad can be quite arduous and cumbersome even with a keyboard attachment. Taking a photo of the whiteboard with notes does not preclude the manual entry that the sales rep would still need to perform in front of a computer.

Armed with more analysis, the project team presents their findings to the executive steering committee. Going back to my first point about what problem are you trying to solve, the decision-makers, after reviewing the pros and cons of pursuing these use cases narrow down to a smaller bite-sized problem. With the sales team constantly on the road going from one meeting to the next, often back-to-back, what the sales reps need are a summary view of the prospect or customer to get them quickly up-to-speed on the latest and most relevant information about the account:

Customer/ Prospect Snapshot Dashboard

  • Key contact information
  • Product/ service needs
  • Size of the opportunity or account
  • Recent meetings and activities

Build an Intuitive Mobile Flow Map

Now that you have narrowed it down to a specific use case, diagram the user flow with the goal of creating an intuitive navigation and data flow structure that makes logical sense to your users, the key being a well-organized workflow that minimizes user confusion, abandonment or unnecessary steps.

Figure 2 Sample Mobile Flow Map

Flow Map

1. Map Decision Flows

From the main menu, map every branch, screen, task, and decision flow until every path representing the system is fully described to accomplish the use case goal. Anticipate that your mobile flow map will evolve as you engage user segments for feedback during the wireframe and prototyping stages. Sometimes, what appears to be logical on paper doesn’t always translate as the most intuitive experience once a clickable wireframe or prototype is available to experience the mobile app workflow firsthand. So the key is to stay focused on the major navigational structure and then tune for optimization as you have more information.

Each data flow activity should be purposeful, leading the user a step closer to the desired end goal. Where ever possible, collapse down the sequence so that instead of perhaps two to three steps to accomplish a function, the user can accomplish the task with one step. Unlike the web and desktop models, where the system is designed with feature completeness, complexity and exceptions in mind, the mobile app experience has to be minimalistic. Instead of exposing options such as save, save as, edit, remove, and rename, the user needs to be able to perform a task, such as point and shoot a picture, apply filters, and share without getting derailed trying to build for every common and uncommon use cases.

2. Integrate Social Networking & Incentives

Depending on the subject matter nature of the app, enterprise apps can incorporate a social networking component to build the mobile app experience around a social community for greater collaboration, knowledge sharing and real-time communication. It serves as a binding agent to increase user adoption and to facilitate synergistic exchange.

Enterprise apps can incorporate incentives to engage deeper and more frequently with the mobile app, which in turn can translate into increased employee productivity, customer acquisitions, and customer service. The right incentive mechanics can motivate your sales force to make more sales calls/ visits, enter complete and timely activities in a CRM mobile app or update their sales pipeline status more frequently.

Integrating social networking and incentive mechanics into the mobile flow map in many cases is no longer optional but a requirement to ensure that a mobile app is perceived as relevant and valuable beyond the first mobile app interaction.

3. Other Considerations

During the mobile flow mapping process, you will undoubtedly uncover much more complexities and sub-paths leading the user down a myriad of navigational choices. Analogous to the freeway and off ramps to local roads, the challenge is to ensure that the primary workflow is as streamlined and simplified as possible yet should users desire to veer off from the main path to explore other branches, they can do so and still be able to move in and out of any paths easily without getting lost.

Part of the mapping exercise is to also plan for the unexpected user experience such as error handling when the data is not fetched or server connection is lost. What message should the users see and where should they end up? There’s nothing more frustrating to a user than something that suddenly disrupts their user experience, including but not limited to the app crashing, after completing a task, taken to an unfamiliar ending location, etc. Accounting for these less than pleasant circumstances in the mobile flow map ensures that you have the total picture on all possible interactions that your users will have in your mobile app.

Conclusion

Going right to wireframes without a well-thought through mobile flow map is a sure way to create a mobile app workflow that will leave your users confused and packing their bags. Mobile flow mapping ensures that you have carefully thought through the navigational structure to manage the entire user experience of your app, down to the way your users take actionable steps to accomplish a goal, share the app, determine the user ending location to the system messages in case of failures. All of this contributes to building a successful mobile app that your users will rank high on usability and ease.