End-to-End Design for New USAID Website

New platform enables USAID and partners to share knowledge and improve gender programming.

USAID gender content is spread across numerous properties, limiting knowledge-sharing among staff and partners. USAID's Office of Gender Development (GenDev) commissioned the development of a new Drupal platform to centralize this content, improve knowledge management, and increase awareness of the agency's programming. I served as the Strategy Lead for the project and orchestrated a team of designers, content strategists, and developers, towards launching the site in July 2022.

  • Date: Sept 2021–Present

    Client: USAID

    Role: UX Strategy and Client Engagement Lead

    Methods: Exploratory and evaluative UX research (mixed methods), user scenarios, prototyping, content modeling; Figma, Airtable, Miro, OptimalWorkshop

Kickoff and Discovery

The website work is part of a larger knowledge management and communications contract, and as such the scope of the discovery was broader than just the audience's digital experience. A colleague from another contractor conducted user interviews, and I informed his research questions to ensure the web team gained the insights we needed. My aim for discovery was to firm up the scope and priorities for the website before beginning design, and establish good working relationships with our client and partners.

I focused on creating good working relationships—e.g. facilitating a Hopes and Fears workshop, and scheduling regular working sessions with the client and other contractors.

I focused on creating good working relationships—e.g. facilitating a Hopes and Fears workshop, and scheduling regular working sessions with the client and other contractors.

I developed a content ecosystem with the project team to establish a shared understanding of our content landscape. It helped us capture questions that would need to be answered and further work to be done.

I developed a content ecosystem with the project team to establish a shared understanding of our content landscape. It helped us capture questions that would need to be answered and further work to be done.

Using U.S. Web Design System components, I created a prototype to establish guidelines around word count, page structure, and potential components.

Using U.S. Web Design System components, I created a prototype to establish guidelines around word count, page structure, and potential components.

I developed an intake form to capture content based on the prototype framework, and provided it to USAID content authors.

I developed an intake form to capture content based on the prototype framework, and provided it to USAID content authors.

I defined the team's approach to discovery, information architecture, design, and technical implementation, and captured these in a product roadmap.

I defined the team's approach to discovery, information architecture, design, and technical implementation, and captured these in a product roadmap.

To begin translating research into design priorities, I developed user scenarios. These aimed to identify people’s goals and unmet needs that may be fulfilled through the website. We also used these scenarios to derive tasks for usability testing.

To begin translating research into design priorities, I developed user scenarios. These aimed to identify people’s goals and unmet needs that may be fulfilled through the website. We also used these scenarios to derive tasks for usability testing.

I documented research findings and design priorities in a discovery brief.

I documented research findings and design priorities in a discovery brief.

Building a user-centered information architecture

During discovery we learned a lot about the content ecosystem, and had a sense of the work we would need to do to build a user-centered information architecture. Some of this work started during discovery and carried over into our design process.

During discovery I kept a running list of topics, to which the web team and other contractors contributed. Together we distilled this list down to about 50 topics for card sort sessions.

During discovery I kept a running list of topics, to which the web team and other contractors contributed. Together we distilled this list down to about 50 topics for card sort sessions.

The Content Strategist and I built out a card sort test in Optimal Workshop, developed a discussion guide, and defined the research questions we needed to answer.

The Content Strategist and I built out a card sort test in Optimal Workshop, developed a discussion guide, and defined the research questions we needed to answer.

We needed to standardize taxonomies from other sites for our new site, so I started by importing the taxonomies from similar USAID websites. Then I facilitated meetings with SMEs to create a taxonomy crosswalk.

We needed to standardize taxonomies from other sites for our new site, so I started by importing the taxonomies from similar USAID websites. Then I facilitated meetings with SMEs to create a taxonomy crosswalk.

As the card sorts began to reveal content groupings, we refined the site map and proposed page structures.

As the card sorts began to reveal content groupings, we refined the site map and proposed page structures.

Drupal setup and content configuration

I've worked in Drupal for several years, and therefore had a sense of how the content types, paragraphs, and vocabularies would work together. I proposed the initial content types and their attributes, and our Backend Developer built them out in our dev environment. As we moved through the project, the content configuration  evolved continuously as we confirmed use cases and explored component options.

A Jira ticket for initial configuration for "Resource", a common USAID content type

Creating a design system

With the information architecture underway, I began bridging into design. I had a good-enough idea of page structure from the site mapping work, and this also would be a fairly predictable site build. We would also need to define a visual brand for the site.

I developed rough wireframes with the UI Designer to establish basic page types (most have been refined and moved to new pages in Figma).

I developed rough wireframes with the UI Designer to establish basic page types (most have been refined and moved to new pages in Figma).

Throughout the design process, I sketched ideas for page layouts and components. This helped me stay creative and generate many ideas quickly.

Throughout the design process, I sketched ideas for page layouts and components. This helped me stay creative and generate many ideas quickly.

Figma wireframes exploring card components in different page layouts and combinations.

Figma wireframes exploring card components in different page layouts and combinations.

I worked with the UI Designer to align with the client on branding requirements. We based the brand identity largely on discovery findings and USAID branding standards.

I worked with the UI Designer to align with the client on branding requirements. We based the brand identity largely on discovery findings and USAID branding standards.

Putting it all together, and looking ahead

As of April 2022, the information architecture is mostly finalized, component is design underway, and theming is ramping up. The team is on its way to launching the site in July 2022.

I've been able to "dip a toe" into Product Management by acting as the Strategy Lead and main client liaison—in addition to serving as the UX lead. It's been a true learning experience, and I'm grateful for the opportunity.

Next

Drupal Migration and Design Refresh