Design Process of a Website Stuart Holmes Frontend NE, August 2019

Stuart Holmes @trubru Full Stack Developer at Newcastle Building Society Assistant Scout Leader at 4th Morpeth Scouts

First attempts

No content

No content

No content

Back to the drawing board

Out of date content Latest news was last published in 2014 Many pages

Not responsive Self-Installed Wordpress, and plugins Old Brand

Self installed WordPress out of date Site was hacked and spam posts

Dodgy posts Leaked into Twitter feed

No content

4th Morpeth 12 sections 250+ kids 35+ volunteer leaders and helpers And growing statistics by Ralf Schmitzer from the Noun Project

Archetypes Looked at the behaviours of those who would use the website. Find out what people want and need. persona by Yu luck from the Noun Project

GSL (Group Scout Leader) The website should be easy to maintain and with low risk of it being compromised. Content should be simple to update. The content of the website should be relevant and help promote volunteers and new members to join the group Modern design, attractive Photo by Harps Joseph on Unsplash Liam is a busy man and juggles his home life, work and volunteering. As GSL he overseas activities for the whole group and wants to reduce the workload where possible.

Section Leaders Section leaders send emails to their parents about activities and programme. Group updates from GSL via email/Facebook. A restricted Facebook group keeps parents up to date with activities as they happen – such as at meetings and camp. Photo by Clint McKoy on Unsplash Stuart is a leader for Sea Scouts. He wants to promote the section to gain additional volunteers and members. He communicates with parents by email and face-to-face about upcoming meetings.

Parents More likely to speak to leaders directly about what they need to know. Website is not first place to get information. Happy to get regular updates from leaders via email, Facebook. Photo by Maria Teneva on Unsplash Lindsay’s son attends Sea Scouts. She looks to the leaders for updates on what is going on in the group. She finds the emails from the leaders useful, and if she has any questions or concerns, she will approach the leader before or after meetings.

Potential New Member/Volunteer Looking for information about Scout groups Wants to find out more about what is available and who to talk to. Photo by Sai De Silva on Unsplash Faye is looking for a local club for her 6 year old. She is looking local groups to join on the internet and wants to find out what is available.

Scout Association Wants Scout Groups to follow brand and vision of the association. Must be inclusive – work on a range of devices with content meeting Web Content Accessibility Guidelines (WCAG) Level AA. The Scout Association overseas scouting in the UK. They promote Skills for Life in scouting and launched a new brand and vision in 2018. It is important that the brand and vision is reflected in the groups.

The proposal

Site Management • Static html website with a simple design • Straight forward to update by someone with basic knowledge of html. • Full featured content management system not needed. • Source Control to be accessible by members of the group via Github. • Simple to upload/deploy. manage by priyanka from the Noun Projec

Brand • Brand and message is relevant and current • Integrates with the brand of the Scout movement in the UK • Accessible via a range of devices

Content Single page website with four sections. • What we do - quick sentence or two that describes the group • Sections – sections overview and meeting places • Volunteering – describe what people will get out of volunteering, roles and how to get involved • Contact – GSL, HQ and other group information content by monkik from the Noun Projec

The website

Content http://www.4thmorpethscouts.org.uk/ • New brand • Responsive • Accessible – html5 markup content by monkik from the Noun Projec

What next?

Review content Update section information Promote volunteering by telling people what the group needs Add section for fundraising for HQ extension content by monkik from the Noun Projec

Pioneer design system To enable other groups to build their own website. Could be used with Digital Maker Badges. Open source on GitHub. Continue to develop design system. Inspired by gov.uk design system https://github.com/trubru/Pioneer Trileg by SPJDR from the Noun Project

Thanks! Stuart Holmes @trubru

Thanks @trubru