5 Steps for Wireframing and Paper Prototyping Mobile Apps

This article builds on our previous article about the Mobile Design Process, digging deeper into paper prototyping and wireframing phases of app development. At the end, I’ll have a list of various tools you can use to create your wireframes and prototypes.

Interaction design for mobile is a common topic of conversation among User Experience (UX) professionals, but what about those of us who only work with UX occasionally? Many designers and developers are assigned projects that do not have the luxury of retaining a UX specialist, but are (of course) still expected to product elegant, intuitive interfaces.

Wireframing and Paper Prototyping

There has been a decent amount of discussion in the user experience community around the necessity of wireframing in web design these days, and I began to wonder “does this apply to mobile?” Are wireframes just a billable design deliverable to let the client to know we’re “working”? No, I think it is more than that. Wireframing and paper prototyping is definitely evolving as user’s online prowess and tastes become more refined, but this practice is still a very valuable component in mobile design.

Paper Prototyping Comes First

In my experience, there is a vast difference in the form and function of wireframes versus paper prototypes, even though the terms may be used interchangeably. In my mobile design process, the first thing that happens after we figure out who is using the app and how, is paper prototypes -NOT wireframes.

There are some who claim “paper is dead” and tout the benefits of digital prototyping. Others argue that pencil and paper stregthens design. Personally, I come up with more fluid layouts when I am not in front of my computer. However, we’re all individuals, with different preferences and ways of thinking. Maybe you can be just as creative in front of your computer; it’s something each designer has to figure out for themselves!

One thing that I love about offline paper prototyping is the speed at which you can iterate design. I use screen-sized sticky notes that can quickly be pulled off, reworked, rearranged etc. Once a flow has been established for the app, it’s time to nail down the on-screen elements in a wireframed version.

Wireframes Come Second and Must be Shared

Even if this is an app for your own internal “client”, wireframes serve as another review to make sure the app is working in a way that serves both the user and the business. You could skip the process and move straight from paper prototypes to Photoshop for GUI design. I know it’s tempting, but don’t do it! The instant you begin working in a bubble is the same time you give in to the “Curse of Knowledge”.

In the book Made to Stick, authors & brothers Chip and Dan Heath talk about the “Curse of Knowledge” and its impact on our ability to create new, “sticky” ideas. The premise as it relates to mobile design is once you start building your knowledge-base of mobile design and technology, the more you distance yourself from a “typical app user”. You can’t really imagine what it’s like to be your audience, even if you fit the profile perfectly. Your ability to put yourself in your audience’s shoes becomes clouded by everything you already know about the app, how it works and what you think the audience wants.

Once we know something, we find it hard to imagine what it was like not to know it. Our knowledge has “cursed” us. - Made to Stick
All of that is to say you must wireframe and share those wireframes with the target audience of your app.

Now that wireframing and paper prototyping within the mobile context has been defined, I’d like to outline the top five things you should be doing in your wireframing and paper prototyping sessions. It’s easy to just slap up a bunch of sketches and call it a day, especially if you’re primary focus is not user experience design.

My hope is that these tips will encourage you to take the time to think through your app’s user experience by making it an easy, step-by-step process that’s repeatable and easy to follow!

1. Focus on the Primary Task

The first thing to do before you even think about putting pen to paper is to ask yourself this question: what is your app’s primary task? Specifically write down:

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

Let’s look at an example for the app Evernote:

“Evernote for iPhone lets you create notes, snap photos, and record voice memos that you can then access any time from your iPhone, computer, or the web.”

The copy on their website clearly explains the primary task for the app:

(Omni-accessible) (multiple file type creation and storage) for (casual iPhone users).

Define this statement for your app and tack it in a place where you will see it frequently while working on the prototypes. It will help you to stay precisely focused on the one thing the app MUST do.

2. Create Use Case Scenarios

Once you’ve defined your primary task, you’ve probably also put some thought into who wants an app that performs this task! Use cases are the BEST way to get the paper prototyping process started. In this article, I talk about how I defined use case scenarios for our Doodle Bright app. I gave “my people” a name, an address, an occupation and a specific scenario when they might use an app like Doodle Bright.

Here’s an example:

Jane is waiting in the doctors office for a 3 o’clock appointment with her 4-year old son, Chad. She brought her iPad just in case the wait is longer than expected and of course they’re stuck in the waiting room for a half hour before they are called. Jane passes the time by drawing trucks and trains with Chad while they wait for her appointment.

In this scenario, Jane and Chad are playing with the app together, which means mom can prompt him on how to interact with different elements on the screen if he is unsure of the next step.

Now let’s look at this example:

Jane is in the carpool line to pick up her eldest from school. Chad is in the backseat, bored after a day of running errands. Jane hands her iPad to him with the Doodle Bright app launched. Chad knows which buttons to push because they are intuitive to a 4-year old.

In this scenario, the controls have to be easily understandable for an unsupervised child. Does this alter the types of paper prototypes you create for this app? Heck yea it does! Now, instead of designing for mom and son, to have a wider appeal we see that the prototypes should primary be geared towards only the child.

It may be obvious that an app like this would require “thinking like a child” but without this use case scenario to back up that claim, you may fall into the default “adult mode” of thinking about the design.

3. Identify Mental Models

In her article about “the Secret to Designing an Intuitive Interface” Susan Weinschenk talks about how to match your design to what the user expects to see. The better you can do this, the more intuitive your interface will be.

4. Check the Flow

I often find that I have a perfect flow defined for an app, and then I find something I’ve left out. Been there? It’s aggravating but one thing I’ve found that can head off a lot of “leaving outs” is thinking outside of the “perfect” scenario.

An example from the Doodle Bright scenario is when Chad creates a totally awesome picture Jane wants to save and print, but he accidentally closes the app. Uh oh. What now? Did you account for an auto-save in your paper prototypes? I hope so!

5. Find the Method that Works for YOU

As I mentioned before, everyone is unique and creative in their own way. You have to find a method that squeezes the most out of you. Paper prototyping is one of the most creative exercises in the app development process, you have to work on this in your “prime” hours, environment etc.

Other Resources

There are plenty of articles out there with dozens of resources and tools for creating wireframes. I hope this article has you convinced that it is a task you can tackle, even if you’re not a user experience expert. Take a look at the following links and please make a note of any I’ve left out in the comments below.

For a great article on wireframing in general, skip to the “Benefits of Wireframing” to learn principles that will apply to both web and mobile apps.

Next checkout a very high-level overview of the wireframing process that was behind the Washington Post iPad app. Personally, I would love to see more information on this one!

Other References of Note:

A set of printable sketch templates for mobile apps.

A huge list of wireframing and paper prototyping tools.

Just like it says: “excellent wireframing resources”.