CASE STUDY

AidScape: Redesigning a Database

AidScape is USAID's central source for U.S. foreign assistance data, international socioeconomic data, and USAID-funded data and technical and project materials. Using the global search feature, users can find results, data, and information across all USAID sources at once or explore individual data portals and curated resource collections. This redesign was driven by challenges faced by the current interface including accessibility, find-ability, and lack of understanding of current users. 

Process

Product Discovery

Ideation and Requirements

Wireframes

Prototype

PROBLEM

During the Product Discovery phase, a combination of a survey and stakeholder interviews were conducted to determine the primary problems with the current User Interface (UI). It was determined that the primary issues were:

  • Navigation: Items in current navigation are acronyms of products and there is no about or FAQs page to facilitate new user experience.

  • Lack of understanding of users: no prior research of users was done before the design of the current AidScape homepage, making it hard to for new users to understand how to use it or what they can use it for.

  • Accessibility: Many descriptions are hidden behind hovers or images are unexplained making information difficult to find and access by diverse audiences. 

CHALLENGE & OBJECTIVES

Challenge:

There was little to no understanding of the target audience at the start of this project and design decisions were made without data to inform the homepage and navigation. In order to ensure future updates to the design were user-friendly, user research and data needed to be collected.

Project Objectives:

Enhanced Accessibility: Create an Intranet that provides remote employees with easy and intuitive access to agency policies, updates, and announcements.

Information Architecture Overhaul: Revamp the website's information architecture to optimize content organization and navigation.

User-Centric UI Redesign: Develop a user-centric interface that enhances the overall user experience and simplifies information retrieval.

Seamless Search: Improve the search capabilities to enable swift and accurate information retrieval.

Timely Transition: Facilitate a seamless transition for a diverse workforce, taking into account varying levels of technical proficiency.

USER PERSONAS

USAID’s intranet has two primary types of users: content managers and general users. Content managers have special permissions to update and oversee the content that is published on the site, while general users only have permission to view the content. We created user personas for the most common types of users within these two categories in order to synthesis the data from UX research and ideation sessions with stakeholders. 

SITE MAP

We created a sitemap to help us and the client visualize the website’s Information Architecture. This helped us to show the relationship between pages in our website as well as document the organization, navigation, and labeling.

USER FLOWS

We worked cross functionally with data analysts, customer service, and engineering to address the concerns with the navigation indicated in the UX research. We created several user flows as our primary user type, a new user in the general user category to ensure that the navigation was accessible and easy to navigate to different pages. Below is an example of our primary user, Michelle, navigating to a Mission’s landing page.

I collaborated cross-functionally with data analysts, customer service professionals, and engineers to tackle the issue of navigation clarity, as identified in the UX Research findings. The research clearly revealed that users, particularly new users, encountered challenges when navigating the homepage efficiently. To address this, we crafted multiple user flows and worked cohesively to enhance and simplify the user experience. This collaborative effort yielded updated, streamlined user flows that were used to inform the initial shaping of the navigation in the wireframe stage. 

WIREFRAME - HOME PAGE
Design System

USAID has strict guidance when it comes to branding and website design. In order to ensure that all designs are in compliance with the 21st Century Integrated Digital Experience Act and Section 508 of the Rehabilitation Act, the design system is built upon the U.S. Web Design System (USWDS) principles, guidance, and code to create an accessible, mobile-friendly component library. I also ensured that I followed USAID’s Brand and Style guide closely in terms of fonts, typefaces and colors. I also introduced the use of the Font Awesome type face which allows for increased icon accessibility as it allows for all icons on the site to be live text for size consistency and screenreader compatibility. 

Outcome

In six months time, our team was able to overhaul the site and create over 30 new responsive web page layouts and a USWDS compliant component library and style guide. Below is a mockup of the updated homepage which addresses the following solutions:

  • Improved navigation: Separating the navigation from the header allows for the user to explore the site’s content without covering the entire page.

  • Improved accessibility: Component (card) based layout and consistent iconography provide a minimalistic and clean layout.

  • Increased Engagement: The homepage can now feature the most important information for users at the forefront of the design. Users can also engage with one-another using the Forums section in the navigation or easily find contacts with Profile Search.

  • Timely Transition: Building upon existing components from USWDS and iconography from Font Awesome allowed us to move quickly within a tight timeline while still ensuring we are compliant with accessibility best practices.