top of page
Concept mobile app: amusement park ride reservation

Wonderland

Hero (9).png
Project

 

Concept mobile application

Duration

3 weeks

Role​

 

UX/UI designer, researcher

Tools

 

Google Meet, Figma, FigJam

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

Problem (we've all been there 🙄...)

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?

1. Research & Synthesis

Initially, a competitive analysis was conducted to grasp industry standards and uncover opportunities. Subsequently, interviews were carried out to identify specific pain points with regards to visiting amusement parks. An empathy map was then made to further understand and empathize with amusement park visitors.

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.

Screenshot 2024-05-06 at 14.54.57.png
Interviews

On Google Meet, I interviewed 5 young adults who have experience going to amusement parks at least once.

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.

Participant 1 (3).png
Participant 2 (3).png

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.

Participant 3 (2).png
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

With ideas for an amusement park app floating in my head, I first created a feature set to list the priorities, which became my main focus for the rest of the product design. Then, a site map was built to organize and categorize those features. Two task flows were built to help me design a seamless experience for users, and some lo-fi wireframes were developed into mid-fi for a usability testing to discover areas of improvement.

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.

Screenshot 2024-05-02 at 10.30.52.png
2.4.6 Sitemap.png
Task flows

I developed two task flows to visualize the user journey for linking travel party's ticket, and to book a reservation for a desired ride, providing a clear view of the required steps and screens to be designed.

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 & Usability testing

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.

Home page (5).png
Tickets (1).png
Link to account (2).png
Confirmation (4).png
Home page (5).png
Attractions (2).png
Time slots.png
Confirmation (5).png
Map.png
Ride selected (2).png
Time slots on map.png
Confirmation on map.png

Besides the regular usability testing, I also prepared two A/B tests. The goal was to decide between two UI designs that users resonate the most with.

A/B Test 1
Option A

After user clicks "Reserve a spot," they are taken to a new page to pick a time slot.

Frame 2 (1).png
Option B

After user clicks "Reserve a spot," a pop up window allows them to pick a time slot.

Frame 3.png
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.

Frame 4.png
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.

Frame 5 (1).png
Test results and Design iterations

After conducting the usability test with 5 participants, I made the following design iterations for my hi-fi wireframes:

#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?

Participant 4.png
Participant 5.png

"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.

Particiapnt 6 (2).png
Particiapnt 6 (3).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.

Participant 7 (1).png
Participant 8 (1).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
UI kit.png

4. (Another round of) Testing & Design iteration

With design iterations from mid-fi testing and my UI elements incorporated into my hi-fi wireframes,  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

Frame 6.png

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
Iteration 1 (3).png
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 changed the map to a simpler one in terms of color and route, and altered the colors of the icons to make them pop against the background. A light purple border is added to the button selected to further highlight its selected state.

Why did I make the change: 3 out of 5 participants commented that the buttons are not noticeable against the colorful map. 

Iteration 2 (9).png
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. ​​

Iteration 3 (3).png
Changing design of confirmation page

1. I added an illustration here 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.​​

Iteration 4 (2).png
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.​​

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. 

  • Mobile food ordering: In my interviews, many participants also voiced their desire to have a more streamlined experiences regards to food ordering and seating, such as being able to view digital menus, place orders, and find / reserve seating. If I had more time, I would deliver a mobile food ordering feature that provides further convenience  and reduces wait time for guests, so that more time can be spent on entertainment. 

bottom of page