Redesigning LuckyBowl's Booking Flow
Project Overview
I discovered LuckyBowl's website when booking a party for my daughter. The booking process left me frustrated. So, I saw an opportunity to redesign the event booking flow and refresh the site.
Methods used:
- Competitor analysis
- User interviews
- Affinity mapping
- User flow mapping
- Personas
- Brainstorming
- Low-fidelity wireframing
- Heuristic evaluation
- Accessibility review
- User testing
- Prototyping
My role:
I worked on this project independently but had people to test my solutions throughout.
Before & After
The original booking flow asked people to make repeated choices and enter unnecessary information, and made it hard to check availability across different dates. The redesign simplifies the flow, removing requests for unnecessary information and taking people who click on a "Bestill" button on a birthday page or card directly to choose their package, then start the booking flow. After specifying the minimum information required (location, type of event/package, number of guests and activity), they can then compare dates and times at a glance.
Discover
How people book events
I wanted to understand what people expect when booking events, specifically birthday parties.I had no quantitative data so I reviewed competitor sites. I looked at booking flows for similar entertainment companies and event, airline, hotel and holiday rental sites. These gave me inspiration and insight into booking flow design patterns.
My target audience was parents booking birthday parties or end-of-season celebrations. I wrote a screener and recruited five parents from my personal network. I asked them what information they would expect to see and observed them as they used the existing site.
Testing highlighted opportunities for:
- Packages to reduce cognitive load and upsell
- Switching location or activity
- Flexible payment options (card, Apple Pay, Vipps) to increase conversion
- An upgraded location finder (nearest, list view, search)
- Player details collected before visiting to save time later
- A clear-all option for entered information
Results showed people expected to see:
- Options and prices per person and per package
- Prices and the total throughout the booking flow
- Availability for different dates
- Possible locations
Testing revealed these pain points:
- CTAs from event landing pages and homepage cards led to a page where people had to scroll and choose again. Sometimes from more than 8 mixed events, activities and promotions
The images below show where a person clicks the CTA "Bestill" under "Bursdag & feiring". They then have to scroll to choose "Bursdag" again.
- Back navigation in the booking flow lost the order
- Editing order information lost the order
- Checking availability for different dates meant repeating the booking flow
- Telephone number was requested twice
- Mandatory booking fields weren't marked and errors weren't always highlighted, leaving people guessing
The images below show parts of the existing booking flow, from left to right:
- Name and age of the birthday person was requested at the start of the flow
- Fixed order of date, activity, number of series/games, then time, forced people to repeat a booking to check availability for different dates.
- Edit button returning people to event selection resulted in all entered information being lost.
Define
The problem
Beyond the pain points found in testing, mapping the site’s existing booking flow uncovered friction points and inconsistencies, in these areas:
Guest numbers and limits:
- Guest selection uses a counter for birthday and group bookings, but buttons plus a drop-down menu above a certain number for other types of bookings
- Laser tag requires a minimum of 8 people, but the guest picker allows up to 9, and it can be booked at a party with just 4 guests
- Laser tag can be booked for 20 adults and 20 kids, or 40 guests for a birthday party, but group bookings are limited to 4–7 guests
- "Spill så mye du vil" bowling lets people select 30 kids and 30 adults, then shows no times, though it works with 30 adults
- Bowling & Sommerkampanje show 9+ and a drop-down of up to 30 guests. A tooltip then says "If you are more than 8 people click here"
- Guest pickers allow 0 guests
Age and child/adult rules:
- Child/adult distinctions are applied inconsistently across the site
- Sesongavslutning is for children only, unlike birthdays
- Only group bookings ask for age, to decide alcohol options
- Birthday parties allow ages 4–99, yet a pop-up still says "Barnebursdag" (Children's Party)
Locations and content:
- Darts is promoted at some locations with no booking process, and has one at others
- The location drop-down on "Hva ønsker du å bestille" is missing Asker
- Changing the location to Borås changes the language and font
The images above show inconsistent labelling across the site. This risks customers questioning whether they are in the right place. If they remember one term and then see another, they may also assume the option they wanted has disappeared.
- Hamburger menu: "Teambuilding" as its own item
- Homepage, no location chosen: "Teambuilding & After work"
- Homepage, location chosen: "Teambuilding & utdrikningslag"
- Choosing what to book: "Gruppearrangement", includes "teambuilding", "firmafest", "lagfest", "klassefest" and "utdrikningslag"
- First page of booking flow: "Teambuilding" includes "firmaarrangement", "vennegjeng", "lagfest" and "utdrikningslag"
- Booking flow, link for several people: "Gruppebestillinger",
- The above leads to a drop-down labelled "Firma"
How could I make checking availability when booking a birthday party easier?
Develop
Solve the problem
I brainstormed ideas, sketching paper wireframes before creating low-fidelity ones for testing. Initially I had thought to use drop downs to save space on mobile screens. However for long menus, like when choosing a location it was difficult for a user to scroll. So I changed the drop down menus to buttons that open up a new window - making scrolling easy.
Using tabs for the dates didn't allow space to access a calendar very well, so after further iterating I landed on using smaller buttons for both the dates and the calendar. Further testing confirmed users found these easy and intuitive for checking availability.
Additional updates after testing included removing the step for people to enter player details before visiting, as users hopped over this. Further testing could be done to see if this would be better placed after a user had completed their order. I chose not to prioritise that for this project.
View the solutions below.
Streamlining the booking flow
Booking an event used to involve people having to choose the type of event twice - regardless of how they entered. Using tabs with buttons on the homepage allows people to choose their event and location easily.
Checking availability
Checking availability used to involve repeating the booking flow. Adding three date buttons beside a calendar button allowed people to see availability over three different dates easily. It also allows them to change the date.
Cost overview throughout
The overview of an order at the top of the screen took up space where a progress bar would normally be used. The edit button also didn't work. Adding a bottom draw allows people to see the total price throughout, view and edit their order, and frees up space for a stepper at the top of the screen.
Deliver
The Solution
How did the final solution solve the problem of people not being able to view availability quickly and easily?
View the final prototype below
Two changes at the start of the redesigned flow make it easier to check availability as well as find the right event or activity. Three date buttons beside a calendar button let people compare availability and change dates easily. Tabs separate event from activities in the first stage of the booking flow.
On the existing site, the task success rate for checking availability was 0 out of 5 people. All five restarted their booking, deleted their order, or used the back button and began again from an earlier step. With the new design, the task success rate rose to 5 out of 5 people.
The redesign changes how people start and complete a booking.
Starting the booking:
- Homepage carousels and cards promote events, activities, promotions and food and drink options
- CTAs lead to a logical next step. For example, "Bestill nå" on the Birthday landing page opens the first step of the booking flow, where people choose from a birthday package
- Only the minimum information needed to show availability is requested up front. Details about the birthday person are collected at the end, where personal information is required anyway
- Chips for location, event type and number of guests let people see and edit their choices
- Nearest location and location-search features help people choose a location
- Birthday packages reduce cognitive load and let the business upsell
Completing the booking:
- A stepper shows where people are in the process and lets them move between stages
- The total price stays visible in the bottom draw, which opens at any time for a reservation breakdown
- A timer shows how long their reservation will be held
- Defaults are calculated automatically, such as time per series from the number of guests
- The unnecessary telephone page is removed
- Alternative payment options are offered at checkout
- People can edit their choices from the checkout summary page or start again from scratch.
Accessibility
Structure & navigation
- Descriptive headings, titles and labels
- Section headings organise the content
- Multiple ways to navigate (nav bar, footer, cards on the homepage and birthday landing page)
- Skip link letting screen reader and keyboard users bypass the main navigation
Visual and interaction
- Text and non-text contrast meeting WCAG AA
- No reliance on colour alone
- Focus states on all interactive elements
- 48 x 48px target size for buttons, icons and links (Material Design)
- Keyboard operability
- Errors are displayed adjacent to where they occurred and use both visuals and copy in conventional red to assist a person to move forward
- Forms provide suggestions when input is missing or incorrect, and users can check and confirm all input before submission.
The design system created in Figma then uploaded for use in Claude.
Next steps
Next steps would be to design for tablet and desktop. There are also lots of other opportunities for the site, including:
- Adding the ability for a user to swap an activity or check another location's availability should their chosen location not have availability for their chosen activity
- An AI chat function to answer common queries
- Integrate third party reviews, for example from Google to provide reassurance
- If the birthday person's age is needed for a reason it could be asked for at the end of the flow
What did I learn?
Throughout this project I learnt about UX in e-commerce user flows, for example the paradox of choice and the use of progressive disclosure. I delved deeper into error messages and best practices for input forms.
On the tools side I learnt how to use Figma and developed my AI skills. I played around with both FigmaMake can Clude, but chose Claude in the end as it gave better, more consistent results.
I created both low- and high-fidelity wireframes in Claude Design, the high-fidelity prototype uses a design system created in Figma. I also learnt a lot about context, prompting and utilising skills.
Thanks for checking out my portfolio!
