top of page

Department of Homeland Security

Governmental Website Responsive Web Design ReDesign Challenge

Team Members: Kyleigh Nandory & Jen Strong

Tools Used: Miro, Figma, Invision

Timeframe: 3 weeks

Project Overview

The Problem: The original problem was to redesign the navigation and make it more explicit on how to navigate through the page.
 

The Solution: The solution I came up with was to condense information and get rid of unneeded information. A lot of the information was redundant and made it easier to cut and condense.

 

Research

Our research objective was to figure out where the pains in the current user flow were. We tested to see if people could find the website as well as a forms and fees link. We found out there is no clear path as a user. Most links go to additional websites and it gets confusing to go to a new website.

 

Brand Positioning Statement: The government website helps the Department of Homeland Security to accomplish safety and allow freedom by providing resources and tools that make Americans feel protected so they can accomplish everyday life and fulfill the American dream.

 

After analyzing the website, my partner and I had a hard time understanding the purpose of this website. We took it down to just informing the user about what this agency does and links to pertaining websites under the DHS umbrella.

 

Card Sorting: I went through all of the web pages on the whole website and it made it extremely hard to minimize and select which pages were important to be in the cards. So ultimately I went with Primary and secondary navigation for my cards. There were still a lot of cards and I got rid of a few pages.

 

User Testing:

During user testing, I was able to get desktop and mobile feedback. My desktop feedback was welcome spelled wrong on the drop-down, highlights in the website an empty square and the drop-down menu was small. I needed to make it bigger. Mobile Feedback was home funny spot. I needed to relocate it, I also needed to center the mobile search bar, and the menu should have drop-down arrows to make it more clear.

 

User Research objective: To figure out where the pains in our user flow were

We tested to see if people could find the website as well as a forms and fees link

 

We found out there is no clear path as a user. Most links go to additional websites gets confusing to go to a new website.

 

Redesign User Testing 

Desktop feedback

  • Welcome spelled wrong  on the dropdown 

  • Highlights in website empty square

  • Dropdown menu small make bigger

Mobile Feedback

  • Mobile home search bar funny spot

  • Center mobile search bar

  • Mobile Menu should have Dropdown arrows

 

Conclusion: 

This project was extremely difficult to get my head to wrap around the whole navigation system. It was helpful to see a site map that I created via Google Docs to help me deduce what needed to be removed and what was important information.

If I were to do this project all over again, I first would choose a smaller branch of government. Secondly, I would make sure all my designs would start atomically so I can build and iterate more seamlessly.

DHS-Mobile.gif

Mobile Mock-up

DHS-Desktop.gif

Desktop Mock-up

1027px-Seal_of_the_United_States_Department_of_Homeland_Security.png
DHS-StyleTIle.png
bottom of page