The Opportunity Project

The U.S. Department of Commerce

Redesign site and introduce user-centered design practices specific to private + public sector collaborations >

2018 website gif

01. Background

The Opportunity Project (TOP) is an initiative of the Department of Commerce to bring together federal agencies, community organizations, and private technology companies to build digital products with the goal of solving a problem. Organizations join 10-week long sprints and focus on solving community problems together. Previous sprints have focused on problems such as homeless youth, transportation accessibility, and veteran health. In addition, the toolkit documents the process so that any organization can launch a private and public sector joint initiative as well.

02. Problem

The previous website was created at the project’s inception in 2016 and did not reflect the project in 2017.

Though the design did consider the USDS Web Design Standards, which all federal agencies are moving towards, it was applied in broad strokes and lacked attention to detail to ensure consistency.

2017 website gif

The toolkit, one of the main purposes of the site, was redundant and difficult to find. The static experience made it difficult to read and navigate.

2017 website and USDS style guide

Finally, new organizations directed to the site did not understand what the project was even after seeing the homepage. Many minutes were spent clarifying the purpose of TOP.

03. CONDUCTING USER INTERVIEWS

I conducted user interviews with previous participants of TOP to identify pain points for two different participants — tech teams and user advocates. To do so, I created separate interview guides for each type of participant, consolidated findings, and separated the results into recommendations for the process itself, and for methods of communication.

user interview guide

The goals for the user interviews were to learn more about the tech team experience, the different methods for communication and coordination within teams and between teams, long-term impact, and the attraction of TOP.

While many of our findings focused on the process, we addressed some pain points in the redesign of the site. For example, tech teams repeatedly focused on long-term management of the project and needed clarification on the user advocate role. In the updated toolkit, I added a section to clarify all of the roles on the team and added a section focused on sustainability, with many ideas taken from the tech team interviews.

04. Restructuring Information Architecture

To start the redesign, we needed to restructure the information architecture of the site to better represent the content on the site and its purpose. The previous site hierarchy looked like:

previous site map

We had to start by considering the main purposes of the site: to explain what TOP is, and to showcase the toolkit (previously, the people switched between referring to it as the playbook and the toolkit, and when pointed out, finally decided to only refer to it as the toolkit). However, in the previous site, the toolkit was hidden under the “Build” page. In addition, there are two CTA’s to “Join”, one on the home page and one in the nav, yet there isn’t enough information or context for a new user to know what that means. The “Join” in the nav also opened to an external site in a new tab, which was jarring.

new site map

Our solution was to simplify the site. We gave the toolkit its own space in the navigation to highlight its importance. Many of the elements in the “Build” page corresponded to steps in the toolkit and were incorporated into the toolkit, eliminating the need for an additional page. We also eliminated the “Join” page that launched an external page and only included it as a CTA on the home page. However, unlike before, the CTA on the hero is joined by an additional CTA to “learn more” so that new users know where to start looking for information. After more information is given in “What is the opportunity project?” users are directed to a CTA to “Join the next sprint” or to “View the Toolkit”, which are the primary goals of the website.

05. Redesign

I started by creating wireframes in Sketch and asked for feedback from the team and from external participants.

wireframes

After the wireframes were finalized I experimented with different color combinations for each section. In creating the wireframes I also considered the responsiveness of the site and created wireframes for the mobile version as well, which sometimes differed significantly from the desktop version. For example, the toolkit in the desktop version has a fixed side nav with all the steps, but in mobile the screen space does not allow for a side nav and it is instead a secondary nav fixed below the top main nav.

mockups

06. Final Site

I handed over the mockups to the developer on our team, Francesca Bueti and used a sketch plugin called Sketch Measure to simplify the process of translating the mockups to code.

> go to site