Creating App Maps for Mobile Projects
What are app maps? Essentially they are the mobile app design’s equivalent to web design’s site maps. Just like a map helping a tourist orientate himself in a foreign city, the app map will serve as a key way for clients, project managers (PM), designers to “get on the same page” when transferring & sharing objectives – they hit across objectives in business, UX, and marketing, etc. Just like a blue-print of a house, the app map will showcase all the key screens (as well as the transitional ones) but they show the User’s journey within the product all in one glance. As for producers & PMs, an app map is the bible for digital projects.
Sketch it out
You won’t need to be an artist or a designer to create one. Forget aesthetics or ornaments (throw out any interruptions of color & stylistic preferences for now). Business owners, clients, PMs, and producers can do this and should be leading this phase. Simple boxes and arrows, circles and more boxes with scribbles of notes are what’s needed here. Objectives which are unique to each screen/box should be the focal point – write them down , articulate in minimal usage of words. I’ve found that large pieces of plain paper (A3 size is my favorite) or a whiteboard works well. Business input is key here and many questions asked without getting stumped with the “how” as that comes later. Structure and pillars of what will hold up this product is discovered and mapped out here.
Keep it in 1 page
Turning the rough sketches into a line-art is ideal here. PMs and producers commonly turn to designers at this point to start creating WireFrames at this point. I say, no need. Today, the industry is full of tools where non-designers can Do It Yourself. See below for tools which are available. Regardless which way you head, keeping it simple is the best way, in line-art (meaning collections of lines nothing more), and in black & white only. I’ve seen pieces of papers taped together with photocopied outlines of iPhones serving as great versions many times. Post-it notes stuck on? absolutely–use them! The key is to have it all in one page —where you can place it on the wall or on the floor and the group involved can see the TUX (Total User Experience) of the whole journey. It may not be pretty yet or fleshed out, but we can all get an idea how it’s taking shape from the point of view of the USER.
Include UX elements
Within 5 minutes of googling, anyone can find common UX design elements of buttons, gestures, etc. It is not un-common for even designers to do this–put them all in one page and print it out, then cut and paste them to the map. Hide/unhide elements of UX should be communicated on the app map. For designers Adobe Illustrator is the preferred tool for vector(line) art–it serves perfectly for creating & moving around navigational parts to get the idea across. Tip: the work created in the app map can be transferred easily to wireframe stage (which then is used for final designs). Yes, the wireframes can be doctored into 1 page to serve as an app map (why not??) and vise versa.
Keep editing & adding to it throughout the project
The map should be a living document with changes and corrections updated as they flow. Tip: save versions of the files (if you are working digitally) as you can retroactively access some parts which are needed at a later stage. This is known to happen, frequently. Any substantial changes should be shared with the stake-holders, clients, of the project–whom by now are familiar with the app map so you’d only need to point out the updated part.
Useful recommended tools
Balsamiq – anyone can use this tool and come up with decent app maps and even prototypes. The style of the tool is sketchy & hand-drawn which is a huge advantage as you’ll avoid the common confusion from stake-holders asking you “that’s not how it’s going to look finally right?” Anything else would look too polished & misguide them from what you are actually doing, mind-mapping. http://balsamiq.com/
Lumzy – similar to balsamic and is flash based, fast, and cheap to get started. http://lumzy.com/
MS Power point – great option if you don’t have time to try something new. Simply modify the slide’s dimensions (go to file> page setup) by making the slide itself 5 or 6 times bigger to fit in the needed information.
Adobe Illustrator – the choice for professionals as it has squashed its main competition or bought them out years ago. Excellent for app maps> wireFrames > final design/art stages. It even comes with templates with UX elements for both iPhone & iPads. These days anyone can own this tool for a monthly licensing via Adobe creative cloud for $10 per month. http://www.adobe.com/