What is Prototyping? (A Complete Guide) - TWI Global

08 Jul.,2024

 

What is Prototyping? (A Complete Guide) - TWI Global

The history of prototyping goes back hundreds of years, with notable names such as Leonardo Da Vinci even creating designs for inventions that would not be realised for centuries &#; such as aeroplanes, parachutes, robots and tanks.

View Details

Early prototyping often involved the creation of an original version of a design that was improved upon later. This can be seen with the work of aircraft pioneers the Wright Brothers, who improved their design by working on the real thing rather than a mock-up. This technique was also used in early software programming, where developers would create new iterations of an existing product.

This trial-and-error method is not quite prototyping as we know it today, where the invention of computing has allowed for more complex digital versions of physical products. Engineering professor Herbert Voeckler investigated the use of computers to control factory floor machine tools in the s, which led to the creation of the 3D tools that are used today. In the late s, Carl Deckard began using layer-based manufacturing which paved the way for rapid prototyping, whereby tooling and materials are used to create 3D models and software systems are tested before being rolled out onto production.

Prototyping has come a long way since its inception and remains an important part of product development today.

Prototyping is an important part of product development with several types of prototyping and prototyping tools in use, each with their own advantages and disadvantages.

Here are some of the most common types of prototyping:

1. Sketches and Diagrams

The most basic form of prototyping involves simply sketching out an initial idea on paper. These can vary in detail, but such paper prototypes are a useful starting point for conceptualising an idea for a new product. These allow ideas to be shared so that a design can be formalised for later development.

2. Physical Models

Physical prototypes can range from simple paper-based designs through to more complex versions. These offer a rough idea of a design and show a scaled down version of a concept ahead of the creation of a larger scale model. Used for a range of different designs, these are particularly well suited to smaller objects, but can be used for larger projects such as architectural designs.

3. 3D Printing and Rapid Modelling

3D printing has revolutionised prototyping, allowing engineers to create realistic production design models quickly. These 3D models mean that businesses can identify any flaws or areas for development and move quickly towards the production phase. These prototypes can be adjusted and new versions created, allowing for rapid testing and simplifying and reducing large designs into a more manageable scale.

4. Wireframes

Wireframes are digital diagrams or layouts of a product, commonly used for software, websites or other digital assets to present a visual information architecture blueprint. They allow designers and other project workers to navigate a digital structure and place content as well as assess a user interface and user flows, allowing for later usability testing to find any usability issues. Such digital representations can be presented as low or high fidelity prototypes.

5. Virtual or Augmented Reality

Virtual or augmented reality tools can be used for some designs, allowing users to &#;experience&#; a design as if in the physical world. This can be used for building designs, theme parks and other real-world settings.

6. Feasibility Models

These prototypes can be for either digital or physical models and are used to test features that can be added later in the design process. These allow prototyping designers to augment or adapt an existing prototype with additional features.

7. Working Models

More complex than an initial prototype, a working model allows designers to test whether a product actually functions as intended. These are typically used for mechanical inventions or designs that need to move or fit in a particular manner. These allow designers to see if their designs actually work in reality.

8. Video Prototypes

Animated videos and simulations can be used as a graphical representation of a product, while video can also be used to show other prototypes to help designers, managers and consumers to visualise a product.

9. Horizontal Prototypes

Mainly used in software design, horizontal prototypes show a design from a user&#;s perspective, including menus, windows, and screens so that user interactions can be tested.

10. Vertical Prototypes

Used for database design, vertical prototypes are digital &#;back end&#; models that allow software functions to be tested before the next design stage.

Whichever type of prototyping is used, they are an important part of the design process, allowing designers to test, refine and develop their ideas before committing to a final product. The prototyping process is commonly broken down into five steps:

  • Defining the vision: This step includes setting goals and objectives for the prototype
  • Key features: Once the objectives have been determined, designers focus on key features that need to be included in the prototype to achieve these aims
  • Prototype production: This step involves the creation of a working model of a product or system. This can include anything from basic paper prototypes through to digital or physical models
  • Testing and refining: Once created, a prototype is tested and refined until it meets the goals set out in step one. This can include user testing, feedback and further development to allow for more improvements
  • Presenting and approval: Once the testing and refinement of the prototype is complete it is typically presented to stakeholders so that approval can be gained for the final product development

These five steps allow designers to ensure products meet their required objectives before committing time and resources into developing a final version.

The most obvious benefit of prototyping involves being able to create early versions of products so they can be tested and developed before a final design is created. However, there are several other benefits to prototyping too:

  • Improved Product Design &#; including the early detection and testing of potential design and manufacturing issues ahead of mass production
  • Faster Time to Market &#; prototyping allows products to reach the market sooner through testing on inexpensive physical or digital iterations
  • Reduced Costs &#; these costs include both physical and time-related costs
  • Improved User Experience / Customer Satisfaction &#; testing and refining a design prevents problems from occurring that could harm your brand when a product reaches the market, while also ensuring the product meets its objectives
  • Improved Communication and Collaboration &#; an often overlooked benefit of prototyping is how it ensures stakeholders, developers and managers are aligned in their goals. This allows for buy-in from investors and makes sure teams are working towards the same goals

Prototyping is an important part of product design, development and manufacturing. It is used across a wide range of industries, from healthcare to transportation, and consumer goods, to manufacturing, construction, software design, and more. It is used to test the look, feel, function, usability and durability of a product before committing to mass production.

Prototyping is also used to validate ideas, gain buy-in from stakeholders ahead of investment, and to improve communication between teams to ensure better collaboration on projects.

 With all these benefits, combined with its cost effectiveness, it is clear to see why prototyping is an important part of creating such a wide range of digital and physical products.

What are the challenges of prototyping?

Because prototypes are not fully-functional final versions there can be challenges. The greater the level of detail the easier it is to test, but this still requires you to take account of any compliance issues and undertake essential tests. You should also make sure you choose the correct prototyping process and try not to get side-tracked into wasting time on less important factors, such as aesthetics. It is also easy to end up spending too much time working on new prototype iterations, which can unnecessarily delay the creation of a final product.

How do you choose the right prototype?

Your prototype needs to match the final real-world functionality of the end product as closely as possible. This is the same whether designing a brand-new product or fine-tuning an existing one. The closer you can get to the final product the better. In some instances a physical prototype may be preferable to a digital one, although advances in computer technology means that modern prototyping can be achieved without needing several physical iterations.

How do you test a prototype?

When testing a prototype it is important to be mindful of the final goals of your product. This includes understanding the needs of your users and how your product will meet these. Testing is important but you should not become too tied up in repeat testing, it is best to conduct your testing, assess the results, make modifications and then repeat the process until you are satisfied with the results.

How do you revise a prototype?

Prototype revision involves asking the right questions to meet your goals. Without set goals it is easy to spend too much time and effort needlessly revising a prototype.

What are some common mistakes when prototyping?

There are a number of common mistakes when prototyping, including:

  1. Not setting clear goals
  2. Prototyping too early in the design process
  3. Choosing the wrong prototyping tool or technique
  4. Not being willing to change an idea based on the results of testing
  5. Feeling discouraged when a prototype does not work
  6. Not seeking feedback

A Complete Introduction to Prototyping ( Guide)

If you&#;ve been following our series of design thinking articles, you&#;ll know that there are five key steps in this process.

So far, we&#;ve covered the empathize stage and the methods you can use to get to know your target audience; the define stage, looking at how to craft a meaningful problem statement; and the ideate stage, exploring various techniques for generating new ideas.

Now it&#;s time to explore the fourth and penultimate stage: prototyping.

Here&#;s why the prototyping stage is so important: Prototyping allows you to determine whether or not the design (or changes) work the way you intended them to&#;before they&#;re out in the world and in the hands of your users.

Before releasing a product to market, you want to make sure that it works as intended. Does it solve the user&#;s problem exactly as planned? Is it user-friendly and intuitive? Ideally, you&#;ll find these things out before you spend time and money developing the final product.

In this guide, we&#;ll cover everything you need to know about prototyping, starting with a quick recap of the design thinking process. Here&#;s an overview of what we&#;ll cover:

Ready? Let&#;s jump in.

1. What is design thinking? A brief recap

Design thinking is both an ideology and a process used to solve complex problems in a user-centric way. Just like user experience (UX) design, it places the user front and center, focusing heavily on empathy.

What&#;s special about design thinking is that it advocates a solution-based approach to problem-solving. Rather than fixating on obstacles and limitations, it encourages you to experiment, iterate, and think outside the box.

As you may already know, the design thinking process can be divided into five phases: empathize, define, ideate, prototype, and test. While you might look at these steps and see a very logical sequence, it&#;s important to bear in mind that the design thinking process is not linear. Each step brings new discoveries to light, so don&#;t be surprised if you need to loop back to a previous step and redefine what you&#;ve done in order to move forward.

Goto kaierwo to know more.

Prototyping is the fourth stage in the design thinking process. Your prototypes will be based on everything you&#;ve done so far: interviewing your users, defining your problem statement, and coming up with potential solutions. But what is a prototype? We&#;re glad you asked&#;

2. What is a prototype?

*Put simply, a prototype is a scaled-down version of your product; a simulation or sample version which enables you to test your ideas and designs *before investing time and money into actually developing the product. **

So, if you&#;re designing an app, you might create a digital prototype and test it on real users before handing it off to the developers.

Prototypes come in all different shapes and sizes, ranging from simple paper models to fully functional, interactive digital prototypes. We&#;ll look at some of the different types of prototype in section four. First, though, it&#;s important to understand the value of prototyping&#;which brings us to section three.

3. Why use prototypes?

Prototyping is an extremely valuable step in the design thinking process. Putting the user at the heart of the process requires you to test your designs on real users&#;and prototypes make this possible without spending loads of time and money.

Prototypes can help you to:

  • Gain first-hand insights into how your users will interact with, and react to, the product you&#;re designing. Seeing an early version of the product in action shows you if, and how, it&#;ll work in the real world.
  • Identify any usability issues or design flaws before it&#;s too late. If an idea or design is destined for failure, you&#;d rather find out in the early stages. Prototypes enable you to fail early and cheaply; they&#;ll expose a weak or unsuitable approach before you&#;ve invested too much time or money.
  • Make informed design decisions. Can&#;t decide where a certain button should go on your app home screen? Torn between two different layouts for your website? Test a few versions in the form of prototypes and see which works best.

No matter how thorough your UX research is, many people find it difficult to truly conceptualize a product until they have it in front of them. Prototypes allow you to iterate, refine, rework, and make improvements until you have a market-ready product.

4. Different kinds of prototypes

Now let&#;s take a look at some of the different kinds of prototypes you might use. Prototypes can vary in terms of their form, fidelity, interactivity, and lifecycle:

  • Form: Is it a hand-drawn prototype, or a digital one? Is it for mobile or desktop?
  • Fidelity: How detailed and polished is the prototype? You&#;ll often hear the terms high-fidelity and low-fidelity in relation to prototypes.
  • Interactivity: How functional is the prototype? Can the user click on it or interact with it, or is it view-only?
  • Lifecycle: Is the prototype a quick, disposable version that will be replaced with a new and improved version? Or is it a more enduring creation that can be built and improved upon, potentially ending up as the final product?

Generally, prototypes can be divided into low-fidelity and high-fidelity. Fidelity simply describes how similar to the final product the prototype is; whether it&#;s an accurate representation of the final product, or more of a basic, early-stage model. Here&#;s an example of how a prototype for one screen would look from low to high fideltity:


Image credit: Anami Chan

So how do you know whether to use a low, mid, or high-fidelity prototype? It all depends on what you want to achieve with your prototype, as well as how complete your design is.

Low- to mid-fidelity prototypes

Low-fidelity prototypes are ideal if you want to rapidly test broad concepts. They&#;re quick, cheap, and highly collaborative; they don&#;t require advanced design skills, so different people from different teams can easily be involved.

As a rule, low-fidelity prototypes keep content and visuals to a minimum, presenting only the key elements as basic shapes in order to convey visual hierarchy. Their simplicity can lead to uncertainty during testing; it&#;s not always easy for users to identify what and how the prototype is supposed to work.

Low-fi prototypes are also limited in terms of interactivity, so it&#;s not possible to convey animations or transitions.

Mid-fidelity prototypes can also be inexpensive to create (depending on the tools you choose), and don&#;t require much design knowledge or experience. These are great if you want to test broad functional features, such as the user flow for one particular use case (i.e., the user taps this button, which leads them here, then here then here). This is a great approach to take if you&#;re short on time and/or just need to get an overview across screens to be sure that the solutions youve designed actually work and don&#;t overlook any key considerations.

Some of the most common low- and mid-fidelity prototyping techniques include paper prototyping and clickable wireframes. These methods are particularly useful for iterating on initial design ideas, and getting the designers and stakeholders aligned on basic design elements. Let&#;s explore each of these techniques in more detail.

Paper prototyping

Believe it or not, you can create prototypes using nothing more than pen and paper. Paper prototypes are usually low-fidelity. You simply draw different screens of a digital product interface onto sheets of paper&#;no fancy software needed. You can even simulate interactivity during testing by moving the screens (or sheets of paper) around based on how the user navigates the paper prototype. Check out how Google does paper prototyping.


Photo by Amélie Mourichon on Unsplash

Paper prototyping does have its advantages&#;it&#;s quick and affordable, and can be used to document the evolution of your design, giving you tangible artefacts to refer back to. However, paper prototypes can be limited; you won&#;t be able to convey visually complex interfaces, nor high levels of interactivity. They are best kept to the very early stages of the design process when you need to quickly explore a variety of broader ideas or concepts.

Clickable wireframes

Clickable wireframes can also be used as low-fidelity prototypes. A clickable wireframe not only represents the visual layout of a digital interface, but also offers a certain degree of interactivity. You can simulate the journey a user might go through by including hyperlinked buttons which lead to another wireframe.

Clickable wireframes are still very much a bare-bones representation of the finished product, including things like image and text placeholders together with buttons and navigational elements. They can be created using special wireframing software, or even with a presentation tool like PowerPoint or Keynote.

The great thing about clickable wireframes is that they can be quickly and easily modified. Unlike a paper prototype where you&#;ll need to redraw the entire screen if you want to make changes, you can make minor edits without starting from scratch. Still, low-fidelity wireframes are best suited for prototyping in the early stages of the project.

High-fidelity prototypes

Then there are high-fidelity prototypes: the more detailed, realistic prototypes that look and operate much like the final product. You&#;ll move onto hi-fi prototypes once you have a good idea of what you&#;re going to build. They&#;ll help you to fine-tune the design and get it ready for market.

Here&#;s a comparison of a mid- and high-fidelity prototype from Jamal Nichols:

High-fidelity prototypes tend to include all the visual components, interactive elements, and content that will be featured on the final product. In fact, they look just like a real app or website&#;which is hugely beneficial when it comes to user testing. The user feels like they&#;re interacting with a live product, so you can expect them to behave naturally and provide meaningful feedback.

Of course, high-fidelity prototypes are more expensive and time-consuming to produce than their low-fidelity equivalents. However, they are the most useful option when it comes to testing your designs. With a high-fidelity prototype, you can test pretty much every single element of your product before sending it off for development. Not only that: hi-fi prototypes enable you to show your colleagues and stakeholders from other departments exactly how the final product should look.

When it comes to high-fidelity prototypes, you&#;ll most likely create digital prototypes using specialist software. Some of the most popular prototyping tools on the market include Sketch, InVision, and Flinto. You can find a comprehensive list of prototyping tools here.

5. How to create a prototype: Tips and best practices

Now we know exactly what prototyping is, why it&#;s so valuable, and what kinds of prototypes we might use throughout the design process. There&#;s only one thing left to do: create your own!

Here are some pointers that will help you along the way:

Choose the right kind of prototype

Before you create a prototype, consider what stage you&#;re at in the design process, as well as the time and resources available. Low-fidelity prototypes make sense in the early stages, but you&#;ll want to move on to hi-fi prototypes as you get closer to shipping your product.

Set concrete goals

Have a clear idea of what you want your prototype to achieve. In other words, what do you want to find out when you test your prototype? Remember to focus on user needs, keeping your problem statement in mind at all times!

If you&#;re new to digital prototyping, spend some time playing around with a few of the most popular industry tools. Find the tool that meets your needs in terms of features and functionality, and familiarize yourself with the interface before you start prototyping. When the time comes, this will make the prototyping process much easier!

Take action!

Design Thinking is all about generating ideas and testing them, so prototype as and when you need to. Remember, the Design Thinking process isn&#;t strictly linear, so you can whip up a prototype at any time.

6. What next?

Prototyping and testing go hand in hand, so once you&#;ve created a prototype, you&#;ll need to put it in front of real users. You&#;ll observe how they interact with the product in its current state, and ask for feedback on how the experience feels. You can learn more about how to test your prototypes in this guide. Through continuous prototyping, you&#;ll make informed design decisions&#;iterating your way to an intuitive, user-friendly product that your users will love.

If you&#;d like to learn more about prototyping in UX design, check out these articles:

For more photos|prototyping services kaierwoinformation, please contact us. We will provide professional answers.