{"id":21124,"date":"2021-04-08T12:35:22","date_gmt":"2021-04-08T11:35:22","guid":{"rendered":"https:\/\/marvelapp.com\/blog\/?p=21124"},"modified":"2022-06-01T09:32:36","modified_gmt":"2022-06-01T08:32:36","slug":"what-are-the-benefits-of-prototyping","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/","title":{"rendered":"What are the benefits of 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\">Prototyping is the process of creating a functional mockup of your product before development. Prototyping helps you make sure your product works as intended and solves your users\u2019 problem, before you write your first line of code. User feedback on your prototype gives you insight needed to improve the idea while it\u2019s still easy to make those changes. <\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">High or low fidelity?<\/h3>\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 are a few different methods of prototyping! The method of prototyping you choose will depend on what stage you\u2019re at in the design process, your collaboration needs, and personal preference. Some users prefer to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/creating-paper-prototypes-with-marvel\/\" title=\"sketch with a pen and paper\">sketch with a pen and paper<\/a> when putting down their initial designs while others may prefer a digital mock-up so they can more easily collaborate in real time with other designers. <\/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 low-fidelity prototype would be one that gets the general idea of the product down at an earlier stage of the process, while a high fidelity prototype would be one that looks and feels more like the real thing, and typically takes more time to put together, and is used most often at later stages 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\">Prototypes are great for testing out ideas and understanding the needs and behaviours of your users. They\u2019re also a great way to demonstrate ideas to stakeholders with the ability to iterate quickly.<\/p>\n<div id='gallery-1' class='gallery galleryid-21124 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"926\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Low-Fidelity@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Low-Fidelity@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Low-Fidelity@2x-600x386.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Low-Fidelity@2x-768x494.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Slow down to speed up<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Adding an additional step to your design process might seem like it will take longer to get your designs out there, but prototyping will save you a lot of time in the long run. Taking the time to go through the prototyping process means any issues are identified early, avoiding having to make difficult and time consuming changes later down the line in development.<\/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\">Finding a problem with your product in the development phase means more work for the development team and more time and resources spent reworking your product. If you have a prototype you\u2019re happy with before development starts you can be sure the development of your final product will go smoothly.<\/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\">Since prototyping in Marvel is so fast you can easily make changes to your project as you get feedback. It\u2019s much quicker to incorporate feedback from users into a prototype than into a developed project. Being able to make these changes quickly ensures your product will solve your user\u2019s problem.<\/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\">Even if you prefer to sketch out your ideas using pen and paper, your designs can be brought into Marvel and turned into an interactive prototype in a matter of minutes. Since the prototyping step ultimately ensures your product is as usable and useful as it can be, it\u2019s worth the extra effort!<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Easier to start gaining insights<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">User testing is a method of evaluating the performance of your product through feedback from your users. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ballparkhq.com\/?utm_campaign=Ballpark%20SEO&amp;utm_source=marvelblog\">Ballpark<\/a> provides audio, video, and screen recording of the user\u2019s journey through your product along with insights like time spent on each screen, misclicks, and whether the user hit the goal screen if one was set.<\/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 are many questions you can answer about your design through user testing including:<\/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>Does the user understand the benefits of the product in these marketing materials?<\/li>\n<li>How long does it take a user to find their billing information?<\/li>\n<li>What does a user expect to happen when they click specific buttons?<\/li>\n<li>What information is missing when completing a purchase on your website?<\/li>\n<li>Can a user complete important tasks without getting lost?<\/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\">You may be tempted to wait until your product is live to test it but that can lead to more work down the road. Prototypes in Marvel are easily duplicated and updated allowing you to iterate on your ideas without the hassle of updating code and deploying an update. Prototyping first, means you\u2019ll go live with a tested and optimised version of your product.<\/p>\n<div id='gallery-2' class='gallery galleryid-21124 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"806\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Testing-Result@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Testing-Result@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Testing-Result@2x-600x336.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Testing-Result@2x-768x430.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Building in stakeholder feedback<\/h3>\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 insights you get from having users test your prototypes through user testing will likely give you a list of things to tweak or improve in the design or flow of your project.<\/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:\/\/marvelapp.com\/blog\/design-collaboration-basics-with-marvel\/\" title=\"Collaboration\">Collaboration<\/a>, and involving others in the design process, has been core to how we\u2019ve built prototyping in Marvel. Bringing users into the process, seeing how they interact with the prototype and listening to their ideas, gives you more data points. More data ultimately means more informed decisions about the product, leading to better product outcomes. <\/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\">To go one step further, you could consider using co-creation from the start. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/co-creating-prototypes-with-clients-stakeholders\/\" title=\"Co-creation\">Co-creation<\/a> has been found to be one of the best ways of making a product that will best solve a user\u2019s problem. Co-creation is the process of inviting feedback from stakeholders (usually customers) and enabling them to participate in the ideation or design process, producing an outcome that\u2019s beneficial to everyone involved. <\/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\">Instead of designing your product with a fictional persona in mind, co-creation allows you to work alongside users and stakeholders to create something that perfectly addresses their challenges. Incorporating that feedback at the prototyping stage will save you time, resources, and make your product better in the long run.<\/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 is an integral part of the design process for any digital product. Set yourself up for success from the beginning by adding prototyping to your design process. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/signup\" title=\"Start prototyping in Marvel today\">Start prototyping in Marvel today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prototyping is the process of creating a functional mockup of your product before development. Prototyping helps you make sure your product works as intended and solves your users\u2019 problem, before you write your first line of code. User feedback on your prototype gives you insight needed to improve the idea while it\u2019s still easy to make those changes. High or&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":361,"featured_media":21127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-21124","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=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are the benefits of prototyping? | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Prototyping is the process of creating a functional mockup of your product before development. Prototyping helps you make sure your product works as intended and solves your users\u2019 problem, before you write your first line of code. User feedback on your prototype gives you insight needed to improve the idea while it\u2019s still easy to make those changes. High or... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/\" \/>\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=\"2021-04-08T11:35:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-01T08:32:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Blog@2x-4-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\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=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.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:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Blog@2x-4-scaled.jpg\",\"width\":2048,\"height\":896},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/\",\"name\":\"What are the benefits of prototyping? | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#primaryimage\"},\"datePublished\":\"2021-04-08T11:35:22+00:00\",\"dateModified\":\"2022-06-01T08:32:36+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3108320a2d15892154f321ecad0d4d8b\"},\"headline\":\"What are the benefits of prototyping?\",\"datePublished\":\"2021-04-08T11:35:22+00:00\",\"dateModified\":\"2022-06-01T08:32:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#primaryimage\"},\"articleSection\":\"Design &amp; Prototyping\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/what-are-the-benefits-of-prototyping\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3108320a2d15892154f321ecad0d4d8b\",\"name\":\"Lain Bader\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dfe8a4f083c5d4fe1a1bf25b3d6ce42f40bb5661486590468f143dca572689de?s=96&d=mm&r=g\",\"caption\":\"Lain Bader\"},\"description\":\"Senior Customer Support Manager at Marvel\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/361"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=21124"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21127"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=21124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=21124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=21124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}