The Mobile Design Process

In terms of function, there are certainly some areas of app development that are not the "designer's job" per se, but still have a great impact on the design conceptually and in application’s creative direction. If you are working on an app, and these jobs are not being filled, find someone who has these skills to do so or give it a try yourself. Skipping these steps can lead you down a costly path of revisions when your users find that your app is missing functionality or has painful design flaws.

What is the Application’s Primary Task?

Once an idea for an app has been generally scoped out, it’s time to narrow down the application functionality to the core of what the app does. The most popular apps establish and maintain focus on ONE primary task. To do this you must determine what that primary task is by creating  a concise explanation of your apps main purpose and its intended audience, also known as a product definition statement.

I know it sounds geeky and useless, but this is the phrase you should have tacked on your wall the entire time you’re working on the design. It’s the core of what the app is all about. So, pick the few features that will be the most frequently used by the majority of your users and are most appropriate for the mobile context. A quick way to do this is to fill in these blanks for the application you're working on:

(Your differentiator) (Your solution) for (Your audience).

Here's an example for the iPhone's "Photos" app:

(Easy to use) (digital photo sharing) for (casual iPhone users).

Market Research
Market research may sound like another one of those *yawn* tasks, but skipping this step is...dumb. If you don’t want to do it, hire someone else who does get excited about this kind of work. Don’t fall into the trap of “no one else has done this” and “this idea is totally original” or “I want to keep my idea pure, protected from outside influence.” If you buy into these ideas, your app will be perfect, but only for you.

Step 1: Prepare to Compare

The best way to cross reference and document all of you research is to paste it into a spreadsheet or word processing document. You can create your own, OR I’ve created one on Google Docs you can use: Mobile App Research Spreadsheet. I’ve put in examples relevant to the app we’ll be working on in this article. Just replace this data with your own! This makes it nice and easy to cross reference all of the features, benefits and technology other products offer.

Step 2: Look for Existing Solutions

I say “existing solutions” rather than “competition” because not all related products will be competing in your mobile marketplace. Some may be web apps, desktop applications or even offline sources in the same field of interest. The best way to find existing products is to search every variety of keywords related to your application on:

Google
narrow the search to ‘blogs” and “news” to get really recent results
iTunes App Store
Android Marketplace
Step 3: Uncover Technical Limitations

During market research be prepared to uncover technical limitations you weren’t expecting. As a designer, you may say, “Who cares? That’s the developers job!” Maybe so, but you would be surprised how many technical feasibility discussions wind up impacting design! Believe me, you want to be a part of that discussion.

Examples of technical limitations might include: What if you wanted to create an app that would allow you to block calls from a specific number? Uh oh, the iPhone SDK doesn’t support that functionality. Alternatively, let’s say I wanted to create an app that allows you to find the nearest coffee shop? Better think about how many hits your app may get, because Google and Yahoo! both start charging once you exceed a certain daily volume of search requests in your app!

Step 4: Planning for Future Functionality

This is VERY important. When you become discouraged by learning about all of the things that are not possible today, good news - you can still plan for t hem in your design! Did the first iPhone have a video camera? No, but developers that had their game once started thinking about opportunities in that area that would inevitably open up in the future.

Another reason to plan for future functionality is for the applications ability to scale or grow. The same as websites, apps often go through growth spurts of one kind or another. Sometimes that means adding features or content, sometimes it means peeling things away! Think about how you can maintain a balance between creativity and modularity. Allowing pieces to be plugged in and out easily from a layout standpoint and you’ll have a lot less headaches down the road!

Target Audience
Knowing your target audience is very important in defining a design style, typography, and layout. Does your app appeal to accountants or 18 - 25 year old gamers? Having this information and diving even deeper to develop "personas" is essential to understanding what the demographic wants to see, and the context in which they'll use the app.

For example, Mike Todd is an 18-year old college student in New York City. This tells us a lot more about Mike. He is in college, around other students his age, most with similar schedules. Mike may want a game with 2-player interaction. Would we have thought of 2-player interaction if we only knew Mike's age? Depending on the app, maybe or maybe not. Regardless, drawing out personas brings richness to your brainstorming and helps draw out functionality that's important to your target audience, and important to the design.

Use Case Scenarios
Once personas are defined, the characters need to be placed in relevant, true-to-life, “mobile” circumstances. Where are the users that use the app? Are they on foot, by car, or train?
Forty-three year old Bill is driving to a meeting in downtown London and wants to stop for a cup of coffee. Should the app require that Bill tap the screen several times before finding his coffee shop? Absolutely if your brother owns a body shop! Thinking through the variety of circumstances users find themselves in, and dialing in on scenarios where certain functionality repeats is the key to defining what screens you'll be designing.

Sitemap
Sitemaps for mobile are critical to design. To design a flow that's intuitive, understanding the relationship of content to other content provides a way to design simple and usable controls. Mobile app sitemaps differ from website sitemaps as mobile apps should not present the user with multiple ways to get to one place. One door to one room: that's it. Mobile users don't have time to make a wrong move then go "back" and try to find the proper path.

Wireframing and Paper Prototyping
Data collected from the use case scenarios will define the content and controls that need to be present on the screens defined in the sitemap. From there you have to design a preliminary layout that will account for each of these design elements. Define a grid and establish the importance of information using the color, shape, and size of design elements.

Ergonomically speaking, users hold touchscreen mobile devices in a way that the thumb position is typically pointed towards the middle of the screen. So, if you want to navigate users around the app quickly, give them controls that allows them to move around holding the device with just one hand!

Also, consider the variety of ways content can move on and off screen. For example, mobile sheets are a great way to hide actionable controls until the user is ready to use them.
Think about how you can minimize user input. Who wants to be bogged down with entering a bunch of text?  Provide users with a Picker Table so they can select a choice from a menu instead.

In mobile design, paper prototyping will save you lots of time. Much like any design or illustration process, having iterations of your design allows you to explore a wider variety of design options to a deeper degree. And with paper prototyping there's less "risk", less attachment to a scrap of paper than a polished Photoshop file. For example, working on post it notes is useful in being able to re-order, add or delete screens until the flow is right. See this Tumblr thread for a nice collection of mobile wireframes.

Creating Final Files
Once you’ve fine-tuned your paper prototypes, it’s time to bring those sketches to life in Photoshop. If you haven’t already, jump back to my previous post on iPhone Design Templates and grab a few to get you started. In that article you will also find specifications on how to set up your files at the proper size and resolution. If you’re lucky enough to work with a developer who can slice out images for you, please be polite and organize your file using folders.

Conclusion
This is certainly an abbreviated version of each step in the mobile design process so please be sure to leave me a comment below and let me know which area you would like for me to expound upon!