iOS/ANDROID APP CASE STUDY

Universal Orlando Resort's

New Interative Map

Header-Image
OVERVIEW

The map on Universal’s mobile app lacked essential features and a cohesive design, falling short of the expectations of both first-time visitors and returning guests.

With over a million monthly active users, the Universal Orlando mobile app is a key digital companion for both locals and international visitors during their time at Universal Orlando Resort in Florida. At the heart of the app is its interactive park map, which plays a vital role in helping guests explore the resort. It guides users to various attractions, highlights dining options, and serves as a general navigation tool throughout their visit. Despite its importance, the map had notable shortcomings that required thoughtful, detail-oriented solutions to enhance the guest experience.

ROLE & DETAILS

Lead Product Designer
Competitive Research, Wireframing, Prototyping, User Testing, Documentation

Team
1 Product Designer
1 Product Owner
13 Engineers

Design Timeline
August 2021 – March 2022
Launched: February 2024

Tools
Axure, Sketch, Invision

Inset-Images-POICard-2
Inset-Images-ParkSelector-1
THE CHALLENGE

"How might we create a unified and intuitive map experience that enables guests to view all categories, search for attractions, and seamlessly switch between park maps: all while keeping the interface elegant and accessible for a diverse range of theme park visitors?"

The existing map experience on the Universal Orlando Resort mobile app was fragmented and inconsistent. Popular categories like rides, shows, shopping, and dining were presented separately from essential amenities such as ATMs, guest services, and first aid. As shown in the image below, switching between categories—like going from rides to lockers—required multiple steps, creating a frustrating user journey. Adding to the confusion, the filtering system varied by category—for example, ride sub-filters could be toggled on and off by default, while other categories like shows, dining, and shopping required users to access an advanced filter menu. With no clear logic behind these differences, many guests ended up asking park employees for directions. In response, the product team aimed to streamline and elevate the overall experience. Key goals of the redesign included creating a unified interface for all map categories, simplifying navigation between different park areas, and introducing a new, intuitive search function—all to deliver a more seamless and guest-friendly experience.

MapFlow-4
Research-SixFlags
Research-GoogleMaps
Research-Disney
Research-CedarPoint
Research-BuschGardens
Research-Beijing
Research-AppleMaps
Research-AltonTowers-1
COMPETITIVE RESEARCH

I began by exploring established patterns within the highly competitive landscape of mobile map experiences.

Navigation apps have become an essential part of our smartphones. Knowing that guests were likely familiar with apps from competitors like Disney, Busch Gardens, SeaWorld, and Cedar Point, I began my research by analyzing those experiences to identify common design patterns. After reviewing about eight leading theme park apps, clear trends emerged—such as floating category pills, half-sheet list views, and primary controls positioned at the top of the screen. I aimed to incorporate these familiar patterns into the new Universal map experience to create a sense of continuity and ease for our users.

WIREFRAMES & USER TESTING

After developing multiple wireframes, I tested them with users to identify which designs resonated best and delivered the strongest performance.

Drawing from patterns observed in the market, I designed eight distinct wireframes to fully explore the range of possible solutions. Collaborating with my design team, we narrowed the options down to three strong contenders—specifically the first, second, and seventh concepts—and developed fully functional prototypes for testing on UserZoom.com. We tested these with 10 participants, assigning tasks such as locating the list view, using the filter function, and searching for an attraction. The results showed a clear preference for the first and second options. With this user feedback in hand, I proceeded with the next phase of the design process.

Wireframes-FloatingPills
Wireframes-SingleCategory
Wireframes-SingleUnderSearch
Wireframes-HalfSheet
Wireframes-MinimalParkTop
Wireframes-FilterListFloating
Wireframes-AllAtTop
Wireframes-Minimal
Prototypes-Multi
Prototypes-Single
LOW-FI DESIGNS & USER TESTING

Conducting in-person user testing with park guests required low-fidelity designs to allow for quick feedback and iteration.

This was the most exciting phase of the project—an all-day user testing session with 10 park guests at Universal’s Islands of Adventure. I began by discussing their current experience with the mobile map and uncovering key pain points. Then, I walked each guest through two interactive prototypes, with the primary difference being whether multiple categories were shown simultaneously or just one at a time. Guests completed tasks such as switching categories, applying filters, navigating the list view, searching for attractions, and changing parks. By the end of the day, preferences were evenly split between the two versions. This indicated that the final direction would need to be determined during the design phase in close collaboration with engineering.

DESIGN ITERATION

With two potential category approaches identified, the design iteration process was underway.

I had numerous opportunities to experiment with different header designs to determine what felt most intuitive and effective. Throughout this phase, I worked closely with product and engineering teams to ensure alignment and avoid proposing solutions that weren’t feasible to build. I began by focusing on key actions: category selection, sub-filter selection, list view, filtering, and searching. My goal was to find a way for all these elements to coexist seamlessly and establish the right emphasis for each. Considering product and engineering constraints—such as the search function not being ready for launch—I designed the interface to perform well with or without that feature. After reviewing character counts and usability, the single-category view emerged as the clear favorite. We also decided to enhance the experience by allowing guests to access all available sub-filters for every category without relying on the advanced filter, improving upon the familiar system guests use today. I really enjoyed this iterative process, and my background in graphic design proved invaluable. It allowed me to explore numerous design variations—like the point-of-interest cards shown here—ultimately crafting the best possible experience for our guests.

DesignIterations-1
DesignIterations-2
DesignIterations-3
Before-After-1
THE FINAL MAP DESIGN

I created an experience that felt familiar to users while significantly enhancing functionality.

By introducing tabbed navigation into the mobile app, we freed up valuable header space to highlight our biggest improvement: the category selector. This allows guests to instantly choose any category they’re interested in—whether rides, shops, first aid, animal service rest areas, and more—eliminating the need to navigate through multiple screens to find what they’re looking for. Key details like point-of-interest labels and attraction wait times are now displayed directly on the map, providing essential information at a glance. Each category features a sub-filter bar for quick, convenient filtering. Additionally, we introduced a unique search experience and added a park toggle at the bottom of the screen, enabling guests to seamlessly switch between park maps without leaving the map interface.

THE NEW SEARCH EXPERIENCE

Now guests can discover more by searching directly on the map.

During multiple user testing sessions, we asked guests whether they preferred selecting from recommended search results or conducting open-ended searches to explore freely. Guests expressed a strong preference for having both options, so we designed the experience to include them. In the new flow, guests are presented with recommended search options upon entering the search feature, while also having the ability to enter any search term and explore results across the entire resort.

SearchFlow
Inset-Images-Before-After-Map-Filter
THE NEW FILTER EXPERIENCE

The filter also required a significant overhaul.

The previous filter experience was overloaded and confusing, with too many pages and controls that didn’t always make sense—like sorting options in a map view. This complexity made for a frustrating user experience. In the new design, I simplified and streamlined the process to reduce visual clutter. Since the updated map displays only one category at a time, we cut the amount of filter information by 75% (compared to the previous version, which filtered across rides, shows, shopping, and dining simultaneously). Controls were reduced to just two types: easy-to-use toggles for quick activation and sliders where appropriate. To improve clarity, I added more context in the page title to clearly indicate the category being filtered. Additionally, a sticky "apply filters" button at the bottom of the screen provides an easily accessible touch target, helping guests move smoothly through the flow.

Inset-Images-CategorySelector
Inset-Images-ListFilter
DESIGN WRAP UP & USER TESTING

A final round of user testing confirmed that the product was ready for launch.

After several weeks of iteration and peer reviews with the broader UX design team, the final designs were completed. As the design phase neared completion, I continued user testing the prototype on UserZoom.com. In these sessions, every participant scored 90% or higher on key tasks such as locating or searching for an attraction, finding the list view, filtering the map, changing categories, and switching parks. With testing complete and the designs finalized, it was time to document the work, hand it off to the engineering team, and watch the map come to life!

WHAT I LEARNED

It's important to partner with product and engineering on the delivery method.

The original delivery approach for this project was primarily waterfall, with engineering input incorporated throughout. However, given the scope and complexity of the work, this quickly became overwhelming for everyone involved. Together with the product owner and engineering team, we pivoted to a phased rollout strategy, prioritizing certain features and functionalities to be shipped first. This shift allowed me to dive deeper into design variations and refine the finer details, while enabling the engineering team to develop more efficiently and deliver higher-quality results.