Tools

Sketch, Adobe Illustrator, Principle, pencil and paper (sketches), Whimsical, Zeplin

The Problem

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. 

The Goal

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

Target Group

Concerned US citizens, citizenship seekers, and travelers to the US.

Brand Overview

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. 

Proto-Persona

Website Purpose

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.

Style Guide

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. 

New Logo

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.

Information Architecture

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.

Sketches

Usability Tests

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.

Digital Wireframes

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.

Reflections

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.