(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'.
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.
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.)
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.)
