.png)
CASE STUDY
NATIONAL PARK SERVICE
• University of Minnesota UX/UI Bootcamp Design Challenge
• 4 week sprint
• Solo Project
• My Roles: UX Researcher, UX/UI Designer
OVERVIEW
For this design challenge, I was given the scenario of being hired by a government agency, and taking on the task of analyzing and redesigning their website’s content structure, navigation, visual design, and branding. The agency: The National Park Service. I was given four weeks to design and test a responsive website solution.
The National Park Service (NPS) has operated since 1916 and is responsible for safeguarding the natural and cultural resources of North America's national parks. With over 318 million national park visitors a year, the aims of the organization are revitalizing communities connected to the parks, preserving their history and celebrating their heritage, and creating opportunities for people to engage in outdoor recreation.
CURRENT SITE
The NPS website provides information about the national parks in the United States. It includes features such as park information, activities, events, and maps to help visitors plan their trips. The website also offers educational resources, such as historical and cultural information about the parks, as well as resources for teachers and students. Additionally, the site features an online store where visitors can purchase park-related merchandise and books. Finally, the website also serves as a platform for visitors to donate to the National Park Foundation, the official charitable partner of the National Park Service.
HEURISTIC EVALUATION
I began with a heuristic evaluation to examine what issues could be identified early on. One of the things that stood out right away was the aesthetic and design, and how information is displayed. The current website has lots of information, and it's laid out in ways that for some may be confusing or even overwhelming. For instance, items that seem to be related or would make sense to be lumped together are spread out in multiple places (such as park search options). There seem to maybe be more items than needed. Additionally, the website's extensive range of features and options within the hamburger menu could possibly benefit from being more prominently displayed on the homepage, perhaps allowing for easier navigation and enhancing user experience.
NPS homepage
Also noticeable was the inconsistency in design across the site. Some pages seemed to be different, varying in theme, info structure, navigation in some cases, and/or incomplete in design, almost making it feel like you were all of the sudden on a different website.
With heuristic evaluations, however, the tricky part is knowing what heuristics to zero in on, and trying to avoid bias. Additionally, this method won’t catch all of the issues that actual users may experience, which is why I wanted to do some user interviews and observations.
NPS News page
WHO ARE THE USERS?
I conducted user interviews with 6 participants. I wanted to talk with people that have visited national parks, were outdoor enthusiasts, but also people that have never been to a national park, but were curious.
I asked questions to learn more about their background and if/how they would use a site like the NPS. The interviews gave me a better picture of who users of the site are and what they want from it.
The folks I talked with included campers, glampers, hikers, those curious about natural history, and people that plan family trips. Their utilization of the NPS is to get logistical information on parks of interest in order to best plan their visits.
TASK 1
Find general information page for
Voyageurs National Park
TASK 2
Find fees and passes information for
Voyageurs National Park
USABILITY TESTING
Based on the interviews and heuristic evaluation, I crafted a research plan with the objective of assessing how users search for info on a specific state park, and how easy it is to do so.
I picked a park that was mentioned by one of the interview participants, Voyageurs National Park, located in northern Minnesota, and came up with two basic tasks I would ask users to complete through the NPS site. The first task was to navigate to the general information page for the park, and the second task was to locate information on fees and passes for the park.
I conducted five usability tests, and as the users navigated the site, I noted areas of confusion as well as questions/comments that came up.
USER INSIGHTS
There was an overall observation of difficulty that users seemed to experience. This could be seen with attempts to use the search bar, exploring the numerous links/dropdowns, and various tabs.
The Voyageurs general info page was located by all of the participants, but the processes used and amount of time needed varied a lot. The difficulty the users faced was even more apparent when asked to perform the second task of locating fees and passes info, which not everyone was able to do.
Destiny, Cambridge
"There were almost too many search options. I wasn't sure which one I should use."
Angel, Chicago
"The information for fees is way too buried in all of the other stuff on the page. Honestly, I only found it by accident."
Lauren, Oxnard
"Once I did get to the fees page I was kinda unsure if I was in the right place because the page looked different than the other pages I'd been on."
CONTENT
STRUCTURE
ODD
NAVIGATION
DESIGN
CONSISTENCY
FINDINGS
Combining the data from the interviews and usability testing gave me a big picture view of the issues users were facing with the current NPS site, and what they would like to see from it. Upon analyzing the data, the insights gained seemed to suggest that users felt the content on the site could be structured better, the navigation feels odd, and that there are design consistency issues across the pages of the site.
WHAT CAN BE DONE?
With the problems defined, I used feature prioritization to explore what could be the most viable improvements possible at the moment (High/Low Impact, High/Low Effort), taking into consideration both the value brought to NPS site users, and the goals of the NPS.
This led to the plan of a redesign of the website, specifically the park search functions, in which I would structure info in a more uniform and centralized way, creating more intuitive navigation, and a visual rebrand.
RESTRUCTURING
To find new information architecture for the redesign, I conducted 10 card sorting sessions to see what would make sense to users. These sessions were open and moderated, where I encouraged the participants to think out loud as they sorted, and concluded with debriefs in order to get a better understanding of the rationale they used.
With this data I was able to spot common groupings and similar themes/categories, which I then used to create a new sitemap.
NEW NAVIGATION
Using the newly created sitemap, I constructed new navigation UI, representing primary and secondary pages.
New desktop navigation UI
New mobile navigation UI
WIREFRAMES
With new navigation created, I then designed wireframes for desktop and mobile for the primary and secondary pages. The design and features reflected insights gained during the earlier phases, with an effort made to reorganize and centralize information, structure content in a way that would feel more intuitive, take out the guesswork and make navigation easier, and streamline processes.
Desktop wireframe
Mobile wireframe
Is the point of each page clear?
Does the design seem to make sense?
What (if anything) stands out about it?
Does the navigation seem straightforward?
FIVE SECOND TESTING
These wireframes were then turned into clickable low-fi prototypes. I needed to find out if I was on the right track with the potential design solutions, so I conducted 5 second tests with 5 participants to get a sense of users' upfront impressions, and determine if key points were successfully being made.
Answers I received from follow-up questions let me know that I was heading in the right direction. There seemed to be few questions regarding which menu options to explore when looking for certain information, what each page was about, and the placement of content seemed to align well with the participants' expectations.
VISUAL REBRAND
As a next step I created a style tile to give the aesthetic of the site a bit of a makeover. The idea for the rebranding was to create a visual language that communicated more clearly the themes of “Nature,” and “Outdoors,” which users didn't seem to really get from the current site when asked during interviews. I went with a color palette of Earth tones to create that feel, but also went with a dark theme, giving the site more depth and less of a stark appearance.
HI-FI MOCKUPS/PROTOTYPES
With this new visual language, I applied it to the wireframes to create high-fidelity mockups. Once this was done, I made the mockups into clickable prototypes that could be used for user testing.
Desktop with applied style tile guidelines.
Mobile with applied style tile guidelines.
USER TESTING
It was now time to take this prototype for a test run to see how well it addressed user needs, and determine if the design decisions that were made actually created greater ease of use and a more pleasant experience. The focus would be on the function of finding a park. For my reworking of the "Find a Park" page, I created a UI that featured a search bar, and 3 drop-down menus that allowed users to search by "State," which had the US states listed alphabetically, "Park," which featured 20 National Parks listed alphabetically, and "Activity," which listed 20 recreational activities alphabetically. The idea was to make things as streamlined and straightforward as possible.
Desktop hi-fi prototype.
Mobile hi-fi prototype.
I asked 6 participants to complete 3 tasks:
TASK 1
Find parks located in the state of California.
TASK 2
Find El Camino Real de Tierra Adentro
National Historic Trail.
TASK 3
Find parks that offer Astronomy as a recreational activity.
100%
Locating a park in the state of California
100%
Finding a park based on activity
83%
Locating a park by name
SUCCESS RATES
During the testing, all 6 participants were able to successfully search for parks in California and by activity using the drop-down menus. There was also attempted utilization of the search bar in some instances. However, when searching for parks by name, only 5 out of 6 participants were able to complete the task.
The user who experienced difficulty reported that they had trouble with the spelling of the destination, and that the search results in the drop-down menu were not sorted in a way that made it easy to find the requested location, as some parks with similar names were also listed. An attempt was made to use the search bar as well, but given the limited interactive capabilities of the prototype, the attempt could only go but so far, and therefore the success of this method could not be fully determined. However, the user also stated that they probably wouldn't be able to correctly spell the rest of the location beyond the word "Camino."
Although that is something that might be somewhat outside of a designers control, it did raise the point that search functionality and error handling for searching by park name would be very important pieces to focus on, which could involve implementing a spell-check feature, providing autocomplete suggestions for search queries, and improving the sorting and filtering of search results. Overall though, the results of the testing were promising.
FEEDBACK
Feedback from the user testing provided notes regarding more clearly defined options, content structure, and UI improvements.
Given some of the issues users faced on the existing site with navigation options that were not clearly defined, it was mentioned that links such as “Learn More” could be more specific so that users know exactly where they're being taken.
On the Find a Park page - swap "Your Park is Waiting" section with Search section. The park search call to action should be the focal point. If a user is unsure what to look for, then they could explore the "Trip Ideas" section for inspiration.
Mobile "Find a Park" page - larger drop-down menus, and arrange them vertically instead of horizontal. This would improve ease of use.
CONCLUSION
There were two big takeaways from this project:
One was the importance of Information Architecture. It’s a crucial component for creating an enjoyable user experience. Info should be organized and structured in a way that is intuitive and easy for users to navigate. People come to a website like NPS to accomplish certain goals, and without good IA they may struggle to accomplish those goals. For the current NPS site, all the pieces are there, but they’re laid out in a way that makes things a bit more work than they should be. By carefully considering the organization of content, IA can help make sure that users can quickly and easily access the info they need, which leads to increased engagement, satisfaction, and improved business outcomes.
The other takeaway, was that having done this redesign by myself, it reinforced the significance of practicing and understanding the design thinking process, the importance of each role on a UX team, and it reiterated how all the pieces work together. A UX team leverages the diverse skills and experiences of its members. By collaborating, team members can share insights and come up with more innovative solutions. A thought that crossed my mind numerous times while working on this was, “What did I miss? If I were working with others on this redesign, what perspectives might they have brought to the table?” It would be interesting to see how things would shake out if I approached this redesign again, but being able to defer to others' expertise.