{"id":20679,"date":"2020-09-08T11:24:02","date_gmt":"2020-09-08T10:24:02","guid":{"rendered":"https:\/\/shopjessicabuckley.com\/blog\/?p=20679"},"modified":"2022-06-01T09:30:34","modified_gmt":"2022-06-01T08:30:34","slug":"prototyping-101-ultimate-guide","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/","title":{"rendered":"The Ultimate Guide to Prototyping"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Anybody with an exciting product idea that remains on the ground needs to familiarize themselves with prototyping.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">From digital and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\">paper prototyping<\/a> to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/rapid-prototyping\/\">rapid prototyping<\/a> and high-fidelity prototyping (and many more in between), it\u2019s crucial to know what might apply to any product. Finding the correct form of prototyping is the only way to execute ideas that are practical and viable to thrive in the real world.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This post will act as a guide and jumping-off point for big thinkers out there who need a helpful boost in the right direction.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What is a Prototype?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/anzvzijg9t.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/center><\/p>\n<div class=\"wistia_embed wistia_async_anzvzijg9t\" style=\"height: 405px; position: relative; width: 720px;\">\n<div class=\"wistia_swatch\" style=\"height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; transition: opacity 200ms; width: 100%;\"><img decoding=\"async\" style=\"filter: blur(5px); height: 100%; object-fit: contain; width: 100%;\" src=\"https:\/\/fast.wistia.com\/embed\/medias\/anzvzijg9t\/swatch\" alt=\"\" aria-hidden=\"true\" \/><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Products that are in their most experimental form are prototypes. Never the finely tuned entity of a finished product, these concepts are turned into something tangible, - for instance - a digital prototype or wireframe prototype.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Generally, teams (or individuals) construct a prototype for the purposes of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ballparkhq.com\/?utm_campaign=Ballpark%20SEO&utm_source=marvelblog\">user testing<\/a> and feedback. These methods are applied to gather insights on design concepts and to test product and market fit.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cPrototypes help enhance precision because these designs are assessed by analysts and users who provide valuable feedback.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Prototypes allow innovators to delve deep into their ideas. They also convey a feature\u2019s (or overall design concept) intention to users before time and money go into development.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Why you should go beyond wireframes and mockups<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20681\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Wireframe-prototype.png\" alt=\"Wireframe prototype\" width=\"720\" height=\"400\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Wireframe-prototype.png 720w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Wireframe-prototype-600x333.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Wireframes and mockups are facets of the early stage of the design process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The barest bone part would be the wireframe\u2014which is low fidelity in its presentation. It lays down the rawest elements of the foundation. Afterward, should come the mockup \u2013 something that will closely resemble the prototype, but isn\u2019t quite developed enough, nor is it operable\/interactive.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">More specifically, the mockup is a model, giving a proper visual or graphic representation of what\u2019s to come.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Prototypes go beyond blueprints (aka wireframes) and graphic representations (mockups). They\u2019re more functional and will garner keener insights from real users than the previous two stages. Therefore, this process helps ensure the product hits the market with some steam.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cPrototypes in design give designers an experimental model of a potential solution. To test\/validate design assumptions in a streamlined, inexpensive manner, so changes can be made on the fly.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/features\/prototyping\">Prototyping<\/a> as a process is an extremely valuable step in Design Thinking. Being able to put the uer at the heart of your process requires you to test your designs on real users and prototyping makes this possible without spending lots of resources.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Prototyping can help you:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Gain insight into how your users will interact with your product. Being able to see an early version of the product in action will also show you how it would work in the real world.<\/li>\n<li>Identify any usability issues or design flaws before it\u2019s too late. Prototyping will help you expose any weak links in your user journeys.<\/li>\n<li>Help make informed design decisions. This could be as simple as testing between two different layouts for your website or where a specific button should go on your app.<\/li>\n<li>By testing a few versions you\u2019ll be able to clearly see which prototype has outperformed the other.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What are the different types of prototyping?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Prototypes can vary in types and levels depending on what is required. Here are a few examples of how prototypes could vary:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Form<\/strong><br \/>\nIs it a hand-drawn prototype or a digital one? Is your prototype for mobile or desktop?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Fidelity<\/strong><br \/>\nWhat is the level of detail that has gone into this prototype? How simplistic is the design, or does it look like the finished design?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Interactivity<\/strong><br \/>\nHow functional is the prototype? Can users interact with it and go from screen to screen or is it view only?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Life Cycle<\/strong><br \/>\nIs the prototype a quick and disposable version that will be replaced with a new and improved version? Or will it go through longer iterations, that will be built and improved on overtime, potentially ending up as the final product?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here are some other types of prototypes that may also be mentioned in your design journey and these will be created of different levels of the forms mentioned: Feasibility prototype, horizontal prototype, rapid prototype, simulations, storyboard, vertical prototype, wireframe, animations, and mockups.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Choosing the right prototyping process and fidelity<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20680\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Paper-prototyping-lo-fidelity.png\" alt=\"Paper prototyping lo-fidelity\" width=\"720\" height=\"414\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Paper-prototyping-lo-fidelity.png 720w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/Paper-prototyping-lo-fidelity-600x345.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The only way to accurately decide the most fitting prototyping process is by identifying which of the following fidelity-types is most appropriate:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Low-Fidelity Prototype:<\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Paper-based<\/li>\n<li>No user interactions<\/li>\n<li>Ranges from hand-drawn mockups to printouts<\/li>\n<li>Quickest to create<\/li>\n<li>Ideal for early visualization\/alternative design solutions<\/li>\n<li>Promotes innovation and improvements through rapid iterations<\/li>\n<li>Rough sketches make real users and stakeholders feel at ease when suggesting changes<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Mid-Fidelity Prototype:<\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>A happy medium between high fidelity and low fidelity<\/li>\n<li>These can either possess bare-bones digital interactivity or be finely tuned wireframes<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">High-Fidelity Prototype:<\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Computer-based<\/li>\n<li>Allow for realistic (e.g., mouse-keyboard) user interactions<\/li>\n<li>Similar to an exact representation of the user interface<\/li>\n<li>Ideal for collecting authentic human performance data<\/li>\n<li>Demonstrates actual products to users and stakeholders.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Digital prototyping methods and tools<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These kinds of prototypes are digital demos or simulations of a product or service\u2014usually software, apps, or website-based in nature. Ideally, this phase will help test assumptions and garner insights by exploring all aspects of the product before reaching its full form.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Digital prototypes are often executed after <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/the-magic-of-paper-prototyping\/\">paper prototypes<\/a> (in which paper models simulate computer or web applications).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Tools for digital prototyping are software-based, and they initially were for UX\/UI designers but now depending on your chosen prototyping tool, anyone in the business could use them.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/\">Marvel<\/a> (that\u2019s us!) is a web-based tool that wireframes and prototypes the user experience for web and mobile apps.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.io\/\">Material.io<\/a> is another example that offers a flexible and agile guideline system. It's backed by open-source code and harnesses collaboration efforts between designers and developers.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Creating prototypes for usability testing<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Prototypes should undoubtedly go through <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/usability-testing\/\">usability testing<\/a>. A process which offers opportunities to tweak and hone the following aspects of making a new idea come to life:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Design assessment<\/li>\n<li>Functionality<\/li>\n<li>User experience<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All of these facets must be thoroughly investigated before a project reaches the development stage. It\u2019s then possible to use a prototype to receive useful design feedback during the early stage of innovation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Usability testing can be done with low-fidelity or high-fidelity prototypes. Both will offer opportunities for teams to test ideas and theories about functionality and the overall user experience.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The prototyping process<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating prototypes isn\u2019t difficult and here are some general steps involved in the prototyping process:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Define your requirements<\/strong><br \/>\nThe first step of prototyping is to define your goals - why do you need a prototype? What are you trying to solve?<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ideation<\/strong><br \/>\nOnce you have your goals, jump in and create as many prototyping ideas, don\u2019t get bogged down in this step, as these ideas will help jog your mind to think outside the box no matter how silly they may be, it\u2019s always an important process.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Build your prototype<\/strong><br \/>\nIn this phase, you will design an actual prototype based on the information gathered from the quick designs. This will be a small working model of your requirements.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">User testing<\/strong><br \/>\nOnce you\u2019ve created a prototype, you\u2019ll need to put it in front of users. You\u2019ll want to observe how they interact with the product in its current state and ask for feedback on the experience. By continuously prototyping, you\u2019ll be able to make informed design decisions that will help you iterate your way to an intuitive and user-friendly product that users will love.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Refining prototype<\/strong><br \/>\nBased on the user\u2019s feedback and suggestions, this will be the stage to refine your prototype. This phase won\u2019t be over until all the requirements you specified at the beginning of this process have been met and the user is happy with the results.<\/li>\n<\/ol>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Practical tips that work for any prototype<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">First and foremost, all prototypes should be catered to the audience they\u2019re being made for\u2014this ensures relevant, actionable results.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whoever the audience is should also be primed, prepared, and given background knowledge to avoid confusion. It is important to involve them in the design process. After all, user feedback is the lifeblood of any successful prototype.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cGood prototypes look real and do anything to emulate the appearance of the final product. For instance, digital versions incorporate clicking buttons, scrolling, or other methods that create the illusion of computer code.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ask yourself the following questions about the primary focus of your prototype:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Is the purpose of the prototype based on testing or communication?<\/li>\n<li>Would it be an exploratory or directed study if the prototype is for testing?<\/li>\n<li>Between attitude, engagement, or behavioral metrics, what\u2019s being tested?<\/li>\n<li>What\u2019s the definition of success or failure with testing?<\/li>\n<li>Are there any specific hypotheses or assumptions?<\/li>\n<li>Does the product have a unique aspect on which feedback should be collected?<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What\u2019s next?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20568\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92.png\" alt=\"How to run a remote design thinking workshop\" width=\"1600\" height=\"700\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92.png 1600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92-600x263.png 600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92-1500x656.png 1500w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92-768x336.png 768w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/07\/92-1536x672.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now you know the ins and outs of prototyping, why it\u2019s so invaluable, and what types of prototyping you might use throughout your design process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There\u2019s only one thing left to do, and that\u2019s to create your own!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you would like to learn more about user-centric design, then check out our free ebook, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/workshops\">The Design Thinking Workshop Kit<\/a> that will help you and your team learn about how to apply the stages empathize, define, ideate, prototype, and test to any problem, in an interactive and fun session. We\u2019ve even remade our kit digital to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/run-first-design-thinking-workshop-prototypes\/\">bypass those tricky on-site logistics<\/a>, so you can still collaborate with your team no matter where you are in the world.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn the ins and outs of prototyping and bring your bold new product to life with this ultimate guide to prototyping<\/p>\n","protected":false},"author":290,"featured_media":20682,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-20679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping-design-thoughts"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Learn the ins and outs of this design process and bring your bold new product to life with our ultimate guide to prototyping\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prototyping 101: The Ultimate Guide to Prototyping\" \/>\n<meta property=\"og:description\" content=\"Learn the ins and outs of this design process and bring your bold new product to life with our ultimate guide to prototyping\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-08T10:24:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-01T08:30:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/99.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"414\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2020\/09\/99.png\",\"width\":720,\"height\":414,\"caption\":\"Lo fidelity prototyping app wireframe\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/\",\"name\":\"Prototyping 101: The Ultimate Guide to Prototyping\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#primaryimage\"},\"datePublished\":\"2020-09-08T10:24:02+00:00\",\"dateModified\":\"2022-06-01T08:30:34+00:00\",\"description\":\"Learn the ins and outs of this design process and bring your bold new product to life with our ultimate guide to prototyping\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/eefa6aec060400a25fb8aa9150c6ce18\"},\"headline\":\"The Ultimate Guide to Prototyping\",\"datePublished\":\"2020-09-08T10:24:02+00:00\",\"dateModified\":\"2022-06-01T08:30:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#primaryimage\"},\"articleSection\":\"Design &amp; Prototyping\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/prototyping-101-ultimate-guide\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/eefa6aec060400a25fb8aa9150c6ce18\",\"name\":\"Kitty Wong\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/07606decf641f5d2d5fda7e47aeb530cb7109731c1dfa1d9c9c05ecc4b08231d?s=96&d=mm&r=g\",\"caption\":\"Kitty Wong\"},\"description\":\"Content and Social Media Manager at Marvel | Photographer | Sewer\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/20679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=20679"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/20679\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/20682"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=20679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=20679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=20679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}