Case Study

Kaleidoscope Child Foundation

Overview

Kaleidoscope Child Foundation was looking to increase donor and volunteer involvement from philanthropists. For the redesign, the focus was centered around improving the information architecture and creating a new design system to maintain consistency throughout the website.

Services

  • Information Architecture
  • Storytelling

Project Info

DATE June - August 2021
ROLE Product Designer
PROJECT Nonprofit website redesign
TOOLS Figma, WordPress

Final product: https://kaleidoscopechildfoundation.org/

The Problem: Hard to Navigate

Kaleidoscope Child Foundation's original website needed a more modern look! Organizing their surplus of content (information architecture) was a daunting task, however, through collaboration with the Operations team, we were able to consolidate it!

We did a competitive and comparative analysis of 8 other nonprofit websites. After synthesizing the results, we discovered these common themes:

Storytelling

Mission Statement

A concern of the Kaleidoscope Child Foundation's Board of Directors was that the original mission statement was too vague. I teamed up with the Operations team to rewrite this statement. After running 4 usability tests, we (the Product team) discovered that it wasn't enough to only tell the story of Kaleidoscope Child Foundation. We should include an actionable way to get involved such as a Donate Now button! Since the nonprofit's goal was to gain more donations, these actions must be abundant and easily attainable.

Timeline

After completing a visual audit of Kaleidoscope Child Foundation's original website and understanding user feedback in relation to the importance of storytelling, I envisioned an interactive timeline feature to tell their story and better organize their content. Due to time constraints and only having one developer on the team, we searched for a WordPress plugin timeline feature that closely resembled what I had dreamt up!

A big emphasis was put on showing the impact of donating and volunteering with this nonprofit. I tackled that task by adding photos any chance I got, as well as showcasing meaningful stories on the blog/news page.

Call-to-action

Collecting Data

It was clear that most users donated one-time, monthly, or via an event (such as a sponsor). We utilized that data when creating the call-to-action cards.

Donate Now Card

This research helped me create the donate now call-to-action card that is displayed on various pages of the updated website. It was crucial to keep the copy short and simple while following best UX writing principles. Our research showed us that most donors donate one-time or on a monthly basis. Additionally, the third monetary way to get involved is to become a sponsor for an event -- so that option was grouped with the donation types. The fundraiser option was eliminated due to not having enough time to set up a fundraising page, however, a solution presented was to set up fundraising through a third party website such as Facebook.

Donate and Volunteer Pages

The original website had too many ways to get involved -- it felt overwhelming. As noticed in testing, users had trouble choosing ways to donate or volunteer their time, and often, they didn't know where to look! It took us 4 iterations to cut down and situate this content to make it approachable. It was unclear how to participant by volunteering because there were no prominent call-to-action elements. On the volunteer page, Kaleidoscope Child Foundation wanted to highlight their next volunteer event: the Walk for Education. For this, I used a similar card style as seen on the donate now card.

Reflection: Accessibility Check

Since this sprint had a tight deadline due to the promotion of an upcoming event, we didn't have time to thoroughly check the contrasted elements on the website. Additionally, we had interactive elements, such as the statistics displayed on the home page, that were not mobile-optimized -- however, we teamed up with the engineer to troubleshoot it!

I learned that designers should have open and honest communication with the engineers to see what is and is not possible for the sprint and then prioritize features accordingly.