Prototypes are great to quickly build out a representation of your ‘amazing’ new product idea. In the mobile app world prototypes are especially awesome because you have them at your disposal to share, promote and test wherever you are.

prototyping

5 Reasons to Build a Prototype

This section will be short and to the point. Here we go:

  1. They’re ready in hours. Not days, not weeks, not months, but rather in a matter of hours you can have a professional looking app on your phone.
  2. User Testing galore! At dinner with friends? Test your app. At a networking event? Test your app. Visiting your parents? See how well your app performs with someone who has to put on glasses to see the screen and has no idea what your icons mean. Seriously – you’ll learn a lot!
  3. Prototypes provide analytics like full apps, with tools like Reflector, Lookback, userlytics and Mirroring360.
  4. If you’re a Lean Startup, a prototype makes a great MVP.
  5. Or if you’re in services, send your prototype to your client to let them champion the project with their stakeholders for quick, early wins.

Getting Unstuck From Your Business Problem

Let’s take a step back from prototyping though. What if you’re not there yet? What if you’re still stuck at square one with a business problem, unsure how to move forward?

In a way it’s like writer’s block. You have a business problem you’re looking to solve and a prototype will help validate whether it’ll work, but there’s a lot of important steps in between. Not knowing those steps can slow you down and make it tough to get started.

1. Create Personas & Pain Points

At its simplest, a persona is a representation of a user type, calling out that user’s behaviors, attitudes and motivations. A good rule of thumb is to target 3-5 personas. If you have 14 – as I’ve seen – you have too many.

The clear takeaway from your personas should be the pain points you’ll be looking to address. These pain points should map to your business problem. If they don’t, you’re either a) solving the wrong problem, or b) targeting the wrong user.

2. Feature Brainstorm

whiteboard

Be creative. There are no bad ideas. Create an exhaustive list of the craziest ways you can solve the pain points you identified in step 1.

If you’re stuck think about what data might be available to you that isn’t otherwise. If you’re on a phone, what could you do with GPS data you don’t have on the desktop? Or consider integrations with other apps and services?

What if Uber connected to your calendar to figure out when your next meeting is and where it is. Then, what if it fed that data into Google Maps traffic to know when you’ll need to leave to get there on time? And then, what if it sent an alert to your smart watch telling you this and asking if you’d like to request an Uber now?

3. Storyboards

Storyboards are technology agnostic process flows.

3220961846_da734c0806_o
via Peter Morville

Maybe your app creates new value-add steps. Or maybe it removes redundant steps. Or maybe it enhances existing steps with a quicker, more efficient flow. In any case, you should take the best features from step 2 and compare an as-is state to the to-be.

4. Device Delivery Strategy

For each step in your process where your users will interact with your app, how will they do so? Take this example.

Tony, a warehouse operations manager, gets a digest email from your app in the morning that he reads on his iPhone driving into work (at stop lights only!).

When he gets into work and settled at his desk Tony checks your app dashboard on his desktop to get a sense for how today is trending. Later in the afternoon when he’s on the warehouse floor he checks into a mobile terminal version of your app running on an Android tablet. Same app, but a much different experience on each platform and device.

5. Sketch Time

mobile design pattern gallery
this book!

You have your key pain points and solution. You’ve whittled them down into specific features that can be added into your users’ existing process flows. We’re five steps in and you’re finally ready to start visually designing your app.

But before you do anything you’ll first need to choose the design pattern before adding navigation and controls. In your sketches and/or wireframes, focus on the functionality and interaction between screens and components first. After that you can place the individual components. Only after you’re done wireframing should you consider adding a UI layer.

6. Prototyping

Five easy steps and you’re ready to build a prototype, a real representation of your app you can put in front of someone and get feedback on.

Need a prototyping tool? There are tons to choose from and design-greats Cooper have given the pros and cons to each:

cooper prototyping tools

Feel free to prototype with your sketch or wireframe and still take away great feedback. Or optionally add in a UI layer to get the look and polish of your final app.

Regardless, you now have a product that looks and feels like your app, yet at a fraction of the time an cost. You have something you can put in front of users to test your hypotheses. And once you’ve validated your key hypotheses it’s time to start building!