Sketch, Adobe Illustrator, Principle, pencil and paper (sketches), Whimsical, Zeplin
The US Department of Homeland Security's website was a bit outdated for 2018. Logos and icons were not vectorized and it handled smaller screens poorly. The architecture was painfully disorganized as it is an immense website with loads of information. They also currently don't have the best reputation and are often seen as "big brother" or roadblocks to entering the US and therefore they could benefit from a rebranding.
Completely modernize, rebrand, reorganize, and style the DHS website and allow it to respond better to smaller screens. This includes creating a style guide from scratch, new typography, a new logo, a new user flow, and add new features. The end goal is to build more trust with users and allow users to find the resources they need in an easy and delightful way.
The Old Website
Concerned US citizens, citizenship seekers, and travelers to the US.
A quick Google search of the DHS will reveal news articles of raids, politically polarized thought pieces, military and police with large guns, and photos of everyone’s least favorite governmental organization: the TSA. Though the DHS provides a multitude of services that intend to keep our country safe, their online image is unwelcoming. It was necessary to create a brand and style guide to scale our new image across the website.
The main purpose of the DHS website should be following:
- Allows users to easily access information on the variety of DHS programs and services
- Provide users with current DHS news and updates
- Provide users with safety information
- Fast access to relevant DHS forms
- Allow users to have a profile for personalized status information
- Allow users to report suspicious activity
- Build trust between the DHS and users
Features, Functionality, and Benefits
I used a Feature > Functionality > Benefit chart using Google Sheets to prioritize features. In the partial list above, Search and Topic cards were of highest priority because the enormous information architecture on the current website is very confusing to navigate.
I created a new style guide to better scale the DHS website and brand. It includes guidelines for tone of voice, colors, logos, typography, headings, layout, responsive grids and breakpoints, button states, copy style and length, imagery, and iconography.
To clarify our new brand, I created a new logo. The old logo on the left is the classic bald eagle, however, it's angry face is unwelcoming. The logo is busy and doesn't scale well when sized down.
The new logo on the right is Lady Liberty with her classic shadow across her face. The Statue Of Liberty represents freedom, inclusion, and cooperation with other countries as she watches over us. The new logo is more simple and modern and scales down far better than the old logo.
From post-it notes to digitizing in Whimsical.co, the IA needed to be rearranged to create a more simple user flow. The images above are just one example of navigating the hundreds of services available on the DHS website.
To validate my wireframe sketches and easily iterate, I conducted in-person usability tests as well as online using usabilityhub.com. Feel free to read my usability script to get a better understanding of my process.
High Fidelity Responsive Mock Ups
The completed hi-fi mock ups are responsive to fit mobile, tablet, and desktop screens.
I tried to stick closely to the 70-20-10 rule of color theory and use more white space than the original dated design. The final result is a small allusion to the colors of the USA: red, white, and blue.
User Flow Example
I created this prototype demonstrating the new user flow using Principle in order to create hover states and animations.
I believe that the right UI elements (color, typography, iconography, etc.) and a smooth user flow can make even the most bland areas such as government websites a pleasure to use. The trick is fitting those elements in with your brand to build trust.