iOS/ANDROID APP CASE STUDY
Universal Orlando Resort's
New Map Feature
OVERVIEW
Universal's map on their mobile app was lacking key features and cohesiveness, leaving a lot to be desired by first-time and recurring park visitors.
With over a million monthly active users, the Universal Orlando mobile application is a high-profile experience that accompanies locals and guests from around the globe during their stay at Universal Orlando Resort in Orlando, Florida. The app’s biggest feature is the park map, and it serves several key functions: A way to educate guests on where different attractions are located, inform them on what dining options are available, and generally help them navigate throughout their day. While the map is the most important feature the app has to offer, it did have some downsides – and those challenges needed to be solved with a high level of care and attention to detail.
ROLE & DETAILS
Lead Product Designer
Competitve Research, Wireframing, Prototyping, User Testing, Documentation
Team
1 Product Designer
1 Product Owner
13 Engineers
Design Timeline
August 2021 – March 2022
Tools
Axure, Sketch, Invision
THE CHALLENGE
“How might we design a single cohesive map experience that allows guests to view all categories, search for an attraction, and switch park maps, while also making it elegant and easier to use for a wide variety of theme park guests?"
The current map experience on the Universal Orlando Resort mobile app was very disjointed – there was a separate experience for viewing the park's most popular categories (rides, shows, shopping, and dining) and other important categories (like ATMs, guest service locations, and more). As demonstrated in the below image, you can see there are many steps involved when wanting to switch map categories from rides to lockers or first aid. Another confusing experience was that by default, guests were able to turn ride sub-filters on and off, but when it came to shows, dining, and shopping, guests had to use the advanced filter. With no clear reasoning why certain categories had separate functionalities, guests were ultimately left asking park employees where to find things. Product also wanted to plus up the experience of switching park maps and add a new search function. The goal of this redesign was to ensure guests had a one-stop-shop to view all of their map needs and ensure a great guest experience.
COMPETITIVE RESEARCH
I started by examining what patterns existed in the saturated field of mobile maps.
Navigation apps have become a core function of our cell phones. From Google and Apple Maps, to Disney, Busch Gardens, SeaWorld and Cedar Point's apps, I knew our theme park guests were familiar with our competitors' apps, so I started my research there to uncover any potential patterns. While examining around eight industry-leading theme park apps, I discovered some trends. Floating category pills, half sheets with a list-view, and major controls at the top of the screen were all common throughout these examples. I wanted to leverage these patterns in my work so that guests would feel like the new Universal map experience was familiar.
WIREFRAMES & USER TESTING
After creating many wireframes, I tested them with users to see if there were any strong winners.
Based on patterns I saw in the market, I created eight different wireframes to exhaust my design options. With my design, team I narrowed these options down to three (the first, second, and seventh option), and created fully-functioning prototypes to test on userzoom.com. After testing with 10 participants and having them go through tasks such as locating the list view, using the filter function, searching for an attraction and more, the results were in. Out of the three options, participants really enjoyed the first and second option – and with that data on hand, I moved forward into the design process.
LOW-FI DESIGNS & USER TESTING
User testing in-person with park guests required low-fi designs.
This was the most exciting part of the process – testing with 10 different park guests during an all-day session at Universal's Islands of Adventure. I asked guests about their current mobile map experience and we discussed their pain points. I walked guests through two different prototypes – the biggest difference being whether we showed multiple categories at the same time or just one – and had them change categories, filter, use the list view, search for attractions, change parks, and more. At the end of the day, guests were split 50/50 on their favorite, so I knew the decision on which version to move forward with would be answered in the design phase while collaborating with engineering.
DESIGN ITERATION
With two possible category directions to go in, the design iteration process had begun.
I had a ton of opportunities to explore various header treatments to see what felt best. I partnered with product and engineering heavily during this phase to ensure we were all on the same page and that I wasn't proposing something we couldn't build. I started with my main actions: category selection, sub-filter selection, list view, filtering, and searching. How do all of these elements live together in harmony? What's the correct emphasis to have on each? Product and engineering constraints came into play: we wouldn't be launching with the search functionality, so I knew my design had to hold up with and without that feature. And looking into character counts, the single-category view became the clear winner – we also decided to allow the guest to view all available sub-filters for every category without having to use the advanced filter, plussing up an experience they are familiar with today. I really enjoyed this process and my background in graphic design helps me excel here: fleshing out many different design variations (like the point-of-interest cards you see here) to ultimately land on the best design and experience for the guest.
THE FINAL MAP DESIGN
We ended up with an experience that felt familiar, but added a ton of functionality.
By introducing tabbed navigation into the mobile app, we freed up space in the header to put our biggest win: the category selector. From here, guests can select any category they're interested in – rides, shops, first aid, animal service rest areas, etc. – no longer do guests need to navigate throughout the app to find the locations of different things. Point of interest labels and attraction wait times have been added onto the map to bring the important information forward without a tap. Each category also gets a sub-filter bar for quick-filtering at their fingertips. We've added a unique search experience to the map and also a park toggle at the bottom – easily allowing a guest to jump between park maps without having to leave the map experience.
THE NEW SEARCH EXPERIENCE
Now guests can discover more by searching directly on the map.
During various user testing sessions, we asked guests if they'd prefer to search and select a search result or be able to perform an open-ended search and explore naturally. Guests preferred having both options, so we built both! In this new flow, guests will be provided with recommended search options upon entering the search experience and will ultimately be able to select a specific attraction or explore any string of characters and view those results resort-wide.
THE NEW FILTER EXPERIENCE
The filter needed an overhaul, too.
The current filter experience was a catch-all that had way too much going on. Some things didn't make sense (how do you sort in a map view?) and there were just too many pages and controls to make this a good experience. With the new design, I cleaned up the experience and made it less overwhelming. Because the new map only shows one category at a time, we paired down the amount of information by 75% (the current experience allows you to filter by rides, shows, shopping, and dining). I also paired down the amount of controls to two: easy-to-tap toggles that enable with one-touch and sliders where they make sense. I provided more context in the page title to ensure guests knew which category they were filtering on and a sticky "apply filters" button at the bottom was an easier touch target for guests to move through the flow.
DESIGN WRAP UP & USER TESTING
One last user test ensured that the final product is ready for its debut.
After many weeks of iteration and peer-reviews with my larger UX design team, final designs were completed. As I got closer to wrapping up this design phase, I continued to user test my prototype on userzoom.com. In testing, every participant scored 90% or higher in all of the following tasks: locating or searching for an attraction, finding the list view, filtering the map, changing categories, and switching parks. Once the testing analysis came to an end and the designs were buttoned up, it was time to document, deliver 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 method for this project was mainly waterfall with engineering input involved throughout. But with a project of this scope and magnitude, that quickly felt too overwhelming for everyone involved. My product owner, engineering team and myself pivoted course and decided that certain features/functionalities would ship first – allowing all of us to focus and prioritize certain screens first. This allowed me to focus on design variations more deeply and pay more attention to the little details, and also allowed the engineering team to build quicker with better quality.