RESEARCH
Explore & Discover
To begin the trek of redesigning the NPS.gov website, we began brainstorming and gathering information of different users we could empathize with. We developed 2 proto-personas based purely on assumptions and prior experience. Our first persona Jonathan, targets the avid outdoorsman and national park goer, while Cindy, our occasional working professional and mother, targets those with an recreational interest for the outdoors.
These serve as a starting point for us to reference as we consider possible user solutions and challenges in developing the information architecture later on.
Next, we asked ourselves a simple question.
Why do users visit the National Parks Service website?
Plotting Our Route
To answer this, we defined a clear objective to follow, and narrowed down our user path for testing and future flows.
Objectives
Discover how users navigate the NPS.gov website to locate a list of all the national parks in Utah, access the FAQ page, and learn more about obtaining passes.
Usability Tasks
1. Find the list of national parks serviced by NPS in the state of Utah.
2. Find out the cost of an annual pass.
3. Locate the FAQ page and find out how to obtain a park entrance pass.
DEFINITION & SYNTHESIS
Analyze & Test
As hands-on researchers, we analyzed competitors and pinpointed user issues firsthand. Through competitor analysis and heuristics evaluation, we drew conclusions on what worked and what didn't for existing interfaces.
We then reached out to our networks and conducted 5 short usability tests each lasting under 10 minutes. This short amount of time gave us an idea of initial pathways users take and defined problems they faced navigating the current interface. We compiled the annotations together along with the previous evaluation.
Have we found the answer?
Let's take a look.
Digging Deeper
Based on the testing and analysis, we discovered the reasons behind why people visit the NPS site. Visitors needed resources regarding their concerns when visiting a National Park. They also came to the site to find possible inspirations in planning future activities. Lastly, they wanted detailed information before actually making their way to a park. For a more realistic approach, we also put ourselves in the minds of our proto-personas, Johnathan and Candice.
Possible Questions Asked
What’s the current weather situation?
Are guided tours expensive?
Are campgrounds even open?
What amenities will there be for me?
Problems Discovered
- Most users had trouble locating the FAQ page and recommended that it be placed in the main navigation.
- National park images on state page are too small and need to be enlarged for better viewing.
- Users found too much content on pages overwhelming and preferred a more condensed version of information
IDEATION
Organized Chaos
In order to understand the content of the site, we organized the existing navigations of both headers and footers based on Location, Alphabet, Time, Category, and Hierarchy (implementing those that apply, of course).
Collectively we decided what information to keep, what to eliminate, and how we can combine certain elements into a more intuitive navigation. Similar to the previous process we also conducted a quick heuristic evaluation of both navigations.
Referencing our proto-personas and addressing our key findings, we produced a reorganized sitemap with defined primary and secondary navigations.
Now for the fun part.
Building the foundation.
Based on our collaborative research, we individually began the journey of creating new wireframes of the NPS site. First, I focused on the redesign of the header and footer navigations since we recently reorganized it's structure. Minimal, easy to navigate, navigations were the focus here. To address user's frustration of locating important links I made the decision to create a secondary menu option where all links are easily accessible to minimize clutter and overload of information.
Keeping It Simple
Simplicity played a key role in the redesign of the website. Adding UI style elements such as cards and carousels to replace certain informational elements kept the site free of overwhelming amounts of information, filtered topics by categories and related events, and allowed for a more appealing representation of activities and events. Making a main hero image with a call to action button allows users to focus on their designated task of finding a park and learning more about the park of choice.
To maintain the NPS branding, I collaborated with Annie to create a UI style tile that served as a guide with our combined inspiration for the new look and feel of the site. Drawing from the NPS logo and nature elements, the UI design is minimal yet carries out a feel for exploration and adventure with a touch of bright colors for contrast.
PROTOTYPING
High Fidelity
Within the high-fidelity prototype, users can navigate the site to find a park and explore current activities and events. Users can interact with the map as well to locate a park.
Access Anywhere
Of course, with a responsive design, changes were implemented
for mobile users.
The subscription now comes up as a small overlay when a user enters the main NPS getaway page. From there they can interact with the form.
Find A Park’s dropdown menu was turned into the native iOS scrolling menu in order to maintain simplicity.
Due to limited space on mobile screens, elements such as buttons were stacked on top of one another.
The map page for choosing which parks are located in Utah was condensed to fill 50% of the page.
Micro-interactions and transitions were also added to create delightful interactions for users and to reinforce our solutions of creating and intuitive, yet easy to navigate interface.
USER TESTING & OUTCOMES
Final Test
With a visually appealing desktop and mobile version ready to go, we reconvened as a team to create a Hi-Fi Usability Testing plan for 6 participants. Like all designs, we want to make sure it functions smoothly without any dead ends.
Our goal is to see if users can easily navigate the Find a Park function and find other important information.
Objectives
- Can a user navigate to the Utah page using the Find a Park block?
- Can users find information on Arches National Park?
- Can users find information on the Annual Park Pass?
- Test if users can find the Find a Park function intuitive and seamless without dead ends.
Like all things,
Everything isn't perfect.
Road Block
Users found dead ends in the navigation, complicated animations in the scrollable dropdown menu on the Find A Park page, and felt confused when it came to navigating the map on the mobile version.
I fine tuned the dead ends in the prototype, changed the scrollable animation from a click to a drag interaction to simulate scrolling, and added helper interactions for users on the map page.
CONCLUSION & TAKEAWAYS
Journey's End
The new redesign highlights gorgeous landscapes of the parks inviting users to learn more and explore different activities, events, and news associated with our nation's parks.
With our journey at its end, here are a few awesome takeaways —
Users are the Backbone
Drawing from our challenges and goals, users are the backbone in any project. Referencing the research we gathered and listening to the feedback from testing all contributed to the successful redesign of a responsive website.
Future Opportunities
With more time, I'd like to build out the rest of the site, possibly with more details and facts pertaining to the parks. Also build on the educational pages to see how users looking for educational opportunities can sign up and register for future events for their organization or school.