Heather Finn

Yellow Door Foundation

Since 2018, Yellow Door has been providing families hope, healing and togetherness while their child receives treatment for life-threatening illnesses.

Homepage

If a child is diagnosed with cancer or in need of an organ transplant, it can mean traveling hundreds of miles to be with them during treatment. UVA Children's hospital, a leading treatment center for many childhood illnesses, is the destination for many families. However, over 50% of families are unable to afford any type of long-term lodging away from home.

This is where Yellow Door Foundation steps in and helps. They provide free long-term lodging for families of children who are undergoing or recovering from treatments. To date, they have helped over 40 families and provided more than 3,000 nights of completely free lodging.

My Contribution

I reimagined the website design and built it out using Wordpress.

Design

I defined the design of the site, as well as a style guide to make it easy for the site to grow over time.

Development

I moved the site from Wix to Wordpress for maximum flexibility and provided training on how to update the site.

Data

I set up Google Analytics for the site and built a Data Studio dashboard to make it easier to see the key data for their team.

Redefining the Structure

The original Yellow Door Foundation website had a lot of amazing content — if you knew where to look. Patient stories were scattered across several pages. The homepage had grown cluttered over time as news articles and various statements had been added. The impact of the nonprofit was buried and lost to the viewer.

After spending several hours on the existing site, it became clear to me there were a handful of top level pages needed. The bulk of the site would be the patient stories and news articles.

I went to work on wireframes that would make it easy and clear for the team at Yellow Door to see how the site could be transformed. Moving their mission and impact statistics to the homepage would draw donors in. Having a page for each family's story would provide an easy way to leverage the stories via newsletters and social media.

Telling the Story through Design

The most important part of the design was ensuring the story of Yellow Door remained positive and hopeful.

Although childhood cancer and organ transplants are life-threatening, that was only one part of the story. For the nonprofit, their story was really about bringing families together and helping them create good memories, even at some of the most difficult times of their lives.

To achieve this balance, I made the patients and their families the center of the design. Incorporating a few playful elements kept the tone of the site light and fit well with the young patients.

Patient Stories from the Homepage

Building the Site

Wordpress became the obvious choice for providing flexiblity in design while making it easy to update and maintain.

Visual Editor

Example of using the Divi editor to modify a photo

I knew switching to a new platform after using Wix for the past few years would need to feel familiar for this to be successful. The Divi plugin provides a wonderful WYSIWYG editor with powerful features that encourage reusing patterns and templates.

Style Guide

Example from the style guide featuring different page templates

With so many design patterns on the site, I wanted to make it easy for the Yellow Door team to recreate them. I leveraged Divi's library feature to create modules and page templates that can easily be found via a search. I created training materials on how to update the site that can be reused as the nonprofit grows.

Data Dashboard

Yellow Door Data Dashboard

The previous site had provided little in the way of analytics. Through my experience with nonprofits, I know how important it is to track your fundraising efforts so I added Google Analytics to the site. A custom dashboard created in Google Data Studio keeps the team informed of their data without being overwhelmed.

Completing the Design

The final design highlights the families and their experience with Yellow Door Foundation.

Homepage

Homepage

If These Walls Could Talk

If These Walls Could Talk

Meet the Patient

Meet the Patient

Patient Stories

Patient Stories

About

About Yellow Door

View website