In one of my previous posts regarding User Experience (UX) Keys to Success, I focused on gathering the right ingredients for your mobile app recipe by conducting user research. That gives a solid understanding of who your users are and what their needs are so you can assemble this information and start building the application. Once you accumulate these high-level requirements, it’s time to assemble them into a picture of the potential application. The next step is to build a strong requirements framework, which is your Information Architecture.
To summarize the first step, we have identified several key outputs of the user research. Those outputs include:
1. User Personas - identify your key users
2. User Scenarios - help identify the key tasks users need in your mobile application
3. User Needs Matrix - maps those Scenarios to the Personas to identify what primary tasks go into your application
The User Needs Matrix also helps you prioritize which scenarios need to be built and in what order. The matrix does this naturally by showing how many users need access to which scenarios. You should be able to view this by simply looking at the User Needs Matrix. For example, if you have five users and they all need access to three main scenarios, then those are the ones that should be built first. This document helps to build a solid User Experience Decision Framework.
Once you’ve identified which scenarios need to be built, you will need to create a navigation map. This map identifies all of the screens and the appropriate navigation structure of your app.
The next step is to create screen flows of each scenario. The screen flow is a map of each of the screens in the User Scenario and how a user navigates from one screen to the next. Very often there may be a logical flow to User Scenarios, but often these needs to be supplemented by deep insight into the business scenario that you are trying to capture. In partnering with our clients, we typically approach creating screen flows by conducting an in-person session with a client to white board each screen flow. The client can articulate how the user should get from one screen to the next.
Upon completion of all of the screen flows, we dive directly into creating wireframes of each screen in the application. A wireframe is an architectural blueprint of each screen in the application. Good wireframes reflect content placement, navigation elements, branding placement, and interaction. There are a variety of tools that can successfully create wireframes. However, selection of a tool is dependent upon several factors - time you have to build the wireframes, how you would like to communicate the wireframes to the development team, and the availability or lack of availability of requirements.
If you have very detailed requirements, you can use tools such as Axure, Omnigraffle, and Microsoft Visio. If you do not have access to detailed requirements, I would recommend tools such as Balsamiq or Hand Sketched Wireframes. Both of these approaches help you articulate the vision of your mobile application. Regardless of the tool you select, one of the primary expectations of your Information Architecture is that you are able to present these documents to both the client and development teams. It is helpful to think of the final output and presentation of all of the User Experience deliverables – not only creating them but being able to provide them as artifacts that are continuously referenced during the project lifecycle.
My next blog post will cover we use the Information Architecture framework to build our Visual Design.