top of page
DHS: Department of Homeland Security (Case Study)
.jpg)
Government websites can sometimes feel confusing and misleading to users.
I was tasked to research and redesign the current DHS website, addressing any issues with usability.
User research on the Department of Homeland Security website, revealed that users felt overwhelmed with the lack of onboarding for the DHS homepage and moreover, got lost using navigation tabs and buttons, due to confusing legal terminology.
High Level Overview
In an effort to solve user frustrations on the DHS website, I completed a re-design by creating an improved sitemap, navigation, and information layout.
To address unclear phrasing and highlight the website's main functions, I applied the UX Writing design discipline. UX Writing simplifies the text content such that it helps guide the user on how to use the product.
Research
Key Findings from User Interviews and Testing
During user testing on the current DHS website, I asked a series of questions to better analyze the user experience.
Areas of unclear navigation, confusing terminology, and user feedback on look-and-feel were identified.
Current DHS Website:
Affinity Diagram: Organized Notes from Interviews
Identifying Challenges
Pain Point #1:
The overall navigation caused a lot of user confusion during initial user testing. The level of confusion varied between the Desktop and Mobile app experiences.
Desktop:
The category names in the primary navigation were misleading, as the terminology did not reflect the actual topics presented to the user.
The content within the primary categories included links that were unrelated to that category. For example, under "How do I..." included "Alphabetical Listing".
Mobile:
The hamburger dropdown exposed the entire list of all topics and web pages for the entire DHS site. This is a huge list that is especially cumbersome to scan on a mobile device.
The same mismatch of category to content found on the Desktop site carries over in the Mobile app.
titles, made it hard for users to scan information.
Pain Point #2:
Readable content (paragraphs) on many pages, including the Home page, are too long leading users to search through the content (i.e. Command F)
Creating a User Persona
To tailor the design to intended users, I created a User Persona. The User Persona highlighted some pain points, areas of perceived value, basic needs and motivations identified from User Testing.
User insights were then organized into an Empathy map geared to the User Persona, to relate which concerns would affect them.
Ideation Phase
Prioritizing important fixes:
Using a value proposition matrix, I prioritized user frustrations in order of importance.
Issues that are both high in importance and low in complexity, are generally the first modifications to implement in the design phase.
Site Mapping Exercise
Website navigation was a large issue during user testing, so users were asked to complete a few site mapping exercises.
Users were tasked to assemble all the category names and page names, into their own version of a navigation bar, which clarified how these names were comprehended by users.
User's Site Mapping in Figjam (brainstorm board):
Final Design Decisions
Modified Top Navigation Bar:
I compiled the results from the user site mapping, then developed and tested a new set of navigation tabs.
Some categories remained the same, while others were changed entirely to make scanning the navigation an easy task.
Prototype of modified Navigation Bar in Figma:
News Category on Homepage:
The most well traveled page on the website was the Home page. The Home page previously included a "News" section which contained very long paragraphs with embedded page links.
To illustrate that the page links were actually news articles, an image and short statement summarizing each news article was added.
Prototype of modified News Category in Figma:
Hamburger Navigation in Mobile:
In the mobile version of the DHS website, the drop down (Hamburger) menu was long and negatively impacted the user’s experience.
The Hamburger menu was modified to include only category boxes, which show the category name and pages within.
In the redesign for mobile devices, the navigation categories were updated to match the changes in the Desktop version.
The original version of the Mobile app included “plus” indicators next to each category, which confused users. They were removed.
Prototype of modified Hamburger Navigation Menu in Figma:
Results from User Testing
Results from a final round of user testing showed a higher number of positive user interactions.
However, a handful new user challenges arose, including confusion with the search-bar in the Desktop prototype. Users felt the search bar acted like a stationary element, which wasn't clickable or usable.
The primary navigation also seemed to mislead a few users, sometimes leading them to the wrong page.
Notes from our final round of user testing, were organized using Figma...
Final fixes were implemented, improving the usability of the desktop and mobile prototypes.
I added a clickable search bar component, making the search bar functional.
The problems with the primary navigation, which led users to the wrong pages, was determined to be implementation issues in the prototype. The prototype was updated, insuring that all buttons were clickable, lead to the correct pages, and user feedback was positive.
Prototype demonstration after final user testing:
bottom of page