CASE STUDY
IMPROVING USABILITY AND AESTHETICS OF PRESIDIO.GOV
A national park inside the City gets lost in the details and the website that can help clear the fog

EXISTING PRESIDIO.GOV HOMPAGE

Mockup-EXISTING-Presidio.png

THE CHALLENGE

In order to improve the usability and aesthetics of The Presidio of San Francisco website, we proposed to redesign the website by integrating updated UI components and vivid imagery.

I was a part of this project with a partner as UI/UX designers to identify usability issues and redesign the website for better functionality in navigation and improved aesthetics.

Presidio.gov is not quick and easy.
 You had to think through and guess where stuff might be.

EARLY INSIGHTS

Throughout the Presidio.gov website, we found that the site was fairly clear but certain aspects needed to be addressed, including :

Early insights.png

Content Organization
Unclear navigation & required lengthy searching for desired content

Underwhelming Imagery
Does not reflect the beautiful, diverse environment of the Presidio and everything the park has to offer

Lack of Iconography
Difficult to identify what the walking & biking trails offer without further research and searching

Plan your visit and things to do categories sound so similar. I had to hunt around for the right page.

LOOKING DEEPER

In order to resolve the issue of poor navigation, my team and I set ourselves the task of creating a more thoughtful solution. We analyzed the information architecture and conducted user tests to identify areas for improvement.

LOOKING DEEPER.png

PRIMARY NAVIGATION

The taxonomy of the primary navigation is not intuitive for visitors who are new to the website or to the national park.

CONTENT MESSAGING

The main hero image and the call to action button does not accurately explain what the Presidio is or how to “Visit Now.”

SECONDARY NAVIGATION

The pages should be recategorized to ease in the search for desired content.

How might we make it possible for a diverse set of users to utilize Presidio.gov with ease and experience all the national park has to offer?

BEGINNING AT THE ROOT

Starting with the building blocks of a site map, we began by re-ordering the website to help organize and clarify the content. The Presidio is a vast and varied park and it’s website requires careful planning and consideration.

PRESIDIO.GOV SITE MAP

DESIGNING A NEW PERSPECTIVE

Once the site map was sorted, my partner and I begain developing lo-fi wireframes, cognizant to highlight the rich landscape and long history of the area. We conducted A / B testing to determine the best way to move forward with the navigation.

PresidioWebPage_TestA.png

LO-FI TESTING . A

PresidioWebPage_TestA.png

LO-FI TESTING . B

TESTING GIVES INSIGHT

Based on feedback from both A/B testing and 5 second tests as well as further research, we refined the lo-fi wireframes.

Testing insight.png

Search feature interaction updated

Footer information reorganized

Navigational pull-down menu interaction updated

Header updated to include white space for visual relief

East is east, and West is San Francisco.

– O. Henry

BRANDING MAKES A MARK

In order to provide a stronger impression that the site is about the Presidio and not just San Francisco, I created a new logo mark for the website. It is inspired by the rise and fall of the Golden Gate Bridge and the military architecture, reflecting over 200 years of development under three different nations.

Presidio Logo copy.png
Presidio Logo RO copy.png

FINDING THE RIGHT VOICE

The Presidio is where San Francisco all began. Today, the Presidio welcomes all with its beauty, nature, history, recreation, and family activities. A place that represents so much needs a website that shares the beauty and diverse history with clarity and easy access.

CLICKABLE PROTOTYPES

With pages like this and this rich information, I never knew all this was happening at the Presidio!

TESTING AND TESTING AGAIN

We conducted interviews to test our responsive web design, user interface and navigation. Users were asked to explore our clickable prototype and provide feedback.

  • Users felt that the Presidio logo could be larger

  • The user interface was clean and easy to navigate

  • Majority of those tested found the use of icons effective; it helped them find information without digging through muliple pages

  • Overall, testers reported that the website was visually appealing and informative.

KEY FINDINGS AND NEXT STEPS

Good imagery selection is important – it provides a richer user experience and tells a strong visual narrative of what the Presidio has to offer.

Users like quick references rather than having to go through too many steps to find what they are looking for.

By refining how the content was organized, users found that the navigation was more intuitive.

Going forward, we would like to include a digital billboard on the home page that will highlight upcoming events.

Further, we would build out additional pages with a similar clarity of content and information.

In addition to the hero photography, we would like to incorporate the use of videos to further illustrate the beauty and wonder of the Presidio. 

EXPERTISE

UI_Icon_v2.png

UI/UX DESIGN

Branding_Icon.png

BRANDING

Visual_Icon.png

VISUAL DESIGN