Blog

How does prototyping work?

Teams of designers use prototyping to explore, experiment, and bring concepts to life, from paper concepts to digital designs. Prototypes, at their core, are early samples of a design that people can see or use before it’s finalized. Following usability testing, it is the fourth step of the design thinking process.

How Does Prototyping Work?

Creating prototypes without any code is a key characteristic of prototyping. It is possible to link artboards together using prototyping tools to create an interactive, clickable experience without the need for a developer. Clickable prototypes reduce development costs as designers can create them without the need for coding. As a result, it’s a good idea to test your prototype with stakeholders and users prior to investing the time, money, and human capital into engineering the design itself.

During the design process, prototyping can be used at various stages. Validation is an important step in any design process, whether it is at the beginning of a project or halfway through. It is important to test prototypes before moving forward with development so you can gauge progress and usability.

Prototyping: why it’s important

A prototype is an interactive experience created without code that helps test concepts before launching. Using prototyping, designers can test alternative design solutions without spending time developing them. Before releasing a final product, they can test their prototypes with real users to find out if there are user-experience issues. Design and development lifecycles are shortened because of this process.

Prototyping has several advantages, including:

  • Developing new ideas. Designers use prototypes to experiment with various ideas and solutions. Using them allows designers to test multiple possible scenarios and optimize the usability of the final product as they go.
  • Problem-solving. An excellent way to further understand a user’s problem is to create a prototype. By engaging with them, designers can understand the product or system better and observe what works and what does not.
  • Usability issues need to be identified. It is a great way to identify issues regarding the usability of your product by creating prototypes for users to interact with. Before the product is developed, the designer can make the necessary changes.
  • Getting stakeholders and end users involved. Through prototypes, designers can engage with stakeholders and end users, giving them the opportunity to become involved in the process and feel an ownership of the project. Their “buy-in” could be enhanced by this process and the concept could move forward more quickly.

Introducing new concepts to the market. Inspiring, motivating, and ultimately “selling” design decisions through prototypes is a powerful technique. Furthermore, as they require little effort to symbolize something potentially extremely costly, they serve as an excellent way to inspire markets towards radical new ideas and processes.

Prototypes that are low fidelity

How are prototyping methods different?

The fidelity of a prototyping process can be low, medium, or high, depending on the method and technique used. Your prototype’s fidelity is determined by how detailed and functional it is. As a rule of thumb, the higher the fidelity, the more time and money it takes to create. Each scenario requires a different level of fidelity, and each has its pros and cons. Knowing what each one contains as well as when and how to use them are important best practices.

What is the process of prototyping a website?

Prototypes that are low fidelity

The quickest, lowest-effort prototyping is done with low-fidelity prototypes, commonly called paper prototypes. You can use prototypes to test high-level concepts before you invest more time and energy into the design. You can also test concepts and gather feedback by using low-fidelity prototypes during the initial stages of the design process. Pen and paper wireframes enable designers to test concepts easily prior to jumping into digital wireframes, allowing them to make changes accordingly.

Pros

  • Prototypes made from paper are easy and quick to make, and they’re ideal for brainstorming various ideas and concepts. Furthermore, they’re easy to modify on-the-fly.
  • Cost-effective. Materials and labour are both cheap with low fidelity prototypes. The cost of production of office supplies such as pen and paper is low due to the speed of their creation.
  • Demonstration of empathy. Prototypes on paper are great for team building, resulting in increased involvement, ownership, and empathy for users and products.
  • Feedback from real users. If you think you didn’t spend much time on the usability test, users are more likely to offer honest feedback. It is more common for users to give feedback on paper prototypes rather than higher fidelity prototypes.

Cons

  • In the end, a paper prototype is an inferior alternative to a digital experience. The user feedback lacks realism, which leads to false positives.
  • False positives. There is no realism in the experience, resulting in inaccurate feedback from users. In some cases, users might “fill in the gaps” in ways different from those that the designer intended, thus affecting the results.

Creating high-fidelity prototypes

Prototypes with medium fidelity

Prototypes of medium fidelity constitute the next stage in the development process. Wireframes are medium-fidelity prototypes that are usually created in grayscale using digital technology. Their design focuses on user flows and information architecture without branding, photos, or logos.

Greyscale prototypes, which only show user flows and information architecture, allow the user to focus on the core aspects of the design without being distracted by colours, photos, and logos. Before the product is beautifully designed, the designer can test the product’s core usability.

Wireframe examples and templates can be found online, as well as wireframe examples. But first, let’s compare wireframing advantages and disadvantages.

Pros

  • Added realism. Digital medium prototypes provide more realistic experiences for user testing since they are digital. Prototypes are more like the final product than paper prototypes, which will impact feedback.
  • An iterative process. Medium-fidelity prototypes allow for faster iteration than adjusting a high-fidelity (or nearly complete) product.
  • Fine details are lacking. They can be used to test ideas before getting too engrossed in the fine details.

Cons

  • The final product will never be beaten. Low- and medium-fidelity wireframes are cheaper and quicker than high-fidelity wireframes, but the final product is always the best way to obtain user feedback. In the absence of visual elements (e.g., photos, text, and colours), your experience could be negatively impacted.

How are prototyping methods different?

Creating high-fidelity prototypes

Having tested your design several times with low- and medium-fidelity prototypes, it is now time to render your design in high fidelity. Designing an experience involves the use of branding, photos, copy, and animations. You should test high-fidelity prototypes with users prior to developing your design as it nears its final stages.

Pros

  • Authentic experiences. The experience mimics the most accurate product, thus producing more accurate and applicable results. You can predict how users will react to a high-fidelity prototype in the marketplace by testing it.
  • One last test. Prototypes with high fidelity can be used to test a final product before it is developed. You’ll be able to enter the development phase with confidence when you test your final designs, because you’ll know that you’re making a product that’s usable and desirable.
  • Integrated communication and development tool. The interactive nature of high-fidelity prototypes allows developers to get a clearer idea of how the product should behave. This makes handover at the end of development much easier.

Cons

  • Created at a high cost. The most expensive prototypes are those created in high fidelity, as they require the most resources. Hence, designers should validate their concepts in lower fidelity before jumping into high fidelity.
  • Having more time to create. High-fidelity prototypes require more time to produce because of the fine details included. It is therefore important to start with a lower fidelity when testing a new concept.
  • Uncertainty about user feedback. Users may not speak up as much when interacting with a paper prototype if they think you have worked on it for a long period of time.

Prototyping: why it's important

What is the process of prototyping a website?

Prior to prototyping, it is important that you have identified your users, defined their problems, and thought of an appropriate solution to solve their problems. After these steps have been completed in your design process, prototyping can begin.

Prototyping a website effectively involves following these steps.

  • Test the selected features. You should select the key features that will be tested by users. Testing all the features of your product at once will be impossible. To make this discovery session more relevant, emphasize key features.
  • Prototype your design. Create your website prototype to illustrate those key functions and features identified in the previous step. It could take a lot of time and be useless to create a prototype to illustrate all features. As an alternative, create a prototype that highlights the key features you would like to test. Whenever they tap or click incorrectly on their way there, you can see it.
  • You should test your solution. You should now present your design to users, partners, and stakeholders. Take note of any usability issues in the current design as you observe and record them interacting with your product. A prototype goes together with usability testing taking your feedback into account and updating your design after your testing session is important.
  • Make updates to resign. After your testing session, synthesize your feedback into key takeaways and update your designs accordingly.
  • Repeat the process. Finally, bring your updated website design back to users and repeat this process.

Now it’s your turn

Now that we have gone over prototyping and have shown the value of this process you can see the real value in prototyping. Get in touch with the Stich Creative team to find out how we can support you on your UX UI journey.

You may be interested in

Look at some
other articles

Say hello 👋

Let’s Work
Together.

I’d love to meet up with you to discuss your venture, and potential collaborations.
richtillingux@gmail.com
Oxford, United Kingdom