top of page
Interface Designer in the Office
Interface Designer in the Office
JOM_4x.png

My name is

JK-UXUI_4x.png

UX/UI Case Study

The Story of DHS Redesign

Tools:

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

1

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.

Desktop version new.png

Challenge

Ideation & Approach

Results

​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.

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.

Conclude with better 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.

ANNOTATIONS

DHS -Annotation.jpg

Some areas of improvement: we could eliminate menu bar duplication and adjust the alignment of blue buttons.

MOODBOARD

DHS -Mood Board.jpg

Choosing the Cool Tone with dark colors represents strong, trustworthy, reliable, straightforward, calm, and essential messages.

UX / UI RWD CASE STUDY

UX / UI RWD CASE STUDY

USABILITY TESTING

NEW SITEMAP

DHS-New sitemap.jpg

Rearrange the categories after the evaluation to organize them better and make more sense of the users' testing.

2

Donation Mobile Application

A straightforward application to solve your donation obstacles and more. We aim to create a successful mobile application to help solve the issues for most users who have busy schedules but want to do good deeds by giving their gently used items to those in need and the potential of earning a bit of money back if they wish to resale some of those items. The case study is one way to prove we are on the right track.

Timeline & Scope:

One week group project (Approx. 18+ hrs individual)

RoleUX designer / Group project with a team of three (Share responsibilities: Research, interview, synthesize the research, User Insight, Problem Statement, Diagrams, User-Persona, Value Proposition, User Flow Chart, wireframes, User testing) 

My focus: Managed the interview record, Created an App Name and logos and color theme, created survey form and compiled research data, Modified Proto-Persona, Complexity Matrix, Storyboards, Lo-Fi /Hi-Fi wireframes on Non-profit options, provided artwork/images, organized docs/ records/ feedback, and prepared the presentation.

Tools:

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

Results

Ideation & Approach

Challenge

Most users have a hectic schedule outside work/school. They have items that can be donated but lack the time and energy to take them to the donation center. The living space becomes cluttered with unused items.

Throughout interviews, users were motivated by helping others and mentioned time constraints as a major pain point, especially when moving. Therefore, users could benefit from an app that would take care of the donation for them and offer users the possibility of making a profit on the resell option. How might we help users donate/resale their items with minimal time/energy? Testing was performed before editing/ adding the shopping and messaging section, resulting in additional features.

An application like "GIVE AWAY FOR GOOD" can help the users schedule a pick up for their items, which would be ideal for solving the issues. On top of that, the users will have an option to resale some of their items through our app as well. Additional Features: - Feature to browse and buy the used items from our "Feature Listing Page" and payment options - Communication Feature, where the user can send a Text message & chat with our team directly.

USER RESEARCH

FLOW CHART

STORYBOARDS

USABILITY TESTING

© 2018-2028 Design by Jom - All Rights Reserved

Let’s Collaborate

Get in touch so we can start working together.

Thanks for submitting!

bottom of page