Visual Design Best Practices with the UN Foundation’s Digital Impact Alliance

As a visual design agency that works with clients to tell the story of their data for a wide array of audiences, Graphicacy often works with our partners to build or improve digital experiences. Recently, Graphicacy wrapped up a redesign project for the United Nations Foundation’s Digital Impact Alliance (DIAL), helping them do a top-to-bottom visual refresh of their Catalog of Digital Solutions. DIAL is a global leader in improving access to digital resources in the global development space, and the Catalog is central to that mission. We helped rethink and reimagine the design and functionality of the catalog, improving the experience for DIAL’s users.

What is the Catalog?

In their own words, DIAL understands the importance of making data and digital tools accessible:

“If you are a global development actor (GDA), then you know the challenges in finding reliable data on digital tools and implementations. Data can empower users, save time and resources, reduce duplication of effort, and improve the response to crises. However, quality data is hard to access and many GDAs struggle to find data that is accurate, complete, reliable, and up to date.

To address some of these challenges, the Digital Impact Alliance (DIAL) developed the Catalog of Digital Solutions, an interactive online resource that supports strategic decision making for a wide range of stakeholders by making data on digital technologies accessible and reusable. It is a collaborative platform that aids users in the discovery and evaluation of digital technologies. Additionally, it tracks where these tools have been implemented and provides guidance for specific use cases.”

Applying Visual Design Best Practices

The core of the Catalog is a card-based exploratory interface, where the user can search and browse examples of digital solutions. Previously, the Catalog had no landing page, and dropped the user directly into the card sort view. We designed a new landing page, including new hero artwork, which served as a short introduction for first-time visitors.

The hero image introduces the new design language, colors, and icon system we created for the Catalog. It also includes icons from the Sustainable Development Goals, conceptually tying the solutions presented within the catalog to the SDGs. From there, the user can either dive right into the catalog, or use a new Recommendations Wizard to get a curated set of results.

Once users are in the catalog itself, a set of tabs runs across the top of the cards, separating out solutions into broad categories (Projects, Products, etc.). The old interface also had a sidebar with a set of filtering options, also split out by those same categories. This created a confusing navigation structure for the users, as it was unclear if they should interact with the tabs across the top, or the sidebar, to switch between categories. Furthermore, the filters in the sidebar were visible at all times, regardless of which category was currently being displayed, which could result in confusing moments, where the user is applying filters, and seeing no change in which cards are being shown.

BEFORE:

We recommended simplifying and collapsing the navigation and filtering into one area. We proposed removing the sidebar entirely, and collapsing filters into a drawer underneath the top navigation. When opened, the filters were now contextual, so the user sees only those filters that are immediately relevant. We also proposed a new list view, as an alternate display to the main card view. This would allow return visitors to move through the catalog more quickly, and find a specific solution.

AFTER:

The cards themselves contain a wealth of information. They provide an overview of the Solution, include cross-links to other solutions, and display badges for endorsed or highlighted solutions. We came up with a new system for the various card designs, cleaning up and streamlining their look, making the Solution titles easier to read, and the cards more inviting to click on.

We implemented a number of other small design improvements throughout, helped to streamline the entire experience for the end user, making the catalog easy to explore:

“We are excited to announce the launch of an updated version of the Catalog, redesigned to make the platform easier to use and to provide a cleaner way to visualize the data that it contains. Whether you are a project leader trying to determine if you should leverage an existing software platform or develop something new, a donor organization trying to coordinate investments across different sectors, or a government minister trying to understand what tools and platforms have been deployed in a specific country context, the catalog can help provide necessary information to support decisions around technology initiatives.” -DIAL

Why Invest in design?

For complex websites, catalogs, document libraries, and other digital tools, the design approach can be just as important as the engineering work and the content itself. If a user can’t figure out how to navigate through a site, or what the purpose of the site is, they will never find content that may be useful for them. Design can mean a lot of things on the web. It can be a visual refresh, applying a thoughtful eye towards color, typography, spacing, alignment. Or it can include structural improvements, re-thinking the navigation, menu systems, and how users flow from one page to another. It can be a user-oriented process, starting with interviewing the end users of the site, and asking them what works and doesn’t work for them. Whether a small engagement to find some quick improvements, or a top-to-bottom overhaul, investing in the design of your website is always worth it.

Graphicacy partners with clients to tell engaging stories with data. Graphicacy’s team combines storytelling, thoughtful human-centered design and deep technical capabilities to build and deploy strategic, data-rich digital projects. Graphicacy’s team has created data visualizations and infographics for top-tier organizations and companies, domestically and internationally, including the Bill & Melinda Gates Foundation, the Johns Hopkins Coronavirus Resource Center, the World Bank, the Center for American Progress, the Anti-Defamation League and many others.