FOREST SERVICE - Website UI Redesign

UX/UI Design Project Case Study

PHASE 1: Research + Analysis

Heuristic Evaluation

It was important that we do break down the site and evaluate what works first. I concluded that there were quite a few glaring issues with the site as well as a variety of minor issues. These are some of the biggest problems:

• The search bar didn’t work at all and was a slightly different shade of yellow than the ‘Go’ button that’s also on the page.

• The visitor map had an outdated image of a phone.

• The whole design packed a lot of different items in one area and has no whitespace.

• There was a large image carousel as a hero image at the top of the page with another smaller image carousel right below making for a weird unbalanced and unfocused look.

Proto Persona

Now that I had thoroughly examined the site, we could determine who we were designing this website for. I created a persona to help guide our design decisions. I decided that the person who would benefit the most from an improved Forest Service site would be a biology teacher with a family who has a passion for photography. I named this persona Bill McDougan.

Usability Testing

To determine the pain points of the Forest Service site, I conducted five usability tests by asking users to complete five different tasks. I analyzed these findings and found that users were only able to complete 54% of the tasks on average. These are some of the tasks I asked our users to complete and how successful they were:

• Find a campsite in New Mexico and see what is nearby (10% success)

• Find relevant articles related to the campsite (40% success)

• Find job listings (80% success)

Usability Testing Notes

Some other issues I noticed during this usability testing process:

• The United States Department of Agriculture logo at the top of the website links to the USDA’s main page so users would frequently navigate to a completely different website when they intended to simply return to the USDA’s main page.

• The users we tested were not able to find the ‘Featured Stories’ section. This link was hidden below a news feed on the main page.

• We noticed there was some inconsistency with the ‘Find a Forest or Grassland’ card on the main screen and the ‘Visit Destinations’ page. The former allows users to filter by state and then select the area they want from a list while the latter will sort by forest and then select an activity to do there. Both of these return the same results.

• The plants in the Plant of the Week section were sorted by scientific name so blue oak is would be found under Q since its technical name is Quercus douglasii.

Affinity Diagram

We collected all our findings in Miro so can get an overview of the data before sorting this all into an affinity diagram.

Feature Prioritization Matrix

Once I finally had a clear idea of our users’ pain points I was better able to identify where I needed to focus our efforts on this site’s overhaul.

Improvements to focus on:

• Modernize the look and feel

• Create a succinct color scheme

• Simplify information architecture

• Find a better way to display images

You can see the matrix I used to make these prioritization decisions:

Empathy Map

The final step of my comprehensive research and analysis was to return to the proto-persona and dedicate a substantial amount of time to establish a clear and detailed view of what they do, say, think, and feel on a daily basis. In addition to this, I also created an extensive list of some of their specific pains and challenges, as well as what they would potentially gain with the implementation of an improved website. This thorough examination aimed to ensure that all aspects were addressed effectively.

Navigation Evaluation

Evaluating and documenting the pain points of the Forest Service’s navigation was an especially daunting task. I did my best to document all the issues we found in both the desktop and mobile versions of the website.

Navigation Usability Testing

As always, the user is the focus of all our efforts so the next task was to do more testing. For this, I decided to ask users to find three different pages to really see if they had any trouble traversing the website. Some of these links were actually impossible to find on mobile so our results looked even worse.

Navigation Testing Tasks

1. Find Minerals & Geology Management - 0% Success

2. Find how to apply for grants through the Forest Service - 100% Success

3. Find ‘Groundwater’ page - 0% Success

33% Success Rate

Card Sorting

In total there were 108 navigation items. Upon closer inspection, several of these turned out to be dead links or duplicates. I made sure to indicate whether a page’s nav item was in the header or footer even though this didn’t necessarily mean it would stay there in our new revised version of the sitemap.

Card Sorting Continued

Below you can see the new structure we decided on for the new navigation. There would be several iterations on this, but, as a starting point, this made the most sense.

Sitemap

From here, I built a sitemap based on results from the card sorting. As I mentioned before, the Forest Service site is absolutely massive. This was my first time tackling a website’s information architecture and it definitely feels like I jumped in the deep end of the pool.

Eight primary navigation items for the main header are just too many. If I did this again, I think I would try to find a better way to create Categories for these to live in.

Primary Page Changes:

• Change ‘Visit Us’ to ‘Explore’

• Changed ‘Learn’ to ‘Education’

• Changed ‘Working with Us’ to ‘Opportunities’

• Changed ‘About the Agency’ to just ‘About’

• Created a category for policies

• Created a category for ‘Land & Water’ and ‘Plants & Animals’

Navigation Prototype

With this plan in place, I was able to construct the navigation. Using Figma I built out a series of overlays to simulate a navigation bar. Below you can see a gif of an early version of the prototype. Hovering over various menus to display.

PHASE 3: Responsive Design

Big Improvements for Any Size Screen

Creating a new layout for the page content was the next big task. We felt it was best to just re-organize the content that was already on the homepage but just really improve the way it’s organized. Our desktop wireframe would be larger than the original and give the content a lot more whitespace. We added a big hero image at the top that spans the entire screen above the fold. Following the hero, I created a search bar for users to find a forest. I added a large card to showcase the map. After that, I spotlighted the Photos & Multimedia, History, and Science & Tech sections. I liked how the Forest Service site showcased the agency's employees so I added a Faces of The Forest Service section. Finally, right before the footer, I created four cards to spotlight the latest news headlines.

5 Second Tests

I conducted five ‘5 Second’ tests to just get a better idea of what user’s first impressions of the site would be. My biggest issue was that the hero was far too big and the people testing the site didn’t really realize that they could scroll down all the way to the footer. One user questioned if the text in the navigation menu was too large and felt that the plain white navbar display could be improved if it was slightly transparent.

Visual Redesign

It was really nice to finally start applying a fresh coat of paint to the wireframes and seeing how much better it looked. You can see a number of example screens that feature a lot more white space which helps emphasize the images a lot more.

Desktop Redesign Examples

Iterations Based on Testing

As you can see in the images above, I made several changes based on the tests.

• I moved the Sustainability page from Science & Technology to Land & Water

• I moved Tribal Relations to the tab Policies

Working Figma Prototype

Phase 5: Conclusion + Future Opportunities

Conclusion

I definitely created an improved version of this site through this process. I was initially a little defensive when I got some criticisms of my wireframe designs, but those notes did the most to improve my final product. I should continue to test the navigation and make sure that more items are easy to find. The information architecture on this site will always be a daunting task as there are many nav items, but I think it’s going in the right direction for sure.

Next Steps

I would like to do more testing and hopefully speak with people who might be more critical of my visual designs. One helpful insight I had was that they would prefer if the content was presented in a way that would allow people to easily find what they might have navigated to the site to see. I’d like to figure out how I could better curate the content on the homepage to make it inviting.

Thank you for reading!

More Case Studies