Redesign of HUD.GOV navigation utilizing responsive design.
Created new style guide, logo and introduced streamlined user flows.

1. PREPARATION AND SCOPE

Type of project: Individual project
Role: Sole UX/UI Designer
Tools:
  • Sketch
  • InVision
Tasks:
  • research
  • style guide
  • ui elements
  • wireframing
  • prototyping
  • user testing

2. RESEARCH

Current Agency Website - Heuristic Evaluation

1
Many colorful icons. Some of them are not recognizable.
2
“Contact us” button looks like one of the categories.
3
Many sections, categories, subcategories, links - the amount of information is overwhelming.
4
User is forced to scroll down the page to find a press release from previous months.

Current HUD.GOV website violates 4 of the following heuristics principles:

Recognition rather than recall

- there are too many categories and subcategories user needs to navigate through. At the top of the website there are many colorful icons, some of them are unclear and not intuitive.

Flexibility and efficiency of use

- user flows are not efficient and simple tasks are taking too much time. Instead of efficient navigation, scrolling down the page is the only option for finding desired documents.

Aesthetic and minimalist design

- website contains a lot of rarely needed information. User is overloaded with amount of categories, subcategories, links and sections. Information architecture is poorly designed.

Help and documentation

- when users are looking for contact information on the website, it’s difficult to find the ‘contact us’ button. It’s located in the nav bar and looks like one of the categories. After clicking the button, there are multiple options to choose from.

SWOT Analysis

3. INFORMATION SYNTHESIS

Mind mapping helped me get some initial ideas out, organize my thoughts and prioritize the tasks in the process of redesigning the website.

4. CONCEPTS GENERATION

Current Logo

  • too formal/old-school
  • too detailed
  • difficult to scale
Responsive image
Responsive image

Drafts of the New Logo

  • minimalist design
  • fresh look
  • easy to scale
  • blocks, lines
Responsive image

Iterations of the New Logo

Responsive image
Responsive image
Responsive image
Responsive image
Responsive image

Final Version of the Logo

Responsive image
Responsive image

Inspiration Mood Board

Responsive image

5. INTERACTION VISUALIZATION

I prepared two versions of middle-fidelity prototypes and presented them to users. Both of the versions were responsive. In version A I incorporated side navigation with the categories bar in vertical orientation. For the version B I chose horizontal navigation component with image links.

Wireframes - Version A Desktop

Wireframes - Version A Tablet

Wireframes - Version A Mobile

Wireframes - Version B Desktop

Wireframes - Version B Tablet

Wireframes - Version B Mobile

6. IDEATION

Style Guide

High-Fidelity Prototype

7. TESTING

5 out of 6 people who took part in the interview chose version 2 as more intuitive. They pointed out that the second version of the prototype was more interesting, modern looking and visually pleasing. Based on the opinions of the interviewees, I built high-res comps of the 2nd design.

8. REFINING AND REPEATING

After the phase of testing I gathered all of the insights and feedback I received and implemented some changes to my design. I never consider my design as a finished project, to me it's always a work in progress. It's important to know that there is always room for improvement and our design should adjust to changing user needs.