celebrate children

improving user experience

Two kids hugging

Who I am

I am Kate Thomfohrda, a web designer residing in Madison, WI. I am a creative problem solver who loves a challenge. Working with Celebrate Children allowed me to put my skills to practice.

WHAT IS THE
CELEBRATE CHILDREN FOUNDATION?

The Celebrate Children Foundation serves as a means to receive donations to help fund the Child Abuse and Neglect Prevention Board. They generate most of their donations through their license plate campaign and direct donations using the Donate Now button on their website.

What is
Celebrate Children?

The Celebrate Children Foundation serves as a means to receive donations to help fund the Child Abuse and Neglect Prevention Board. They generate most of their donations through their license plate campaign and direct donations using the Donate Now button on their website.

Celebrate Children Logo

Project Overview

After meeting with my client we narrowed down the main objective of the project- streamline navigation and update the look and feel of the site. The goal of this project was to redesign the look and feel of the already existing website while maintaining the feel of the organization’s branding. Every element should feel inten­tional, functional and aesthetically satisfying. The refresh should also clarify the charity’s in­tentions by making it easier for supporters to donate.

The Problem(s)

outdated

The current Celebrate Children Site is oversaturated, uses outdated imagery, and is hard to read.

Cluttered

There is a lot of information on the site for people to read through. It does not utilize hierarchy and the layout is confusing.

repetitive

A lot of the information is shared multiple times throughout the site. There is excessive use of the
donate button, and it is not placed intuitively.

The solution

Streamlined Navigation

After spending time with the current site, I picked apart the navigation and created a card sort which I shared with others. Using what I learned, I created a new site map with cleaner navigation.

UPDATED VISUALS

One of the biggest pain points of the current site is poor use of hierarchy. I went through the site and established informational hierarchy. This made information easier to locate and read. I also updated a majority of the images as they were pixelated.

The Process

Site Audit

I started by auditing the site and determining what information was essential and what could be consolidated. In addition to the site audit, sent a questionnaire to the client asking them to outline what outcome they expected from the project.

Card Sort

After auditing the site, I created a card sort. I shared this with others who were unattached to the project to get a better understanding of how the information should be laid out.

Site Map

After gaining some insights from the card sort I put together a new site map and sent that to the client for review.

Wireframing

After the sitemap was approved, I moved forward with wireframing the site. This helped me understand how the content would be displayed and also helped me envision how I would clean up the layout. Once finished with this step, I sent it to the client for approval.

Design

Once I established how the site would be organized and got the OK from my client, I dug into the design portion of the project. I put together a style sheet and worked on bringing the site to life.

Prototype

Before sending the design to the client, I set it up as prototype in Adobe XD. This allowed me to set it up as it would function and the client to see how certain interactions would feel on the finished site. After completing the prototype, I sent it to the client for review.

Bringing it all Together

These are some of the assets I created and sent to the client. I used all of these assets to help inform the final design. Please look through to get a better understanding of my work.

UPDATED SITE MAP

Site map containing four main navigation categories. First is about us with sub categories of mission and vision and board of directors.  Second  is resources with sub category what you can do and child maltreatment prevention. Third donations with subcategory of make a donation and purchase a plate. Fourth is contact with no subcategory, but a detailed list of information on that page.

User Personas

User persona for Ellen. Ellen is 56 years old works as a social worker, is married with three kids, and lives in Cottage Grove. She is laid back, family oriented, empathetic, and charismatic. Her goals include wanting to support community organizations and child advocacy.  Her frustrations include becoming exhausted by complex website, embarrassment when she can't find the correct page, and annoyance at bad color contrast making it difficult to read the information.
User persona for Dorothy. She is 70 years old, a retired teacher, married with grown children, and lives Madison, WI. She is family oriented, empathetic, friendly, and optimistic. Her goals include wanting to donate to local organizations that help children in need, looking for a simple way to donate, and wanting to help without in person contact. Her frustrations are sites that crash while trying to donate and too many clicks to get to the desired destination on the website.
A user persona for Carly. She is 36 years old, is a business owner, single with two kids, and lives in Madison, WI. She is friendly, kind, empathetic, and funny. Her goal include wanting to engage in community programs, donating to local organizations, and helping children in need. Her frustrations include not being able to find a way to engage with the website, and gets distracted when it takes too long to find what she is looking for.

Wireframes

The results

Below are examples of the site before and after implementing my research and updated design. The new site reflects the finding from my UX work. The site feels clean and stayed true to the Celebrate Children branding guidelines, and it is much easier to navigate. The goal of the project was to clean up navigation and update the look and feel of the site.

The original Homepage

An example of the previous design for Celebrate Children Foundation.

click here for
The updated Design (prototype)

THANK YOU!