Story
As someone who loves National Parks, I initially found navigating the websites while planning my trips challenging. This inspired me to dig deeper and explore how the experience could be improved to help first-time users plan their visits more easily.
Year
2024-2025
Role
UX Researcher & Designer
Intro to the Problem
Since the pandemic, National Park visitation has surged, increasing by 4% in 2022 alone.
This growth reflects a renewed interest in exploring nature.
Challenges
Many visitors struggle with outdated, poorly designed websites.
Mt. Rainier’s website, a critical tool for trip planning, fails to meet modern expectations.
Impact
Frustration, accessibility issues, and decreased engagement.
User Interviews
I interviewed a mix of first- and second-time Mt. Rainier visitors to understand how they use the park’s website to plan trips. Most sessions were 30 minutes over Zoom, with one in-person.
Users consistently said the site felt cluttered and overwhelming. Key info like maps and safety tips was buried in dense text or repeated across pages. The "Things To Do" section, in particular, caused confusion.
Participants wanted a simpler, more visual layout to help them plan quickly and confidently. Many suggested a chatbot for quick answers and clearer page organization to reduce time spent searching.
Design Process
Brainstorming
Storyboarding highlighted challenges first-time visitors face when planning a trip to Mt. Rainier, guiding me to focus on the pre-trip experience.
Key Issues:
Overwhelming information
Scattered resources
Uncertainty about safety and logistics
Solution: I created AI Ranger, a chatbot that provides real-time info to simplify trip planning. Future versions could include a mobile app with GPS tips and offline support.
Storyboard: First-Time Visitor’s Journey
Brainstorming Post-its have been sorted into three main categories: Ranger Led Programs, Online Initiatives, and Park Information Pages.
How might we support Mt. Rainier visitors before, during, and after their trips with a clearer, more accessible digital experience?
I started the design process by thinking beyond just redesigning the Mt. Rainier National Park website. I wanted to create a companion app to help first-time visitors plan their trips.
To go beyond basic park info, I explored interactive features like mobile tools, ranger-led content, and trip planning support.
Using FigJam, I organized over 24 ideas with color-coded Post-its. I used techniques like laddering to understand different user needs, from getting weather alerts to improving long-term visitor experiences.
In the end, I narrowed it down to three main concepts: a Virtual Park Ranger chatbot, a “What to Expect” Visitor’s Guide, and Mobile-Friendly Offline Maps. Each idea could help make the park experience clearer, safer, and more engaging.
Storyboard lays out a first-time visitor’s journey through planning their trip to Mt. Rainier utilizing the AI Park Ranger.
Screen Design to Design System
Refining task flows from the storyboard made screen design more intuitive, focusing on key tasks like campground reservations and weather checks. Sketching revealed a need for visual variety, leading to hero images, white space, and improved interactivity. The second phase focused on toggles and buttons, though focusing on small details sometimes obscured the overall layout.
Version 1 of the task flow sketch shows users interacting with the AI Ranger to find a hiking trail, using a trip planning feature to add selected hikes.
Here's where the vibe comes together: a peek at the color palette, typography, and the building blocks behind the app.
Version 2 removed the trip planning section and focused solely on suggesting trails based on the user's skill level.
Key Features:
Focused on simplifying visual elements, especially icons, during component and menu design.
Earthy color palette to reflect the National Park System.
Hero image on each page to break up text and create more white space.
Wireframes
Taking a step back to review wireframing best practices helped me explore design solutions for the problem statement.
Here's the rough draft that sets it all in motion: a low-fi wireframe with notes mapping the flow of discovering hikes at Mt. Rainier with the AI Ranger.
Focusing on task flows allowed me to refine page layouts for a more streamlined experience. I revisited my paper prototype to adjust page organization and add necessary padding between elements in the wireframe.
Using this paper prototype, I mapped out and fine-tuned the flow for helping users discover hikes at Mt. Rainier with the AI Ranger.
Heuristic Evaluation
Focused on understanding task flows before critiquing to spot issues.
Noted design changes, especially for the “Plan Your Trip” section, like adding a progress bar.
Clarified trail difficulty language to improve user understanding.
Added a loading screen to show progress during tasks.
High Fidelity Mockups
Final Design Decisions:
Added an info icon to the hiking trail difficulty section to clarify definitions for users.
Used separate screens for the "Plan Your Trip" page and added a progress bar to track steps, with back arrows for easy editing.
Added a pop-up to the camping reservation section to clarify when users are leaving the app to reserve a campground.
Allowed modification of trip details on the itinerary page if plans change.
Included AI chat prompts to help users generate questions if they get stuck.
These screenshots show off the final draft of the Virtual Park Ranger App screens, ready to guide the way!
Learnings & Takeaways
This project was a great learning experience. At first, I struggled to define the vision, especially with the Plan Your Trip section. Paper prototypes played a huge role in figuring out the flow. Sketching allowed me to be messy and free, which helped me refine the experience once I moved to the digital version. Through user feedback, I realized the app would be most valuable to those who had never visited a National Park. They saw how much it would help with trip planning. Experienced park-goers liked the AI feature, but didn’t feel it was essential for their own planning. Working through these iterations, I was able to finalize the flow with a user-centered focus.