
{"id":5081,"date":"2019-04-23T00:00:00","date_gmt":"2019-04-22T22:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/rapid-prototyping-guide\/"},"modified":"2024-02-13T10:13:37","modified_gmt":"2024-02-13T09:13:37","slug":"rapid-prototyping-guide","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/rapid-prototyping-guide\/","title":{"rendered":"What Is Rapid Prototyping In UX? A Step-By-Step Guide"},"content":{"rendered":"<p>Prototypes are one of the most important deliverables of our discipline. They come in all shapes and sizes. We create them with everything from pencil and paper to fancy design software.<\/p>\n<p>In this guide, we\u2019ll explore one of the most useful yet intimidating prototyping techniques in the field: rapid prototyping.<\/p>\n<p>We\u2019ll go over:<\/p>\n<ol>\n<li><a href=\"#what-is-prototyping-a-recap\">What is prototyping? A recap<\/a><\/li>\n<li><a href=\"#what-is-rapid-prototyping\">What is rapid prototyping?<\/a><\/li>\n<li><a href=\"#the-benefits-of-rapid-prototyping\">The benefits of rapid prototyping<\/a><\/li>\n<li><a href=\"#how-to-build-a-rapid-prototype-the-rapid-prototyping-cycle\">Rapid prototyping: A how-to guide<\/a><\/li>\n<li><a href=\"#are-rapid-prototypes-limited-to-low-fidelity\">Low vs. high-fidelity prototypes<\/a><\/li>\n<\/ol>\n<p>Let\u2019s dive in!<\/p>\n<h2 id=\"what-is-prototyping-a-recap\">1. What is prototyping? A recap<\/h2>\n<p>Before you spend time and money developing an idea or building a product, you need to make sure that it works as intended. You\u2019ll want to test it to ensure that it\u2019s user-friendly and bug-free, and that it helps the user to complete their desired actions.<\/p>\n<p>To do this, you create a scaled-down version of your product\u2014be it an app, a website, or a piece of software. This is what\u2019s known as a prototype. Prototypes can range from simple paper models to fully functional digital prototypes that the user can interact with.<\/p>\n<p>Once you\u2019ve created a prototype, you\u2019ll test it on some target users. You\u2019ll see how users interact with the product, discover any usability issues and design flaws, and identify areas in need of improvement.<\/p>\n<p>You can <a href=\"\/en\/blog\/ux-design\/design-thinking-stage-four-prototyping\/\">learn more about prototyping and all the different kinds of prototypes in this guide<\/a>. Now, though, let\u2019s get back to the focus of this guide: rapid prototyping!<\/p>\n<h2 id=\"what-is-rapid-prototyping\">2. What is rapid prototyping?<\/h2>\n<p>In order to understand rapid prototyping, it is useful to consider where the term comes from.<\/p>\n<p>The term \u201crapid prototyping\u201d actually originates from the manufacturing industry. In manufacturing, rapid prototyping is used to create a 3D model of a product, or a single part of a product. The prototype can be tested before the product or part is manufactured in larger quantities.<\/p>\n<p>In much the same way, designers in the digital world have adopted rapid prototyping as a quick and cost-effective way to build and test a working version of their product. In <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/digital-design-guide\/\" target=\"_blank\" rel=\"noopener\">digital design<\/a>, rapid prototyping is the process of iteratively mocking up an interface and validating it with users, stakeholders, and even your teammates.<\/p>\n<p>But what makes it rapid compared to standard prototyping?<\/p>\n<p>In the manufacturing world, rapid prototyping is much quicker than traditional prototyping, which may take months or even years. When it comes to building digital products, however, it shouldn\u2019t ever take designers months or years to build and test a prototype. So, in actual fact, all prototyping in digital design can be considered rapid. <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/prototyping-tools\/\">Prototyping tools<\/a> like <a href=\"https:\/\/invisionapp.com\/\" rel=\"noopener\">InVision<\/a> and <a href=\"https:\/\/prottapp.com\/\" rel=\"noopener\">Prott<\/a> showcase the nature of prototyping in the digital realm: they are designed to expedite an already speedy process, allowing us to stitch together screens in just minutes.<\/p>\n<p>In a relatively short space of time, we build a prototype of a section of a product we\u2019d like to validate. We then show it to users or our team to gather feedback, and make changes based on this feedback. This process lets us gather feedback early and often, helping us \u201cbuild better products faster.\u201d<\/p>\n<h2 id=\"the-benefits-of-rapid-prototyping\">3. The benefits of rapid prototyping<\/h2>\n<p>Better. Faster. Sounds pretty good, right? But what exactly does this mean for teams and designers?<\/p>\n<p>Well, for starters, rapid prototyping gives us a visual to make sure we\u2019re all on the same page. It isn\u2019t the same thing to describe a product as it is to see it. And while we probably can get away with descriptions within teams since we all speak the same language, they are no good for stakeholders, investors, or users. A quick prototype eliminates miscommunication.<\/p>\n<p>Rapid prototyping also helps us catch problems or pain-points early on in the design process. This lets us address and solve the problem before it gets to development or further into the process, saving us precious time and money.<\/p>\n<p>Finally, continuously and quickly testing our work helps us validate that we\u2019re building a product tailored to fit real user needs and wants. We\u2019ll be showing our rapid prototype to them, and they\u2019ll be able to let us know if it\u2019s working or not.<\/p>\n<h2 id=\"how-to-build-a-rapid-prototype-the-rapid-prototyping-cycle\">4. How to build a rapid prototype: The rapid prototyping cycle<\/h2>\n<p>Now we know what a rapid prototype is, let\u2019s consider how to go about building one.<\/p>\n<p>It is quite simple:<\/p>\n<ol>\n<li>Build what you\u2019re testing<\/li>\n<li>Test it on users, stakeholders, or your team<\/li>\n<li>Adjust it to reflect feedback<\/li>\n<li>Repeat the process<\/li>\n<\/ol>\n<p>That is it! The process isn\u2019t complicated and yet it\u2019s hugely beneficial.<\/p>\n<h3 id=\"creating-a-rapid-prototype-how-much-do-i-build\">Creating a rapid prototype: How much do I build?<\/h3>\n<p>Prototyping an entire app over and over again is a ton of work! And even as a \u201cmaster\u201d prototyper, it\u2019s not a quick process. It is also not necessary to build an entire app right off the bat. So what do we build?<\/p>\n<p>We commonly prototype:<\/p>\n<ol>\n<li>Core functionality and features<\/li>\n<li>Novel interactions and patterns<\/li>\n<\/ol>\n<h4 id=\"core-functionality-and-features\">Core Functionality and Features<\/h4>\n<p>Where will your users spend the most time? Which features will they use the most? Start prototyping here!<\/p>\n<p>Hammer out critical areas of your app or website and make sure they are meeting user expectations, needs, and wants.<\/p>\n<h4 id=\"novel-interactions-and-patterns\">Novel interactions and patterns<\/h4>\n<p>We\u2019ve come a long way since the norm was seeing <a href=\"https:\/\/www.theworldsworstwebsiteever.com\/\" rel=\"noopener\">plenty of bad design like this<\/a> around the web. Both in apps and on websites, we now see conventional structures and experiences. Users are familiar with these. When they see them, they know their way around them and how to use them.<\/p>\n<p>Any time we\u2019re creating something novel that departs from what users expect, we need to prototype and test. If you\u2019re designing a crazy new login screen or a new, cool kind of checkout process, make sure you develop a prototype of it early on to iron out any kinks that will confuse users.<\/p>\n<p>Prototyping isn\u2019t limited to these two cases. You can prototype and test any section of your app. However, tackle one part or feature at a time. Don\u2019t try to address the whole product at once or you\u2019ll wind up with a prototype that is too big to let you be nimble.<\/p>\n<h2 id=\"are-rapid-prototypes-limited-to-low-fidelity\">5. Are rapid prototypes limited to low fidelity?<\/h2>\n<p>A student recently asked me if rapid prototyping was limited to low fidelity. It isn\u2019t. You can test at all different levels of fidelity. You\u2019ll still work quickly, will still gather feedback, and will still revise to reflect it. The difference lies in the kind of feedback you\u2019ll receive.<\/p>\n<p>Low-fidelity prototypes let users focus on how they\u2019ll work their way through a product. Does it make sense? Can you find everything? Do any steps feel off? They are common during very early stages of product development and fleshed out with pencil and paper. Fast, easy, and effective!<\/p>\n<p>Mid-fidelity prototypes help us focus on interactivity. They help us validate the behavior of elements and screens. These are commonly created in tools like <a href=\"https:\/\/balsamiq.com\/\" rel=\"noopener\">Balsamiq.<\/a><\/p>\n<p>High-fidelity prototypes look like the finished product and are created in tools like <a href=\"https:\/\/sketchapp.com\/\" rel=\"noopener\">Sketch<\/a> or <a href=\"https:\/\/www.figma.com\/\" rel=\"noopener\">Figma<\/a>. When users are presented with these, they tend to focus on their visual design, so they aren\u2019t ideal during the early stages. We\u2019ll typically use them towards the end to validate that our visual design decisions clearly communicate what they are meant to.<\/p>\n<p>So which level of fidelity is appropriate? It depends on the stage of your project and what you\u2019re looking to measure or find out.<\/p>\n<p>Happy prototyping!<\/p>\n<p>If you\u2019d like to learn more about the product design process, take a look at these guides:<\/p>\n<ul>\n<li><a href=\"\/en\/blog\/ux-design\/lean-ux-for-beginners\/\">What Is Lean UX? A Complete Beginner\u2019s Guide<\/a><\/li>\n<li><a href=\"\/en\/blog\/ux-design\/what-is-empathy-in-design-thinking\/\">How To Build Empathy For Your Users<\/a><\/li>\n<li><a href=\"\/en\/blog\/ux-design\/10-of-the-best-tools-ux-designers-use-to-do-amazing-things\/\">Essential Tools for UX Designers<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What is rapid prototyping in digital design? How do you build rapid prototypes? Senior UX designer Maria de la Riva shares everything you need to know in this guide.<\/p>\n","protected":false},"author":38,"featured_media":110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-5081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design"],"acf":{"homepage_category_featured":false},"modified_by":"Rash SEO","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=5081"}],"version-history":[{"count":2,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5081\/revisions"}],"predecessor-version":[{"id":32278,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5081\/revisions\/32278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/110"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=5081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=5081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=5081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}