Design process of a website

This talk covers Stuart's process of creating a website. From the initial idea to the final product and the steps required to convert it to a design system for reuse.

https://frontendne.co.uk/speakers/stuart-holmes

Transcript

1. Design Process of a Website Stuart Holmes Frontend NE, August 2019
2. Stuart Holmes @trubru Full Stack Developer at Newcastle Building Society Assistant Scout Leader at 4th Morpeth Scouts
3. First attempts
7. Back to the drawing board
8. Out of date content Latest news was last published in 2014 Many pages
9. Not responsive Self-Installed Wordpress, and plugins Old Brand
10. Self installed WordPress out of date Site was hacked and spam posts
11. Dodgy posts Leaked into Twitter feed
13. 4th Morpeth 12 sections 250+ kids 35+ volunteer leaders and helpers And growing statistics by Ralf Schmitzer from the Noun Project
14. 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
15. 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.
16. 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.
17. 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.
18. 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.
19. 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.
20. The proposal
21. 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
22. 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
23. 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
24. The website
25. Content http://www.4thmorpethscouts.org.uk/ • New brand • Responsive • Accessible – html5 markup content by monkik from the Noun Projec
26. What next?
27. 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
28. 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
29. Thanks! Stuart Holmes @trubru
30. Thanks @trubru