Redesigning a website to increase donations while inspiring Americans to envision a world with zero hunger.
World Food Program (WFP) USA exists to raise funds supporting the United Nations’ World Food Programme, the largest humanitarian agency fighting global hunger. Because hunger is a very complex issue, its causes and consequences are not easily understood by many Americans. WFP USA needed a better way to explain the impact of hunger and what it takes to solve it. They recognized that their website could be a more effective tool in informing and motivating Americans to join their global movement. They partnered with Atlantic Media Strategies to help them solve these challenges. I was honored to have the opportunity to support their mission as lead designer and creative director. The solution was a responsive website and content strategy that addressed their business goals and users’ anxieties. This resulted in increase in donations, and deeper site engagements.
increase in revenue from website’s donation form
increase in website sessions
World Food Program USA
Lead designer & Creative Director, at Atlantic Media Strategies
Zach Kalman, UX Architect
Tommy O’Keefe & Nate Luzod, Development
Leslie Gillian, Project & Client Management
Understanding our users in order to design for them
In order to meet the organization’s business goals, we have to understand our audience’s needs and behaviors. We talked to staff members at WFP USA to understand their day-to-day challenges and business objectives. We also sent out a survey to existing donors to understand their perception of the organization and how they were using the current website. After capturing all of our research, our team arrived at some key insights:
- Inflexible CMS. The content management system is too rigid, limiting the staff’s ability to provide audiences with relevant content and react quickly in crises. Multimedia projects were especially challenging to feature on the site.
- Lack of brand clarity. People were confused about the relationship between WFP USA and the United Nations’s World Food Programme.
- Confusing labels and hard to find content. Content was poorly organized which made it difficult to find, explore and share.
- Inconsistent donation paths. The donation experience was inconsistent across devices, and difficult to use on small screens.
Having a clear understanding of WFP USA’s business goals and users’ needs allowed me to make design decisions, test for validation, and communicate more effectively. To help give form and integrity to our designs as we moved into design/development sprints, I distilled and framed our user research insights into positive statements that served as our design principles. These are short, memorable guidelines that help to keep further iterations consistent. Below are our design principles:
- Show and tell to make the case. Use stories to show audiences the problem of hunger and how WFP is working to solve it. Provide clear, concise explanations to tell audiences what they need to know about WFP in order to act.
- Prioritize critical actions. Always make the most important tasks easy and efficient.
- Spotlight the heroes. Donors and beneficiaries are the heroes of our story, and WFP USA is a vehicle for fighting hunger.
- Build trust through transparency. Be open and accessible, using plain language and elevating opportunities for audiences to communicate with WFP USA.
Working iteratively to build a design system
We held collaboration sessions and workshops with stakeholders at critical moments throughout the project. Working collaboratively with key stakeholders allowed everyone equal access to information and equal opportunity to participate. The collaboration sessions flattened the decision-making process and reduced surprises. It also provided us faster, more comprehensive feedback and input.
As our UX architect, Zach laid the foundation for the information architecture, I worked closely with developers to determine basic components needed to test our content strategy. I began building a visual component library composed of basic UI elements. Our goal was to have the ability to iterate quickly on ideas.
To establish consensus on a new visual language system, all key stakeholders participated in a design survey that gave shape to the brand personality. Colors and typography were chosen to reflect these traits and form the foundation of the visual language.
A unified UI style
In order to instill trust and confidence in prospective donors and policy makers, the UI had to feel unified, straightforward and sincere. That means creating a streamlined, basic library of essential elements that can be reused throughout the website. Each UI element has meaning and a job to do. They can be arranged and combined to create a pattern or components to fit communication needs while maintaining brand consistency. Ultimately, these elements allow us to create modules as we iterate.
Building a module library as our toolbox
To accommodate staff’s needs and to alleviate their frustration regarding the inflexibility of the CMS, we built a toolbox incorporating a design system of modules. Instead of rigid layouts, templates can be arranged in different ways to deliver the best presentation. Pages are built by selecting from a suite of modules supporting a wide variety of content types and offering many presentation options. A module library ensures the organization’s visual presentation is consistently on-brand, and scalable.
Flexibility without sacrificing usability
The module library allows us to prototype quickly and iterates on designs to validate our content strategy. In the effort to keep the library manageable and easy to use, we begin with a limited number of essential modules but give staff some presentational choices within each module.
The feature hero module was designed to accommodate WFP USA’s donation strategy throughout the year. The staff has the ability to utilize three types of content depending on situation and time of year. The first option is a brand-driven donation appeal, leading with the organization’s vision to inspire visitors. The second is a general donation appeal for a specific time of year like the holidays. And the third is a story-driven donation appeal to be used during a crisis, informing audiences as the story unfolds.
The promotion module was designed with colors and layout options available for editors in the admin. They have a fixed set of brand colors to choose from, and three different layouts. This allows for a lot of flexibility in reusing the same modules for different presentations, without the need of a developer.
Below are some example pages using modules from the library.
Clarifying the brand
To help users understand WFP USA’s mission, charity status, and role in furthering America’s support for the UN’s World Food Programme, the homepage was designed to clarify all of this information upfront. In an effort to show American donors where their money is going—and all the ways they are tangibly making a difference—WFP USA’s financial information and policy work were easily accessible here. Insights into what the World Food Programme does, including the types of food and assistance it delivers on the ground was also prioritized on this page.
Clarify content through testing and iterating
We launched the site with an initial navigation and information architecture based on a combination of new and old labels in order to further test our assumptions. After a few months of gathering feedback from both the staff and users, we find that:
- The “Help” section was still confusing to users. There was no delineation between which help is monetary and which is supporting.
- In the secondary menu, the long list of navigation items were not grouped causing some cognitive load for users
- The full page design of the secondary menu was not clear for some users. They thought that they had navigated to an interior page.
- The policy team had a hard time finding their section within the navigation. In addition, WFP USA’s focus on policy is becoming more urgent.
With these insights, we went back to the drawing board and redesigned the navigation to address these concerns. I’m grateful for the WFP USA team’s openness to iteration and improvement over time.
Educate and inspire
To humanize hunger, and help bring clarity to the challenges of feeding populations across the globe, our content strategy was education through stories, videos, podcasts, and photo essays. I designed icons to communicate the different types of content the team would create. These icons were strategically placed in front of the titles to help set users’ expectations.
Consistent donation pathways
When users were ready to donate, I wanted to make it easy for them to find the donation button. To solve for a more consistent path, the donation button is always located at the top right and bottom right of the screen. Donation buttons are always red in color – it is also the only UI element that uses red. I made this design choice to distinguish this call to action from all others, and to convey the urgency of saving lives.
I’m very proud of this project and the process that got us to these results:
increase in revenue from website’s donation form
increase in website sessions
We continue working with WFP USA as their partner to refine, improve and build out the site as of July 2017.
Thank you for designing and executing a beautiful website for WFP USA. But it’s bigger than just having a pretty site, it’s having a site that is functional and that means meeting our technical, fundraising and content needs. That’s huge for us.
– Erin Cochran, VP of Communications
We’re taking what we learned from building a design system for WFP USA, and applying it for our own internal library going forward. As the result of this experience, I led our design process internally to create our own design system for our own brand, as well as for prospective future projects.