how to design prototype for mobile app

4 Benefits of Mobile App Prototyping

More and more, companies are recognizing the business value of user experience (UX) design, especially considering there are 5 billion mobile users worldwide. Today, businesses operate in a digital economy which means mobile experiences play a central role in creating brand affinity. Developing an engaging and user-friendly minimum viable product (MVP) begins with mobile app prototyping.

Mobile app prototyping is a form of user research to validate the strategic design direction of a product. A prototype is a preliminary visualization of a working product. In mobile app development , prototypes build an understanding of the product's look and feel, which helps test how customers use and react to the overall UX design. Using a prototype for usability testing allows for enough time to make changes to critical design issues before the product reaches development and it becomes too late (and too expensive) to make major changes to the UX.

The following article outlines four benefits of mobile app prototyping and best practices to keep in mind throughout the process.

New call-to-action

What is a Mobile App Prototype?

A mobile app prototype demonstrates how a product will function. There are countless methods for prototyping, but in mobile app development, a prototype typically starts with sketches or a paper interface that evolves into an interactive model resembling the final product. The purpose of a prototype is to communicate a product's design and navigation flow to maximize the efficiency of development. Prototyping is a valuable exercise which results in visualization of how the app will function by demonstrating user flows and depicting a working design and layout. Naturally, there will be errors in a prototype; however, a prototype allows for these errors to be discovered in the early stages of a project.

Testing a mobile product with a prototype is essential for user-centric design and development. Prototyping is a central part of the design thinking research process and uses rapid iteration to arrive at a product that offers maximum user value. Often the prototyping process will reveal new opportunities and confirm the best direction to take during development. Developing a prototype is a cyclical activity where product teams continually review and refine the product concept, returning to the beginning of the process several times until the concept meets business objectives and user needs. Overall, the process helps identify and fix problems early on in the project when it's far less expensive to make changes.

Mobile App Prototyping in Design Thinking

Prototyping is the fourth stage of the design thinking process . The mobile app prototyping stage helps product teams learn how users interact with the preliminary product to uncover new solutions or determine whether the existing solution is successful. The learnings from a prototype then allow the product team to reframe one or several of the problems identified from the previous design thinking stages. As a result, everyone on the project has a more accurate understanding of the challenges users face when they use the product in the context of their life.

Mobile app prototypes take abstract ideas and turn them into a tangible product. The whole process forces product teams to think about the product outside their frame of reference. Tim Brown, CEO of IDEO, explains that prototypes "slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long."

Design thinking is at the core of creating original mobile products. Throughout the design thinking process, product teams conduct a substantial amount of research to either validate or invalidate a product concept using rapid prototyping. Design thinking supports innovation by observing and considering multiple solutions to a single problem. The core principle of design thinking asserts that a user-centric approach to product development encourages innovation, which leads to market differentiation and competitive advantage.

The Benefits of Mobile App Prototyping

"Conduct prototyping research early and iteratively to ensure your mobile design is easy and enjoyable to use, as well as to align all strategic design decisions to user needs and safeguard the project's ROI."

There are many benefits of working with an interactive model before building an MVP . Mobile app prototyping keeps the user at the forefront of the design process and involves stakeholders when exploring new ideas for development.

Let's go over a few of the benefits in more detail.

1. Exploring New Ideas and Identifying Product Improvements

Mobile app prototyping validates an early concept and provides opportunities for the exploration of new ideas early on in the development process. During the prototyping phase of the design thinking process, user testing can help identify possible improvements to make before the product is complete. A prototype is the product foundation that is continually improved until the mobile app meets business goals and is marketable.

2. Cost-Efficiency

Starting a project with a mobile app prototype saves costs in the long run. It's far less expensive to solve problems at the beginning of the process rather than towards the end.

Source: Interaction Design Foundation

Consider the image above; if you only start testing on an "almost-finished" product, you run the risk of finding serious issues too late to make changes. Prototype research is the mitigator – you'll spend less if you do upfront research. The closer you get to launch the more expensive changes are. Conduct prototyping research early and iteratively to ensure the design is easy and enjoyable to use, as well as to align all strategic design decisions to user needs and safeguard the project's ROI.

3. Client and Stakeholder Involvement

During the prototyping phase, it's beneficial to involve the most important stakeholders in the planning process. As much as possible, stakeholders need to have co-ownership of the project's design ideas and decisions. For example, developers might think a particular design decision is appealing, but the concept is technically difficult and time constraints prevent them from experimenting with alternate solutions. At the same time, other stakeholders might want to implement other components first which align more closely with the long-term strategy of the project. Or maybe the marketing department already did market research on an entirely different set of users. When the most relevant stakeholders are involved in the prototyping phase of a project, it creates a broader perspective and you can be sure you're making the most efficient use of your time.

To summarize, it's important to involve stakeholders for several key reasons:

Stakeholders can help collect all the information about the project's strategic direction.
Involving stakeholders can help ensure research makes the most impact.
Working with the right people establishes support and secures funding for the time and resources for each necessary design iteration.
You'll know you haven't done the same research twice.

Approaching prototyping collectively helps ensure the final product closely embodies the company's ideas and features, while ultimately meeting specific project goals. Involving everyone – upper management, product managers, marketing, developers, designers, stakeholders, and clients will help examine problems in greater detail from several perspectives and backgrounds. Encouraging feedback and discussion goes a long way towards creating a product that solves user pain points well.

4. UX Validation

Creating a mobile product that results in deep user engagement is a difficult task to accomplish. Running a prototype through a user test is one of the most effective ways to validate usability and UX.

According to Localytics, only 32 percent of users continue to use an app after three months and 21 percent of users abandon an app after one use. It's vital to have a goal that goes beyond the mere number of downloads. Retaining users by providing continual value is an essential goal of UX design and a prototype will test the product's potential for app engagement, longevity and lifetime value. Again, saving on costs before proceeding with further development.

Types of Mobile App Prototypes

Mobile app prototyping methods typically fall into two distinct categories: low-fidelity and high-fidelity prototypes.

Low-Fidelity Prototypes

Low-fidelity prototypes are the most basic representations of a working mobile product. A low-fidelity prototype is typically incomplete. Sometimes, a low-fidelity prototype only presents a few core features that will be available in the final design. Additionally, a low-fidelity prototype is sometimes made of materials that are not intended for the final product, like paper sketches. Storyboarding, sketches and card sorting are all examples of low-fidelity prototyping.

Benefits of Low-Fidelity Prototypes

Inexpensive
Disposable
Changes are instant
Low-effort
Supports design thinking

High-Fidelity Prototypes

High-fidelity prototypes look and operate similarly to the final product. In other words, a high-fidelity prototype is a pilot version of a software system developed on a design program.

Benefits of High-Fidelity Prototypes

Engaging
Valid user research results

The more a prototype resembles the final product, the more confidence the product team has in how users interact with and perceive the design.

The Takeaway

Mobile app prototyping is a quick and cost-efficient way to validate a mobile app idea; however, they have many other added benefits including eliciting new ideas and areas for improvement, client and stakeholder involvement and making sure the entire team is on the same page throughout the project lifecycle. If you want to enhance your product launch and increase the likelihood of success, starting a project with a prototype helps avoid common product mistakes, from faulty features to a product that has no place in the market altogether.

This article is an expanded excerpt from our previous blog article, A Beginner's Guide: POC vs. MVP vs. Prototype .

Mobile App Minimum Viable Product Content Download