Navigational Prototype and UI Redesign of The

FBI Website

Scroll

Problem

Users felt the current FBI.gov website was redundant and confusing in the navigation of the site. Users also noted that the site was dark and uninviting.

Solution

We set up the menu to be more concise with wording. We also switched some of the sub-header names to make more sense to everyday users that were not familiar with the acronyms they currently used. In addition, we also created a new style guide that lightened up the feel of the website.

Insight

After making our changes, users were able to navigate the site better, using less clicks to get to their destination. They found the new site easier to read and find the information that they wanted.

User Research

We started off the project by creating a proto-persona of a user we thought would be visiting the FBI website. We thought it would be someone that was in a smaller town and wanted to make sure that their community was safe and protected. We wanted to make sure that the navigation and the site was user-friendly while maintaining the content of the current site. With that in mind we created a user testing plan. We wanted to see if the user could:

  • Successfully find their local FBI office

  • Successfully find bank robbers on the “Most Wanted” section of the site

  • Successfully report a cyber crime

Definition And Synthesis

During the user research we found that the users were generally able to navigate the site but it did seem like there would be more straightforward paths to finding the information needed. The color of the website was dark and did not have good web accessibility. Also, some of the information was blended together, vague, or nondescript to someone who did not know what it already was.

Ideation

We wanted to address the confusion of users by simplifying section names and reducing how many that there were. We also wanted to come up with a more inviting color scheme that was more inviting and less dark. We drew our inspiration for the new from the seal of the FBI. We also wanted it to be easy to report a crime as we thought this is what our user would be coming to the site for.

Prototyping

We started by creating our own versions of a redesign of the website focusing on the navigation. We wanted to make sure the navigation was simplified and more visually appealing. Additionally, we wanted to make the information on the homepage less busy in order to convey the message of the site better. Some of the wording of the headers were also a lot so we wanted to simply the wording that they used, while maintaining the same message. We created our own low fidelity prototypes and then brought them together to combine and bring in the best elements from each design. We tweaked the color design then to match the color palette that we create from the FBI seal. We then created a hero image for the homepage instead of rotating images that would depend on the current top stories that would provide inconsistent looks to the website. We also created a mobile version that used the redesigned cards so that it was a consistent look. It would shrink down so that the headers and title would stay the same and the descriptions would be in a drop down and within the link.

User Testing and Outcomes

After we created our high fidelity prototype we did another user test to make sure that our redesign was in indeed better and that the user would have an easier time navigating the site. We started with two of the same tasks as in our prior testing (report a crime and finding their local office) so that would could easily compare and see if it was indeed easier to navigate within the site. The users completed the tasks much quicker than before with less frustration as well. The third task was new and it was to find a specific link within the redesigned menu to see if our header made more sense that the prior ones. The users were able to find it relatively easy and also made the comment that they new menu looked cleaner and more inviting.

Conclusions and Future Opportunities

In conclusion we were successful in creating a simplified version of the current menu that still contained all of the content. We were also able to brightened up the look of the site and introduced colors that felt better to the users. For future opportunities we would make more redesigned pages so that users could have the full experience of the site.

Previous
Previous

Comfort Crew for Military Kids

Next
Next

BilliUs