Chinese Garden from Huntingon

The Huntington Comes Alive—Digitally

The Hook

"Create a more dynamic interaction between the users and the garden through a digital lens."

This semester, I originally planned to expand this project significantly. Instead, I focused on refining the UI, revisiting it multiple times to improve the task flow based on user feedback. This page will guide you through how I gathered user insights and used them to adjust and enhance the flows.

Brief Description

Spanning approximately 130 acres, the Botanical Gardens showcase living collections across 16 breathtaking themed gardens, home to over 83,000 plants—including rare and endangered species. This vibrant landscape also serves as a hub for botanical conservation and research. With such a vast and culturally rich space, visitors are invited to explore the beauty and diversity of global horticultural traditions. This project aims to enhance that experience by offering a digital platform that deepens visitors’ understanding of both horticulture and art, enriching every step of their journey through the gardens. The Huntington recently unveiled refreshed branding and an updated website, offering a more modern digital experience for booking tickets, exploring the grounds online, and shopping for merchandise. However, these enhancements are currently limited to the website. This presents an ideal opportunity to introduce a dedicated wayfinding app—one that guides visitors through the gardens, provides immersive digital learning about the grounds, and extends access to shopping features, all from the palm of their hands. site here.

Problem Statement

“Visitors of the museum need an interactive digital tool to allow more freedom during their experience and provide a an interactive educational tool.”

Thoughts toward a Solution

Insight 1: Upside down Map

When visitors enter the grounds, there is a station for people to pick up a map. However the map they provide is upside down, my idea was to make a large map upon entrance, facing the correct direction and allowing users to scan a QR code for guidance.

The Entrance

A way to help the visitor understand the grounds better would be to offer a large map at the entrance. The visitor could see the map in a larger scale and be able to scan a QR code to connect to the app. -They would be able to find exact directions using the app, bus pick up and drop off times/locations, and be able to find other necessary locations including: restrooms, cafes, and wheelchair pickup/drop offs. ***place sign facing south so map is not upside down to viewer

map ground currently

Adding Entrance Signs

When exploring the ground, the visitor has to rely on the map to understand where they are. The idea of adding entrance signs when someone enters a new section of the gardens would help people understand where they are more easily. The material would be the same as the wayfinding sign. Also I would like to flip the direction for this sign so viewers can view it the correct direction

Updated Text and Color

Refresh the sign using the updated font and use white to have a high contrast. For the entrance signs, the main could would be a darker green with the updated header font.

Adding the digital experience

Allowing the user to scan the QR code so they are able to connect with the app in the location to give more detail about where to go.

map ground facing south map ground facing south suggested solution

Insight 2: Lack of Entry Signs

The museum is vast and the given map is upside down. This leads to confusion during exploration. When a visitor enters a new garden, there is not a sign that welcomes them to a new area. By adding signage with a scannable QR code, this will help visitors understand where they are.

Adding Entrance Signs

When exploring the ground, the visitor has to rely on the map to understand where they are. The idea of adding entrance signs when someone enters a new section of the gardens would help people understand where they are more easily. The material would be the same as the wayfinding sign.

Updated Text and Color

Refresh the sign using the updated font and use white to have a high contrast. For the entrance signs, the main could would be a darker green with the updated header font.

Adding the digital experience

Allowing the user to scan the QR code so they are able to connect with the app in the location to give more detail about where to go.

solution to add entrance sign entrance sign details

Insight 3: Updating wayfinding signs

The Huntington recently rebranded, my idea was to bring this branding to life throughout the gardens. Also, I wanted to add QR codes to help visitors locate and guide themselves through the signage.

Updated Wayfinding signage

The idea here would be to keep the same material but updating the design to match the new “H” to align with the branding.

Updated Text and Color

Refresh the sign using the updated font and use white to have a high contrast.

Updated Arrows

Aligning with the website and using the new navigation arrows in white for high contrast.

Adding the digital experience

Allowing the user to scan the QR code so they are able to connect with the app in the location to give more detail about where to go.

solution to updating wayfinding sign wayfinding sign details

Insight 4: Scannable Foliage Signs

The signage for the foliage links to their current experience through audio guidance. I would want to update the signs to describe the foliage and help educate the user.

Updating the foliage sign

Minor adjustment here to add the below details

Updated Text and Color

Refresh the sign using the updated font and use white to have a high contrast. The base will be a darker green to blend in more with the background and the font will be updated to the body copy.

Adding the digital experience

Allowing the user to scan the QR code so they are able to connect with the app in the location to give more detail about the specific foliage, tree, or flower they are looking at.

solution to foliage sign foliage sign details

The Digital Experience

Task Scenario for Round 1 Testing

TASK SCENARIO 2

You are walking along the trail at the grounds and you see a wayfinding sign with a couple of options of where to go next. You aren’t sure and have the time to explore so you scan the QR code. You find an unusual rock to visit in the Chinese Garden- follow the navigation to take you there.

User 2 task flow diagram

Process + Tools

tools used for project

Lofi prototype

I started out with my task two low fidelity mock ups as seen below.

screenshots of lofi prototype

Task 2 First round Feedback

In reviewing the prototype, several usability and design issues were identified. Text size was too small, and spacing was inconsistent throughout the interface. The breadcrumb navigation and secondary nav bar felt awkward, suggesting a need to rethink the back button placement. Icon imagery appeared clunky, and hit boxes were too small for easy interaction. Navigation overall felt bulky and unclear. Additionally, both the location cards and buttons required updates for greater visual and functional consistency.

Based on this feedback, I updated my task 2 and created additional screens. Below are the revised tasks based on the feedback.

Task 1 revised

Task 2 revised

Task 3 revised

The Huntington:rebrand

I wanted to pay as close attention to The Huntington’s recent rebrand

The Huntington

Moodboard

moodboard

Type | Main

main type

Type | Accent

accent type

Photography

accent type

Expert Feedback

Cameron Rennacker, MS

I met with my teacher at Flatiron, who helped give me quite a bit of feedback to improve my project

Task 1 revised

Task 2 revised

Task 3 revised

Next Steps

For the next phase of the project, I’ll continue refining the icon system to ensure each one is meaningful and contextually appropriate. I'll also develop additional task scenarios and screens to support a more complete user experience. After implementing these updates, I’ll conduct another round of testing and iterate based on the feedback.

Bibliography