I'm
Information Architecture and Responsive Website redesign for a government agency.
The organization of information currently found on this government website causes confusion and is difficult to navigate to categories efficiently. How can I Improve navigation and information architecture of a robust website to reduce uncertainty and improve the user’s experience. First, I want to understand the current website pain points.
I spent some time observing and noting items throughout the Homeland Security site. First thoughts on the navigation were to improve terms like “In Focus” or “How Do I?”. They are vague and don’t indicate what information you will find in that dropdown. Some cards brought you to the same page and the hero could help prompt you to the REAL ID page instead of just an article.
The research team administered 5 user tests on the current site. We mapped out user paths to anticipate the users’ steps on 3 tasks. We observed many common snags or frustrations, along with the users voicing they felt overwhelmed with information overload.
1. Apply for TSA Pre-check.
2. View Green Card Eligibility.
3. Are you REAL ID Ready?
• Users were overwhelmed and unsure where to go initally. All users had to explore and click through the navigation bar, and skim lots of text. they voiced frustrations during the process
• Often users went down wrong paths and resorted to using the search bar or an alphabetical listing
• One user never completed Task 1, because they could not find where to go
The Department of Homeland Security covers many areas of safety for our country. We believe people who travel–locally and overseas are common users of the Homeland Security webpage.
Travelers are seeking information on proper documentation, and being prepared for their trips. However, relevant topics are not easily found, which causes many users frustration.
Meet Kim Anderson, a frequent international traveler, who is in a relationship with a partner overseas.
The Homeland Security website holds plenty of necessary information that could to be reorganized to present topics in a more clear way. How might we improve the site’s information architecture to specifically aid people in reducing stress before trips and finding the proper information as they travel locally and internationally.
Usability tests demonstrated many frustrations. Comments were made about how information-heavy this site is, which lead to difficulty completing some of the tasks.
To analyze and solve user snags, index cards of the current navigation topics were made and sorted. This exercise will help build new information architexture
Key Takaways
• Tertiary topics were added to new navigation structure to help users find content quicker
• Additional categories were added to the primary navigation
• Goal is to prevent users from resorting to the search bar by offering clearer topics
Check out the new information architecture, using the results of the card sort. Utilizing the LATCH system, I organized primary navigation by hierarchy. For secondary, tertiary, and the footer, I used alphabetization. A search bar is important globally to help find information when the user is lost and I am adding a convenient feature where you can change the language of the website.
My focus for the navigation is to organize lots of topics as clear as possible to make it easiest for the user. I started with sketches to work out nav bar and footer options for web.
I decided a fixed nav bar with a dropdown seemed to be the most organized to house all of the topics. I used helpful indicators, such as color and bolder type so users understood what section they were in.
For mobile, it is especially important to keep the Navigation simple and clear with less real estate. The mobile navigation mimics the web, but utilizes a hamburger dropdown menu revealing the primary topics.
Overall, I wanted to keep the everything simple and gave space to sections, so the user would not feel overwhelmed by all the information presented.
1. Access information in Spanish
2. Interested in possibly joining Coast Guard Auxiliary
3. Find information on Child Adoption overseas
Making sure I was on the right track, and navigation being the utmost importance, I conducted quick user tests with 3 people for mobile only,
Users navigated easily through these tasks. This helped confirm that the card sort was successful and the new information architecture made sense.
However there was feedback that the type was too large. I also edited some of the category titles from the original site to have shorter phrases, which helps keep it more simple.
I developed the design of the homepage, keeping in mind considerations for responsive design amongst platforms.
On mobile, the hamburger menu now houses the search field. I used shades of grey to indicate hierarchy amongst the categories–lighter being sub categories. I considered an accordion menu when secondary items are displayed, but realized the user would be scrolling too long to read all of the categories.
I also took that into consideration for scrolling on the homepage. I kept sections short and concise.
The Homeland Security logo is the inspiration for this page. I elevated the look with shades of blue and fresh imagery to be attractive and engaging for the user. There is a sense of patriotism, which is an appropriate look for a government agency.
I spent some time adding motion to the hero. I wanted attractive images to draw you in, then a smooth transition to the call to action.
For the REAL ID segment, I wanted to draw the user to the deadline. It catches your attention with the dropdown banner, and keeps you engaged with the timer. Not only is it enjoyable to look at, it is important info and the timer is symbolic that they are running out of time. This icon will hopefully serve as a reminder for the user.
Applying appropriate timing is also essential to a delightful experience.
The Homeland Security website at first glance looked attractive, but when diving deeper and conducting analysis on this site, the information architecture needed improvement. A big focus was information for travelers, as illustrated by our user persona. Items were buried too deep for users to find pertinent information quickly and easily.
I administered mobile user tests on my redesigned site, asking users to navigate 4 tasks–some of which were the same tasks as original user tests. Majority of the tasks were completed, verifying effective edits to the site’s navigation.
An area needing improvement would be to have a more clear method to change the language of the site. A few users overlooked the flag icon, and I am questioning if that is the best representation of language.
I hope you enjoyed reading this case study as much as I loved working on it.
