Discover. Connect.
Make an Impact.

Designing a website that makes finding and supporting charities effortless. Whether you're at home or traveling the world.

Many platforms designed to connect people with volunteer opportunities were cluttered, difficult to navigate, and lacked intuitive ways to explore causes aligned with personal values and passions.

In addition, most existing websites failed to create a warm or trustworthy experience. They often felt either too casual or overly unprofessional, or visually unattractive, making it difficult for socially conscious users to engage meaningfully, which often discouraged users from actually volunteering, donating, or getting involved.

This created friction between the desire to give back and the ability to take action, especially for active travellers and individuals seeking to support local communities, whether at home or abroad.

“It appeals to people who value giving back, rather than those looking for a tourist experience, and who want to make a real difference in the world.”

We set out to design a platform that connects people with meaningful volunteer opportunities and encourages real impact, rather than a tourist-style experience.

The solution focused on creating a clear and trustworthy platform that makes it easy for users to discover and support NGOs, whether locally or while travelling.

To encourage meaningful engagement, the design prioritised clarity, ease of use, and emotional connection. This included:

An intuitive navigation system that allows users to discover NGOs and volunteer opportunities by location and cause
A warm, visually engaging interface that reflects the brand’s values and builds trust
Clear calls-to-action for donations, newsletter sign-ups, and charity registrations
Features that foster awareness and connection, helping users understand where and how they can make an impact

Overall, the solution aimed to reduce friction between intent and action, making it easier for users to confidently get involved.

RESEARCH & DISCOVERY

Moodboard & colour pallet

I began the research phase by reviewing the mood board and color palette suggestions provided by both the client and the agency. I also created my own color palette and reviewed all options with the agency to ensure alignment with the overall vision.

Typography

The client shared websites they admired for their style, which helped me understand the aesthetic direction they were looking for. To further explore this, I created basic typography mockups and design samples based on the mood boards to showcase how different styles could capture the desired feel.

Give Somthing Back Community

Lend a hand near you

These fonts were inspired by the website “Notice the reckless”. It is made up of 2 fonts. The Header is ‘Kb Plane earth’ medium weight.

‍

‘Kb Planet earth’ Gives a hand drawn feel, friendly, homemade, youthful, alternative feel

‍

And body text ‘Poppins’ is just boosting the body a little bit while still giving good readability whilst staying elegant and stylish.

‍

Give Somthing Back Community

Lend a hand near you

These fonts were inspired by the website “Form”. It is made up of 3 fonts. The Header is ‘DM Serif display’ Matched with the elegant “source sans pro extra light” and body text ‘DM sans’

‍

‘Dm Serif Display’ shines most larger sizes so great for hero text, poster text, large, important, impactful and still and bit fun/friendly with its shapes. Contrasting with the delicate refined elegant sub heading Source sans pro extra light.

‍

And body text "dm sans" just boosting the body a little bit while still giving good readability, whilst staying elegant and stylish.

Give Somthing Back Community

Lend a hand near you

These fonts were inspired by the website “Red Barna ”. It is made up of 2 fonts.

‍

The Header is ‘Oswald’ in semi bold and sub heading is “oswald’ in regular. ‍

‍

Oswald feels bold, impactful and has a more serious tone and call to action kid of feel.

‍

Matched with "Lato" which feels modern without feeling to trendy and very easy to read so good for displaying a lot of information.

Competitive Research

In addition to the provided materials, I conducted my own competitive research, analyzing both direct and indirect competitors.

This research revealed several key insights:

Insight: The majority of sites audited lacked visual appeal, with poor use of colors and imagery, resulting in an un-engaging user experience.

‍

Insight: Some sites featured search filters that were overcrowded and poorly designed, leading to confusion and an unattractive interface.

‍

Insight: Many sites had a cluttered structure, making it difficult for users to scan and navigate efficiently.

‍

Ideation & Wireframes

Using a proposed content list from the client and agency as a starting point, I outlined the homepage structure with key sections like the header, search bar, mission statement, featured charities, and newsletter prompt. This approach helped me visualise the user flow and ensure all essential elements were included.

As I created low-fidelity wireframes, I quickly realised some sections were unnecessary and made the layout feel too busy. To improve flow, I removed two sections, reordered others, and moved the login to the footer, reducing clutter and highlighting the most important user actions.

Hero Section Evolution Through Constraints & Collaboration

‍

INITIAL CLIENT REQUEST

‍

The client initially envisioned a collage-style image as the main visual in the hero section.

‍

However, this approach distracted from the core functionality of the homepage—the search bar.

‍

FIRST ADAPTATION -IMAGE MASKING

‍

Rather than removing the idea entirely, I adapted the concept by using image masking with text to spell out 'Give Something.'

‍

I placed this visual below the hero banner to maintain its impact without disrupting the page's clarity and focus.

‍

INTERACTIVE MAP

‍

I also explored the idea of an interactive map in the hero area to emphasize the global aspect of the platform.

‍

However, due to budget and scope constraints, I pivoted to a cleaner and more achievable solution: a static image overlay featuring the message 'We are all in this together.' This aligned with the brand’s message and visual identity while keeping the design clean and functional.

‍

ANIMATED SEARCH BAR

‍

To further enhance both aesthetics and usability, I designed an animated search bar with pop-out filters to create a more intuitive and engaging interaction.

‍

FINAL HERO

I finalised the hero section with a revised headline: 'Search, Connect, Support: Find NGOs Worldwide,' clarifying the search bar’s purpose and reinforcing the platform's mission with a strong, actionable message.

OUTCOME & IMPACT

Working with the agency to incorporate client feedback has been essential in ensuring the design aligns with the client’s vision. The iterative process has proven valuable, allowing us to adapt quickly while balancing creativity with practical constraints.

This project has been an exciting opportunity for collaboration and growth. The client has expressed positive feedback, particularly regarding the clean layout and intuitive navigation. While we've made good progress, the design is still evolving, and further user testing will help refine the experience as we move forward with the rest of the platform.

Discover. Connect.
Make an Impact.

THE CHALLENGE

THE SOLUTION

RESEARCH & DISCOVERY

Moodboard & colour pallet

Typography

Give Somthing Back Community

Give Somthing Back Community

Give Somthing Back Community

Competitive Research

PROCESS HIGHLIGHTS

Ideation & Wireframes

Hero Section Evolution Through Constraints & Collaboration

INITIAL CLIENT REQUEST

FIRST ADAPTATION -IMAGE MASKING

INTERACTIVE MAP

ANIMATED SEARCH BAR

OUTCOME & IMPACT

CONNECT

“Let’s make beautiful things that work beautifully.”!