A global NGO website redesign to boost engagement, attract visitors, and increase support for the charity’s mission
Khalsa Aid is an international NGO with the aim to provide humanitarian aid in disaster areas and civil conflict zones around the world.
Team
Business Owner, UX Designer
Role
Product Designer - Competitive Analysis, Content & IA Audit, Sitemap, Visual Design
Timeline
Apr 2023 - Aug 2023
Tools
Figma, Mural
Khalsa Aid was founded by Ravinder (Ravi) Singh in 1999, inspired by the Sikh principle of "Recognise the whole human race as one." The catalyst for its creation was Ravi’s deep concern for the refugees in Kosovo that same year.
Coincidentally, 1999 also marked the 300th anniversary of the Khalsa, a moment for the Sikh community to reflect on their faith’s core teachings of compassion and unity.
They’ve been meaning to redesign their website for a while, but it kept getting pushed back. Then, they noticed from their analytics that the site wasn’t getting many visitors and was pretty buggy. That’s when they realised something had to change to bring the website to the 21st century.
Overview
The current website feels outdated and hard to navigate because of the use of a burger menu icon in the desktop version, making it tough for users to stay engaged or explore more pages. There’s no clear direction, and visitors often get lost or leave before they even get a chance to see what Khalsa Aid is all about. The site doesn’t really show off the brand’s personality or mission, and it’s missing key information that could inspire people to donate or get involved.
Overall, the user experience just isn’t working, and it needs a refresh to make it more inviting, engaging, and donor friendly.
Problem Statement
No clear direction
Unclear navigation
Not SEO friendly
Low donation rate
No personality
Outdated UI
Old experience
No brand presence
Previous Website
I've spotted some issues with the current website. Here are a few key questions and focus areas to consider:
Is it clear what this organisation does?
Are the main priorities like donating and volunteering easy to spot?
Does the hero image really capture what the organisation is all about?
Do the colors reflect the organisation's goals?
Can users find what they need to easily?
Is the navigation easy to use and user friendly?
To tackle these questions, I took the following steps:
Issues and Approach
Workshop / Requirements
Competitive Analysis
IA Audit & Sitemap
Review Sessions
Wireframes, Prototype & UI
Usability Testing & Iteration
Before diving into the redesign, I performed a competitive analysis by comparing the websites of other nonprofits similar to Khalsa Aid’s current site.
Competitive Analysis
I noticed some key differences when comparing Khalsa Aid’s website to the other non-profit sites. For starters, there’s no bright donate button, making it difficult for visitors to support them. While other sites clearly guide users on actions like donating or volunteering, Khalsa Aid lacks this visual hierarchy, leaving users confused about what’s most important.
Additionally, they use an image carousel instead of a single hero image, which often gets overlooked, especially since the first image doesn’t include a call to action. The text overlaid on the images can also be hard to read, causing important information to be missed.
To improve user engagement, I recommended using one strong hero image with clear calls to action and adding a dark overlay for better text visibility.
The UX designer and I created a sitemap of the entire website to visualise its structure and see how the content is organised. This helped me get a sense of how much content there is and how it’s grouped together.
After creating the sitemap, we realised there’s a lot of repetitive information and numerous embedded links that lead to unrelated pages. Instead of cluttering each page with multiple links, the design should focus on clearer, more concise navigation, making it easier for users to find the right information all in one place.
IA Audit & Sitemap
I collaborated with the UX designer to create some low-fidelity wireframes, making sure that everything flowed smoothly before moving on to the high-fidelity prototypes. We first shared these with our small team to align and validate the user flows. After that, we built a prototype for internal testing and tweaks.
We took it one page at a time, starting with the Home Page. The donation flow was particularly exciting because we wanted to enhance the experience and encourage more people to donate.
Wireframing & Prototyping
Example: Donation Flow
In the next stage, I focused on building the UI with a responsive design for both web and mobile. I created a style guide that featured new color palettes and CTA button components, all using a clean, simple typeface for better readability. I also made sure everything was accessible and meet accessibility standards.
To keep things organised, we put together a UX/UI Functional Specifications document outlining all the guidelines, interactions, and details needed for the build. This document serves as a handy resource for the development team, ensuring everyone is aligned and that the final product reflects our design vision. With these elements in place, we were ready for a smooth implementation!
UI Design and Documentation
Establish a clear hierarchy for CTA buttons
Replace the hero image carousel and make the CTA buttons clearer
Improve the content on the home page
Refined and enhanced the website’s color palette
Revamp and streamline the main navigation bar
I learnt how important user research is during the design process. There were times when I found myself thinking, "This part of their website could look better if it was done this way, or that way." I didn’t realise I was projecting my own preferences onto what I thought users would want. But once I started using real qualitative and quantitative data, I was able to keep my focus on the users. This helped our small team make design choices that truly met their needs instead of just reflecting my personal taste.