The William Hobbayne Charity website redesign
A User-Centered Redesign with a streamlined application grant application process
Transforming a complex grant application process into an intuitive, user-friendly experience while reducing processing hours. The website redesign created efficiency and a clearer, simpler way for users to access information.
Overview
From Digital Disconnect to Community Gateway: A Local Charity Website Redesign
The William Hobbayne Charity has been enriching its local community by providing vital grants to individuals, organisations, and educational settings for more than 600 years. While the charity's impact continued to grow, its website had become a barrier rather than a gateway - outdated branding, inefficient processes, and a maze-like structure made finding essential information needlessly complex. The time was right for both a comprehensive website redesign and a brand refresh to better reflect the charity's transformative work in the community.
My role
UX/UI Design, Research, Usability testing, brand design, Website Design
Year
2024
Tools
Figma, jotform, wix
Discovery
Usability audit - identifying the key problem areas
To establish a clear foundation for the redesign, I conducted a comprehensive usability audit through the lens of key user scenarios. I focused on three primary journeys:
Understanding grant eligibility and accessing funding support Discovering and engaging with community hall activities Joining the waitlist for allotment spaces
This user-centered analysis revealed four critical areas that created barriers and needed an overhaul:
Grant information was poorly organized and difficult to navigate.
Information was scattered across different pages with no clear structure, leaving visitors confused and frustrated.
The online grant application process was regularly abandoned it in favor of paper forms.
This created a lose-lose situation: applicants struggled to complete their requests, while staff faced mounting administrative work correcting errors and following up on incomplete information.
The activities schedule suffered from poor navigation and inefficient management.
The public facing search was slow and clunky, leading to high bounce rates. The backend lacked a content management system to update and maintain the schedule effectively resulting in activities with minimal detail.
The donation system contained a broken link blocking vital funds
The sole payment option was a defunct PayPal account, which not only created friction in the donation process but also prevented the charity from collecting Gift Aid – resulting in potential lost revenue.
Other areas of concern
The black background of the website did not convey they caring, community minded ethos of the Charity.
The website contained poor accessibility with white text illegible directly over busy images.
There was no clear area to promote the Charity's regular fundraising events.
Research & Analysis
Stakeholder interviews
Through conversations with Trustees and staff, I gained key insights into the charity's goals and operations. These discussions revealed major challenges, including managing grant applications, frequent back-and-forth to fix applicant errors, and answering repeated user queries due to unclear or inaccessible website information.
Competitor Analysis
We examined other grant-giving organisations to understand best practices in the sector. Our analysis focused particularly on how other charities handled online grant applications, eligibility checking, and impact reporting. This research revealed opportunities to streamline our application process and highlighted the importance of clear, accessible eligibility criteria – something many competitors struggled with.
Website analytics
Review of the existing website's performance data exposed several critical issues. High bounce rates on the grant information pages suggested users were struggling to find relevant information. Mobile usage data also showed a large portion of users accessing the activity schedule via smartphones, yet the current schedule format wasn't mobile-optimised.
Drop off rates during online form filling were not available as the forms were linked to an external platform without data.
Key findings
User problems
Lack of information clarity
Time consuming and confusing grant application forms
Look and feel of website wasn't welcoming and supportive.
Busines problems
Repetative errors on grant applications resulting in extra work to rectify
Lack of CMS for easy management of activities and events schedules.
Donation form did not allow collection of GiftAid resulting in loss of revenue.
Design approach
How we created an intuitive journey from information to application
Rebrand
Despite its 600-year heritage, the charity maintained a progressive vision – yet its website and brand identity failed to reflect this forward-thinking mindset. We recognized that refreshing the brand should come first, ensuring the new website would authentically reflect and amplify the organization's modern approach.
Colour selection
Our color strategy prioritizes support, positivity and community. The carefully selected palette combines warm, approachable tones to create a sense of safety and trust, reinforcing the organization's supportive mission.
Trust | Reliability
Blue
We selected blue as the primary brand color, drawing on its universal association with trust and reliability
Warmth | Positivity | Support
Yellow
We embraced a warm yellow hue to promote optimism and approachability, creating an instantly welcoming presence that reinforces our supportive nature.
Nature | Healing | Youth
Green
The green represents the public nature areas and allotment spaces belonging to and maintained by the Charity
Gratitude
Pink
We incorporated pink to evoke feelings of sincere appreciation and warmth, reflecting a culture of gratitude while creating an inviting and heartfelt connection with our community.
A new logo
The previous logo was a monotone illustration which gave prominence to St Mary's Church making it look as though it was a logo for the church, rather than the Charity. While the Church still needed to be included as it was part of not only the history of the Charity but also the Charity's scheme it could be subtle.
In designing the new logo it was agreed to include the following criteria:
Landmarks of the local area, the parish of Hanwell:
We connected with Hanwell residents on Facebook to discover which local landmarks they felt best represented their community. The feedback was clear – four places stood out as neighborhood icons: the winding River Brent, the Wharncliffe Viaduct, the Hanwell Clocktower in the middle of town, and the striking blue doors on St Mary's Church. The following were chosen:
The River Brent
Wharncliffe Viaduct
St Mary's Church
A symbol of support
This was represented by the two hands joining in the river.
St Mary's Church
This was also chosen as one of the landmarks of the area.
The final logo
Ideation
As we were starting the website from scratch, I prepared a suggested sitemap for stakeholders outlining how the new information architechture would be presented.
To support the sitemap I drafted some mid-fidelity wireframes showing the layout on each page.
Together, the team and I discussed different ideas for the structure and layout of the site, exploring various options for presenting information effectively on each page. Our goal was to make everything easy to find, keeping in mind that many of our visitors have low technical confidence. This required a thoughtful approach to simplicity, clarity, and intuitive navigation.
Key features that needed to be considered in the website were:
Streamlined online grant application process
Simple and efficient activity schedule with CMS for easy management
A user friendly donation process which allows for GiftAid collection
Development
Why we chose Wix
The charity is run by a small team of part-time staff and a volunteer board of trustees, so naturally cost was a key factor in choosing the platform for the website. The existing site was built on Wix, and the staff member managing it had no formal technical training, so we decided to stick with Wix to keep things simple and minimize the learning curve.
Launch
A soft launch and live testing approach
Given budget constraints, we conducted a limited number of usability tests with regular grant sponsors. The feedback was overwhelmingly positive, leading us to proceed with the site launch while closely monitoring user feedback and analytics. Utilising Wix enabled us to implement necessary changes quickly and efficiently.
We didn't promote the new website and allowed traffic to be slow so that we could make iterations based on initial feedback.
Restrospective
How could we further improve the website and what would we do differently?
Future enhancements
Rework Grants page
Since launching the site we have monitored feedback closely. The majority of grant applications are made repeatedly by various sponsors of individuals so we created a quick link button directly to the sponsor form however applicants of other grants have also been drawn to use this button, resulting in them filling in the wrong form.
It has been agreed to rework the application form to have one master form with a tree structure, allowing for sections to be made visible only when the correct criteria is met.
Implementation of a booking calendar for activities
Booking of recurring and singular bookings in the Charity's hall is a laborious task and will be streamlined to have a bookings calendar, such as Calendly, imbeded in the website to allow faster response times and a more automated confirmation and invoicing process.