Proto Persona:

We began by thinking about our users — the people who might use the Department of Justice website. What kind of tasks do they need the site for? We researched publicly available analytics data for the site and came up with a proto persona to put a face to all of our research.

User Flow & Testing:

User testing was done with five different people to determine if they could easily navigate the Department of Justice website.

Tasks:

1. Navigate the website and find an Application for Federal Assistance.

2. Find out who the U.S. States Attorney for Northern California is.

3. Find out information on the “Summer Law Internship Program.”

4. Contact the DOJ by using the “Contact Us Form.”

5. Find the JMJ Press Conference video from August 17, 2020.

Feedback:

𝗫 4 testers were not able to do at least one task successfully.

𝗫 3 testers were not able to do at least 2 tasks successfully.

✔ All 5 testers were able to do at least 1 task successfully.

User Pain Points:

• Users find the website navigation difficult

• Search bar is the go-to to complete tasks

• Search bar doesn’t prioritize what you’re looking for

• Similar searches lead to pages that give different information

• Users have difficulty finding anything

• Users kept looking at quick links to find what they need

• Too many menus to navigate

• Users felt confused right away

• Users need better shortcuts

Heuristic-Evaluation, Desktop:

We looked at all the elements of the current page and decided what worked and what didn’t.

Heuristic-Evaluation, Tablet:

Because we wanted to make a responsive redesign that people could use across three platforms (desktop, mobile and tablet), we also evaluated what changes happen when the site is scaled down to a tablet screen.

Heuristic-Evaluation, Mobile:

The mobile version is where we noticed the most changes with the search bar being replaced by a hamburger menu. Also, the overall design was converted to a one-column look for ease of reading.

Navigation Heuristics:

Finally, we evaluated every aspect of the navigation of the site. The header and footer were areas where we thought we could implement positive design changes.

Navigation Usability Testing Takeaways:

We had users test the navigation for both desktop and mobile to see what caused the most issues and pulled feedback to implement.

Color Accessibility Test:

We thought the colors were too monochromatic so we ran a color accessibility test and found that some of the colors would indeed be problematic to some viewers.

User Interface Moodboard:

We created three moodboards to draw inspiration for a redesign. The first looked at interface ideas we could implement.

Agency Inspiration Moodboard:

Next, we looked at what elements we needed for the overall feel of a government agency website.

Design Moodboard:

Finally, we looked at design inspiration that could give us ideas for the overall look of the site across different devices and how those might differ.

Collaborative Card Sorting:

We invited other designers to look at the core elements of the site and tried to better organize the information architecture using Miro.

Card Sorting Continued:

Afterward, my teammate Xernan and I took all the different card sorting results and kept the common choices. We then made tough decisions about what would go where on the site to simplify the information architecture and improve the user experience.

New Site Map:

We designed a new site map based on our card sorting results that simplified the menus, search and footer.

Style Tile:

With inspiration in hand, we created a style tile to decide everything from colors and iconography to typography. After setting the tone for the website, we decided on traditional U.S. red, white and blue with tertiary colors of spearmint and gold for the association users would draw to a government-run website. We would keep the traditional Garamond serif type that is found on most official seals for headlines and use a reader-friendly and modern SF Pro for smaller body text

Early Prototyping:

We started to draw out prototype ideas based on our card sorting and decided on key design choices. These early prototypes let us play with ideas that might not make it into the wireframe stages.

Early Redesign Iteration & Testing:

After a lengthy wireframing and prototyping phase, we designed our first clickable prototype and ran multiple user tests.

Feedback:

We conducted a 5-second user test for the desktop redesign and the landing page to see which elements and components of the redesign stood out.

Some early results included:

• Maybe too many elements

• Redesign needs to include more white space

• Pull-down menus look like buttons

Second Prototyping & Wireframing:

We took the feedback we received on version one and reworked our wireframes. Changes were made to the look of the navigation, button types, spacing and page layout.

Mobile Wireframe Version 1 (V1):

We also began to design our mobile screens based on the look of the desktop version and implemented a compact global navigation dropdown menu.

Redesign Version 2 (V2):

We redesigned the look and functionality of the homepage for a second version of the site and began the second round of user tests.

Mobile Redesign:

All of the mobile and tablet screens were also revamped during version 2 to reflect the new design decisions.

Redesigned Buttons & Menus:

We simplified our buttons and recreated our dropdown menus and hover states.

Back to the Drawing Board for Version 3 (V3):

The overall look of our design still left a lot to be desired. When users tested our designs, they felt sections were not clearly defined, and the background was too distracting. Some thought the overall look of the site was too bright, so we set out to finalize the look. More design inspirations were used and the final result ended up being an amalgamation of two inspiration sites to produce our final look.

DOJ Redesign Final:

This final look has a bigger emphasis on the different sections. The gold, which was previously a tertiary color, is now more prominent as the search bar and section menu background. The footer has redesigned iconography and the page background is darker and more subdued. All of our mockups for desktop, tablet and mobile reflect this look across the pages.

Conclusion & Next Steps:

In conclusion, the Department of Justice is a massive organization with an equally large website. It continually grows and changes with each administration. The monumental task of redesigning it completely will take more than the three weeks allowed for the project, but I was happy with the steps we took towards modernizing the site. We learned a lot of lessons about compromise and the iterative nature of building a website and improving the user experience.

Moving Forward:

• Develop a solution to better optimize the search engine 

• Build out more pages to accurately show the full scope of the current site

• Fully build out secondary navigation to show pages

• Explore redesigning the DOJ logo

• Do another round of user tests that focus on accessibility