1. PREPARATION AND SCOPE
Type of project: Individual project
Role: Sole UX/UI Designer
- style guide
- ui elements
- user testing
Current Agency Website - Heuristic Evaluation
Many colorful icons. Some of them are not recognizable.
“Contact us” button looks like one of the categories.
Many sections, categories, subcategories, links - the amount of information is overwhelming.
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
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.
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
- too formal/old-school
- too detailed
- difficult to scale
Drafts of the New Logo
- minimalist design
- fresh look
- easy to scale
- blocks, lines
Iterations of the New Logo
Final Version of the Logo
Inspiration Mood Board
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
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.