{"alias":"blogEntry","byline":"","standfirst":"We mentioned in our end of year roundup that we were developing a prototype of our new programme planning tool for section leaders.\n\nWe\u2019ve been testing this with a Community of Interest group and, during those tests, explained the purpose of a prototype within the wider context of the tool\u2019s development.\n\nPrototyping is a crucial part of the design of any modern tool, so we thought we would go into more detail about why. TEST","content":{"layouts":[{"type":"singleColumn","areas":[{"items":[{"gridType":"gridImageBlock","gtmId":"gtmId","gtmClass":"gtmClass","image":"/media/6964/paper-prototype-of-programme-planner.jpg","width":2310,"height":1524,"altText":"Drawing of the programme planner design and layout","caption":"","link":null},{"gridType":"RichTextBlock","content":"\u003Ch2\u003E\u003Cspan\u003EWhat is a prototype?\u003C/span\u003E\u003C/h2\u003E\n\u003Cp\u003E\u003Cspan\u003EA digital prototype usually takes the form of wireframes. Wireframes are simplified designs which help to keep a viewer\u2019s focus on the substance of the product rather than the designer\u2019s visual choices, like which font they used.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003EImages like this are intended to demonstrate the functionality of a tool. Copy may not be finalised and images may be lacking but the viewer is aware of the purpose of the page.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003EWhere a wireframe becomes a prototype is when a tool links these images together. There are various online services that provide this functionality, such as \u003C/span\u003E\u003Ca href=\u0022https://marvelapp.com/\u0022\u003E\u003Cspan\u003EMarvel\u003C/span\u003E\u003C/a\u003E\u003Cspan\u003E, \u003C/span\u003E\u003Ca href=\u0022https://www.invisionapp.com/\u0022\u003E\u003Cspan\u003EInVision\u003C/span\u003E\u003C/a\u003E\u003Cspan\u003E and \u003C/span\u003E\u003Ca href=\u0022https://www.axure.com/\u0022\u003E\u003Cspan\u003EAxure\u003C/span\u003E\u003C/a\u003E\u003Cspan\u003E. We\u2019re using the latter to prototype our digital programme planning tool. Linking wireframes together allows a static page to emulate a functional tool.\u003C/span\u003E\u003C/p\u003E","gtmId":"","gtmClass":""},{"gridType":"gridImageBlock","gtmId":"gtmId","gtmClass":"gtmClass","image":"/media/6965/programme-plan-digital-prototype.png","width":2090,"height":1210,"altText":"Digital prototype of the programme planner showing layout and design","caption":"","link":null},{"gridType":"RichTextBlock","content":"\u003Ch2\u003E\u003Cspan\u003EWhat is a prototype for?\u003C/span\u003E\u003C/h2\u003E\n\u003Cp\u003E\u003Cspan\u003EA prototype is intended to help viewers test what we have designed without distraction. The aim is to see if the user can fulfil their goals on their own. It isn\u2019t the time to critique colours or image choice, hence the rectangular box with an \u2018x\u2019 in the middle which acts as a placeholder for an image.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003EThis helps to evaluate ideas and, through testing, to learn what we didn\u2019t know. That lesson could be how people react to the placement of a button, or what users are expecting from your tool. A prototype will help you develop and test \u003C/span\u003E\u003Cspan\u003Ethe function, \u003C/span\u003E\u003Cspan\u003Eas opposed to the visual\u003C/span\u003E\u003Cspan\u003E form\u003C/span\u003E\u003Cspan\u003E.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003EBecause a prototype is not the finished product, it can prove integral to ensuring development is on the right track, before going too far in the wrong direction. Being careful to \u003C/span\u003E\u003Ca href=\u0022https://www.trymyui.com/blog/2018/04/24/avoid-bias-in-user-testing/\u0022\u003E\u003Cspan\u003Eavoid bias\u003C/span\u003E\u003C/a\u003E\u003Cspan\u003E, user engagement through prototyping can help to keep the development of your tool focused on creating a positive user experience.\u003C/span\u003E\u003C/p\u003E","gtmId":"","gtmClass":""},{"gridType":"gridImageBlock","gtmId":"gtmId","gtmClass":"gtmClass","image":"/media/6963/programme-plan-protoype.gif","width":600,"height":430,"altText":"Screens showing a prototype programme plan being set up with the dates and times","caption":"","link":null},{"gridType":"RichTextBlock","content":"\u003Ch2\u003E\u003Cspan\u003EWhat next?\u003C/span\u003E\u003C/h2\u003E\n\u003Cp\u003E\u003Cspan\u003EOnce you have a prototype you and your testers are happy with, you can start to create the visual design, or the form, of your tool.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003ECreating a digital tool like this means constantly balancing form and function. It is incredibly easy to do one or the other \u2013 the hard work is striking the right balance.\u003C/span\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cspan\u003ETo learn more about our digital programme planning tool, or to become part of our digital Community of Interest group to assist with future testing, please \u003C/span\u003E\u003Ca rel=\u0022noopener\u0022 href=\u0022mailto:digital@scouts.org.uk\u0022 target=\u0022_blank\u0022 title=\u0022Digital email contact\u0022\u003E\u003Cspan\u003Eget in touch\u003C/span\u003E\u003C/a\u003E\u003Cspan\u003E.\u003C/span\u003E\u003C/p\u003E","gtmId":"","gtmClass":""}]}],"config":null}]},"searchDescription":null,"pageType":null,"location":null,"versionDate":"30 January 2019","reviewDate":null,"furtherReading":[],"relatedLinks":[],"id":48482,"nodeName":"Prototyping: what it is and why it\u0027s useful","title":"Prototyping: what it is and why it\u0027s useful","type":"blogEntry","image":{"url":"/media/6964/paper-prototype-of-programme-planner.jpg?width=800\u0026height=800\u0026v=1d9becd334c93d0","caption":"Paper Prototype Of Programme Planner","type":"jpg","size":1146297,"width":2310,"height":1524,"altText":""},"assets":null,"headerOptions":{"headerTitle":"Prototyping: what it is and why it\u0027s useful","headerSubTitle":null,"headerCta":null,"headerCtaText":null,"headerCtaLink":null,"headerBackgroundColour":null,"showSEOImage":false,"headerBackgroundImage":null,"quickLinks":null},"subHeader":"An exploration into prototyping from the Digital Transformation Team","browserTitle":null,"silktide":"eyJjbXMiOiJVbWJyYWNvIiwiZWRpdG9yVXJsIjoiaHR0cHM6Ly9wcm9kLWNtcy5zY291dHMub3JnLnVrLy91bWJyYWNvIy9jb250ZW50L2NvbnRlbnQvZWRpdC80ODQ4MiJ9","canonicalUrl":"https://www.scouts.org.uk/news/2019/january/prototyping-what-it-is-and-why-its-useful/"}