Yellowstone

YOUR ALL-IN-ONE GUIDE

This is a product design project for the Yellowstone website. It's not just a design endeavor; I've personally coded every aspect of it using HTML, CSS, and JavaScript. Through this project, I wanted to showcase my skills in front-end development, focusing on user interactivity and engagement. From interactive maps to dynamic photo galleries, I've put my heart and soul into creating a seamless and captivating experience for visitors.

CATEGORY

UI, UX Project, web development

SOFTWARE

Figma, Dreamweaver, Photoshop, Illustrator

TYPE

Individual

ROLE

Research, coding (HTML &CSS), website deployment, branding, and interaction.

DURATION

3 Months (Winter 2023)

SECONDARY RESEARCH

Even though having a high cultural value and being the world's first national park yellow stone is still not among the top 10 most visited park as tracked by the no. of visitors on the NPS website.

CURRENT SITE

While the NPS website serves as a valuable resource for planning trips to all national parks, its extensive scope can overwhelm visitors seeking specific information about Yellowstone.

USER INSIGHTS

"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."

USER INSIGHTS

"Not a fan of having to click menu to see the menu, I like when navigation is easier."

USER INSIGHTS

"Too much information. The food storage section is not important, it can be useful later once you have done the booking. I would like the main information to be on the front"

THE SOLUTION

A standalone website

to provide visitors with a more immersive and engaging experience that reflects the park's unique identity and offerings.

With simple navigation. And with the handy "Back to Top" button, you can quickly jump back to the start of the page whenever you need to.

Based on my primary research findings, I've redesigned our website to prioritize essential information. The booking option is now front and center, followed by critical updates like alerts, conditions, and regulations

Interactive map feature that not only showcases popular spots within the park but also provides real-time alerts such as road closures and stops.

Responsiveness

By employing coding techniques such as media queries and flexible layouts, I've optimized the site's layout and functionality across desktops, tablets, and mobile devices. This ensures that visitors can access important information and features on the go, enhancing their overall browsing experience.

OLD SITE MAP

NPS Website look and structure

NEW SITE MAP

"Learn how Yellowstone became the first region to be considered a national park"

BRAND GUIDELINE

I want visitors to feel a sense of connection and wonder as they explore Yellowstone, and that starts with providing them with clear, reliable information. Above all, I want the Yellowstone experience to be accessible to all. That means keeping things simple and straightforward so that everyone—whether they're a first-time visitor or a seasoned explorer—can feel confident navigating the site.

USER TESTING

Automatic Gallery slider

The picture gallery i had in the starting made users to actually click navigation arrows to go on to the next one which most of the users wont really put in efforts for and miss out on the CTAs. Hence i worked on the javascript part to add automic slider which slides the image after an interval.

Done by calling an Api from open weathermap

Integrated the OpenWeatherMap API

Current weather information

One valuable suggestion I received was to incorporate the current weather conditions of Yellowstone directly into our platform. This eliminates the need for visitors to take an extra step and search for this information on external platforms like Google before planning their trips.

Icon Set Consistency

The icon set on the website appeared inconsistent initially, but I've streamlined and standardized them to ensure uniformity and enhance user comprehension.