Redesign site and introduce user-centered design practices specific to private + public sector collaborations >
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.
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.
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.
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:
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.
I started by creating wireframes in Sketch and asked for feedback from the team and from external participants.
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.