Mobile app prototyping is essential to product designers to iteratively work towards the end result they want. At Fueled, we take an agile approach to mobile app development, which means prototyping early and often. Our process is solely focused on highlighting the benefits of prototyping with clients early on in the relationship, and the ways this approach can make your end product better as a result.

Two Stages of Mobile App Prototyping

Prototyping is generally the second step in our initial design process and is done in tandem with wireframing. Design begins with brainstorming ideas, where we think of the best way to prioritize, organize, and show the features our product designers have decided on. But this is also the step where the UI and UX of the app begin to form. Mobile app wireframes follow this step. Wireframing, or building clickable prototypes, is like storyboarding for app designers. It’s where we start to see what screens will look like, how elements will transition, and where we get a feel for the user journey of the app.

The final step before development is interactive prototyping. Prototypes are built to check that the interactions we are building are the correct solutions to the problems the app is looking to tackle. These are used to test how engaging users find the simple interactions of the app. Is the basic loop engaging enough to hook users in? Is the flow intuitive to the user? Is what users see on screen what they are expecting or are they thrown off by some minor detail?

As part of Fueled’s agile product process, we design and develop our apps in tandem. We take care to use tools and processes that ensure our developers can view our wireframes and prototypes as early as possible.

In the grand scheme of the process, the design workflow goes like this: brainstorm/pen and paper sketch, wireframes, prototype, development, final design. Prototyping right after wireframing allows us to validate our design and iterate before development starts. Developing designs before they have been tested can be a costly mistake. Prototyping a mobile app beforehand helps us properly rationalize our decisions and ensure that the correct interactions move into development.

That is why it is important to spend as much time as necessary making sure each interaction makes sense, especially when there is one particular interaction that is core to the user experience. Prototypes will often be done multiple times, so don’t fret - if you need to start from scratch it just means you are learning from your mistakes and are on your way to creating a better end product.

Fueled’s Mobile App Prototyping Toolkit

Mobile app prototyping can be done in multiple ways, Sketch has recently introduced a prototype feature that lets us design and prototype simultaneously. In fact, the majority of UI design tools are being refined to include prototyping tools to allow designers to simultaneously design and prototype. While this is beneficial in terms of displaying the flow of the app, it doesn’t allow you to create more complex interactions - for these complicated (but still lo-fi) prototypes we recommend Principle.

Principle is a mobile design prototyping tool that we use to create animations and test interactions. Why do we use Principle? For one, it’s easy to import Sketch files and expand upon the work we have already done without needing to recreate an approximation. Principle is a great program, loaded with features competitors don’t offer. For our needs, it is unmatched.

We love to have team members, real-life users, and industry professionals test our prototypes. For user testing clickable prototypes we have used usertesting.com. This lets us get earlier user feedback than we normally would with an interactive prototype. It also gives us a great insight into how users are interacting with the product. Do they understand which elements are clickable? Do they know where they are within the app hierarchy? Are they clear on what exactly it is they should be doing next?

Advantages of Mobile App Prototyping Early On

It’s really simple. The earlier we can prototype, the earlier we can get user feedback. This benefits our agile, iterative approach to app design and development. We are constantly making tweaks and improvements to our product design throughout our design sprints.

When we’re not sure if there is space in a market for our concept, it’s beneficial to begin work on a prototype together and start user testing immediately. This gives us the best indication of how the product fits within the market - sometimes with surprising results.

User feedback is most important to this process because it really saves us time and money! It can help validate UX decisions without wasting time and money developing them - making sure we get the right interaction built. This helps us find mistakes early, and gives the time to adjust well before going into development. It can also help validate risky UX decisions we went out on a limb to try, or vice versa, which helps us not only on the project the feedback was related to but on future projects.

Perhaps most important to our team’s workflow is how mobile app prototyping in the early stages of app design enhances communication between our designers and developers. The interactive prototypes allow our iOS developers to see something in motion and begin discussing possibilities sooner rather than later in the process. Using Principle, the timing and positions of the assets that design set in the prototypes can be inserted directly into Xcode and tested in the iOS build immediately.

In short, prototyping early bridges the gap between design and development and accelerates the time it takes to build a responsive product with incredible UX.

Making the Most of Mobile App Prototyping

It’s important to do your prototyping immediately after completing your initial UX research. It’s perfectly acceptable to continue research alongside initial prototyping. In fact, we encourage this agile approach. For a dating app we launched, we looked at competing apps and saw that each was quick and intuitive. Quick, single interactions were key. With just that information, we knew where to begin prototyping.

We recommend you block off time to get designers and developers in the same room for working sessions. Pairing a prototype with working sessions cuts out the substantial back and forth trying to get it right. This saves a ton of time both immediately and further down the line when QAing a project.

We were in a position where we were able to work on designing a prototype at the same time as the builds were being created. This helped us be totally in sync with the development team - especially when designing the core interaction for the home screen.

When working with both interactives and wireframes, avoid hi-fi prototyping. Instead, adopt a lo-fi approach to create a working interaction prototype. With our wireframes, we create everything in grayscale, focusing on layout and user journey. We leave branding and the finer details until later in the development/design cycle. These elements are certainly important, but first, it’s important to nail the basics of structure, feel, and user journey.

If you jump headfirst into a hi-fi prototype you’re taking the developer into the complex world of animations/interaction discussions, when all you need at this stage is a low-fi prototype to figure out the basics.

Why Mobile App Prototyping Matters to Fueled

Every ounce of our creative energy is dedicated to creating products that the user loves. During the wireframing phase of a product, think about how to bring clarity to the user. You should be creating quick and simple prototypes of each piece of motion. There’s no need for them to be overly complex. Even from the early stages of the project, it’s important to test each element — the transition you imagined may not be the best solution once you have seen it come to life.

Prototyping shouldn’t be an afterthought, transitions and animations should be created at the same time as the UI. The earlier you do it the better the product will be. Mobile app prototyping is an easy way to get early user feedback, design iteratively, and ensure cohesion between design and development. We do it for every project and look how far we’ve come.