Prototyping for Mobile UI Disaster

How Prototyping Can Help You Prevent a Mobile UI Disaster

According to a forecast by Juniper Research, mobile app sales are expected to reach $ 99 billion in 2019. Therefore, more and more businesses decide to go mobile in order to boost sales. At the same time, businesses and startups that build mobile apps often overlook UX prototyping. The most common excuses are a lack of time, money, and resources. However, prototypes actually help companies to save the costs and time that they could have spent on rebuilding a poorly designed app.

Additionally, a UX prototype prevents the risks of releasing an app with bad user experience and thus losing the target audience. As per infographics by Experience Dynamics, a usability consulting firm, 52 % of users say that they are less likely to engage with a company if they have a bad mobile experience.

Therefore, user experience prototyping is a crucial part of any mobile app lifecycle. In this article, we will explain what prototyping actually is, how it can help businesses, and how to do it right.

Introduction to UX Prototyping

Generally speaking, a prototype is an original model, form or an instance that acts as a basis for other processes. In software development, a prototype is a proof of concept that can be used to validate an idea for a user interface. For designers of software products and mobile apps, prototyping is an opportunity to examine new alternatives and test the existing design. In such a way they can validate the product’s functionality before it enters the market.

People often refer to hand-drawn sketches as prototypes but it is not completely true for a UX prototype. UX prototyping primarily refers to the interactive, fully designed experience.

Wireframe vs Mockup vs Prototype: What’s the Difference

Simply put, wireframes and mockups have no elements that allow the user to interact with the design whereas prototypes have such interactive elements. The prototypes are used to get quick insights and initial feedback from the users.

Here is some more information on the differences between a wireframe, a mockup, and a prototype:

  • A wireframe is a low-fidelity, static representation of the design. It outlines the approximate structure and layout of information within the app. Wireframes may include the hand-drawn sketches of the app or static layout.
  • A UI mockup is a mid- to high-fidelity static representation of the design. Unlike a wireframe, a mockup is closer to a finished product or prototype, but it is still not interactive. A mockup shows the structure of information, basic functionality, and visual design, but does not have any interactive elements. The mockups are typically used to iterate the UX ideas and test them over and over again.
  • Prototypes are fully functional models that resemble the final product UI as much as possible. They can later be tweaked to become the final product. However, if not accepted by the target audience at the testing stage, the final product can be completely different from the prototype. Therefore, prototypes are perfect for UI / UX testing because of their tangibility. Testing a prototype allows the designers to validate the ideas and be confident that they are building the right product.

When to Use a Prototype in 2019

Interactive prototypes are good for the apps with a complex user experience that is simpler to show rather than describe. If the app has many navigational options, a complex workflow, or non-standard behaviors, you should use a prototype instead of a wireframe or mockup.

In 2019, in-depth prototyping is becoming more and more important for usability testing. With a prototype, the users can try out the service that you are planning to build and provide valuable feedback that will save you a lot of money. As a result, you will not build a functionality that the users actually do not need or, vice versa, miss something that the users consider to be crucial.

Why Is Prototyping Important?

Based on what we have said above, here are the main reasons why UX prototyping is so important:

  • It helps to spot the design issues at the early stages. It is always easier to imagine a certain idea than to actually implement it. Therefore, a prototype can help to quickly spot any discrepancies between the idea in your head and its tangible representation. Even a simple wireframe or mockup can help you define the adjustments that you should make to the initial design.
  • It helps the stakeholders to stay on the same page. Everyone involved in the design process – account managers, clients, designers, developers, testers, and users – can have different visions on how to implement it. Instead of wasting time on endless discussions and debate, the teams get a sample product that they can click through. As a result, they can reach a common agreement on how the final product should look and feel like.
  • It prevents any misinterpretations. The key reason for misinterpretation is that the stakeholders struggle to elaborate on the specifics of the product. Only when they see it, they realize what’s missing or what should be done differently. As a visual representation of the product, a UX prototype helps the stakeholders to spot that something’s wrong at the early stages when it is not too late to make any modifications.
  • It allows quick iterations of the design concept. With a prototype, designers can iteratively revise and refine their ideas within minutes. They can tweak the existing elements, add something new, or completely redo the concept by sketching other versions of the product.
  • It reduces costs. Despite the money is one of the excuses of companies that refrain from UX prototyping, businesses can actually save costs with prototypes. Here is how: (1) less time is spent on meetings trying to reach an agreement, (2) less unnecessary functionality is built, (3) fewer changes occur because of misunderstanding between the stakeholders. At the prototyping stage, you can afford to fail because a prototype is not yet a final version of the product.
  • It gives you an opportunity to compare the design variants. Your team of designers can prepare several variations of the mobile app screens design and multiple scenarios to find out which one is perceived better and thus has a better UX.
  • It helps you to prevent a safety disaster. If your app deals with cybersecurity or cryptography, prototyping is a must to prove the app’s reliability. In this case, if the mobile UI design is not optimized to be as user-friendly as possible, the user is put at risk.
  • It helps to prevent conflicts between the developers and designers. An interactive app prototype allows the designer to express not only how the app will look like but also the way the app should flow. It will give the future app a level of dimension that the developers will need to bring the idea to life. As a result, the dev team will know what should happen when the user interacts with a certain UI element and thus will more efficiently collaborate with the design team. The war between the developers and designers is finally over – thanks to UX prototyping.

Questions to Ask Before Prototyping

Before you start prototyping, it is important that you find answers to certain questions in order to better understand the user and thus build a great user experience. Basically, these questions are as follows:

  • What are the pain points of the target audience? People use software products to solve specific problems or satisfy specific needs. To deliver a great UX, you must be sure that the potential users of your apps have the same goals as your business does. Therefore, it is important that your design team conducts the audience research and involves the users in usability testing with the help of the prototypes. Another way to identify the needs of your target audience is to read the negative reviews of competitor products.
  • Are we limited in time and budget? Startups that have limitations in time and budget cannot afford a fully functional prototype so they stick to mockups and wireframes. Though if you have several days, your team of designers can prepare a clickable UX prototype and involve the users in testing. And if you have several weeks, you can run multiple rounds of testing with various groups of users.
  • What is the purpose of the prototype? Prototypes have a wide variety of uses. It can be a high-fidelity prototype with maximum functionality and interactions to impress the investors. It can also be a low-fidelity prototype with the purpose of solving specific user problems or performing general diagnostic testing. Your task is to define the primary goal of your prototyping decision and follow it.

How to Benefit from Prototyping

Prototypes let you test the usability and UX in a low-risk environment before the product enters the market. Prototyping can generate important feedback without a negative impacting on the target audience. As a result, the designers can make the required changes beforehand, so by the time your app is in the app store, it will have an optimized UI and happy customers.

Here are some best practices for using the prototype to its fullest advantage:

  • Choose the right prototype. There are different types of prototypes, such as clickable, interactive, high-fi, low-fi, etc. Talk with your team of designers about which prototype would suit your project needs best.
  • Test early. A prototype as something more than a final mockup of your app. It is an interactive testing opportunity that will allow you to interact with the app as a real user would. Have your prototype tested as early as possible so you can steer the project in the right direction from the very beginning.
  • Involve the users. Assign the users tasks aligned with their goals and give them the freedom to explore, interact, and react by using your fully functional prototype. Encourage them to explain what they are doing, why they are doing that, and what they are trying to achieve.
  • Test often. It is important that you have your prototype tested in multiple iterations until all of the bugs are found and fixed. Use a prototype at each stage of the design to get critical insights into how your audience will interact with the app. The more you test, the more information you get and the more perfect the final product will be.

Smart Prototyping Is a Smart Business

UX prototyping is crucial for any modern business that is planning to go mobile. Statistics shows that good mobile experience is a key factor for over 50 % of users who decide if they want to remain with the company.

Unlike a wireframe or mockup, a prototype is quite close to the final version of the product, providing a great opportunity to test the app before it appears on the market. Here are the main reasons why prototyping is important:

  • It helps to spot the design issues at the early stages.
  • It helps the stakeholders to stay on the same page.
  • It prevents any misinterpretations.
  • It allows quick iterations of the design concept.
  • It reduces costs.
  • It gives you an opportunity to compare the design variants.
  • It helps you to prevent a safety disaster.
  • It helps to prevent conflicts between the developers and designers.

Before prototyping, it is important that you find answers to questions such as:

  • What are the pain points of the target audience?
  • Are we limited in time and budget?
  • What is the purpose of the prototype?

 Finally, in order to use the prototype to its fullest advantage, you should do the following:

  • Choose the right prototype.
  • Test early.
  • Involve the users.
  • Test often.

We hope that now you are fully aware of the importance of prototyping and will successfully implement this practice in your business. Good luck!

Written by
Galina Divakova

Former Head of Marketing at YouTeam, a Y Combinator-backed marketplace for building remote dev teams.

View all articles

Tell us about your plans on a brief intro call and we’ll start the matching process.

Hire developers