CASE STUDY

My.USAID.gov: Modernizing USAID’s Intranet

USAID’s intranet is primarily focused on enhancing global communication, collaboration, and information-sharing among its employees within a secure and private digital environment. This redesign was driven by challenges faced by the current interface including accessibility, find-ability, outdated technology, and lack of user engagement. 

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:

  • Outdated navigation: too many links in drop downs; cluttered and disorganized

  • Find-ability: users cannot easily search for or navigate to forms and resources they need to do their jobs

  • User engagement: users are not engaged with content and find it easier to engage using other methods

  • Outdated technology: site is hosted on outdated version of Drupal causing a very tight timeline for redesign 

CHALLENGE & OBJECTIVES

Challenge:

In a rapidly evolving work landscape influenced by the COVID-19 pandemic, USAID recognized the critical need to enhance its Intranet, providing remote employees with effortless access to the latest information and a secure platform for sharing. Further complicating matters, the Intranet was running on an expiring version of Drupal, demanding immediate attention to information architecture, user interface (UI), and enhanced search functionality.

USAID faced the challenge of modernizing its Intranet to facilitate seamless interdepartmental communication and ensure optimal accessibility for remote staff. The project required stringent adherence to accessibility regulations, all while accommodating a diverse workforce. The urgency of the situation demanded an efficient transition, with a tight deadline.

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.