How Long Does It Take To Build An App Prototype?
Organisations are embracing mobile apps and for good reason; widespread smartphone adoption, a 24/7 branding opportunity, and an optimised user experience for their service(s). Unfortunately, you can’t just jump into building a mobile app, it’s essential you research, plan and prototype your designs and experiences thoroughly.
At Pixeltree, we understand the urgency to get launch ready, but the importance of prototyping should not be overlooked as it can save you time, money, and sanity later down the road. Prototypes come in a number of forms, from minimalist sketches to full-blown interactive journeys. Interactive mobile prototypes are achievable in as little as 5 days if you adopt a method like a Design Sprint.
The speed at which you can build a test-ready prototype depends on numerous factors, such as your familiarity with app prototyping software, access to assets like logos and graphics, and clarity over what’s required in your minimum viable product (MVP).
So if you’re looking to kickstart your mobile app journey and develop your prototypes, read on.
Before You Start Building Your App Prototype –
Research, research, research!
If you don’t do your research, you will not have a steady foundation to launch your app from. Basing your premise on assumptions can be one of the leading cause of company failures, with the Entrepreneur stating that poor market research was one of the highest reasons for collapse.
Reach out to your stakeholders, your customers, your target audience, and your internal team and ask;
- Will a mobile app increase our value proposition?
- Will it improve user experience?
- What would the customer gain from it?
- How do your competitors operate in the market? (Do they do something similar and how)
- How would a customer want to engage with you via a mobile device, and what are their goals?
If you embed user research into your process from the start, you’re on the right track. Not only are you able to identify options from your audience, but you’re also able to reduce risk by cutting out avenues you could have pursued which wouldn’t have been viable or customer friendly. With that complete, you can also see how financially viable building a mobile app would be before you put pen to paper on a prototype in the first instance, developing your business case.
Have a scope of what to achieve
So you’ve got your research together and have a business case, what’s the first step?
Take a look at what you want to achieve and show off in your app prototype. We always recommend working on the core proposition first and foremost, e.g. if you’re a flight booking mobile app, how does the booking process look? What steps do you have to take and what do you have to interact with to get to the booking confirmation?
You can then develop other core experiences you want to test with customers or your team. If you’re a stock trading app, you want to have an idea of how users deposit money in addition to how they purchase their stocks. Too long of a deposit process could turn users off and make them look at the competition, so it is vital to map it out properly.
You don’t need to go all out on pages like your privacy policy or careers, instead, focus on what will be central to the user experience for optimal time and budget use.
The Stages of App Prototyping
Now you know your parameters, it’s time to map out what type of mobile app prototype you’re going to make.
There are different levels of prototype based on detail, interactivity, and style that you opt to implement. Typically this is a process that is gradually refined, starting from low fidelity (think wireframes) to high fidelity, with post-prototyping testing (see further down) being conducted before embarking on the next stage.
Low Fidelity Prototypes
This is the first stage and ultimately an outline of what your product, design or experience will look like. This is often a simple framework of key pages, often in a wireframe format. This typically focuses on buttons, menu items, how pages will display information, and the core elements of your design. This typically leaves out items like images, interactivity and styling, implementing these in later stages.
Using a low fidelity prototype can be quick to develop, low in cost to produce, translate your vision without distractions, and act as a foundation for further development before adding in time consuming elements like styling and imagery.
Time taken: 1-3 days
Using a low fidelity prototype can be quick to develop, low in cost to produce, translate your vision without distractions, and act as a foundation for further development before adding in time consuming elements like styling and imagery.
Time taken: 1-3 days
Mid-Fidelity Prototypes
This stage is inbetween low and high fidelity, fleshing out the more visual elements and giving concept ideas for the look and feel of the experience. You may have even applied some interactions to indicate how the pages interlink with one another. The graphics, layout and design don't need to be too finely polished, but offer up a halfway house for validating. This typically excludes some interactivity and doesn't have a fully polished design in place.
Using a mid-fidelity prototype can be a useful demonstration of how your initial templates have developed and can be useful in more visually showing your vision to management and investors.
Time taken: 2-4 days
Using a mid-fidelity prototype can be a useful demonstration of how your initial templates have developed and can be useful in more visually showing your vision to management and investors.
Time taken: 2-4 days
High Fidelity Prototypes
(Hopefully) The product of your research in the low and mid-fidelity stages, improving on call-to-action positioning, menu items, and styling. This is the late stages of prototype design, with designs closer to what your final product will be and interactions that feel like how the experience will work in the hands of users. This is typically close in representing you vision, minus pages that aren't part of the core user journey.
Using a high fidelity prototype can be great for showing as close to the desired vision without creating code, and can be the most interactive version of your concept for testing.
Time taken: 4-7 days
Using a high fidelity prototype can be great for showing as close to the desired vision without creating code, and can be the most interactive version of your concept for testing.
Time taken: 4-7 days
Key Takeaway:
When creating later stage app prototypes, you don’t need it to be the final product. Prototyping is not about having something complete that you can send to market immediately, it’s about taking gradual steps to a minimum viable product (MVP) and generating the insights you need for your next steps. Focus on building something big enough to test your concept but small enough to be built and changed quickly.
All the smaller details, including button colour and the fringe pages that are not part of your core offering like careers, don’t need to be decided in the prototyping stage. Discussions over bits like this can lead to back and forth meetings which can offer very little in influencing how your experience will be received by your customers. Focus on building something big enough in scope to TEST your concept against your hypotheses but small enough to be built and changed quickly. Remember, failing fast gives you the opportunity to innovate faster than trying to succeed at your first attempt.
The Best Prototyping Tools
In terms of tools you can use, we’ve listed the following as a shortlist for tools that can help create prototypes:
- Pen and Paper – Cheap to do and great for wireframing!
- Balsamiq – Amazing for low fidelity prototypes and wireframing
- Figma – An all-in-one prototyping tool with social options for collaboration
- Adobe XD – Arguably the software we’ve all heard of for all designing needs. All-in-one prototyping.
- Framer – One of the easier to use tools out there for prototyping.
- Invision – Interactive prototyping tool with freehand options.
Testing Your App Prototype
Testing, testing, testing!
So you’ve created your first prototype. What’s next you might ask? Testing!
Before creating your next iteration (e.g. low fidelity into a mid-fidelity prototype), you’ll want to see what other stakeholders feel about your current version. What do they think the concept, the layout, the call-to-actions and the journey flow from what you currently have?
These are all questions that can impact your next steps and how your design evolves from here on out. For example, you may stop at the wireframing stage of your mobile app as the existing prototype you were building doesn’t meet the requirements of your team and needs more research.
To gather data, look at testing techniques which will gather a combination of their opinion and user actions. For example, you could use questionnaires post-trial experience alongside heatmapping/recordings you may have installed on the experience via HotJar, SmartLook etc. Having both of these points will gather the how and the why behind their decision-making, helping you further advance your prototype to your end user’s goals (we previously wrote a blog discussing heatmaps and our favourite tools for gathering UX data).
In terms of testing types, you can also opt for A/B testing between two versions of your prototype with a specific difference (e.g. see if they’re able to get to the checkout or your end goal and which one they prefer) or if you have multiple different factors between prototypes, multivariate testing.
Determine who is in scope for testing
In terms of your scope for testing, the first people that come to mind (and are accessible) will be your immediate team and management. What do they think? Does it meet your company’s objectives? Do they perceive it to be straightforward to use? Does it reflect the user research you’ve conducted? These colleagues can be a good first indicator of how it reflects the company’s vision and goals.
In saying that, don’t let that be the extent of the insights you gather. All too often we are driven by assumptions created that don’t have data to support them or don’t include all the teams who could offer a meaningful opinion on if the prototype hits all of the organisation’s success criteria.
For the best possible feedback, we recommend inviting customers, your target market, and other departments with a vested interest (e.g. if you’re creating a knowledge base, your Support team might have crucial insights) to try your prototype. Using this broad opinion base, you can maximise valuable opinion to help identify areas that may need optimising or to spotlight innovative ideas you hadn’t considered already.
Gather results and get iterating!
With your results gathered, it’s time to put these findings to work. Review all points mentioned, looking at areas like ease of use, the time taken to achieve desired in-app goals and even discussion around how it felt to use it. Did they feel it met their needs and achieved their goals? Did it match/exceed their expectations? What are the trends among all the research gathered?
Once you’ve categorised your key findings, you can begin iterating, gradually building and innovating on specific parts of your mobile app prototype in it’s currently fidelity format, or opting to increase its complexity with these changes in mind. The more iteration that happens based on data, the closer your product will be to something your company and your customers will love by the time of launch.
Want To Be Prototype Ready?
Ready to create a prototype that kicks you know what? At PixelTree, we offer full end-to-end product design, from problem recognition workshops and UX audits, to redesigns, rebrands and working prototypes. Find out what we can do for you by scheduling a call with our UX specialists today or check out our UX Design page for a full list of services we offer including prototyping.