(Top) Premiere publication of the 'Impact Report' and brand collateral (below).

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

Role: Lead Designer

Process

Understand Phase

1. Conduct a competitive analysis of existing philanthropy websites and distill relevant
    information (what's working & what isn't).
2. Compile websites & design the client likes (slide below: 'What You Like').
3. Glean commonalities from 'What You Like' slide to inform Pilot Lab's inspiration board:
    'What We Like'.

1/6

Process

Understand Phase

​

Site Map Variations

1. Receive content outline from client.

2. Using the content outline, create three site map variations --
    each with their unique way of presenting the information and engaging the user.

 

A1
A1

A2
A2

C
C

A1
A1

1/5

Process

Understand Phase

​

Define User

Map Goals of Client + User

Define Overlapping Goals

1. Define the user based on client research.

2. Conduct user research by way of surveying past and potential future donors.

3. Define the goals of both the user and client.

4. Glean where the goals of both parties overlap.

 

Client goals: Explain what Gates Philanthropy Partners is and make donating easy.

User goals: Donate to the philanthropy quickly and easily

 

Overlapping goals: Make donating easy and efficient (off the bat - we know that the CTA

to 'Donate' needs to be accessible and easy to find.

Using Real Content to Inform Best UX Model

Learning from previous experiences, I felt that it was best to start feeling out the content as soon as possible because a UX model can be great but isn't much use if the content doesn't fit the 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 - meaning I was very involved about where and when the user would read and experience the content.

​

It's my belief that a big part of the user experience is how the actual content itself is read, when, and where -- and therefore, how it looks and is laid out.

​

(Visual design + UX design go hand in hand.)

1/5

THE DONATION FLOW (wireframe)

After doing research on existing donation flows on other philanthropy websites, we felt that there was a way this interaction could be designed better to feel simpler, personal, and eventually branded.

 

 

Thinking about the future versions of the site, we wanted to create a space that would allow the opportunity for content creation. Thereby, the concept of 'donor stories' was born.

 

While other philanthropy sites focus on the impact of their work, we felt there was an opportunity to also showcase the people who made it possible: the everyday person (from the kid who donated $15 of their allowance to people making multi-million dollar gifts -- we wanted to showcase the WHY behind why they gave as well as the range of gifts.)

THE BRANDED DONATION FLOW (designed)

I believe design should not just be pretty: it should also have a function. Since the yellow line was part of the homepage website of GPP, we thought that it could be used in a functional way as a progress bar in the donate flow.

gpp-mag-updated19
gpp-mag-updated19

gpp-mag-updated18
gpp-mag-updated18

gpp-mag-updated07
gpp-mag-updated07

gpp-mag-updated19
gpp-mag-updated19

1/20

The Impact Report 2018

 

This is the premier publication sent out to donors -- showing them the impact the gifts have. I designed all layouts, edited the photography, designed the data graphics, and helped shape the content.

GPP HOMEPAGE

Released August 2018