Migration and Design Overhaul for Established Learning Hub

Improving the user experience and laying groundwork for community growth

Learning Lab is a knowledge-sharing platform for international development professionals. I worked cross-functionally to launch a new site, with improved content structure and design. We were building off a previous discovery period.

  • Date: May 2021-April 2022

    Client: USAID

    Role: UX Researcher/Designer

    Methods: Semi-structured interviews, coding, thematic analysis, facilitation; Miro, Airtable, Figma

From discovery priorities to specific design actions

During the previously-completed discovery period, we made general recommendations about design, content, and information architecture, and defined the overall design priorities. During the design/migration phase, I created a range of specific artifacts to guide our day-to-day decisions and justify our recommendations to a skeptical client.

I used the jobs-to-be-done framework to further define user tasks uncovered during the discovery period.

I used the jobs-to-be-done framework to further define user tasks uncovered during the discovery period.

I documented the current process for content contributions, and worked with the product manager and content strategist to pinpoint problem areas and define a better process.

I documented the current process for content contributions, and worked with the product manager and content strategist to pinpoint problem areas and define a better process.

During the project we had to make on-the-fly recommendations to the client about a range of details, including how site search and filtering should work.

During the project we had to make on-the-fly recommendations to the client about a range of details, including how site search and filtering should work.

Navigating a fluid client relationship

As with any project, our client played a critical role in defining the priorities for the design refresh. We had to navigate several key challenges: multiple changes of product owner, strongly held opinions based on comfort with the legacy site, and education about best practices in web design. I tried to foster a spirit of collaboration by bringing them into the process and framing the decisions to be made.

I created thumbnails like this to facilitate early, important decisions about requirements and highlight issues (IA challenges in this example) that the team would need to resolve.

I created thumbnails like this to facilitate early, important decisions about requirements and highlight issues (IA challenges in this example) that the team would need to resolve.

One of the most contentious issues was the homepage design. To align everyone on the homepage criteria, I created this graphic and facilitated a dedicated meeting.

One of the most contentious issues was the homepage design. To align everyone on the homepage criteria, I created this graphic and facilitated a dedicated meeting.

I facilitated a session with USAID and partners to generate ideas for a resource page—an important content type for end users.

I facilitated a session with USAID and partners to generate ideas for a resource page—an important content type for end users.

The team generated great ideas that we then prioritized based on relevance and technical feasibility for our project.

The team generated great ideas that we then prioritized based on relevance and technical feasibility for our project.

I facilitated a session to identify the main user tasks that we needed to validate in our tree test.

I facilitated a session to identify the main user tasks that we needed to validate in our tree test.

Backwards compatible, yet forward looking

Our scope was to preserve the content and most of its structure during the migration. As such, I designed wireframes around the existing content structure, and focused on implementing best practices. At the same time, the team had documented a number of content-related pain points during the discovery—we wanted to at least create a path to better content strategy, even if we couldn’t address everything directly during the migration. I suggested numerous design changes that would improve content organization and improve the user experience.

Early in the wireframing process I focused on the existing content structure and how that could be presented in the new design.

Early in the wireframing process I focused on the existing content structure and how that could be presented in the new design.

I facilitated weekly sessions with the client as we established a design direction through low-fidelity wireframes.

I facilitated weekly sessions with the client as we established a design direction through low-fidelity wireframes.

The developers, UI designer, content strategist and I collaborated on fidelity mockups in Figma.

The developers, UI designer, content strategist and I collaborated on fidelity mockups in Figma.

I conducted a content inventory for several key sections of the existing site and created a crosswalk to their destination on the new site.

I conducted a content inventory for several key sections of the existing site and created a crosswalk to their destination on the new site.

“Andrew helps connect the dots across design, content strategy, and development. With his previous experience as a content strategist, he brings an appreciation of the importance of content structure and design—both critical elements in delivering a good user experience.”

— Senior Content Strategist on the project

Site is launched and positioned for growth

The website launched in April 2022 with a new design, improved information architecture, and a simplified content structure. We overcame some challenging budget, timeline and client management issues—and ultimately launched a much-improved site that helps users better achieve their goals.

Previous

End-to-End Design for New USAID Website
Next

Discovery and Co-design to Improve Publication Platform