Concept mobile app: amusement park ride reservation
Wonderland
_edited.jpg)
Project
Concept mobile application
Duration
3 weeks
Role
UX/UI designer, researcher
Tools
Google Meet, Figma, FigJam
1-min Overview ⏱️
Waiting in line sucks 🙄
Amusement park visitors go for the rides and entertainment, but end up spending more time waiting (for rides, for food, even for the bathroom!), leading to frustration and stress. They wish they could spend more time enjoying the park, and less time standing in line.
How might I provide guests a more comfortable queuing experience?
🔎 Research & Insights: Through interviews and competitive analysis, I discovered that visitors are most frustrated by long lines. Key opportunities include popularizing virtual queuing and enhancing dining customization within the app.
👩🏻💻 Design & Testing: I prioritized features like ride reservations, virtual queuing, and accurate wait time estimates. User testing showed high satisfaction with features like linking tickets and making ride reservations, but highlighted areas for improvement, such as clearer map icons and more noticeable buttons.
Introducing Wonderland:
Group reservations: Link tickets and reserve rides for your entire group, with easy opt-out options.
Real-time availability: View time slots and reserve your spot instantly without physical lines.
Maximize your visit: Spend less time waiting and more time exploring, shopping, or dining.
Keep scrolling for detailed case study ⬇️
1. Research & Synthesis
Competitive analysis
User interviews
Empathy map
2. Prioritization & Roadmapping
Feature list & Site map
Task flow
Lo-fi / Mid-fi wireframes
Usability testing
3. Branding & UI Design
Logo
Brand style tile
UI kit
4. Testing & Iteration
Hi-fi wireframes
Usability testing
Design iterations
Final hi-fi prototype
1. Research & Synthesis
Competitive analysis
I compared the apps of Disney World, Universal Studio, Six Flags, and SeaWorld to observe each one's strengths and weaknesses, and identified two opportunities:
-
Popularizing virtual queuing / reservation for rides, making this method more mainstream and accessible.
-
Allowing more customization for visitors' dining experience.
Interviews
Most people reported that lines are what they disliked the most about going to amusement parks. 👎🏼
Insight #1
In the question "What do you dislike the most about amusement parks?", all 5 participants said the lines. 4 were about lines at the rides, 1 was about lines at restrooms.
[What I dislike the most] are the lines, the close proximity. I don't like standing super close to people for a super long time.
I pretty often purchased the more expensive tickets to skip the lines.
Insight #2
People either passively or actively reduce wait times: They check the wait times on the map and go to the rides that are shorter (passive), or use features that expedite the wait time (active), such as paying for express passes.
Insight #3
When it comes to planning their days, most people report that the length of the lines at rides influence their behaviors at the park. This means that wait times play a significant factor in people’s amusement park experience.
We try to plan our day around the rides - we decide to hit certain rides but if one has a super long line, then we'd just walk around and wait.
Empathy map
To better empathize with amusement park visitors, I gathered some notable quotes and descriptions of behaviors, and inferred how they think and feel at the moment.
Says
[What I dislike the most are] honestly, the lines.
More than anything I hate waiting in lines.
I hate waiting longer than I have to. Efficiency is so important to me at theme parks.
[What I dislike the most] are the lines, the close proximity. I don't like standing super close to people for a super long time.
I can experience more of the park if I don't have to wait long.
[What I dislike the most] is the crowd, the long lines at bathrooms.
Does
Arriving early at the park and going on the most popular rides before the park gets busy.
Checking wait times to find the rides with shorter lines.
Buying express passes to skip the lines.
Mentally preparing themselves for the long wait time before joining the line.
Not going to the bathroom because the line is long.
Changing itinerary if they see a short(er) line somewhere else.
Thinks
Waiting in line is really annoying and is a waste of time.
Being in close proximity with stranger does not make me feel at ease.
There is so much to do at the park!
I already have to wait for the rides, why do I have to wait for bathrooms too?
I don't want to wait to have fun.
I need to go on as many rides as I can, but having long wait times doesn't help.
Feels
Impatient: they don't want to wait longer than they have to.
Frustrated: feeling like there could be better things to do than waiting in line.
Disgusted: being in close proximity with sweaty people under the heat can be gross!
Uncomfortable: having to stand to wait in line is not a comfortable position to be in.
Tired: being on their feet and not moving for a long time can be tiring.
Bored: being restricted to stay in line for a long time can be monotonous.
My design problem becomes clear: how can I reduce the time that users have to stand in line for rides, so that they can be more comfortable, efficient, and enjoy more of the park? 🤔
2. Prioritization & Roadmapping
Feature list & Site map
Knowing that there are practical time constraints to the project, I grouped my ideas into Must have's, Nice to have's, Surprising and delightful's, and Can come later's. I prioritized the Must have's in the rest of the project, and incorporated them on a site map to create a clear blueprint of the application's structure.
Task flows
Guest already has a ticket, and they would like to link their travel party's ticket(s) to their own app to manage reservations.
Start
View Home page and see Ticket page in bottom navigation
Click on "Tickets" page
See "Buy tickets" and "Link tickets" options
Click on "Link tickets"
End
View confirmation page
Input friend's ticket number, upload a picture of the bar code, or take a photo of it
View instruction page
Guests would like to make a reservation for a ride.
Start
See Home page and bottom navigation with Attractions and Map pages
Decide to proceed on Home, Attractions, or Map, and click on the corresponding button
See a list or scatter of attractions
Click on "Reserve spots" on the card of the desired ride
View confirmation page
Confirm the guests who are being signed up and click on "Reserve"
View "Guests on reservation" page
Choose the desired time slot
View open time slots
End
Lo-fi / Mid-fi wireframes
Understanding the importance of early testing to enhance the intuitiveness and usability of my designs, I conducted tests on my mid-fi wireframes with five participants. The goals were to discover whether current terminology was intuitive and understandable to users, and to uncover issues of usability and make improvements based on user feedback.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
A/B Test 1
Option A
After user clicks "Reserve a spot," they are taken to a new page to pick a time slot.
Option B
After user clicks "Reserve a spot," a pop up window allows them to pick a time slot.
A/B Test 2
Option A
When users are being shown the time slots, the system knows how many people are in the user's travel party based on tickets linked, and it shows the user only those time slots that can accommodate everyone.
Option B
When users are being shown the time slots, the system shows them all the available time slots, with each slot's remaining capacity. Users can see for themselves which time slots can accommodate everyone.
.png)
Test results and Design iterations
#1:
I added more explanations for the "Link tickets" button to improve the understandability of this feature.
3 out of 5 participants brought up the ambiguity of the button "Link tickets." They were not sure what it entailed, suggesting that more explanation is needed for this feature.
I'm not sure what it means to link tickets... You can see your friend's ticket on your phone? And see which rides they signed up for?
"Your ride reservations" makes a lot of sense to me, but the button "Go to attractions" confused me. I looked at the button first, instead of reading the title.
#2:
I replaced "Go to attractions" with "Make ride reservations" on the Home page to clearly invite users to make reservations.
2 out of 5 participants suggested that the button "Go to attractions" did not make immediate sense for the task; they suggested that clearer action words could be employed to prompt users to click on it.
#3:
I switched the order of buttons (primary vs secondary) on the reservation confirmation page.
1 participant suggested that "Go back to attractions" instead of "Navigate me there" should be the primary button, because that is the more likely action users would want to take.
I think "Go back to attractions" should be the primary button, because that's the thing that you might want to do... you are probably making the reservation in advance so you don't need to be navigated there now.
.png)
.png)
I also want to see the estimated wait time for each ride. That would be helpful.
#4:
I added estimated wait time for rides to better inform visitors.
1 participant wished to be able to see the estimated wait time for rides to help her make better informed decisions.
#5
I dedicated a whole page for users to choose a time slot when they make a ride reservation.. (Option A of A/B Test 1)
3 out of 5 participants preferred option A, whereas 1 participant preferred option B. 1 participant did not prefer one over the other.
I get really overwhelmed at theme parks, so I prefer Option A because when this information has a whole screen to itself, it signals to me that this is important.
.png)
.png)
Definitely Option B, because it also tells you how busy the ride will be. I prefer the clarity of Option B.
#6:
I included the remaining number of seats for each time slot when users make reservations. (Option B of A/B Test 2)
4 out of 5 participants preferred Option B. 1 participant preferred Option A.
3. Branding
During the initial interviewing step, some of my participants said that they love going to amusement parks for the nostalgia, to feel like a kid again. Therefore, I wanted to give the product a dreamy, magical design. Through my logo, style tile, and UI kit, I kept these brand values in mind:
-
Joyful
-
Playful
-
Youthful
-
Vibrant
4. (Another round of) Testing & Design iteration
I conducted another round of usability testing to:
-
Observe whether users can easily complete three task flows
-
Determine whether current terminology was intuitive and understandable to users
-
Discover the noticeability of buttons
-
Uncover issues of usability that may inhibit product navigation and task completion, and make improvements based on user feedback.
Usability testing
5 participants | Moderated usability testing | Google Meet
Although task completion rate was 100% across the board, participants said that the map was too busy 😵💫, so the buttons did not pop against the colorful background. This means that I needed to either simplify the map, change the design of the buttons, or both. (Most likely both...)
Final revisions
Changing the look of the Map
1. I combined the key with the filter buttons to ensure sufficient space for the map.
Why did I make the change: 3 out of 5 participants expressed the expectation to see a key that clarifies the purpose of each icon.
2. I simplified the map's colors and routes, adjusted icon colors for better contrast, and added a light purple border to highlight the selected button.
Why did I make the change: 3 out of 5 participants commented that the buttons are not noticeable against the colorful map.
Changing terminology
1. "Spots" -> "Spots left" to ensure clarity of the information, and I used a different font color to improve noticeability.
Why did I make the change: 2 out of 5 participants voiced the concern that the text wasn’t immediately noticeable or understandable.
Changing design of confirmation page
1. I added an illustration to match the design of the overall system, and to further reinforce the “confirmed” status.
Why did I make the change: Even though only 1 out of 5 participants suggested that this page should look differently, I agree that it should be improved for the consistency of the overall design of the app.
Stacking cards vertically instead of horizontally
1. Ensure alignment consistency between the icon, the heading, and the body paragraph
Why I made the change: 1 out of 5 participants pointed out the inconsistency between alignment of elements; it’s important to adhere to design standards.
Select final screens
Key learnings
-
Consider business needs as well as user needs - The amusement park is the primary entity driving operations, and the app is a support tool. Thus, it was imperative for me to craft a solution that not only aligns with the park's financial viability, but also delivers compelling value to users that enriches their experience. It was important to balance the needs of all stakeholders, which is a crucial practice in the UX design industry.
-
Create a logo and a UI that fit the brand values - While functional, the popular amusement park / theme park apps currently on the market look a bit bland; one of my usability test participants commented that those apps look very boring, but my UI design made her excited to use the app and potentially go to the park. Creating a UI that fit the brand values was a valuable skill that I got to practice.
Next steps
-
Design task flows for users when the reservation time approaches: In this current project, I focused on the beginning part of users' amusement park journey, namely linking travel party's tickets, finding rides, and making reservations. If I had more time, I would complete the second half of the journey by designing task flows for users when the reservation time approaches, such as a reminder tool, the entry QR code, and even a reservation timeout for no shows so that the business needs are considered as well.
Check out my other case studies
.png)
JP Morgan Chase mobile app: adding a feature
.png)