App prototyping is a proven technique for bringing the magic in a mobile experience to life. Remember the last time you tried something new? Chances are it took you at least two tries to get it right. Why would designing an app be any different? If you want to be successful, you should test the waters with your app before you make it live.

You’ll never be able to fully imagine an app until it is on your phone and you can tap, swipe and interact with the screens. Only then will you really know if your app is intuitive, enjoyable and delivers the user experience you envisioned.

However, you typically can’t get this rewarding experience until the app is ready to submit to the app store. At that point, you probably won’t be able to make drastic alterations without causing big delays to the project. App prototyping solves this problem.

Bringing your designs to life with your app prototype

App prototyping allows you to get feedback on your design earlier, so that the first version the public sees is more polished. Even the act of creating an app prototype is beneficial. A good prototype can bring your designs to life so that you can work on solving interaction problems, and answering questions to edge cases like:

  • Does it make more sense for this screen to slide in from the right, or slide up from the bottom?
  • What if I tap on this button after I have selected this item?
  • How will I show that error?
  • What will the tap states look like?

Once you have a basic prototype of your app design, you can begin to think of ways to make the experience even more magical. This is near impossible to demonstrate with a static image of a screen. What will happen when I scroll down this page or tap this button? Will there be an animation when I earn a badge, or complete a level? This additional finesse is what sets great apps apart from the rest.

How do I begin?

It is easy to say you want to prototype your mobile app, but it can be daunting to know how to get started. It is best to prototype whenever you can, however projects are usually restricted by time constraints or budget. Ask yourself, “Where am I in the design process?” By analyzing which design stage you are in, and what you want out of your app prototype, you can create a prototype with low or high fidelity to match your needs.

1. CONTENT

“Right now I am just organizing content and creating the app feature set.”

At this stage, you have nothing visual to prototype. Instead, it is important to start laying out your user flows. Think from the user’s perspective of some common tasks they will want to accomplish in your app, and lay out the basic flows they will go through. When creating these flows, you start laying out the foundation, defining the screens needed in your app, as well as important actions needed on these screens. The prototypes to come will be based on these user flows.

2. WIREFRAME

“I have put together some wireframes of page layouts.”

At this point, you actually have the content segmented into screens. You can make a low fidelity click-through prototype to get a sense of how a user might navigate through your app. You should make sure there aren’t too many steps to do those basic tasks you set up in your user flows. Fancy screen transitions are less important at this stage; it is more important to see how easy things are and if the app is intuitive to navigate, so full-screen page transitions (slide left/right/up/down, pop, and fade) work well. You’ll be able to visualize the flow of your app at a high level. If the navigation or screenflow seems confusing, boring, or cumbersome, then it’s still early enough in the project to explore alternatives.

3. VISUAL

“I already started visual screen design.”

Once you have some visuals, you can sense how this app is actually going to feel to use. Does it make you relaxed, happy, motivated? We like to ensure that design meets the needs we identify in our project strategy sessions. At this point you might be trying to fine-tune the transitions and animations to add to this experience. High-fidelity app prototypes look and feel like native apps. You’ll realize when standard transitions aren’t going to be enough, and you might want to try some more interesting transitions between screens, or want to start playing around with user interactions.

4. FINESSE

“I have the app designed, but I would like to create or finesse complex animations or interactions.”

In order to get animation and interactions across, it is important to be able to visualize them. Sometimes it is enough to reference a well-known app and others will immediately understand what you are imagining. However, there are times when you are breaking the norm and need to define an even higher grade high-fidelity prototype to better clarify your point. Prototyping at this level involves the need for a platform that lets you fine-tune animation timings, cascade element animations, and trigger transitions off of interactive gestures.

So you have your app prototype. Now what? Share it.

Once you have a mobile app prototype, we suggest sharing it with any potential stakeholder – including investors, friends, potential users, and developers. Sharing this prototype with developers ensures that everyone is on the same page as far as how this app will behave. It will also spark questions about transitions, edge cases, and best practices. Sharing a prototype with investors can help broker a deal. Most importantly, sharing this prototype with potential users in usability studies can predict how users will use your app once it hits the stores. Try to finesse a prototype until you and your users are satisfied with it. Chances are, if you don’t like how the prototype feels, you won’t like the final product. If there is a usability problem where people get stuck or something doesn’t feel right, now is the time to fix it, not after development.

In short: No excuses to skip mobile app prototyping

By now, hopefully, I’ve convinced you that you need to prototype whenever you can. Once you have an app prototype, be sure to test it, share it, and learn from it. The potential of having a prototype is even more useful when you share it with others. You do not want to wait to test your app with live users; at that point, you risk losing clients if you uncover a bad user experience so late in the game. Using these tools will save you a lot of time, and make prototyping rather simple to accomplish, so there are no excuses.


Published on: