3-D Interactive Park Map

UNIVERSAL STUDIOS parks

Date

2023

End Client

Work done by Rebecca Bar for Chaos Theory Studios

Role

UX Design
UI Design
UX Leadership
UX Mentoring

3D Global Design Component

We guided our client, Universal Studios Destinations & Experiences, on how to meet park guest expectations of the brand with a trip experience that aligns with how they want to study, interact, and engage with points of interest to plan their trip before they arrive at the theme parks.

The challenge for us was to design a map that would be used by Guests to plan their trip in advance on their home laptop or desktop on the web, and also inside the park on the mobile app — to find attractions, dining, shows, restrooms and their general way around.

Where we started: (Pre-design)

Hollywood CA

Osaka Japan

Understanding guest needs

In addition to rigorous usability testing, we set out to understand how people are solving their trip planning challenges today.   

At The Growth Design Studio, we use a lot of observation. For this project, we found Universal trip planning social media groups as one helpful point for remote, anthropological research.

Some key learnings:

Park-go-ers need perception of scale for size of the parks and themed lands.
How granular people want to get in the pre-park planning stages with show times and opening times for different rides.
Guests want to understand park entry access from the Universal resorts from the map.
How much people were going out of their way to buy hard copy maps, and how critical it would be that the new digital map mirror the tangible map experience as much as possible.
What information is important for guests to see on a ride or attraction while planning their trip at home?

“Hello, I’m trying to plan an itinerary for our upcoming trip in 3 weeks. While looking at rides on the map, it seems like diff rides open at diff times in the morning. Is this the case? Some open at 9am, some at 8 and some even at 10. Thank you!”

“I googled it and then printed a large version of the map from my computer at home. It was nice because I could make notes and circle things that we wanted to see and do.”

“Before I went I actually bought a couple of maps on eBay so I could look at them. I prefer paper maps over the apps myself.”

“Thanks everyone! The maps don’t even have the resort names, unless I’m missing something. For someone who has never been it’s challenging!”

“Is there an online map that shows resorts and parks? I’ve never been and the app only shows the park, no idea how we will enter via our resort. Thanks!”

“I’m looking for a park map of Universal overlaid on a map of Magic Kingdom (or any Disney park) so that I can get an idea of the size, since I know Disney parks well and don’t know Universal. Anybody know where I could find something like that? ”

Heuristic analysis

After synthesizing new and older research to completely to understand guest pain points, we broke down our priorities for the new map into these core UX principles:

Visibility of systems status – We needed to prioritize map loading time so that people could use the filters and see the map updating in real time.
Jakob’s Law – Most users spend their time on other map and way-finding apps. We did a deep comparative analysis of core products people use in their day-to-day so that we can design a map that is intuitive to use with easily recognizable design patterns.
User Control and Freedom – Universal’s legacy map view lacked depth and reference points to help guests understand where they are in relation to where they need to go. This map needed to be more interactive and in sync with the brand’s core storytelling aspects and slogans – like “Ride the Movies” and “Let Yourself Woah!”
Recognition rather than recall – We needed to provide guests with clear and conventional signifiers to direct guests’ attention to important tools.

The results

We replaced the breadcrumbs with a floating backlink navigational element, treating the Map as a 3-dimensional experience that stands on its own, making it more interactive and delightful to use. The back icon is the same color as the Masthead which indicates that it’s a navigational element for the website rather than a map control.  

We placed all controls that manipulate the map on the map itself, to remove any cognitive load in regards to all the clickable options on the page.

The POI card component is a translucent overlay on which the POI cards sit. The benefit and design rationale of the translucent overlay was that when guests can see that the map continues underneath the component, the map’s interactivity will be more apparent to them. The desktop experience has a scrollbar that should default to the scrollbar UI and interactions native to the user’s operating system.

Design Intent

Leverage a modern and intuitive design solution for the Universal websites – Interactive Map, to reference where a “Point of Interest” (POI) is compared to other locations within the Universal theme park domain.

Our solution allows guests to easily plan their day and understand what is offered holistically in a given land before they visit the park.

Land Strategy

The new Global Design System map pins are colored to represent different attractions located within Universal Park lands.
We saw an opportunity to strengthen Universal Land branding and design communication in the POI cards by matching the stroke around the attraction image and the map pin icon next to the land header with its corresponding pin on the map.

Design Rationale

Our design solution will strengthen a user’s sense of visibility and where they e in relation to their chosen POI, including nearby POIs. Adaptive states and async tools will ease the delay in displaying important information.

We are using map design patterns that support recognition rather than recall. Clear and conventional signifiers will direct a guest’s attention to important tools.

There are multiple Callout categories to cover any Use Case:
Users will have control and freedom over their Interactive Map experience. Guests receive immediate responses that will help them achieve their goals while using the map feature.

Filters

By eliminating some and replacing other clickable elements, we expanded the map size on a guests screen exponentially on Mobile and Desktop, making it more interactive and accessible for people to use – and is more reminiscent of the physical park map people know and love.  

We used an e-commerce design pattern for the filters so they aren’t immediately covering the map experience and so that guests can intuitively understand how the map will update in real time.