The World Bank is home to the largest repository of data and research for human development trends. My design agency was initially hired to redesign a single site and realized there was an opportunity to build a design system to help teams align on the best way to display data visualizations and standardize best UX practices across World Bank sites and data tools. I was responsible for designing the UX framework for navigating across key template pages and designing base UI components.
Today, the World Bank maintains dozens of individual microsites run by different teams. As a result of a lack of guidelines, each site appeared disparate from the World Bank brand, both visually and functionally. When auditing the most popular sites in use at the World Bank, we saw a clear gap in consistency and usage across UX components, modules, and pages despite each sharing the same function.
In addition, we audited data visualizations at the World Bank and noticed issues with poor visual guidance, difficult readability, and improper chart formatting.
To justify our recommendation for a design system, we spoke with 22 members of the World Bank across three teams. Our interviews included the data team, data owners, and communication officers. Together we summarized the goals, values, challenges, and opportunities for each group.
To help visualize the website publishing dynamic between teams, we created a journey map detailing the current and optimized flow. Although each team would receive benefits, the team that would benefit the most value from a design system was the data team. The data team didn't have the design or development expertise to publish data visualizations like the data owners and communication officers.
Together with the creative director of my team, we proposed a strategic framework for implementing the design system within the World Bank. The strategic framework helped establish the overall objective, goals, tactics, and outcomes of creating a unified design system.
Before designing the key template pages and UI components, it was important to understand the relationships between the core content types across all World Bank microsites. After diagramming the hierarchy of the content relationships, we were able to design the information architecture flow.
A big part of our design strategy was to utilize a modular system throughout the design system. Each module would have different levels of complexity depending on the use case and screen real estate. After detailing the hierarchy of the content within each module, we wireframed each template page within our information architecture using content from a data program as a proof of concept.
Working cross-functionally between our internal team tracks, we divided the visual work into the visual design of UX components and content pages, and data visualization chart modalities. I was responsible for the design of the UX components while another team of designers completed the visual design of chart types.
.jpg)
To validate how our design system would look and function within a World Bank microsite, the World Bank asked our team to apply our new design framework to a microsite called TcData360 as a proof of concept. The following images show our combined vision for a unified web experience that facilitated both data exploration and storytelling.
Although we knew that a revamped UX and data visualization design system would provide all internal teams at the World Bank guidance, consistency, and rapid scaling for their work, it was interesting to see how different each World Bank team's use cases were. Ultimately our combined efforts resulted in a design system of:
To date, this was one of the largest projects at my design agency and one of the most exciting to work on despite never getting off the ground. That year the World Bank underwent a restructuring and sadly, the primary stakeholders we worked with were no longer at the institution. Regardless of the outcome, I felt like this project was a great learning opportunity.
I got a deeper understanding of the dependencies of UI elements, an appreciation for how accessibility can be incorporated into a design system, and design approaches I'll use the next time to strike a balance between flexibility and simplicity.
Demystifying data collection education at the Pacific Science Center
All rights reserved
