‹ Back to Home

Kaleidoscope Child Foundation

Redesigning the Website Experience


Kaleidoscope Child Foundation (KCF) is a nonprofit that provides education, life skills training, and access to resources to children in developing countries.


KCF wanted to create an emotional connection with potential donors to gain more donations and increase volunteer participation.


We focused on 3 main objectives so donors could understand, connect, and empathize with the mission.

  1. Reorganize the site’s content so it is easier to navigate and learn about the organization
  2. Elicit an emotional response through story telling by creating consistent visual branding and updating the UI and copy
  3. Streamline the donation process so users can easily donate to the cause

Role and Team

Role: Product Designer and Team Lead
Team: another product designer, web developer, and two stakeholders from KCF.


June - August 2021 (3 months)


Final Product

Discovery & Research

Client Kick-Off Meeting

To successfully execute on this website redesign, we identified our client's needs by understanding not only the company’s mission and goals, but also what impact they hoped to make with a website redesign. We learned that KCF wanted to create an emotional connection with their donors by focusing on the children and how their lives were positively impacted by donations and volunteer work. By cultivating empathy, KCF would gain more donations and volunteer participation.

Original Website

The original website had a lot going on! Right off the bat we could see how a redesign would be beneficial. Here are some key things we noticed right away:

Survey Results

We sent out a survey to our networks and got 60+ responses on how and why people donate to nonprofits. We learned that most people donate or volunteer because of a personal connection or wanting to give back to a feel-good cause. Here are additional reasons someone may decide to donate or volunteer, plus some things that turn them off:

motivations to donate or volunteer

  • Have a personal connection to the nonprofit's mission
  • In honor of someone they know
  • Makes them feel good / Want to give back
  • Gain experience

reasons not to donate or volunteer

  • Feeling obligated
  • Persistent fundraising
  • Newsletter reminders

Additionally, there are behaviors that a donor will exhibit before and after they donate to an nonprofit. Ultimately, they want TRUST and TRANSPARENCY. They want to know that the nonprofit will be true to their mission and will use donations to move the cause forward. Plus, they want to know how their money will be used to support the cause and what impact they have made.

Pre-donation BEhaviors

  • People will vet the nonprofit through various channels (friends, family, internet research, reputable charity)
  • Individuals will seek out information to know how their donation will be used
  • Research the mission and how the work will cause an impact
  • Learn about the donation process
  • Seek accomplishments through photos/videos

Post-donation Behaviors

  • Expects proof of how donations are being used
  • Wants to be in the loop about the progress of the nonprofit
  • Wants to feel appreciated

Competitive Analysis

We also took a look at other nonprofits to see how they organized their content and told their story. There were 4 main themes that emerged.


Ensuring the mission is front and center. Sharing the origin story and impacts.

call to action

Having multiple ways to donate and/or volunteer.

interactive maps/infographics

Visually displaying info so users can see where and how they are making an impact

integrating social media

Increasing engagement and funneling users to the website through social media

View More Research

#1: Reorganizing The Site's Content

Site Map & Navigation

Armed with a better understanding of how and why the user might donate to a cause, we reorganized the structure of the site so users could find key information and donate easily. User interviews validated how a user might explore the site and where they would go depending on their pre or post donation behavior.

Content & Storytelling

We worked with the client to inventory the content of the original site and decided what to keep and what to eliminate. This collaboration process consisted of a shared Google doc so they could start to draft out specific copy and sharing mid-fi mock ups so they could visualize what copy was needed and where it should go. This process allowed us to reveal both redundancies and gaps in the storytelling of the organization.

Home page

our work page

#2: Creating Consistent Visual Branding

Makings of a Style Guide

The original website lacked consistent branding. It was important for us to simplify the use of colors, update the text styles, and use icons/imagery in an intentional way to build trust and tell the story of the organization.

Though the client loved the color pallet presented above, they wanted to utilize the colors from their logo. We thought a perfect way to introduce these colors was through iconography. A splash of color sprinkled throughout the site would appease the client and incorporate the colors of the logo, but would not overwhelm or distract the user.

#3: Streamlining The Donation Process

Identifying the Problem

Our research showed that a potential donor cares about making an impact towards a cause that's important to them, but in order for them to donate, they need to TRUST the nonprofit. They also tend to research the nonprofit by visiting the website.

Problem statement

how might we...

The donor needs a way to trust their donations, towards a cause they care about, are truly impactful.

...instill trust in the website so the donor knows that their efforts are impactful?

User Flow

We mapped out the path a potential donor would take before donating to the cause. This included all the different types of information someone would want to see.

We conducted usability tests before finalizing wireframes. Click here to check it out!

View Usability Test Results

Final Site

It was our goal to make the site not only visually cohesive and appealing, but also display the right information at the right time. On the home page we clearly displayed the mission, key metrics, and what kind of work they do right away. The about page dived deeper into their values, ethics, and displayed a timeline of their story. We placed CTAs in the main nav (as well as other places) to give the donor quick access to it when they were ready to engage with the nonprofit.

Because transparency was so important to the user (and to the nonprofit) we gave an overview of what work they did in each country and how they achieved their goals. We used iconography to give a visual representation of the different services. This would allow the donor to easily scan the page and understand the type of work that was done in each country without having to necessarily read the copy.

The original website gave a potential donor an overwhelming amount of ways to engage. The client didn't want to necessarily eliminate all of them, but they did simplify it from 6 to 3 options. The 2 main ways of engagement are to donate or volunteer. We used a mix of imagery and testimonials tell the story of past work and build trust with the potential donor. We also used conveniently placed CTAs for ease of access.

And that's a wrap! Thank you for your time! 

Like any creative process, once we started building out the site in Wordpress we ran into technical limitations and found that certain elements like buttons, font styles, the navigation, and the footer didn't match the hi-fi wireframes. We worked with the engineer to build something similar to the original concept. It was an exercise of give and take and assessing what was a must have and what could be redesigned based on the constraints, user needs, and client goals.

The client was thrilled with the redesign and loved how we showcased the the work that they do and the impacts of it. We look forward to see how the redesign affects key metrics like site visits and donations.

Up arrow

Let's work together!

Schedule time with on me on my Calendly
Or email me at nampatel.v@gmail.com