{"alias":"blogEntry","byline":"By James Calmus","standfirst":"","content":{"layouts":[{"type":"singleColumn","areas":[{"items":[{"gridType":"gridImageBlock","gtmId":"gtmId","gtmClass":"gtmClass","image":"/media/7442/alexpereira_19472.jpg","width":4961,"height":3307,"altText":"Alex Pereira, UI and UX designer.","caption":"","link":null},{"gridType":"RichTextBlock","content":"\u003Cp\u003E\u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EIn a\u00A0\u003Ca rel=\u0022noreferrer noopener\u0022 href=\u0022https://digital.scouts.org.uk/exploring-our-beta-website-functionality/\u0022 target=\u0022_blank\u0022\u003Eprevious blog post\u003C/a\u003E, we touched on the design of our new\u00A0beta website. To explain in greater detail, we interviewed one of our\u00A0user interface (UI) and user experience (UX)\u00A0designers, Alex Pereira, on his\u00A0work.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EHow did you come up with the designs for the new Scouts website\u003C/strong\u003E\u003Cstrong\u003E\u00A0and w\u003C/strong\u003E\u003Cstrong\u003Ehat principles or ideas, if any, guide\u003C/strong\u003E\u003Cstrong\u003Ed\u003C/strong\u003E\u003Cstrong\u003E\u00A0you in your design work?\u003C/strong\u003E\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EThe new website is based on standard web design principles using a 12-column grid.\u00A0This\u00A0transposes easily into a mobile device template, which is\u00A0really important\u00A0these days. The design itself is inspired by\u00A0our brand identity\u00A0and applied to all the new visual work currently being produced by the team.\u00A0Because\u00A0we are working with interactive digital elements more consideration is needed from a user\u2019s perspective.\u00A0\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EUltimately, the user is the primary focus. We need to give them the clearest and most intuitive path whilst trying to maintain as many of the principles of the brands\u0027 tone of voice\u00A0\u2013\u00A0Confident, Active, Challenging, Inclusive, Optimistic.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EWas there anything from the existing Scouts websites that helped to inform your work?\u003C/strong\u003E\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EOne of the best things about\u00A0designing the beta website\u00A0is that it was a completely blank page to start with. There are no influences or distractions from the old website\u2019s design. Building a complete UI\u00A0design system from the bottom-up is an exciting and challenging process.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EThe improved design will also be mirrored on how\u00A0the majority of\u00A0pages are going to function. Users will have enhanced and new features when the work is fully integrated.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E\u003C/p\u003E","gtmId":"","gtmClass":""},{"gridType":"gridImageBlock","gtmId":"gtmId","gtmClass":"gtmClass","image":"/media/7441/banner_image_titleonly.jpg","width":1440,"height":1200,"altText":"Designs for the beta website in Sketch.","caption":"","link":null},{"gridType":"RichTextBlock","content":"\u003Cp\u003E\u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EWhat tools did you use?\u003C/strong\u003E\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EThe primary tool I use is Sketch, because it\u00A0allows for a fast,\u00A0iterative design process. The goal is to eventually create a complete library of usable building blocks. When a comprehensive library is in place the pages literally build themselves!\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003EW\u003C/strong\u003E\u003Cstrong\u003Ehy is good design so important when building a website?\u003C/strong\u003E\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EEvery page has a purpose and if it is badly designed users can get confused. If they\u2019re confused,\u00A0that could eventually see them leave that page.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E \u003C!-- wp:paragraph --\u003E\u003C/p\u003E\n\u003Cp\u003EThe\u00A0user\u2019s\u00A0journey\u00A0through a website\u00A0can be more guided when consideration is given to typography, space and colour. Building a successful experience that reinforces the brand values\u00A0is vital so that\u00A0users feel happy to return and endorse what has been made.\u00A0\u003C/p\u003E\n\u003Cp\u003E\u003C!-- /wp:paragraph --\u003E\u003C/p\u003E","gtmId":"","gtmClass":""}]}],"config":null}]},"searchDescription":null,"pageType":null,"location":null,"versionDate":"22 July 2019","reviewDate":null,"furtherReading":[],"relatedLinks":[],"id":48488,"nodeName":"Designing the beta website","title":"Designing the beta website","type":"blogEntry","image":{"url":"/media/7442/alexpereira_19472.jpg?width=800\u0026height=450\u0026v=1d9becd33ad2a60","caption":"ALEXPEREIRA 19472","type":"jpg","size":2830454,"width":4961,"height":3307,"altText":""},"assets":null,"headerOptions":{"headerTitle":"Designing the beta website","headerSubTitle":null,"headerCta":null,"headerCtaText":null,"headerCtaLink":null,"headerBackgroundColour":null,"showSEOImage":false,"headerBackgroundImage":null,"quickLinks":null},"subHeader":"Interview with Alex Pereira on how the Scouts designed their new website.","browserTitle":null,"silktide":"eyJjbXMiOiJVbWJyYWNvIiwiZWRpdG9yVXJsIjoiaHR0cHM6Ly9wcm9kLWNtcy5zY291dHMub3JnLnVrLy91bWJyYWNvIy9jb250ZW50L2NvbnRlbnQvZWRpdC80ODQ4OCJ9","canonicalUrl":"https://www.scouts.org.uk/news/2019/july/designing-the-beta-website/"}