Culture / Development / Contributed

The Power of Prototyping in User Experience Design

21 Sep 2021 1:14pm, by
George Abraham
As Director of User Experience at Infragistics, George Abraham, Ph.D., leads the Indigo.Design team and heads product strategy and design for solutions that live where design and development meet. Dr. Abraham holds a Ph.D. in Human-Computer Interaction from Drexel University and earned an M.S. in Industrial Engineering from University of Illinois at Chicago.

Prototyping is like a superhero on a critical two-fold mission: 1. To allow designers to evaluate their concepts without going through the entire design cycle based on just assumptions, and 2. For the stakeholders to grow confident in the end result’s success. The prototyping process is critical because it provides a glimpse into the future.

Used to walk through a concept or idea, prototyping ultimately saves time and money in the development journey, try out your concept with target users, create a reference for your developers to clarify scope, and plan documentation for your project. Prototyping is a powerful stage in the design process with the purpose of gauging customer satisfaction and serving as the validation that leads to the desired result — a fully functional final product. At its core, prototyping makes a siloed design process a participatory one by showing “how-it-works.”

Where Would We Be Without Prototyping?

Without prototyping, you run the risk of over-designing or under-designing your product. As in, the final product could have unnecessary features, confusing workflows, poor user interface, or other problems. Prototyping before launch is key because it prevents costly errors by determining what needs to be fixed before development starts.

Prototyping  reveals the hidden defects and gives way to perfection.

To create a beneficial prototype, there needs to be a prototyping process. This is a software development model in which the prototype is built, tested, and reworked. Depending on your learning goals, prototypes can be built using various types of tools, such as Sketch-type tools for designing and screen design tools, or complete, integrated design-to-code tools.

No matter which tool you use, your prototype should focus on users’ needs and desired behavior.

Taking the Guesswork out of User Experience Design

Before reaching the prototype step, User Experience (UX) designers and project teams are essentially doing guesswork. Even the best concepts can fail without collecting the feedback that will show precisely how the user will behave in a mockup of the environment or product.

Unlike static visuals, UX happens over time and may span several steps. Users are not just looking at the user interface, but rather using it to complete their goal. So what may look good as a static mockup may fail when the user starts interacting. Prototyping reveals the hidden defects and gives way to perfection.

Here are the three superpowers of prototyping:

  • It helps us better understand the problem that we are solving
  • It supplies a specific idea with specific feedback to converge on the final solution
  • It saves time, reputation, and money by showing the design gaps in advance

But in what way does prototyping help UX? It’s simple — it drives the creative process forward by identifying areas of improvement that wouldn’t otherwise be considered as priorities in the development cycle. Oftentimes, the development teams are focused only on delivering the big features. But big features can still fail either because it was the wrong feature to begin with or because it lacked UX details that made it feel like a streamlined experience (e.g., micro-copy, UI-feedback). Prototyping can help us discover both types of issues early!

Demystifying Prototyping

To demystify prototyping, let’s take a look at the most common types. With the general process of prototyping, we usually talk about:

  • Low-fidelity prototyping: This type is fast and cheap, often paper-based, and enables a quick preview of the product. It is a basic form of prototyping and may not allow for formal usability testing and gathering metrics.
  • Medium-fidelity prototyping: This is a type of prototype with limited functionality. Digital wireframes with basic user interactions provide some but not all of the critical functionality and content used in the product.
  • High-fidelity prototyping: This type of prototyping appears realistic and functions as similarly as possible to the actual product before launch. It is interactive and provides meaningful feedback. It is also good for demonstration in front of potential investors or stakeholders.

The goal of prototypes is to always support a high-fidelity experience for the user. And depending on the level of prototype fidelity, the role of a moderator becomes more or less critical.

Low fidelity prototypes tend to represent high-level concepts and workflows. These are apt to lack the final content and visual design in the interest of speed. However, user actions like buttons and navigation elements are more concretely defined so that the user can complete a workflow. The missing details are filled in by the moderator. In other words, role-playing and story-telling are essential aspects of low-fidelity prototyping. It’s common to use low-fidelity prototypes as a prop to interview users as opposed to being restricted by a user task. More importantly, the time saved in adding details to a single prototype is better invested in coming up with design alternatives.

As we dial up the fidelity of the prototyping medium, with more realistic content and richer interactions, we can decrease how much the moderator “explains” to the participants. Medium-fidelity prototyping works best when we have a good grasp of the problem space and can come up with meaningful tasks. With this approach, a moderator’s presence is less critical, but it’s best to record the user’s session and ask them to think aloud when using the prototype. Medium fidelity prototyping is also a good candidate for task-based testing, and the tests can be conducted remotely.

High-fidelity prototyping is better suited for refining a solution. With the emergence of UI kits and access to tooling, it’s easier to match the final look and feel of the application. But we still need realistic content to immerse the participant (or suspend disbelief). That said, high fidelity does not have to be about visuals alone. There are certain workflows and interactions that are easier to represent in working code. And this may depend on the domain you are working in, especially if your workflow requires data manipulation, fine-grained interactions, or a personalized experience. Naturally, this requires a higher investment in the prototyping effort, and may involve multiple stakeholders to deliver the vision. It’s easier if the core application already exists and you are extending its functionality.

Given these choices, medium-fidelity prototyping, as the name suggests, tries to strike a balance.

Common Forms of Software Prototyping

Software prototyping, however, is usually done in two primary forms: throwaway prototyping and evolutionary prototyping. Each of these has its own strengths and weaknesses.

  • Throwaway prototyping: Sometimes called rapid prototyping, throwaway prototyping means creating a model that will later be dropped instead of becoming a part of the final delivery. It’s a simple working model of the system to show some of its requirements in a short deadline and with a limited budget. It offers a quick turnaround, the ability to be tested by the user and is used to generate a more precise identification of requirements for the final delivery. However, throwaway’s weaknesses include a lack of accuracy and loss of skilled working hours as you may need to moderate the user session.
  • Evolutionary prototyping: This method provides a sound prototype and a functional system that can be used until the final solution is delivered. In the interim, it can be refined with improvements and enriched with new features. This technique is used to understand all the requirements and build only those which are well-understood and validated. Evolutionary prototyping has many strengths. It speeds up delivery time, allows for high-level user testing and offers enhanced risk analysis. Keep in mind, however, that it is not applicable for smaller projects, is highly complex with greater cost, and provides less motivation to make changes because of the time invested.

Prototyping as a Roadmap to Success

By using the power of prototyping, every stakeholder gets the privilege of seeing in advance if the final product will follow the original intention. Building a prototype means building trust, and ultimately, it’s the most error-proof way to take a complete project and deliver the most functional product. Therefore, if a good user experience is one of your project’s goals, prototyping is one of the most efficient methods of achieving it.

Feature image via Pixabay.

A newsletter digest of the week’s most important stories & analyses.