Case study · Concept project

Charity Connect: community empowerment

A modern website redesign concept for a non-profit organization focused on improving donor engagement, increasing trust, and creating a seamless donation experience.

Status
Sample design / concept project
Organization
Government College of Engineering Kannur (seniors)
Scope
Research, UI/UX design, development
Timeline
Oct 2024 to Dec 2024
Tools
Figma, Photoshop, HTML, CSS, JavaScript

View on Behance

Charity Connect website redesign shown on a monitor: a donation hero with an amount selector

The concept

A digital prototype for community empowerment

This project showcases a conceptual digital platform designed by the senior students of the Government College of Engineering Kannur (GCEK). Rooted in a commitment to social responsibility, this sample design explores how a student-led initiative could effectively support people in need.

The primary goal of this prototype was to envision a modern, transparent, and highly accessible interface that bridges the gap between vulnerable individuals and potential donors, demonstrating how the process of making a meaningful impact could be simplified.

The project includes user research, wireframing, user flow design, responsive UI design, and a complete visual identity system.

Charity Connect pages: home, causes, gallery and a 404 page
Pages across the site
Charity Connect homepage on a laptop: Together we can create a better tomorrow
The homepage

01 · Process

Discovery, strategy, solutions

The work moved from analysis and research to wireframing and user experience, then user interface and website design, ending in a development handover.

Charity Connect design process: analysis, research, wireframing, user experience, user interface, website design and development handover

02 · Structure

A donation funnel that stays frictionless

The user flow maps the home page to about, causes, events, gallery, blog, donate, contact and the user account, with a clear route through choosing a cause, donating and receiving confirmation.

Charity Connect user flow from the home page to about, causes, events, gallery, blog, donate, contact and user account

Design system

Open Sans, indigo and coral

A transparent and modern visual identity, designed for empathy.

Midnight indigo#24287FPrimary brand colour
Sapphire crest#2F3394Buttons and sections
Golden hope#FED101Highlights and calls to action
Black hope#010F31Dark sections and text
Compassion coral#FE5454Accents and urgent actions
Charity Connect typography and colour board: Open Sans with the colour palette
Typography and colour

From sketch to screen

Low fidelity, then high fidelity

Charity Connect low fidelity wireframes
Low fidelity wireframes
Charity Connect high fidelity screens
High fidelity screens

View the case study on Behance

Need something similar?

Related service

This project is an example of my ui/ux design and frontend development work.

UI/UX Design and Frontend Development Start a project

More projects

Explore other curated work

All projects