What is Prototyping and Why is it Important?

Here’s a tiny voice starting asking you tons of questions about a new app that is underway:

Will our potential clients really like this product? Does it fulfil their specific needs as we’ve assumed it would? Is the user interface elegant and simple so our customers will love it? And so on…

So, how can you fend off these uncertainties and validate your ideas and design?

Create prototypes.

• What is a Prototype
• What Does Prototyping Mean?
• Types of Prototyping
• Why Prototyping is Important?
• Prototyping Tools
• Prototyping with Indigo Design and App Builder

What is a Prototype?

A prototype is a mockup of the solution that you want to create. You can mockup every interaction and view so that it can be experienced the same way as a fully developed product without engaging a developer. You can show all the features that you want to include in your app (or any kind of solution in that case), validate your idea, and verify the overall UX strategy. A prototype’s purpose may vary depending on your needs and the stage of the project - it’s up to you how you want to use it.

Prototypes are built using various types of tools, including Sketch-type tools for designing and screen design tools, to complete, integrated design-to-code tools. Some come with collaboration features to help stakeholders assist with feedback, others include ideation tools to help flesh out the initial wireframe.

Prototypes have 4 main qualities:

Representation — The actual form of the prototype, such as paper and mobile, or HTML and desktop.

Precision — The fidelity of the prototype, meaning its level of detail, polish, and realism.

Interactivity — The functionality open to the user — fully functional, partially functional, or view-only.

Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (this is known as “rapid prototyping”). Others may be built and improved upon, ultimately evolving into the final product.

A low-fidelity prototype, often paper-based, provides a visual representation of the design elements of a final product.

One of the most common misconceptions about prototyping is that it only needs to be done once or twice at the end of the design process. This is not true. One of our mottos at Infragistics is “test early and test often.”

As you can see, prototyping is a process. Let’s dive into a little more detail.

What Does Prototyping Mean?

Prototyping is the process of designing an optimal experience for target users. It includes various stages that help designers, product owners or business analysts to determine key concerns, including user needs, navigation, information architecture, usability, accessibility, UI, or visual design.

Modern prototyping tools are dynamic and include the proposed app’s screenshot, transitions, theming styles and much more to provide a real feel for how the finished app will look and feel.

Typically, whenever we design something, earlier iterations may not be very good. Design is rarely (or realistically a "good design" is never) an overnight success, which is why we need prototyping. And since many earlier versions of prototypes are failures, it’s worthwhile to keep in mind the thoughts of David Kelley, the founder of IDEO — a design firm that promoted the concept of human-centered design and was famous for launching innovation labs and creating pop-up incubators:

 ‘Fail faster to succeed sooner’ —

David Kelley, IDEO Founder

Types of Prototyping

Here are two broad ways to look at prototyping:

• Low-fidelity prototyping: fast and cheap, often paper-based, enables a quick preview of the product, and typically doesn’t allow for proper testing by users.

• High-fidelity prototyping: realistically appearing and functioning as similarly as possible to the actual product before launch, interactive and providing meaningful feedback; also, good for demonstration in front of potential investors or stakeholders

Why Prototyping is Important

One of the most powerful aspects of prototyping is that, when done well, it creates empathy for the customer. In this respect, designing software is no different than designing other products or structures that humans will use or inhabit.

For example, it’s easy for an architect to get caught up in the grandeur of a building: imposing towers, floor-to-ceiling windows that shine like a jewel, or unusual layouts of rooms and corridors that show off the designer’s personality. But without empathy for the people who need to live or work in that building, that grand design can lead to poor environmental design — leaving people shivering in one location, with others sweating just a few yards away. And those shiny windows may bring in so much sunlight that workers can’t see their computer screens.

In the same way, designing software without understanding and empathizing with the customer’s needs can result in unnecessary features, confusing workflows, unreadable screen text, and many other problems. Customer empathy is what helps designers make sure that the final product is not only beautiful on the outside, but functional and even enjoyable on the inside.

To sum up the main advantages of creating a prototype they include:

• It will save you time and money
• You can show and test your concept on the target user group
• It’s a useful reference for your developers
• It can serve as documentation for your project
• You get a chance to work together with your team on a tangible artifact, which will lead to generating better ideas

Prototyping Tools

There are various types of prototyping tools, depending on your need. Some focus on the front-end design with wireframes, others allow for user testing and a basic demonstration of user flows, while others are fully integrated and allow you to work with existing designs or wireframes from programs such as Sketch, simulate realistic and rich user interactions, collaborate with your team, user test and generate code that is ready to handoff to developers. Which tool you’ll select will depend on the goals of your prototype, how quickly you need it available for user testing, who will be working on it, and how it needs to integrate into your workflow.

Prototyping with Indigo.Design

Indigo.Design is one of the fully integrated tools, a complete design-to-code system that integrates prototyping, design systems, user testing, and code generation with the help of the WYSIWYG App Builder. You can create best-in-class UX and UI designs using Indigo.Design’s components and design patterns in the Indigo Design System with Sketch UI kits. It also includes pre-built design patterns or the option to create your own custom UI library.

Below is an actual prototype of a home budget application built in Indigo.Design. It includes all the screenshots that were imported from images files and from Sketch artboards. As you can see, user flows are simple to create by clicking and dragging to create a hot spot and then linking to a destination screen, which you can easily edit by selecting other screens in the user flow. You can also edit various transition options such as swipe, press-and-hold, double taps, and more.

Indigo.Design then lets you animate the prototype so you can see the interactions and user flows of your running prototype. Indigo.Design also includes a collaboration option so you can get a URL that you can share in various ways: for unmoderated remote usability testing, a feature built into Indigo.Design so you can get rapid feedback on your prototype. Or if you are satisfied, you can share the URL with the developer who can generate code in Visual Studio Code with our Sketch plugin.

Watch this How to Prototype Video (Time: 2:51) for a short demo of these features.