top of page

Design Brief

Design the website for Gates Philanthropy Partners — the official website for donations that go to the Bill & Melinda Gates Foundation.

 

Design tasks included:

  • UX and UI design for the website & donation flow

  • brand and logo design for Gates Philanthropy Partners

  • editorial design for GPP's premiere 'Impact Report' publication

​

Visit the website here.

Role: Lead Visual & UX Designer at Pilot Lab

Research Phase

  1. First, we did a competitive analysis of existing philanthropy websites and analyzed their visual design and user experience design.

  2. Then, we gleaned the most compelling aspects of a few case examples.

  3. Finally, we made a list of design we liked and also asked for a list from the client. The client's list helped us hone our design research.

Content Outline > 'Copy Dump' > Site Maps

Using the content outline provided by the client, I designed a 'copy dump' to help Pilot and the client see how much content we would be working with. This 'copy dump' helped inform sitemap variations + UX models because as I learned from previous experiences, UX models are most helpful when you know how much content you are working with.

Using Real Content to Inform Best UX Model

Here, I was exploring a lightbox version of the donate portion of the website versus a more immersive full-screen flow.

UX + UI + VISUAL DESIGN:

HOW THE USER READS THE CONTENT IS

HOW THE USER EXPERIENCES THE CONTENT

​

From the start of the project, I was always thinking about how to best tell GPP's story - from a content, visual, and ultimately user experience perspective.

​

It's my belief that a big part of the user experience includes:

1. what the content is and how it is written (the story and micro-copy to help the user navigate the information is crucial)

2. how the actual content itself is read (when, and where -- and therefore, how it looks and is laid out)

​

(Content informs the visual design and ultimately, visual design + UX design go hand in hand.)

THE DONATION FLOW (wireframe)

After doing research on existing donation flows on other philanthropy websites, we felt that there was a way this experience could be designed better to ultimately be a simple, personal, and eventually a branded Donate flow.

 


Thinking about the future versions of the site, we wanted to create a space that would allow for the opportunity of organic content creation. Part of the initial flow concept was to prompt users to share their stories on why they give.

GPP'S BRANDED DONATION FLOW (designed)

 

The yellow bar at the top connects back to the homepage and functions both as a visual brand element as well as a useful progress bar, as shown here in the Donate flow.

THE UX FLOW: THE PATHWAY TO THE WEBSITE

Another crucial aspect to consider when designing the website was how the user was going to get to it from the Bill & Melinda Gates Foundation's homepage. Our proposed UX model (which I came up with), cut the number of clicks in half and included changing the CTA from 'Gates Philanthropy Partners' (vague for those who don't even know what GPP is) to a clear call-to-action: 'Donate'.

GPP Homepage (Desktop + Mobile)

 

The 'Partner Wall' showcases the 'Power of Giving' -- a phrase I coined. The wall (with the opportunity to be interactive and expand in the future) visually brings together all people as partners working to make GPP possible: this includes everyone from the grantees to donors to people working on the ground to make the important work happen.

The GPP Identity

 

We also developed the brand identity and system for GPP. The logo references the Bill & Melinda Gates Foundation, maintaining and leveraging the trust and equity already built into the main brand. The yellow line symbolizes the partnership GPP stands for and is a metaphor for how GPP aligns to the goals of the Foundation.

bottom of page