top of page
UXUI_2x.png
JOM_4x.png

My name is

RWD - CASE STUDY
Government Agency and UI Redesign

UXUI Programs_4x.png

The Story...

While attending the UX/UI Boot Camp with the Rice University - Susanne M Glasscock School of Continuing Studies, one of the challenges was Government Agency Redesign and UI Redesign. With that, I had an opportunity to practice RWD (Responsive Web Design and User Experience) by selecting one of the government websites and working on redesign. I chose the DHS (Department of Homeland Security) because of its value in the information on this website and the challenges that would help sharpen my UX/UI skills.

Timeline & Scope:

20+ hr (individual part)

Role: UX designer / Group project with a team of two (Share responsibilities: Website Annotation, Navigation Evaluation, Cards Sorting, Problem Statement, Proto-Persona,

My focus (individual part): Managed shared data, Created a New Sitemap, Modified User-Persona, Created a New Moodboard, New Navigation Prototype, Lo-Fi /Hi-Fi wireframes on Mobile Devices and Desktop, Organized docs/ records/ feedback, and Prepared the Presentation.

RWD-DHS_JK.png

Tools

Figma, Trello, Google Slides, Google Docs, Adobe Creative Suite

Challenge

The DHS Government Website has a massive amount of helpful information, but it is buried under many lists, and some formatting needs to be unified or consistent. There are several repeated contents and menu buttons. Adjustments are needed on the navigation icons/buttons area, as many navigation icons lack consistency (sizing & alignment), and some pages have no "Back" button to navigate back to the homepage.

Approach

Improvement of the color scheme can help gain more attention and rearrange the categories after the evaluation to organize better and make more sense from the users' testing. Minimize the number of the menu list to make the page easy to navigate.

Results

Conclude with consistency and navigation. Choosing the Cool Tone with some dark colors to help represent a strong, trustworthy, reliable, straightforward, calm, and essential message. Then, transform the current Moodboard to the UI Style Guide and apply it to Mobile and Desktop versions. Ensure the website's consistency, overall look, and color usage on both devices. These result in making the website more vivid and inviting.

Sitemap_Annotation_DHS_JK.jpg
TransportationPg.png

Usability Testing

RWD-DHS_mobile JK.png

© 2018-2028 Design by Jom - All Rights Reserved

Let’s Collaborate

Get in touch so we can start working together.

Social icons_4x.png

Thanks for submitting!

bottom of page