So why and how do you create a mobile app prototype? Put simply, people want to SEE what you’re talking about. We’re hardwired to want to see visual inputs on things, and creating a prototype is the best way to show people your vision.
Who are app prototypes for?
Well a lot of people really:
- Potential investors
- Potential team members
- Potential clients
- Potential partners
- You: to understand what you’re actually wanting to build
- Your parents: to show how clever you are…
But seriously – this is a critical part of the early stage of your business and helps make the transition in people’s minds (and yours too) from you just having an idea to it becoming an actual business.
So what is a mobile app prototype?
People have different definitions, but for our purposes an app prototype is: Graphic design made interactive that shows users how the app would work.
That’s it – no coding expense at this stage – simply smoke and mirrors. For 99% of the people who will see the prototype, it will be enough to understand what your vision is and give you truly insightful/ useful/ specific feedback.
Prototyping is the surest way to achieve the results you’re after with minimal costs and maximum speed. As a famous keynote speaker I’ve met recently repeated to me: The No Excuse Strategy! (because it’s cheap, quick and easy)
How to create a mobile app prototype
When you create a mobile prototype, you need to think about how you want to demo this to people and for whom it’s for. At a basic level: will you be showing this on a phone or desktop? Will it be part of a sales presentation or for standalone feedback gathering? Both?
The strategy below will match most needs and is the simplest and quickest way to develop a prototype:
- Take your designs and order them into a standard user journey.
- Upload them to either invisionapp.com or marvelapp.com.
- Make sure they are in the correct order and render well on screen (i.e. right size).
- Start adding hotspots onto the screens. Hotspots are zones with links from one area of your design (e.g. a call to action button) to another screen. This mimics interactivity: where would a user click and where would they go?
- Keep going until you have built 1 user journey.
- Then go through and add any secondary user journeys you want to show.
- The final step is adding back buttons (top left iOS or bottom left Android), and I strongly recommend adding a Home or go back to initial screen at the top / middle of all the screens – this is very useful when demonstrating to people.
- If your prototype feels light, try to design up some interim screens such as: if you press on a drop down, show the open state of the drop down menu; if you have boxes like address fields, show a filled in version… these extra screens basically add to the story and the illusion that this prototype is thorough.
One of the key things when practicing a prototype pitch is making sure you run it enough times to see where the natural user journey that you want to show breaks. It will happen a lot, so try performing at least ten different user journey combinations to find out where the interactivity breaks down. Then fill the holes and try again!
Perfecting the prototype presentation means you’ll be able to demo it with great confidence and be able to deliver your idea to people without needing to be there in person. Both Invisionapp and Marvelapp enable you to share a link to the prototype. But when you just share the link, you lose control of the flow and the story, hence the importance of plugging any gaps.
Personally, I like to record a screencast (using (Vidyard chrome extension or Quicktime player) of me talking through the prototype to guide people through it instead of just throwing the prototype in their lap with little explanation.
These recommended tools are the best in class, are affordable, and have good guides / explanations – you shouldn’t have any issues following this process.
How to pitch using your app Prototype
Now that you’ve done the hard work and created your prototype, you need to show it off to the world.
Maybe you love pitching things, maybe you hate it. Either way, demonstrating a prototype is all about EXPLAINING your vision with visual support. It’s about telling a story of how users will use it. It removes the focus from you and moves it to the product. It’s easier than you might think to do a great job presenting your idea.
All you need is a bit of practice.
You need to learn how to go screen by screen and explain what the user might be feeling and wanting to do in each screen and show how easy it is for them to achieve that goal.
Here are some prototype pitching strategies I’ve tried and tested over the years:
- Think about the key user stories you want to show (e.g. a pain point that your app solves) and practice these individually. For example, a user downloads the app to make a purchase and goes through XYZ steps. Another user is a repeat user who wants to check what items they have in their cart. Another one wants to update their payment details…
- Print out each screen and write out beside them the 3 key points you want to make on each – practice them until you know by memory – remember this is a presentation you’re making, supported by your prototype.
- If you feel like you need prompts, you can add icons / numbers on your designs that refresh your memory / show you what you should say – this isn’t ideal but perfecting a powerful presentation is the aim here.
- Invisionapp allows you to run demos on your computer, so you can record a screencast of yourself running through it. This lets you send a great pre-recorded version to people without the pressure of doing it live.
- The next step is to practice doing the presentation it by talking to yourself in front of the mirror. This sounds ridiculous until you try it and realize it’s a challenge. When you can present to yourself in the mirror successfully, you’re ready to present to anyone!
- Finally, setup your phone and record yourself presenting in a sitting and then standing context – seeing yourself on camera gives confidence in your ability to present the prototype. Do this until you’re confident – it takes practice (say 5-10x per day for a week) to do it beautifully.
Once you feel ready, go and pitch it to friends and family. Ask for honest feedback and start getting the demo to a repeatable groove where you feel ready to pitch to anyone. Having the prototype on your phone / tablet is a great way to show people quickly and practice. People love discovering new things and having their opinion asked so go for it… you never know, you might get an introduction to someone who will help you in your journey!
How to get proper user feedback using your app prototype
Now that you’re ready to present, we need to think about collecting feedback. There are a few different ways to do this:
- Have a 1:1 demonstration with specific questions you want answered.
- Send a pre-recorded demo to people for feedback with a feedback form (try typeform.com).
- Host a webinar to run through your prototype (try webinarjam.com) and collect feedback live or with a follow-up survey.
- Group presentation via a demo from your computer by connecting to invisionapp.com in the projects section. Collect feedback afterward.
Examples of questions to ask:
- What users think of the overall idea (text or list of keywords such as functional, fun, clear, confusing, etc. so they select as many as they want).
- What 2 specific bits of functionality do users love (text or list functionality for them to tick off).
- What 1 specific bit of functionality do they feel is missing (text).
- Anything they think is not clear or doesn’t demonstrate a value add (text).
- How clear was the value proposition (1-10 scale).
- How clear was your demo (1-10 scale).
Whatever combination of feedback methods you choose, you need to have specific objectives and specific questions you want to be answered identified before you begin collecting feedback. This is a key step to go from an idea to a proven concept.
How to iterate Prototypes
Getting feedback from people is great, but it often leads to this question: what should you incorporate now and what should you leave for later?
The answer is based on what is required for your product roadmap and by deciding what fundamental functionality pieces need to be involved in v1.0 to succeed in your initial launch. This is different for every app, but the rule of thumb for v1.0 is including all functions that together have enough of a hook to get people coming back.
Whatever you do with your feedback, don’t ignore it! Thank people, capture the information, organize it and store it securely. Some insights will be transformational, others will be value added down the line, and others (if heard in enough time) will be useful to implement now rather than later.
Take the feedback on the prototype and make 1 round of upgrades to reflect the best feedback and iterate the prototype storytelling based on what people said. This ensures your pitch is as clear and crisp as possible. This is what we did with Piggle app to help them refine the concept whilst pitching users/ clients.
In Conclusion – creating a mobile app prototype helps you go from idea to proven concepts
When you want to create mobile apps, it seems attractive to just build tech, but you have to validate your idea first through this process to derisk the build. Remove your ego, create a mobile app prototype, ask a bunch of people, learn and iterate – that’s the way to create a solid foundation for your app business!
People who have build multiple successful startups like Noah Kagan of AppSumo are serial entrepreneurs and their success formula often includes testing ideas first before building them, that’s why time and again they can launch successful businesses.
Resources Mentioned to help create a mobile app prototype:
Invisionapp.com– Invision is a great app that lets you make an interactive prototype by linking images together.
Marvelapp.com – Alternative to InvisionApp to create mobile app prototype.
Viewedit – Free chrome extension that lets you easily record screencast videos.
Webinarjam.com – Webinar software that allows you to collect registrations and host live video events.
