App Prototyping: The Secret to Designing Lovable Apps

App prototyping is a proven technique that ArcTouch uses during our design process to help make lovable apps. 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:

Tools we use during this stage at ArcTouch: whiteboard, Post-its® , pen and pencil, Sketch (from Bohemian Coding)

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.

Tools we use during this stage at ArcTouch: InVision, Sketch

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 product planning workshops. 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.

Tools we use during this stage at ArcTouch: InVision, Flinto, Xcode, Sketch

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.

Tools we use during this stage at ArcTouch: Pixate, Flinto, Adobe After Effects

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.

Usability studies

If you can, run some usability studies with friends, strangers, or ideally with potential users. This is your chance to spot problems and adjust for users’ needs before launching to the world. Remember, depending on the limitations of your prototype, you’ll most likely need to set up a basic script for the user to run through. Here’s an example task scenario:

Imagine you are John Smith, and you would like to send $100 to your friend, Maria Lopez. Using this app prototype, show me how you would proceed.

This very specific script informs the user about who they are and what they would like to do. It removes any variables about how someone may use the app. Without focus and consistency in the scripts, you’d have to add more logic to your prototypes to allow the user to enter their own name or pick an arbitrary send amount, and this list of prototyping tools I suggest below would no longer work. When you need to test content, and cannot rely on pre-defined scripts, you can save time instead by testing with an actual beta of the app. To learn more about usability studies, I suggest checking out the book, Rocket Surgery Made Easy by Steve Krug. Krug makes these documents freely available on his website. Or, buy his book. It’s the bible of user testing!

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.

ArcTouch’s app prototyping toolset

Depending on the project, we use a different tool to meet our app prototyping needs. Here is a list of the tools we use here at ArcTouch. Start at the top of the list for simple app prototypes — lower down are tools for more complex needs. Each has its own uses and benefits:

invisionapp.com

Our choice for simple click-through app prototyping with full-screen transitions. Works for iOS and Android apps.

InVision has several benefits, from automatic updates to ease of sharing and collaboration. The process to go from an exported folder of mockups to a working app prototype is fast: Simply drop in the screens, draw the tap targets, and connect the screens with simple, full-screen transitions. Just use a QR code reader to install the prototype on your iOS or Android device. It’s web-based, so updating the website will automatically update the web app prototype in real time. Soon, inVision and Sketch are expected to release an update to the Craft plugin that will allow for you to prototype directly inside Sketch. Once this tool is released, we might have a winner for all of our prototyping needs.

Pixate.com

Our choice for high-fidelity animations and single-screen app interactions. Works for iOS and Android apps.

Pixate does a great job of allowing you to animate individual elements on the screen. It also allows you to add interactions, and play with your elements — e.g. swiping a scroll view, or dragging an element around the screen. This tool is great for finessing complex page animations while still being able to interact with the prototype. The downside to Pixate is that handling multiple screens becomes a nuisance since it is single-view based. Mimicking screen transitions must be done manually, which can be time intensive and make the workspace cluttered.

Flinto.com/mac

Our choice for larger scale app prototypes including multiple screens including small moving parts. Works for iOS apps.

Flinto makes creating complex transitions from screen to screen simple to experiment with. It sets up automatic transitions between screens based on asset locations changing between two screens. Using this tool sparks creativity, just in what it has to offer. It has many unique benefits, for example you can import your files directly from Sketch and then export the animation’s code as Swift for ready iOS development.

Adobe After Effects

Our choice for Windows Mobile, for when a video will suffice, or when animations are intense. Works for any platform.

For Windows Mobile, we use Adobe After Effects — but this tool also works across iOS and Android. After Effects allows you to make a video representation of your app, which can be a great alternative to an interactive prototype. You can still visualize the screen transitions, however the downside is that you cannot actually click through the screens on the device. Prototyping in Adobe After Effects does, however, allow you to create actual video assets that you might use in your app. The fidelity of the animation options and timing are endless, since this is a professional motion graphics tool.

Xcode

Our choice when prototyping native transitions and interactions for iOS apps.

With a quick introductory course to Xcode, you can create simple page flows and transitions. When we want to focus on standards and see how native iOS transitions will appear we use Xcode, the same program used to write iOS apps. Something just seems that much more satisfying when you are able to program a prototype in native code, but this technique is more time intensive.

This is our current list of app prototyping tools, but new ones are being developed each day, and new features are constantly added to the mix. Some tools high on our radar to look out for are InVision’s Craft Prototype and Adobe XD. These tools expect to simplify the design process to incorporate design and prototyping into the same tool. With tools like these, app prototyping should become the standard on any project.