Prototyping

5 Mobile App Prototyping Mistakes and How to Avoid Them

November 28, 2018

Mobile app prototyping can take your startup to the next level — but only if you’re doing it right.

The reality is, it’s unlikely that every designer or developer is using prototypes to their fullest potential. Some designers might see prototypes as a waste of time — or as something that’s only useful in the very earliest phase of sketching out an idea. Likewise, other stakeholders might overthink the prototyping process and drag the rest of your team down.

Here are the five most common prototyping mistakes — and how to avoid them.

1. Under-Utilizing Mobile App Prototyping

When app prototyping tools first came out, they weren’t flexible, and their output couldn’t mimic a final product. Understandably, those limitations severely restricted the use of prototypes. You could wireframe an app, build and test user flow and logic on a basic level, and do some mobile app design problem-solving — but only to a point.

A photo of a mobile app design team working on user flow.
Sticky notes are a great way to work out rudimentary user flow and layout.

The tools weren’t good enough to accurately simulate the behavior of an app, which meant testing and debugging had to be done in development.

Unfortunately, some developers and designers who tried out these early prototyping tools years ago believe they’re still very limited today — and that’s just not the case.

With modern mobile app prototyping tools, there are very few issues that need to wait until after you’ve coded the app. In many cases, it’s possible to create a mobile app prototype that’s virtually indistinguishable from the finished product.

That opens up some inspiring opportunities. Entrepreneurs and investors can see exactly what they’re funding before it’s deep into development. Designers can better articulate and perfect their ideas before investing too much time into something that doesn’t work. And developers can avoid last-minute changes and coding marathons.

However, most companies haven’t fully realized these benefits. Some never prototype beyond wireframing, leading to unpredictability and delays in development. Others use prototyping for specific use cases such as design sprints but haven’t explored the full capabilities of prototyping tools.

If that sounds like your company, it’s time to experiment with your process. Try using a high-fidelity prototyping tool to accelerate your workflow. If you struggle with decision-making, see if prototypes can help you frame your choices more effectively. Over time, you’ll find the best prototyping strategy for your organization.

2. Treating Usability Testing as an Afterthought

Accurate usability tests demand accurate prototypes.

Your users can’t look at a sketch and give you accurate feedback on whether it will be usable or intuitive. You need to actually observe them trying out the app (or a simulation of it) to see whether they’re missing button taps and struggling to find essential functions.

This is particularly crucial for accessibility testing. Disabled users face a wide range of challenges, which your team may not fully understand. Small tweaks — changing your color scheme, increasing the size of your buttons or simplifying your layout — can make a massive difference to these users. But those tweaks can become costly or time-prohibitive if you don’t start testing them (or even thinking about them) until late in your app’s development.

By bringing high-fidelity mobile app prototyping into the design process, you can perform user testing earlier in the cycle. As a browser-based app, Proto.io lets your users try your prototype on any device, without downloading anything. You can create demos, perform interviews, and even record where users touch the screen to get a detailed understanding of usability.

Check out our on-demand webinar to learn more about testing with Proto.io.

A screenshot of a sample prototype made with Proto.io.
Proto.io lets you create functional mobile app prototypes — no coding required.

3. Failing to Collaborate on Mobile App Prototypes

Who “owns” the prototyping process? Is it a tool for designers to hash out their ideas, or for developers to plan the most effective approach to building the product? Is it for product managers to scope the project or for executives to greenlight development? Is your prototype a flashy demo for investors, or a rough work in progress for your product team? And what about marketing and sales — do they have a stake?

While not every prototype is relevant to all stakeholders, every stakeholder potentially has an interest in the mobile app prototyping process. You’ll get stronger buy-in and better results when you give those stakeholders a role in that process.

Start by bringing a developer into work with the design team on prototyping. They can spot things designers may miss, such as features that may not integrate well with the app, or even easier solutions to specific design challenges.

For product managers and entrepreneurs, prototyping can be a way to break down long-term goals into releases. It works in the other direction as well, enabling your decision-makers to transform a great app idea into a sustainable product that’s capable of ongoing growth.

Even marketers have a role. As the team responsible for understanding the competitive landscape from a consumer’s perspective, they can provide valuable insight into how users will experience an app, and what changes will make it more successful. Prototypes also let them see the product ahead of time, enabling them to better target end users.

Obviously, that doesn’t mean everyone should be involved in making each prototype. Instead, you should look for opportunities where stakeholders from other teams can benefit from early exposure to the app or contribute to it in a meaningful way.

Show the prototype off to your marketers to get their ideas flowing. Get input from developers before you finalize the mobile app design. Mockup possible new features or upgrades ahead of time to keep your team excited about long-term goals. Prototypes don’t just help you build better apps — they also help you build a culture of collaboration.

4. Treating the Prototype as the Product

Perfectionism can be a serious obstacle for entrepreneurs. The same sense of vision that inspires can cause them to push back release dates and tinker endlessly with an app that’s never good enough to meet their standards.

In some ways, prototyping can help these perfectionists. It gives them more control over the mobile app design process, allowing them to fine-tune apps before they’re built, which can cut down on costs and potential delays from redesigning the product.

A photo of a designer looking at mobile app sketches.
We still like to use good old fashioned paper sometimes.

However, mobile app prototyping can’t protect you from yourself. A perfectionist can end up using all that added flexibility to burn out their designers (here are our ways to avoid burnout), and waste time early in the process — and then still be unsatisfied with the product once it’s built.

Prototypes also don’t protect you from a changing market or prevent you from coming up with new ideas during the process that are better than your original one.

In fact, a perfectionist can sometimes turn an asset like a prototype into a liability. Not only does your team have to build the perfect app, but they also need to build an ideal prototype before the developers even start!

If you’re a perfectionist, you need to understand that prototypes are a tool, not a product. They’re useful if they help you release a better product more quickly and at a lower cost or accomplish other goals, such as attracting investors. Anything beyond that can be a liability if you aren’t careful.

Prototypes also won’t stop you from having to make hard choices. With the accelerating pace of technology, there still will never be enough time — you might still have to say, “it’s good enough,” and choose a timely launch over a perfect product.

5. Choosing Limited Mobile App Prototyping Tools

Your tech stack doesn’t just affect what you’re doing now — it also affects the choices you can make. For example, if you’re using a prototyping tool that supports VR prototyping in its standard workflow, the cost of experimenting with VR is very low. That means if you’re working on prototyping a traditional mobile app and suddenly see a use case for a VR version, you can start tinkering immediately.

If your prototyping app doesn’t support VR, the cost is much higher — you’ll have to invest in a new app, and take the time to learn it. Unless you’re really confident that the VR version will pan out, it won’t make sense to spend the time and money. So, a flexible mobile app prototyping tool can help you take advantage of opportunities you might otherwise miss.

At the same time, there’s something to be said for using simple tools for simple tasks. If you’re just wireframing, you don’t need support for animation or complex logic — you just need something that clearly demonstrates the primary flow of the app, looks good, and is quick and easy to use.

Paper prototypes will get the job done for in-person demos, but flipping through a stack of papers to show off your app over a video conference isn’t exactly ideal. You need something that lets the user tap between screens and preview the flow on their own.

We recommend using two programs: a powerful prototyping app and a lightweight user flow tool. For general mobile app design, Proto.io provides ultra-high fidelity experiences, with rich UI libraries, and support for rich interactions and animations — all without coding.

A photo of someone using Overflow.io on a laptop.
Overflow helps you work out seamless mobile app user flow.

Proto.io is also a great tool for mid and low-fidelity prototyping. However, for wireframing and user flow, many companies will prefer the simplicity of Overflow.

This program enables designers to link their designs into a playable user flow in minutes. There’s no need for complex workarounds, using flowcharting software, or Sketch artboards. And the results are better because Overflow actually simulates user flow instead of just indicating it with arrows.

Your team can tap buttons to navigate screens from a user perspective, then zoom out for an overview of the app structure. Check out our interactive demo to see how it works.

A photo of someone watching the Overflow demo on their smartphone.

Check out our interactive Overflow.io demo here.

Mobile Prototyping Is a Strategic Activity

Prototypes aren’t just a way to visualize your app — they’re a key component of your design and development process.

The right tools combined with the right approach can lead to faster development, better apps, and higher profits. Learn how we can help with our free webinar, Getting up to speed with Proto.io.

Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.

Have another tip for avoiding prototyping mistakes? Let us know by tweeting us @Protoio!

Author