National Parks

Research, IA, UI design,
visual design, responsive web design.

Summary
This project’s main goal was to solve information architecture issues, information hierarchy, and navigation issues,
while refreshing and redesigning the UI and visual elements of the National Parks website, up to a high-fi Figma prototype.

Role:

UX designer
UI designer,
Visual designer.

Duration

3 weeks,
September 2020.

Tools

Figma, Invision,
G-Suite, Procreate,
Zoom, Miro.

“This website makes me want to stay home”

This is a quote from one of the nature lovers and travelers I interviewed for this project. Users face multiple issues while nps.gov and try to find relevant National Parks information to help them plan their trips. As I found in my research, the National Parks website fails at its primary goal: helping users plan their trips.

Some of the user comments during usability tests.

Background

The National Parks service website

This project originates as a project in Berkeley Extension, as a government agency responsive redesign assignment. After my own frustrating experiences with the National Parks website, and taking into account its impact and popularity (327 million people visited the Parks in 2019), I believed I could present its information in a simpler and more useful way to the user.

Research

Heuristic evaluation and usability testing

To start identifying the main problems of nps.gov I analyzed five of the most important user flows and their webpages on nps.gov against the Usability Heuristics for User Interface Design by Jakob Nielsen. I conducted this analysis on both Mobile and Desktop. The five pages analyzed were the Homepage, “Things to do”, “Buy a pass”, “Get involved” and “Plan your visit”. A thorough analysis can be found here. I also separately analyzed the navigation elements, header, footer, and buttons.

At the same time, to make sure the page was accessible I conducted a color accessibility test on the same main pages. It showed no major issues.

Usability tests with two users via Zoom.

Understanding how nature lovers plan their trip with NPS.gov

For this redesign, I conducted 6 usability tests, divided into two groups. One group was focused on the main tasks from the pages I mentioned above. With the second group, I specifically tested the navigation since that could be one of the major pain points.

The users were asked to perform tasks corresponding to the pages analyzed in the heuristic evaluation:

Find operating hours and basic park information
Buy a pass
Find thing to do in a park
Find a way to volunteer or get involved with NP.

Main usability issues:

To visualize the main usability problems in one glance, I annotated the five pages analyzed including both the user’s feedback and the heuristic evaluation notes.

The full document can be found here. These are the some of main issues I identified:

The homepage and navigation hide the Menu and submenus. These are hard to discover and navigate due to their size and position.
Confusing and mixed Search experiences (Find park, Search, Find parks by state, Find all parks).
Lack of user control: multiple and similar choices are presented with no clear path.
Lack of consistency in content: same types of pages have different layouts.
Texts are hard to read and understand due to their amount, the random use of colors, mixed sizes, and inconsistencies.
Pictures offer little value or appeal on most occasions.
The search function doesn’t work properly and offers no value.
Information architecture is overwhelming, with duplicated text, CTAs, and buttons.

I sorted and mapped the feedback into the following categories: visual, navigation, and experience elements. I then prioritized the issues based on complexity and impact.

Ideating the new design

What has more impact?

Making the website’s purpose and the main user path clear.
Display clean menus and main options and make them discoverable and useful.
Highlight Finding a park and directing users to a clear goal of organizing their trip.
Simplify navigation reducing submenus and duplicated options.
Review visual design to broadcast the parks’ beauty and make it appealing.

Streamlining the navigation

In order to redesign the information architecture and create a new navigation and sitemap, I conducted several card sorting exercises with 3 users. This exercise had to be done remotely through Zoom and Miro due to the COVID-19 pandemic. I threw together all primary and secondary categories for National Parks in sticky notes, for users to group them. They later grouped and labeled the notes in five main categories.

The new sitemap

Following the card sorting results and my analysis, the new sitemap streamlines navigation with these main actions:

”Find a park” becomes central, clean, and clear outside of the main navigation.
Plan your visit subcategories organized under “Find a park”.
The main menu categories are visible and submenus cleaned up.
Reduced main navigation to four important choices.
Removal of search box (find a park as a substitute).
Reduced footer buttons to essential options.
Get a pass more prominent in the main navigation menu.

Prototyping and testing

For the National parks website, I focused on redesigning the homepage and the navigation menu. I paper-prototyped both and stared with some paper prototyping and then lo-fi wireframing in Figma. All wireframes were done both for mobile and desktop as this was a responsive web redesign. With the lo-fi prototype, I started already testing to gather feedback and insights.

Was I heading in the right direction?

10 seconds tests

To test this first prototype, I conducted five 10 seconds test, and one in-person usability test. This was some of the feedback:

The homepage purpose is clear.
The main image is distracting.
Find a park stands out for most users.
Social Media buttons should align with color palette.
Design is busy, remove elements.
Issues with transitions in navigation.
Different images in mobile and desktop make RWD confusing.

Different iterations of homepage with navigation.

Visual identity for the new National Parks

To conceptualize how to redesign the homepage and navigation of the new National Parks site, I created a mood board. This mood board is a trip to nostalgia, nature, history, and earthy motives. The moodboard includes visual ideas, UI patterns, color palettes, and inspiration from other government agencies.

UI Style

In order to start working on the mid-fi prototype, I created the style tile and its main elements (typography, icons, color palette, and button states). I wanted the color palette to be based on earthy colors representing National Parks and their nature while also communicating credibility and trust.

I would also stress the importance of images as you can see in the prototype. Nps.gov isn’t using images in an attractive and appealing way to the user, so I was determined to show the beauty of the parks in the picture treatment.

Testing and further iteration

With the iterated version 5 of the prototype, including the new visual guideline, I conducted 4 usability tests for the navigation and the homepage. Below you can find a detailed template of the tasks conducted and the complete usability plan.

Feedback and iteration

A couple of users mentioned that they were distracted by the main picture while the search box wasn’t easy to read enough.

Iteration:

Improved the contrast in colors within the search box.
Improved contrast in texts and in menus.
Caption moved and scaled-down.

Change of hero image treatment (more opacity, another color filter) to avoid distraction.

Users had issues about the navigation text not fully clickable, the navigation not being integrated with the homepage style, and the wording of the menu about national parks with submenus that didn’t seem to belong there.