Hollywood
*All content shown is copyrighted and owned by Universal Parks & Resorts. This content is shown only to demonstrate some of the work I have accomplished in my role as a Global UX/UI Designer.*
All content shown is currently public and able to view online or at the resorts.
A little about this project…
Dining Reservations at Universal had originally been connected and utilized with an external vendor. To really make a more efficient process for all of our Guests, we knew it was time to create an internal, seamless reservation experience to be enjoyed by all.
This project was the answer to designing within the Global Design System, in addition to ensuring a beautiful and seamless flow.
Roles & Details:
Lead UX/UI Designer
Wireframing,
Competitive Research,
Usability Testing, Documentation
Team:
2 UX/UI Designers
1 Product Owner
10 Engineers
Timeline:
July 2022 - December 2022
Tools:
Sketch, Invision
The Problem
The external system attached to our reservation system was a multitude of things:
Outdated
Poor User Experience
Out of Brand for Universal
Essentially, the goal was to create a new system that was not only cohesive with our brand, up to date, but also served to create a better user experience for our user. We also implemented our design system throughout the entirety of the product.
Competitive Research
There are many reservation systems that exist in the world, so it was easy to come by many different ways of executing a reservation. What was interesting, though, when performing my competitive analysis, was an obviously lack of usability and accessibility testing. In my designs, I wanted to ensure that I was taking into account all types of abilities, and designing a system that was simple, easy to maneuver, and a system that our Guests feel confident that they can utilize during their trip.
The other theme parks that had Dining Reservation systems also forced their user to log in to an account. During our testing, which I will explain below, this caused a lot of friction and frustration. To ease this, we chose to offer the opportunity to log in, but also to continue anonymously.
Wireframing with our Design System & Creating Flows
I spent a good amount of time in the beginning of this project creating initial/rough flows of how the user would interact with this product, and how they would get from Point A to Point B. A main challenge/constraint in this work was designing it according to our already existent design system components. Throughout the wireframing journey, I ended up experimenting with adding ‘new’ components that could be reused, but also manipulating our existing components.
First Round Wireframes & Prototype
User Zoom Testing
There’s no better way to confirm that the experience you crafted is actually functional and a successful user experience, than with usability testing. After doing a bit of on-site testing with current Team Members, I created a few tasks that our testers on User Zoom would complete. I came up with four separate tasks, and created individual prototypes for each.
After creating an in depth testing brief that included the reasonings behind the questions asked, my hypothesis, and ultimate goals for testing, I identified that my main goal was to understand how simple it was for the User to get through the booking flow (given our constraints).
The four tasks we asked them to complete were:
#1: Navigate to Dining Reservation Flow
#2: Book a Reservation
#3: Edit Your Reservation
#4: Retrieve Your Reservation
Being able to identify insights such as time it took for the User to get from Point A to Point B, and hearing them speak aloud through the process was immensely helpful.
Prototype for Task #1
User Zoom Results
After 15 participants completed these tasks, we had some good feedback. See below for some additional statistics:
15
93%
Participants
Successfully Located Their Previous Reservation
100%
Successfully Edited Their Reservation
1 Min
Average Time to Locate Dining Reservation Flow
67%
Content with Dining Reservation Experience
I was able to review different videos and watch what the User interacted with, and how many clicks it took them to reach the correct path. This was super helpful. One of the options we had was filtering by time of day, and this User Test helped to identify that it may not be needed - and was just adding friction for the User, so I removed the feature.
Iteration & Documentation
After the great feedback from usability testing, I made my final iterations and cleaned up the rest of the design. To reiterate, this project had to be designed completely in our pre-existing design system. So I was able to manipulate our components to create the best possible experience for our users, and one that we can use again to keep a consistent design experience throughout the entire brand.
This project was approached as a mobile-first product as most Guests access Dining Reservations from their phones. But since it was a web based product, a desktop version was needed as well.
A later addition we needed was a way for Guests with accounts to view their past and future reservations. With our design system, we had just a few options to choose from that would be a good solution. The first option were these:
After additional meetings and working through accessibility standards, I was able to input these sticky tab navigations as the best current solution to the dashboard view. Hopefully in the future there can be a different kind of dashboard created with components, but I think it did a really nice job of solving the issue with the components that currently exist.
These were the ‘final designs’ that were sent off to development and added into the Universal portfolio.
Defining an immersive experience is something that I have never done before, and it was new for our design system as well.
In Conclusion…
See the Live Super Nintendo World Hollywood Product for yourself here:
So, where are we booking our next Universal Dining Reservation? I say we go to the Hard Rock Cafe!
I mean…look at that burger! 🍔
