Prototype

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

What is a prototype?

Most often, a prototype is associated with the last stage of work on a product that has all the features of wireframes and mockups but is supplemented with interactivity - the project comes to life and starts to look and work like the model of the final product. However, we can build a prototype at any stage of work. It all depends on the complexity of a particular project.

Prototyping is about designing interactivity, i.e., all moving elements of a website or mobile application that inform the user about actions (e.g., failure, success) and navigation (e.g., hover states). Well-designed interactivity helps users in their journey and makes their stay on the website or application more pleasant. In simpler terms, a prototype is a simulation of a situation that a user might find themselves in.

Prototypes are divided by fidelity (low-fidelity prototypes, high-fidelity prototypes) and by the way the prototype is prepared. Prototyping can be done using:

• a sheet of paper and markers (paper prototyping),
• digital programs (digital prototyping),
• frontend programming languages (native prototyping).

Prototyping is the fourth phase of design thinking and design sprints. It's an essential part of user experience (UX) design that usually comes after ideation, where you/your design team create and select ideas that solve users' needs. Prototyping is crafting a simple experimental model of your proposed product so you can validate how well it matches what users want through their feedback.

Main goals and benefits of the prototyping process

• Adaptation of the website or application in terms of interactivity. It's true that a project can consist of simple navigation and can only have simple interactive components, e.g., hover stats or drop-down menus with a click. However, for large projects, prototyping is extremely important from the first design phase.
• Usability Testing. The main purpose of a prototype is to gather feedback and test ideas early in the design process in front of real users. It allows the detection of all potential errors at every design stage. Including the detection of user pain points, i.e., sensitive points through which the user can leave the website or application
• Verification of the designed assumptions. It is a point related to testing, but prototyping, i.e., placing interactive components in the project or highlighting them, allows for revision, even without testing, that a specific functionality should be designed differently, or there is a gap in the designed user flow and Information Architecture.
• Presentation. Although mockups are best designed to present the project to stakeholders and a wider audience (e.g., on social media or portfolio sites), depending on the project, prototypes allow us to better understand the future product's functionality and see its user interface in action.

Types of prototypes: high-fidelity and low-fidelity

Prototypes can be divided according to fidelity, i.e., low-fidelity and high-fidelity prototypes. The more similar the design is to the final version of the product, the higher the fidelity.

1. Low-fidelity prototypes.

Low-fidelity prototype is a simplified representation of design assumptions that helps to verify them at an early stage of the design process. Low-fidelity prototypes have wireframe visuals, i.e., they have simplified and key elements of a future website or application, but they are dynamic. However, the interactive features are very simple - they are supposed to present the direction of the transition to individual subpages so that the user journey is as satisfying as possible for the user. At this stage of work, the animation is avoided.

Advantages of low-fidelity prototypes:

• Reference point. Low-fidelity prototypes allow the creation of the first interactive components from the design system and the testing of the designed wireframe. At this point, it is possible to verify whether the Information Architecture has been well planned and whether the user can move freely around the website or application.

Disadvantages of low-fidelity prototypes:

• Possible difficulties while testing a prototype. Users may not well understand low-fidelity prototypes. This type of prototype is not a faithful representation of the project because it focuses on the most important functionalities. It has more low-fidelity wireframes features than a visually refined mockup, which may make some UI components difficult to understand and use. 

2. High-fidelity prototypes.

These interactive prototypes faithfully simulate the functionality of a website or application design - they look and work just like the final product. Such prototypes are often created at the end of the design stage. Prototypes are also designed to improve the product and then be coded by programmers.

High-fidelity prototypes contain all mockup elements, i.e., refined visual elements (graphics, icons, typography, layout) and interactive elements such as transitions, hover states, and animations. The overall design looks in this case like a future website or app, which is highly beneficial for user testing. Thanks to this, users feel that they are interacting with an authentic, already existing physical product. Therefore, feedback from them will be more helpful during the final work on the project.

Advantages of high-fidelity prototypes:

• Ease of project testing. Due to the high fidelity of the prototype, testing can bring very good feedback on each element of the project before the developers build it.
• Presentation tool. Mockups are great material for presenting the project to stakeholders because they show not only the entire visual design layer but also all the functionalities of the project.

Disadvantages of high-fidelity prototypes:

• Time-consuming. Making a high-fidelity prototype is time-consuming and, therefore, more expensive. However, creating such a prototype allows for good testing of design concepts and is a great material to show to stakeholders. 

Methods of prototyping

There are several ways to build prototypes. The choice of tools or prototyping methods depends on the project's complexity.

1. Paper prototyping.

Prototyping using paper and markers is quick and cheap. That's why it is known as "rapid prototyping," and it works best in the first stages of project work when you can invite several team members for such prototyping sessions. This is a suitable method that will come in handy during brainstorming or quick fixes for a specific element. Most often, such a prototype consists of simple lines and geometric shapes. The emphasis is more on solving the problem rather than on aesthetics, which only matter at later stages.

Advantages of paper prototyping:

• Quick and cheap execution. Creating paper prototypes is fast and cheap. It also doesn't require advanced design skills. You only need paper and a marker to make sketches for this early prototyping. Moreover, this method works great during the ideation process, i.e., the development process or improvement of the project.
• Versatility. It's safe to say that making a simple sketch containing geometric shapes is simple, and anyone can do it. This is an ideal method for UX designers who, in some cases, do not work as UI designers too.

Disadvantages of paper prototyping:

• No fidelity. Speed of execution is a plus, but a paper prototype can only be good on paper. A better solution is to use prototyping programs that produce more accurate sketches. Moreover, thanks to such programs, interactive elements can be added at the beginning of the work.
• Defective testing. A paper prototype can be made as they do, for example, in Google, but users have to imagine some design elements and functionalities even then. This may result in the feedback after testing not being reliable. It is also worth adding that testing with paper prototypes is carried out with the participation of a UX designer who navigates the user through the prototype.

2. Digital prototyping.

This is the most common and constantly improved method of prototyping. Thanks to tools like, e.g. Figma, Axure, or Adobe XD, UX and UI designers can design a website or application from scratch to faithful simulation. By choosing this method, the team can count on coherent work - this way, you can avoid switching from one method to another, which may result in chaos. Moreover, digital design tools enable several team members to work on one project and add comments.

Advantages of digital prototyping:

• Realism. Everything depends on the degree of fidelity, but thanks to digital programs, even low-fidelity prototypes are more realistic than buttons drawn on paper.
• Cohesion. Digital prototyping allows for a relatively quick change of components and a smooth transition from working on a low-fidelity prototype to a high-fidelity prototype.
• Collaboration between team members. Popular prototyping tools allow you to comment on the project and work with several people on one view.
• Testing. Thanks to better fidelity, testing can bring better feedback. Moreover, testing can take place without the assistance of a UX designer.

3. Native prototyping

Prototyping can be divided into digital prototyping, which uses programs such as Figma, Axure, or Adobe XD, and native, which consists of prototyping using coding. This is a very advanced form of prototyping because it requires knowledge of specific programming languages, both frontend (XHTML, CSS, and JavaScript) and, sometimes, backend (Java). Backend programming languages are beneficial when it comes to testing prototypes using data.

During native prototyping, tools such as Xcode (for iOS apps), Android Studio (for Android apps), Webfow (for websites), and ShapeXR (for VR apps) are used.

Advantages of native prototyping:

• Easy testing of the initial design. Native prototyping allows you to test the project using data (e.g., GPS) on real devices. Thanks to such a combination, feedback during testing will be beneficial and will allow you to detect potential errors;
• Accessibility. Native programming allows you to improve accessibility at the first stages of work. A UI designer who knows HTML should focus on using the correct semantics. It is equally important to refine the code in terms of ARIA - an HTML supplement that allows you to customize a website or application in terms of screen readers.

Disadvantages of native prototyping:

• Coding knowledge. Native prototyping requires knowledge of coding with HTML, CSS, and JavaScript or further cooperation with the software development team, which can additionally extend the time of working on the project. It is also worth noting that a designer can achieve the same effect using programs like Figma or Axure.

Good practices to create a prototype

Prototyping is not an easy task. Designing interactive components should be considered in terms of functionality, user flow, and accessibility.

1. Test your prototype often and at every stage of fidelity.

The best way to solve a user problem is to prototype every iteration of your design. This principle is the primary purpose of prototyping. The common misconception is that prototyping can only be done once or twice at the end of a design process. However, during this stage, the design itself is not important but how the product works and interacts with users. Do they have the ability to fulfill their needs smoothly? Does it encounter many pain points on its way and lose interest in the product? These and many other questions should be the team's focus during project testing.

2. Build a hierarchy.

It is commonly believed that the hierarchy is built at the design stage of the mockup - e.g., using the font size or color. However, prototyping reveals what hierarchy will allow users to move around the website or application freely and easily. It is worth focusing on what should be most important for a given subpage - e.g., whether a specific CTA button should be highlighted on the navigation bar or, rather, a search field. Determining the hierarchy based on the user's interaction with the project can significantly facilitate the creation of a mockup.

3. User needs comes first.

The core of User Experience design, but extremely important when creating prototypes. UX prototyping is about designing good navigation and its components so that the user flow runs smoothly. That is why relying on UX research, statistics, and creating personas is so important. Focusing on user scenarios, needs, and pain points helps build functional prototypes that simulate the desired fully developed product. A lack of understanding and empathy for the customer's needs can result in unnecessary features, confusing workflows, and unreadable text on the screen.

Conclusion

Creating prototypes is a significant part of human-centered design and an irreplaceable tool for working on a complex project regarding Information Architecture and functionality. If prototypes are made at every stage of work, there is a chance that user tests will bring reliable and valuable feedback to the project. It is also a tool that allows you to verify certain assumptions before the testing phase - designers may notice a gap or functionality incompatible with the entire project. Prototyping provides a way to test a concept or process, implement ideas into tangible forms and explore their impact in the real world before they go live. Thanks to prototypes, a brand can release the right products that fully respond to users' needs.