Department of Homeland Security (DHS)
Organization:
Department of Homeland Security
Strategies:
User Research, Prototyping, UX/UI Design, (RWD) Responsive Web Redesign.
Timeline:
February 23, 2023 - March 23, 2023
Tools Used:
Figma, Canva, Miro, Invision
Overview
This case study was dedicated to identifying the usability issues within the Department of Homeland Security website in order to better create an effective user experience. This was able to be done by researching the UI pain points that users experience while navigating through this site and synthesizing all the research into creating a responsive web redesign.
My Role
Product Designer & UX Researcher
The Problem
Users are continuously visiting DHS for various reasons. ranging from student internships to visitors who want the latest news upon their visas. However, users are having a difficult time locating what they are looking for based on the "call-to-actions".
The Solution
Users are submerged with information and are having to go through multiple screens in order to reach the destination of the task they are trying to fulfill. In order to make the process more simpler, this resulted in combining topics and creating less CTA's.
The Process
When conducting research, I was curious to know the thought process of how users navigated through this website. I began with creating user paths and heuristic evaluations. Along with this I followed up with usability testings in order to understand if this website is friendly to the user.
From here, I then decided to test the accessibility of the website, in which I discovered two text colors that fail Electronic Accessibility and two colors that pass AA.
Affinity Diagram
Based off the testings I completed with users, I was able to gather information upon how users felt while exploring the navigation menu and also upon their experience when having to get to their final task.
One of the biggest pain points from users included being overwhelmed with information and having to complete many steps before arriving to the specific screen they were looking for.
I focused on this being a top priority with A 2x2 matrix in order to help me know what was most important to the user.
Card Sorting for Navigation Menu
I then asked the same five users that did usability testing with me to complete a card sorting. I informed the users to sort the navigation menu into categories on optimalworkshop.com for what made sense to them. After analyzing the data from the card sorting results, I was able to get a better visual for the new navigation menu to create.
Before User Card Sorting
VS
After User Card Sorting
Style Guide & Direction
I Re-tested again with another five users but with the new navigation menu I had created from the card sorting in which 90% of users were quick to identify where to go and what they were searching for with the new CTA's. Some of the suggestions from users were to make the font bigger but overall the navigation menu tasks were a success.
Next, I decided to work on my style guide for a better look at the interface I want to create.
Final Result
Once I was able to brainstorm some ideas for the voice and tone for the new RWD of Department of Homeland Security website. I was able to add on my patterns for typography and elements. I wanted to incorporate a more welcoming website for the users but also a respectful and sharing website that included its purpose or message.
What's Next?
Next, I aspire to add on to where users can click onto contacting DHS or also click on the CTA's and continue to browse onto more pages. I really wish I could've completed this during my time of creating this case study. However, I hope to continue working on this design and learn from trial and errors.