{"id":14012,"date":"2016-05-26T17:44:08","date_gmt":"2016-05-27T01:44:08","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14012"},"modified":"2020-04-22T06:36:11","modified_gmt":"2020-04-22T13:36:11","slug":"wrong-way-prototype","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/","title":{"rendered":"The Wrong Way to Prototype"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">TLDR: The <\/span><i><span style=\"font-weight: 400;\">wrong application of high-fidelity prototyping harms UX design more than you think<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, I\u2019ll draw from my own experiences to explain the dangers of prototyping in high fidelity too early in the process. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Undeniable Growth of UX Design<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I feel extremely lucky to be part of the UX industry. I followed my passion in the early 2000s when the field was just taking off, and years later, the power of UX became universally understood.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yes, we have many reasons to be optimistic about the future of UX. Ten years ago, \u00a0it was a hardly recognizable part of the digital product development. Today, UX plays a vital role in any product-oriented organization. We\u2019ve earned our seat at the table.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The following Google Trends chart (keyword: UX) illustrates this amazing growth:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14013\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image00-6.png\" alt=\"image00\" width=\"719\" height=\"259\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image00-6.png 1634w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image00-6-700x252.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image00-6-768x276.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image00-6-1024x368.png 1024w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">People do talk and ask about UX more and more. We definitely benefited from this growth at <\/span><a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">UXPin<\/span><\/a><span style=\"font-weight: 400;\">. Six years ago, we were a company of three people selling paper prototyping notepads. Today, over 70 people help bring our design collaboration platform to customers in 150 countries. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Along the way, we\u2019ve conducted plenty of user research. We\u2019ve seen multiple Lean, Agile, and waterfall variations of the design process. We noticed that even the most Lean or Agile companies can still prematurely jump into high fidelity in hopes of shortening project timelines. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When that happens, the team might save some time in initial delivery, but they almost always pay it back multiple times over in fixes or teardowns. Do it long enough, and UX loses its real value in identifying the right idea through eliminating the wrong ones. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Danger of Prototyping the Wrong Way<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I\u2019m afraid that our most powerful weapon is turning into a toy detached from reality. <\/span><\/p>\n<p><b>Prototyping is too often used to merely animate hi-fidelity design mockups. In many cases, it leads to expensive, bloated, siloed, and confusing design processes<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In my past life in ecommerce design, I remember working with a few UX designers from visual design backgrounds who would fall into this trap. Because Photoshop felt like second nature, they\u2019d dive into high fidelity out of habit (I\u2019ve admittedly also made this mistake a few times earlier in my career). Stakeholders would offer feedback on the wrong details, and users would sometimes uncover issues with the interaction model that required a complete rebuild. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">While there are situations when high fidelity prototyping makes a lot of sense, it shouldn\u2019t be our default prototyping mode. And while our product <\/span>does integrate with Photoshop and Sketch<\/span><span style=\"font-weight: 400;\">, we always hope that step happens much later in the design process. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, we have to step back and reconsider when and why we\u2019re actually prototyping.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Triple Cost-Cutting Value of Prototyping<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Prototyping is not a new concept, nor is it exclusive to interaction design. As Michael Guggenheim argues in his excellent article <\/span><a href=\"http:\/\/limn.it\/the-long-history-of-prototypes\/\"><span style=\"font-weight: 400;\">\u201cThe Long History of Prototypes\u201d<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">\u201c\u2026prototyping is not simply understood as the development of \u201cfirst forms\u201d or \u201cfirst strikes\u201d as beta-versions of products as in industrial design, but as a more general mode of doing culture: a mode that is tentative, based on bricolage, user involvement and ongoing change and improvements of products and practices, as \u201copen innovation\u201d, rather than on an expert in a closed lab who turns out a finished product to be used by an unknowing user.\u201d<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Prototyping should set the shortest possible path to the user. During the early stages of product development, prototypes connect the vision with its recipient &#8211; the customer. \u00a0This is its true value. Effective prototyping empowers:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Validation of the product idea<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Correction of the product details<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Expansion of the product vision<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Validation, correction, and expansion, when driven by <\/span><b>inexpensive prototyping<\/b><span style=\"font-weight: 400;\"> (hence, not focused on visual fidelity) can dramatically cut the cost of product development. The faster you test your prototypes with the end user, the lower the probability of expensive errors in later stages. That\u2019s why you should prototype early, using the cheapest means possible (play with fidelity, good enough is perfect for a prototype) and plan to iterate after user feedback.<\/span><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14015\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image02-4.jpg\" alt=\"image02\" width=\"720\" height=\"540\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image02-4.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image02-4-400x300.jpg 400w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image02-4-768x576.jpg 768w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">If you spend a lot of time polishing the visuals, or you code animations in a script language only used for prototyping, you might create something that won\u2019t survive first contact with users. What a waste of time and energy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In most cases, it doesn\u2019t make sense to create a hi-fi mockup in a graphic design tool, then connect everything into a prototype. We delay our path to the user, making exploration more difficult since we start falling in love with what we slowly perceive as a near-perfect design. The design process loses its spirit of iteration. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make the most out of prototyping, \u00a0start in low to mid fidelity, work fast, collaborate with your team and iterate based on user research.<\/span><\/p>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/real-life-ux-process\/\" class=\"action-get-ebook\" data-name=\"Real-Life UX Design Processes\"><img loading=\"lazy\" decoding=\"async\" width=\"236\" height=\"334\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/ebook-cover-1.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"ebook cover 1\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/ebook-cover-1.jpg 236w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/ebook-cover-1-212x300.jpg 212w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/real-life-ux-process\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Real-Life UX Design Processes\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-mockups\/\" class=\"action-get-ebook\" data-name=\"The Guide to Mockups\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-Mockups-.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"The Guide to Mockups\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-Mockups-.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-Mockups--210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-mockups\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Guide to Mockups\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-prototyping\/\" class=\"action-get-ebook\" data-name=\"The Ultimate Guide to Prototyping\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Ultimate-Guide-to-Prototyping.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"The Ultimate Guide to Prototyping\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Ultimate-Guide-to-Prototyping.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Ultimate-Guide-to-Prototyping-210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-prototyping\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Ultimate Guide to Prototyping\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" class=\"action-get-ebook\" data-name=\"The Guide to UX Design Process &#038; Documentation\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"372\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-262x372.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"The Guide to UX Design Process Documentation\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-211x300.jpg 211w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Guide to UX Design Process &#038; Documentation\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"372\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-262x372.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"The Guide to UX Design Process Documentation\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-211x300.jpg 211w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'The Guide to UX Design Process &#038; Documentation' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2><span style=\"font-weight: 400;\">When Does Hi-fi Prototyping Makes Sense?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">That being said, there are definitely cases when prototyping with high-fidelity mockups makes perfect sense.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Simple changes to existing assets <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">First of all, if you\u2019re making simple changes to existing assets, there\u2019s no point in redrawing the whole thing as a low or mid-fidelity prototype. You can make easy changes (like rearranging patterns) easily in your graphic mockup or in code. The shortest path is the best one &#8211; in that particular case, the shortest path leads through the hi-fi mocks.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Preparing a customer presentation <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">High fidelity prototypes based on graphic mockups also make a lot of sense if you\u2019re preparing a customer presentation. Based on some time freelancing, I know that explaining \u201cthe fidelity level\u201d of a prototype might destroy the wow effect of your presentation. If you already tested your design with users and you\u2019re confident in your final interface, tie it together as a prototype for the customer. Presenting interactive, high-fidelity, prototypes to a customer greatly increases the chances for faster \u00a0sign-off.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Complex products <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Some projects of great importance and no urgency, or extreme complexity, might require high fidelity prototypes with access to real, dynamic, data. That usually means you have to code the prototype to fully simulate the experience.<\/span><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14016\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image03-3.jpg\" alt=\"image03\" width=\"720\" height=\"540\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image03-3.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image03-3-400x300.jpg 400w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image03-3-768x576.jpg 768w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">In any of these cases, hi-fidelity prototypes are the right choice. Though expensive, they are a necessary means to meet the objectives. In any other situation, however, we should strongly consider whether investing time into a high fidelity prototype actually helps us validate risky decisions. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">A Real-Life Example of Iterative Design<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">At <\/span><a href=\"https:\/\/www.uxpin.com\"><span style=\"font-weight: 400;\">UXPin<\/span><\/a><span style=\"font-weight: 400;\">, we believe that prototyping should be rapid and collaborative. We practice what we preach: unless our projects meet the criteria in the previous section, our design leadership urges our teams to start in lo-fi or mid-fi. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The recent redesign of our design editor interface is a great example of this process in action.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">The overall process<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">After reviewing customer feedback and known issues gathered by customer support , our design team established the design principles (for example: \u201cNo distractions\u201d, \u201cPredictable Architecture\u201d, \u201cVisual consistency\u201d\u2026). <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Afterwards, we spent two days sketching our ideas before finally prototyping multiple mid-fidelity UI concepts. Prototypes were tested with 20 users and after multiple iterations, we felt ready to invest more in the best-performing concept. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is when we started work on the visual design. All in all, the final design was ready for development in less than two weeks (including user testing). <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Below you can see the three early concepts \u00a0of the redesigned UXPin prototype inside the final version of the new UI.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What we learned (and avoided)<\/span><\/h3>\n<p><b>Version 1<\/b><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14014\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image01-8.png\" alt=\"image01\" width=\"720\" height=\"459\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image01-8.png 1328w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image01-8-470x300.png 470w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image01-8-768x490.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image01-8-1024x653.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">We tested multiple versions of the architecture to establish the best position of the key parts of the interface, including the navigation. The image above presents one of the first versions of the UI. Notice the sitemap placed in the bottom right corner. Through our testing, we luckily learned that the placement was inconsistent with user\u2019s expectations. <\/span><\/p>\n<p><b>Version 2<\/b><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14018\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image05-1.png\" alt=\"image05\" width=\"720\" height=\"463\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image05-1.png 1349w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image05-1-467x300.png 467w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image05-1-768x494.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image05-1-1024x658.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Designing a design editor is challenging because the interface must be simple, clear, and offer enough canvas real estate &#8211; all while housing enough advanced features. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The screen above uses a tab-like system to switch between different edit modes. While it looks elegant and users find it easy to switch between different options, we learned: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The lack of icons\u2019 labels harmed discoverability of features. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The loss of about 80px of space was also hard to accept on smaller screens.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Since we didn\u2019t invest more than 30 minutes into building this version (based on the previous version) we rejected it after a single round of testing.<\/span><\/p>\n<p><b>Version\u00a03<\/b><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14017\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image04-2.png\" alt=\"image04\" width=\"720\" height=\"461\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image04-2.png 1346w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image04-2-468x300.png 468w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image04-2-768x492.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/image04-2-1024x656.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">The final version of the prototype was really similar to what we launched on production servers. It incorporated all the learnings from Version 1 and Version 2. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If we heavily invested in a hi-fidelity design of Version 1, users would have trouble finding and using their sitemap (a core feature for design context). If we fell in love with Version 2, we might face an even worse problem &#8211; users wouldn\u2019t be able to discover core features for editing their designs. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In either case, not only would the process be very expensive, we\u2019d undoubtedly launch an inferior product. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The Final Word<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">UX design, like any design field, needs prototyping. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">From car design to architecture, no great design exists without effective prototyping. But prototyping shouldn\u2019t be just another step in the process. It must serve its purpose &#8211; validation of the product idea, correction of the product details, and expansion of the product vision. All done through a collaborative customer-centered process. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s apply the right processes at the right time for the right reasons.<\/span><\/p>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Avoid the pitfalls of practicing the wrong prototyping process. Know when to use low and hi fidelity prototypes. <\/p>\n","protected":false},"author":2,"featured_media":14020,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8],"tags":[],"class_list":["post-14012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping"],"yoast_title":"","yoast_metadesc":"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Wrong Way to Prototype | UXPin<\/title>\n<meta name=\"description\" content=\"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Wrong Way to Prototype\" \/>\n<meta property=\"og:description\" content=\"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-27T01:44:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:36:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"534\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcin Treder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marcintreder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcin Treder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/\"},\"author\":{\"name\":\"Marcin Treder\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"headline\":\"The Wrong Way to Prototype\",\"datePublished\":\"2016-05-27T01:44:08+00:00\",\"dateModified\":\"2020-04-22T13:36:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/\"},\"wordCount\":1592,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/speed-up-your-prototyping-process-pop_9632.jpg\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/\",\"name\":\"The Wrong Way to Prototype | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/speed-up-your-prototyping-process-pop_9632.jpg\",\"datePublished\":\"2016-05-27T01:44:08+00:00\",\"dateModified\":\"2020-04-22T13:36:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"description\":\"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/speed-up-your-prototyping-process-pop_9632.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/speed-up-your-prototyping-process-pop_9632.jpg\",\"width\":800,\"height\":534,\"caption\":\"speed up your prototyping process pop 9632\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/prototyping\\\/wrong-way-prototype\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Wrong Way to Prototype\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\",\"name\":\"Marcin Treder\",\"description\":\"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\",\"https:\\\/\\\/x.com\\\/marcintreder\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/marcintreder\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Wrong Way to Prototype | UXPin","description":"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/","og_locale":"en_US","og_type":"article","og_title":"The Wrong Way to Prototype","og_description":"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/","og_site_name":"Studio by UXPin","article_published_time":"2016-05-27T01:44:08+00:00","article_modified_time":"2020-04-22T13:36:11+00:00","og_image":[{"width":800,"height":534,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg","type":"image\/jpeg"}],"author":"Marcin Treder","twitter_card":"summary_large_image","twitter_creator":"@marcintreder","twitter_misc":{"Written by":"Marcin Treder","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/"},"author":{"name":"Marcin Treder","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"headline":"The Wrong Way to Prototype","datePublished":"2016-05-27T01:44:08+00:00","dateModified":"2020-04-22T13:36:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/"},"wordCount":1592,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg","articleSection":["Blog","Process","Prototyping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/","url":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/","name":"The Wrong Way to Prototype | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg","datePublished":"2016-05-27T01:44:08+00:00","dateModified":"2020-04-22T13:36:11+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"description":"Avoid the pitfalls of the wrong prototyping process. Know when to use which prototypes.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/05\/speed-up-your-prototyping-process-pop_9632.jpg","width":800,"height":534,"caption":"speed up your prototyping process pop 9632"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/prototyping\/wrong-way-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The Wrong Way to Prototype"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc","name":"Marcin Treder","description":"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.","sameAs":["http:\/\/uxpin.com","https:\/\/x.com\/marcintreder"],"url":"https:\/\/www.uxpin.com\/studio\/author\/marcintreder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14012"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14012\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/14020"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}