Charity website design for Killearn Heritage Trail

I had never worked on a charity website design before. Yes, there are differences to a for-profit website, but I loved every minute! Like any other website, I wanted to make it fast and accessible. Empathy is key to making websites a great experience for everyone. This project needed empathy in abundance, and that is my wheelhouse. That’s what gets me up in the morning, ready to plot and plan.

The Killearn Heritage Trail is a community-driven project, funded in part by the National Lottery Heritage Fund. It is intended as an historical resource about Killearn village in central Scotland. Residents and visitors alike will find fascinating historical insight about Killearn and its surrounding area.

The Trail itself comprises 8 information boards installed at historical sites around the village. The commissioned website includes much more information than the boards could ever display. As a result, each board features a QR code to direct visitors to the accompanying website page.

Screenshot taken from Killearn Heritage Trail home page

Specific goals/needs for the project

The KHT steering group had a list of primary goals to achieve:

  • The website should use the WordPress content management system.
  • The design should be consistent with the interpretation board designs. These were commissioned to a graphic designer.
  • QR codes were added to each interpretation board. These should link to a web page with access to further information about each historical site.
  • The site should be SEO friendly. This would allow higher ranking in search engine results.
  • The site should be user configurable. This allows future website additions and amendments by the steering group and selected editors.
  • Compatibility with all browsers and devices. I provide a good baseline experience for users of older browsers as standard.

Since this is a charity website design there were additional legal and funding criteria:

  • UK government laws stipulate a charity website design should meet WCAG 2.1 regulations for accessibility.
  • An educational requirement, to meet Lottery funding guidelines. For this, I suggested training users through screen-sharing sessions and embedded reference videos.

Bringing everything together

All my websites begin in a sketchbook. In it, I list potential visitor tasks and actions. This list takes into account how users of different abilities interact with web technology. Once complete, I roughly sketch page layouts to understand how elements might sit together. This then becomes an online prototype for stakeholders to give feedback.

A website wireframe hand-drawn in a sketchbook

Speed

For the best user experience, websites should load quickly on slower 3G mobile connections. Why? This website is a great example. Killearn village has slow broadband speeds and mobile internet coverage can be patchy. The home page introduction features a data-heavy video of Killearn Main Street. I suggested using a data-saving technique where none of the video resources would download until the play button was pressed. This both saves user data and speeds up the page load.

The proof? Google has a website testing tool called Lighthouse. Scores above 90 are considered excellent. Here are the KHT home page scores:

Screenshot of Google Lighthouse scores for 3G mobile devices. Performance score is 99 out of 100. Accessibility, best practices and SEO are 100 out of 100.

Progressive enhancement

Progressive enhancement provides a good baseline experience for visitors using older browsers whilst adding features for those with modern browsers. On the KHT home page we wanted to use an interactive map with clickable Trail board numbers. However not all browsers support the image format required for this. For those browsers I suggested including an additional list of Trail board links.

Video: hovering over the map or list highlights the equivalent board links

When the browser supports it, hovering over a map link highlights the equivalent link in the list of Trail boards. And vice versa. A simple way to add visual flair!

User testing a nonprofit website

User testing ensures a website is easy to use. For the Killearn Heritage Trail we chose testers with a broad range of ages and technological abilities. Each tester was given a list of tasks to complete during our screen share. Without further prompts we then watched our tester perform the requested tasks.

Success! Our testers completed all tasks with ease. They even started exploring the site for themselves after the test had ended. We were receiving nothing but compliments about the site, to the delight of the stakeholders!

Achieving specific criteria as a charity website design

Accessibility

Charity website designs are legally required to meet the WCAG 2.1 standards for accessibility. Meeting these standards does not automatically create an accessible website. Empathy, careful consideration and plenty of testing is vital. The steering group and I discussed the best design approaches for users of assistive technology. For example, the timeline maps could have been confusing for some screen reader users. It was important to understand how selecting a date on the timeline affected the other information on the page. Sometimes, we as developers need to use our common sense to build on WCAG standards. And a lot of testing!

Video: demonstrating how the Voiceover screenreader on MacOS interprets the date selection on the Killearn Heritage Trail timeline page. Best viewed with volume up!

The educational factor

Part of the funding for the website came from the National Lottery Heritage Fund. This was dependent on providing the community with educational training for the website. The solution was to embed reference training videos in the website’s admin area. Editors can refer to these for guidance when making changes, even without prior experience. I’ve considered using these for other website projects before and they have been a great success on this one. I do always include user training for my website builds, in case you were wondering!

What were the results?

The Trail was launched to much fanfare and publicity. The project triggered great interest among villagers. Many longstanding residents were surprised and delighted by newly discovered facts. Some were keen to add their own knowledge to the website. The steering group were proud and impressed that their vision had come to fruition with great success. Here’s what they had to say:

“Martin demonstrated exactly the right combination of technical expertise, creative ideas and empathy with a community project – together with clear and fair costing for his services. Throughout the extended build period Martin not only met the brief but delivered added value through enterprising solutions and endeavour – always responsive and professional with an easy manner.”

“It has been a pleasure working with Martin. We are immensely proud of our end product and we would highly recommend Martin to small businesses and voluntary organisations.”

Nick Hawkins, Project lead

Projects like this suit my strengths as a designer and developer. I begin with empathy and a sketchbook. Empathy is vital in understanding the needs of a website’s stakeholders and its visitors. The sketchbook just helps me get things rolling.

I look forward to working with more charities and nonprofits in the future! If you’re inspired by this project, why not email me at [email protected] to chat about your next project?