top of page
Homeland Security Redesign

Problem
People trying to navigate the process of becoming a citizen of the United States have a hard time getting around the current Department of Homeland Security website. A poor layout and inconsistent design lead to a poor user experience and the user ultimately abandoning the website.
Goal
Our goal was to rework the overall aesthetics of the website to make it more coherent and inviting. From there revise the navigation to make a more common sense and smooth approach to moving through the website.
My roles & responsibilities
-
I worked as a group of two for the initial user interviews and persona creation.
-
From that point on the project was completed as a solo project.
Timeline
The project took 3 weeks to complete.
Persona

Usability Tests On Current Website
For this project we conducted some initial usability tests that centered around how people make their way around a defined user path. We gained a lot of feedback from the testing about what peoples pain points are when it comes to Navigating the Homeland Security website.

Some of the main takeaways from the user testing were:
-
Introduce different colors other than just blue.​
-
Add accessibility option to change the language.
-
Move the logo and search bar into the header.
-
Simplify the homepage with less words.
Mood Board
The next goal was to gain inspiration from other UI samples and compile that into a mood board to visualize some of my ideas.

Card Sorting


Style Guide


Applying Style Guide to Wireframes

Some of the main takeaways from the user testing were:
-
“This website needs a way of getting home without clicking the logo icon.”
-
“When I go home why am I starting at the bottom of the page instead of restarting back to the top of the page.”
High Fidelity Prototype

Final Thoughts
Reflection on project:
As a whole I believe I was able to come up with a more user friendly website experience for the Department of Homeland Security website. By applying more uniform design standards and giving the website a more pleasing color palette and reducing the amount of words I believe they will receive better feedback in the future and more return users to the website. I was able to learn many new techniques and apply them effectively through this project.
Future Iterations:
-
I would like to be able to apply some accessibility to the website to be able to universally change the language.
-
I would like to be able to make some of the transitions smoother.
-
I would like to be able to successfully inform the user when they are clicking a link that leaves the website and visits another government website.
bottom of page