DHS.gov Website Redesign

UI Design Challenge

The Problem

To understand the pain points for users navigating the website and develop empathy to address the design frustrations.

The Solution

• Conduct user research by executing usability testing
• Gather design inspiration for the look and feel of the user interface
• Create, prototype and test low-fidelity wireframes
• Develop a style guide utilizing existing brand colors
• Build responsive high fidelity mockups and conduct more user tests

(1) RESEARCH

User Persona

Creating a persona allows me to align my thought process and have a clear place to start.

Usability Testing

What Do Our Users Need?

I conducted 5 guerilla style user tests over Zoom to learn more about how my users navigate the website. I asked users to perform a series of tasks related finding more information about applying for a job within the Department of Homeland Security.

Insight Discovery

Information Overload
Walls of text, grid structures, lack of clarity
‍
Confusing Navigation System
Inconsistencies, poor labeling systems
‍
Multiple Redundancies
Duplicate pages that serve the same purpose

I create a realistic representation of the key user segment I wanted to design for. This was based on qualitative and some quantitative user research. It allowed me to begin empathizing with the user as I moved into the Define phase.

(2) DEFINE

Redlines

To communicate these discoveries, it is necessary to provide annotations that clearly show areas for improvement.

Card Sorting

Information Architecture

(3) DESIGN

Visualizing the Desktop Navigation System

Navigation System
I started building the structure of the mobile website viewport by creating simple wireframes to help me outline the look and feel based on my initial user testing.

How might I bring user needs to the forefront?

Static

Hover

A Mobile First Design Approach

Navigation System
I started building the structure of the mobile website viewport by creating simple wireframes to help me outline the look and feel based on my initial user testing.

How might I bring user needs to the forefront?

Iterations Based on Testing

Flyout Menu & Footer
After running a few user tests, I then iterated on my flyout menu by aligning the arrows to the right and adding a lighter background color to each tappable menu item.

This gave me a clear direction to quickly build out my footer navigation in order to retain some familiarity for the user.

Low Fidelity Mobile Prototype

Desktop Wireframing

I then translated the mobile principles used to a desktop viewport.

Quick Testing

I ran some quick guerilla user testing in order to validate the low-fidelity prototype.

Developing A Design System

I began outlining my look and feel...
‍So I could move quickly into a mid-fidelity prototype. This allowed me to get a glimpse at what the high-fidelity version could look like without very much effort.

Mid-Fidelity Wireframe

Adding Initial Styling Elements
By applying my style tile, I was able to quickly generate a mid-fidelity mockup to my wireframes in order to visualize necessary changes in order to start building out my design system.

(4) TEST

User Testing

I conducted 5 more usability tests over Zoom and Slack to gain more insight into how users interacted with my design choices.
‍
After iterating, I was able to start applying content to the placeholder text.

Branching Into High-Fidelity

Mobile

Desktop

What have I learned?

During this case study, I was able to quickly produce a responsive homepage website redesign while using a mobile-first approach. This allowed me to utilize research data to influence my design process and choices.

‍