Part Three: The Newbs Guide to Prototyping for Mobile Apps

In part three of our series, we’ll go over what your app MVP might look like and how to take advantage of all the useful feedback you receive.

How To Bring a Killer App Idea Into Reality: This six-part series is designed to give a basic roadmap on how to get your app into the hands of the people whose lives you want to improve. Whether you just have an app idea floating in your head, or a team of coders ready to go, you’ve come to the right spot.

Getting Early Feedback Overview

In part two of this series, we emphasized the importance of quickly building an MVP (minimum viable product) so you can receive feedback from potential users at an early stage. However, what should that MVP look like? Even then, what do you do with it once it’s in hand?

Three Key Points on Getting Early Feedback

1. So Why Should I Prototype Anyway?
2. Wireframes, Mockups, and Prototypes
3. The Proper Care & Feeding of Prototypes

Key Point 1) So Why Should I Prototype Anyway?

Prototyping is a proven strategy that will help you learn by simulating how an app will function, look, and feel, without having to invest all the effort and cash needed to build it.

That being said, some of the more daring out there might opt to skip ahead, rushing into building what they think is a “fully baked product” – skipping both the prototype and MVP stages altogether.

This is a very risky move, and is not recommended, because the first iteration of an app rarely hits the targeted bullseye. Frequently we find that those who skip the critical prototype and MVP stages later come to regret it.

Like market research, prototyping is intended to make sure that you are on the right track. Creating prototypes is a quick way to learn if your app’s features and design actually work, letting you smooth over any kinks before you build it. At this early stage in the process, these time savers are priceless – especially for startups, where time is at a premium.

Also like market research, prototyping works as a reality check on your own assumptions. By the end of this stage, you will have data backing up whether or not your app solves the problem you validated through your market research. Prototyping can also help you identify any missed opportunities that your intended audience might bring to your attention.

Finally, your prototype can act as a living “requirements document” when you start building the real product. Developers can simply take a look at the prototype to understand what’s expected of them. The fewer decisions you need to make about features and designs while you’re building your app, the better.

Key Point 2) Wireframes, Mockups, and Prototypes

Deciding which format to use to get feedback depends on your audience and the use case.

Many organizations create multiple versions of all three during the app’s development.

• Wireframes – The skeletal, low-fidelity choice, wireframes are typically used to convey the big picture of an app’s appearance and layout. Simplified two-dimensional static illustrations show how the app will appear on a mobile device.
• Mockups – One step up from wire-frames in terms of fidelity, mockups are still however a static representation. Mockups can be very useful in demonstrating the app’s proof of concept to key stakeholders and potential users. They also provide a more realistic impression of how the app will appear, adding logos, colors, images, fonts, and other features.
• Clickable Prototypes – Clickable prototypes allow simulation of interaction with the app’s interface to understand the user’s journey, and navigation throughout the product. Unlike wireframes and mockups, prototypes are a full-fledged facsimile of the final product experience.
• Functional Prototypes – The most advanced stage, functional prototypes may include animations, events, and other advanced elements that are absent from their clickable cousins. These functional prototypes use actual business logic to provide a usually limited set of features.

Here are a few of the best tools out there for wireframes and prototypes:

– Wireframe.cc
– Framer
– Marvel App
– Invision

Key Point 3) The Proper Care and Feeding of Prototypes

Upon completing your prototype, it’s essential that you take full advantage of the feedback that you gather.

To begin, consider who your test cohorts will be: normal users, “super” users, key stakeholders, or even computers (automated tests). You must also have a clear idea of what you’ll be testing in a given session, such as the app’s usability, design, or function.

In particular, A/B testing, in which you present participants with different versions of the prototype, can be an immensely valuable tool. Having multiple options to compare and contrast often helps users formulate their own ideas and preferences. Take careful note of which versions users prefer most. 

One suggestion for what to do with your app feedback it to compile it all into a single document, if possible, and review this document carefully looking for trends and similarities. If you’re hearing the same things again and again, then you’ve likely found a critical element worth exploring further. When possible, gather quantitative feedback as well as qualitative. Quantitative scores, such as asking users to rank app ease of use from 1-5, will allow you to more easily measure changes over time and also to compare responses across user groups.

If you have a team you’re working with, make sure you share all the feedback you’re getting with them. Sometimes others may come up with insights that you might have missed, and it’s usually better to work on improving the app collaboratively.

Whether the immediate feedback says that your app prototype is a smashing success or a flop, don’t get ahead of yourself and make too many drastic knee-jerk changes. Your prototype will evolve through an iterative process, growing more and more polished as users confirm or reject your assumptions and hypotheses. 

BONUS: Here is a great article on all the ways that UX research can improve your mobile app designs.

What’s Next?

Our next entry in this series Part Four: It’s Alive! [Finally] Bringing Your App Idea to Life (coming soon) will look into a few big questions you’re probably asking yourself: 

• What type of app will I build? (Native vs hybrid vs web)
• Who will build my app? (DIY vs hiring a developer)
• How will I develop my app? (Waterfall vs Agile)

Having trouble getting your big idea off the ground? Let us help you with the heavy lifting!
The Dropsource team of mobile app experts is here to help you strategize, design, and build powerful mobile apps that delight. Get in touch with us for a free consultation to see how we can help bring your killer app idea to life.