Bill & Melinda Gates Foundation
Breaking Barriers

Storytelling website
Role: Design lead
Studio: Beyond Words Studio
Visit site
The challenge
The Bill & Melinda Gates Foundation asked Beyond Words Studio to develop a story-telling, data-driven website to educate visitors on various issues related to gender equality in the workplace. They wanted the narrative to be engaging while incorporating data from the World Bank's ‘Women, Business and the Law’ data set. The piece also needed to be mobile-friendly and updateable over time as new data is released.
Concepting and storytelling
Our data analytics and editorial team started by interrogating the data to find compelling stories we wanted to tell. We realized early on that a lot of the data stories could be organized into major life events a woman might experience during their working lives which started to lead the structure of the site. In order to make the narrative more compelling for users we also wanted to incorporate an interactive element that allows the user to guess the answer to certain questions. Amongst the stories that highlight the barriers women are facing, we also wanted to incorporate good news stats and information to show how progress is still being made.

We organized the data stories and structure into the following chapters:
  1. Going places: how many travel barriers do women face?
  2. Just the job: how are women restricted from getting a job?
  3. Start to save: how are women restricted from banking?
  4. Moving on up: how are women discriminated against at work?
  5. Paycheck: how are women compensated compared to men?
  6. Family values: how can women start a family while working?
  7. Loan survivor: how are women restricted from getting a loan?
  8. Well-earned retirement: how are women affected by retirement?
  9. Against your will: how are women restricted from passing on inheritance?
Visual research: From left-to-right, New York Times, Counting the cost of the education revolution, Women Will: The divide
Visual research
‍We were really inspired by the New York Times piece about the US drug overdose epidemic that encourages users to finish line graphs by drawing the final segments and the see how their answer compares to the actual one. This piece does a great job of engaging users and getting them invested in the storytelling and data points. Further research was conducted around ways of incorporating the data viz elements. One of our early ideas was using dots to represent countries that could flow back and forth as users toggle a slider to answer questions throughout the piece.
Responsive wireframes
Wireframing
‍At its heart, this piece is a simple storytelling site that is made up of several reusable components. We could start to layout which components could be reused as we build out the wireframes. A slider device would be used at the opening of each section. We also wanted to be able to reuse data visualization and stat components for each story but populate them with different data that ties into the theme of each chapter. It was also important that this piece worked on mobile so we thought about how the components would stack into a single column early on in the process.
Illustrations
Illustration and visual identity
‍As we moved into the design phase we had the opportunity to create playful illustrations to open each chapter of the story. We wanted these illustrations to be simple but clearly demonstrate what each section was about. We also wanted to incorporate the circle theme from the viz sliders to tie in the illustrations with the overall design of the piece.
Data visualization components
Data visualization
‍From the beginning, we knew that the visualization devices needed to work on mobile. That means that all legends and labels need to be exposed (nothing revealed on hover) and that they can work at different widths and heights. We settled on a treemap and bar chart as the main devices since they could easily work in various widths. We also scattered some ‘Good news’ stat boxes to enhance the story and provide a positive outlook.
Mobile designs
Design and implementation
‍The final design is an informative and engaging piece that tells the story of how women face barriers at every turn in their careers. The piece was well received by The Bill & Melinda Gates Foundation and they update the copy and data each year to keep the story relevant (the piece was recently updated with COVID-19 data and information).
Visit site