Start a Project

web design case study: Belfast Hills

Aisling Doherty Digital Designer at Wibble
By Aisling Doherty 29 April, 20255 MIN READ
Belfast Hills Logo and Wibble Logo

web design for charities / social good

Each year Wibble picks a charity to redesign a website for. The charity gets a full custom website redesign and WordPress development and build. Last year, we decided to work with Belfast Hills, we were already looking after their previous site under the Wibble Rescue Package (a service that provides fully managed WordPress hosting and support for websites that Wibble didn’t design and build) so could see improvements that would benefit their website. Belfast Hills is an independent charity which seeks to improve how the hills are managed. Their site was outdated in both the front and backend – we were managing all WordPress requirements and could see that the site was nearing end of life. We wanted to give them a website that was professional, up to date and supported all the functions needed to showcase their incredible work as a charity. Both myself and web support agent, Tony Irvine, worked on this project. Tony had a wealth of information that was really helpful during the build of the new site as he had worked on the previous website, so knew areas for improvement, which in turn helped with the design. 

Belfast Hills Hero

Understanding the web project

The previous website had a lot of valuable content on it so it was important to retain all of that information but present it in a new user friendly way. So the first thing I needed to do was work out their site map / information architecture. The site map on any website is a guide of what pages need to be designed and built by the developer. It makes sure that we consider all the pages, making sure we don’t forget any pages and gives clients a way to check everything is there that they expect. This forms a major part of our web design and web development process.

Belfast Hills Sitemap

Navigating content with design

The main challenge was organising Belfast Hills information in a way that was clear and easy for the user to navigate. I wanted to make it as clear as possible for the users to find what they needed, so I decided to utilise icons to show things such as car parking and toilet facilities at the top of the page of each hill. I also categorised the information into drop down areas so that people could find information with ease. With hills there is more than one way to get to them so I had to create tabs that showed how to get on to a route, how hard the walk was and a way to download the map. By breaking up the information into tabs it helps the user not feel so overwhelmed. 

Information management and delivery forms a key and critical part of our detailed web design process. We can’t just rely on making things look pretty, the information needs to be legible, readable and organised with an huge degree of structure.

Belfast Hills and Carnmoney Hill How To Get Here

I also wanted a clear and easy way for people to donate to this charity, so we delivered a prominent call to action in the website navigation to help with conversion rate optimisation. Then I broke the donating down into sections from “one-off donations” to “gift in lieu” – another function we introduced to target more users with multiple ways of completing their desired task.

Belfast Hills Dentation Section

menu design to help with conversion

The menu itself had a lot of information to convey so I had to structure it in a way that showed the hills info prominently, but also provide further information such as news, about us and job listings. We utilised a mega menu with a call to action donate section for users to donate again. Conversion of users to make donations was a key goal of this website.

Our web design process is, generally, commercial in nature – even with a charity website there is a commercial aspect to the how we design a website. It’s not just about how a website looks, it’s about how a website converts a user into a user who donates.

Belfast Hills Hero Menu

Accessibility and colour choices in web design

Belfast Hills had a distinctive purple, which was the foundation to the web design project. When you start a project and the brand has established colours, you want to use those while finding more complementary colours that will go along with the brand. So, I picked greens and yellows that would go along with the purple while also making sure it was accessible. Below is an example of the colour scheme that I created to ensure brand consistency across all of the multimedia assets.

Belfast Hills Style Guide

The result

I really enjoyed working on this project with Belfast Hills. The website now is modern, user friendly that aligns with the charity’s mission. It showcases their amazing work, making it easy for the user to donate and find what they are looking for. Wibble is very proud to have played a part in supporting Belfast Hills connect with their community and achieve their goals. 

Ethical approach to web design

We would always see ourselves as an ethically driven company: we have sponsored amateur sports teams and introduced a staff-first intitive to make Wibble the best web design studio in Ireland by making it best place to work in Ireland – our hard work was recognised last year as the Irish News declared us the Best Place to Work in their annual awards. We have built websites, free of charge, for the Kevin Bell Trust, and maintained services free for Belfast Buildings Trust, UAH and multiple other charities. We will soon start on new projects for other charities.

About us – a web design studio in Belfast

Wibble are a multi-award winning web design studio based in Belfast, Northern Ireland. We offer web design, web development, web support and dedicated WordPress expertise to clients all across the globe. We love working with charities and social groups to help out – to us it’s not all about profits and turnover and we see a huge importance in the ethical approach we take and how we conduct ourselves in society. If you’d like to work with us, a web design agency with a moral compass, contact us or go through our start a web project page.

What the client said

We are very proud of the web design reviews that our clients leave. We want to be seen as the best web design studio in Ireland and our client testimonials play a major part in this.

I could not recommend Wibble enough! The entire team were so helpful every step of the way during the revamp of the Belfast Hills Partnership website; making the technical side of things easily understandable and answering any questions we had efficiently. We love our new website which was in need of a refresh – Wibble have done a fantastic job.

Belfast Hills Logo

Belfast Hills

Belfast Hills


Share this blog post

Aisling Doherty Digital Designer at Wibble

Aisling Doherty

More from author