← Back to Projects

Feed the Children

Hero.png

In 2013 and 2014, as part of an agency team, I helped Feed the Children refresh their online presence as they underwent a branding overhaul. We designed and built a site aimed at effectively delivering their new message, compelling visitors to make donations, and providing information for current and inspiring old and new visitors to help solve child hunger, and streamlining donor giving and child sponsorship.

I served as the UX and visual counterpart to my content partner, and together we walked the client team through research, design, and development, wearing many hats throughout project.

Research and Discovery

We kicked off with research by auditing Feed the Children's existing digital presence, and by collecting stakeholder, volunteer, and donor data, through on-site and phone interviews and emailed worksheets. We then used existing site analytics to compare general donor demographic information with some of the other research to help drive the creation of personas.

Discovery worksheet answered by stakeholders, analytics, and personas

Discovery worksheet answered by stakeholders, analytics, and personas

FTC's audience, we discovered, was a very broad group comprising not only donors, sponsors, and volunteers, but also corporate partners, teachers and schools, media outlets, churches and civic groups, and others. 

Strategy and UX

Once we felt we had the information in hand, we organized it into a high-level document and shared it with the stakeholder team in OKC. The document provided the results of our audit, a strategy framework for approaching FTC's audiences, project scope and plan, and technical considerations.

After our document was approved we built sitemaps, wireframes, and workflows (for app-like portions of the site),

Re-architected Sitemap

Re-architected Sitemap

Wireframes to explain hierarchy and structure, without content.

Wireframes to explain hierarchy and structure, without content.

Sponsor pathway for FTC's new sponsorship platform

Sponsor pathway for FTC's new sponsorship platform

Design

Working alongside the Content Strategist, Josh Dougherty, the design phase was a synthesis of our findings and strategic framework and documentation, UI common sense, content, and the new brand identity, (once it was finalized).

Site flow

The site was designed with a simple flow in mind: awareness, information, action. First, educate newcomers on the different problems children face. Next, introduce some of the programs Feed the Children has in place to combat these problems. Finally, direct users to where they can take action. this pattern is woven throughout the site, at every tier in the content hierarchy.

System Hierarchy

With so many different layers for our many audiences to filter through, we needed to encode the designs with a visual language that would provide guidance toward key areas. As users reached higher layers, the content would be more about making an emotional appeal through story and images. As they dug deeper, the larger images and story jumping-off points would give way to information and key actions—donation, advocacy, corporate partner registration, etc.

Home (L0) through article template (L3)

Home (L0) through article template (L3)

Mobile

Our process helped identify reusable system patterns. We used this list of patterns to determine which pages to bother designing—covering both mobile and desktop. This allowed us to push designs into development faster, and save time by focusing on patterns, rather than pages themselves.

Mobile.png

Front-end exploration

There were a couple design patterns and unique features that needed additional validation (due to their experimental nature). So before handing them off I did some lightweight CSS/JS prototyping to capture exactly how it should function and look at different sizes.

Execution

Pages were designed in batches, prioritized by how global or important they were. As sets of pages stabilized, they were provided with documentation to a third-party developer, hired by the client. Down the line, pages made of only reusable elements were specified in a text document, rather than designed.