Evolving a design system for The Bill & Melinda Gates Foundation

How we modernized the Foundation’s investment arm, Strategic Impact Fund, with a new web presence

Overview

The Bill & Melinda Gates Foundation hired Message Lab to redesign and re-think the web presence of its Strategic Impact Fund, which was stuck in the past with a dated website that did not reflect its identity. Our solution was a new web presence that positioned SIF as a V.C. fund while affirming its relationship to the Gates brand. Here's how we got there.

View the Strategic Investment Fund

UX groundwork

Our UX work included traditional sitemaps (left) as well as content priority guides. Content priority guides suggest a prioritized content structure for each page based on the ultimate goal of the page (for both the user and the client).

An iterative process and a turning point

Our site layout iterations took place in a design phase that included three rounds of design. During this process, we discovered that the client was not satisfied with their own design system and needed to see something fresh. We added a new step in the process: I presented new, custom designs that pushed the boundaries of the Gates design system and brand. That successful presentation turned out to be pivotal: it helped tease out the client's preferred direction and strategy – and helped us push their design system forward, too.

Pushing and pulling a design system

The Gates Foundation unites all of its brand websites under the Kit of Parts design system and component library for the Sitecore CMS. In some areas of the site, we leveraged standard Kit of Parts components or made updates to them. In other areas, we learned that custom designs were required to accomplish our goals. In those cases, we approved development budget for net-new components. One example is the custom interactive map component on the homepage, which shows SIF's global reach.

An interactive portfolio

We developed an interactive portfolio with expandable cards for 100+ portfolio companies. This fully custom component proved to be one of the most complex challenges of the site, raising questions about information architecture, the user's needs, and the client's business goals. Ultimately, we developed a hierarchy of information about each company, annotating our final designs with detailed specs for developers.

Enhancing usability

In order to maximize usability of the expandable cards on the site's portfolio page, we asked that each entire row of the portfolio should be a linked element that would expand the card. Once we determined that the Domain field was a live link, the development team informed us that the whole panel would not be clickable (since the links would conflict), and only the plus symbol would be open the card. I asked to make the logo and 'impact headline' linked too, and developers agreed that the logo would open the card. Once the logo was changed to a link, I noticed that the cursor state was set to default, and requested it be changed to pointer in order to send a cue to the user that it is a functional element.

My role

As the design lead on this project, I presented our work to the client and handled all aspects of design (site layouts, guidance on brand standards, photo and video selection, and design system expertise). This heavily collaborative project required regular engagement with PM, development, and strategy teams.

Enhancing usability

In order to maximize usability of the expandable cards on the site's portfolio page, we asked that each entire row of the portfolio should be a linked element that would expand the card. Once we determined that the Domain field was a live link, the development team informed us that the whole panel would not be clickable (since the links would conflict), and only the plus symbol would be open the card. I asked to make the logo and 'impact headline' linked too, and developers agreed that the logo would open the card. Once the logo was changed to a link, I noticed that the cursor state was set to default, and requested it be changed to pointer in order to send a cue to the user that it is a functional element.