Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design process of a website

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.



Frontend NE

August 01, 2019


  1. Design Process of a Website Stuart Holmes Frontend NE, August

  2. Stuart Holmes @trubru Full Stack Developer at Newcastle Building Society

    Assistant Scout Leader at 4th Morpeth Scouts
  3. First attempts

  4. None
  5. None
  6. None
  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

  12. None
  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