Web Design

Responsive Web Design

My Role
Web Designer
Timeline
Feb-Mar 2024

Project Overview

The Department of the Interior plays a central role in how the United States stewards its public lands, increases environmental protections, pursues environmental justice, and honors our nation-to-nation relationship with Tribes. Their website needs to visually encompass the important work they do, and highlight the high priority issues.

Solution: In order to increase traffic to the site and inspire more users to get involved or further educated regarding important issues, we will re-design the main pages of the website to be more eye catching and organized.

Tools Used: Figma, Figjam, Trello, Miro, Zoom, Slack

Process Overview

Proto Persona

User Insight Statement

A person that is interested in environmental advocacy requires a user-friendly government website to stay informed about policies, updates, and events. Staying up to date is crucial for advancing their passion and translating it into practical actions.
User Journey Wireflows

Before moving into user testing, we needed a defined user path to test.

Usability Testing

Recorded User Tests
Test Findings

We found that overall users found the website visually simple, however this is deceiving as the navigation itself isn’t as simple as it first appears. The actual navigation and categorization of the links could be better sorted, and the search results as far as filtering or order isn’t immediately clear. 

We have placed these results in a prioritization matrix in order to sort through which changes we would like to focus on. 

Heuristic Evaluations

Navigation Annotations
Navigation User Test Findings
We found that users had a hard time finding secondary pages, and deciphering between internal and external links on the site. We have placed these results in a prioritization matrix in order to sort through which changes we would like to focus on. 

Color & Accessibility Testing

Moodboard

Card Sorting

Site Map

We built a new sitemap after re-sorting the pages with a more intuitive layout that makes it easier to find what users are looking for. 

Navigation Wireframing

This is the first wireframe attempt using the results obtained from the usability testing. 

The focus here was the navigation bar and re-designing that layout. You can click on each option to reveal a drop-down menu, and once the mouse leaves the frame it will automatically disappear. 

mobile navigation menu

Homepage Wireframing

5 Second User Testing

UI Style Tile

Iterated Wireframes

UI Style Guide

Usability Testing Plan

Usability Testing Results

Feedback Continued:

  • Overall, add more to the homepage - more information, more frames, include important highlights. 
  • Could be more visually pleasing, background could go back to white to make room for more photos and colored buttons
  • Try to differentiate it a bit more from the original site, adding different elements
  • Maybe apply more animated elements, making the page more interactive 

Feedback was mostly the same for the mobile prototype that was structured the same way, but responsive for a smaller screen.

RWD Prototype Iterations