Redesigning Lucky Bowl's Birthday Booking Process
Project overview
Research
User testing to evaluate the birthday booking process
I didn't have any quantitative data on LuckyBowl so I reviewed competitor sites such as Bowlero and Roxy, and sites offering similar services such as Rush and Innoflate (UK based). This provided ideas and inspiration and a user model for what features users might expect to find, and where, within the booking process.
My target audience was predominately parents who would use LuckyBowl's party service, so I asked them questions to find out what they would want to be able to do. I tested the existing site with them too, asking them to imagine they needed to book a birthday party for their child who is celebrating together with a friend.
Miro was used to visually summarise the results and it became clear that users expect to:
- See options and prices available - either per person/package or see it update when customising a birthday
- Be able to check availability
- View possible locations
- Users were confused when they had clicked on "Order" from the Birthday landing page and then had to choose birthday again after choosing their location
- Trying to go back within the order process or edit any choices left users confused as to where their order had gone
- Users couldn't edit the names of those celebrating their age, the number of guests, their chosen activity, number of series or any times chosen without losing their order
Ideating
Brainstorming
Using insights from the user testing together with inspiration from the competitor review I began brainstorming how a new design might enable users to easily:
- Check availability over different dates
- Edit their order
I looked at the user flows of competitors' sites, reviewed the existing site's data - such as number of locations, activities and the FAQs and started putting together a user flow, before beginning to brain dump and sketch out ideas.
Ideating
Creating and testing low fidelity wireframes
I created basic wireframes to visualise and test the flow of the booking process. Initially I had created the design using drop down boxes thinking these would be most efficient, but after testing, moved away from them because in some instances, for example when choosing a location, a user had to scroll quite far down and in others they just had to choose between 1 or 2 choices. So I updated the design so they clicked on chips, which in the case of several choices opened up a new window and in the case of a limited number of choices a user could just click on the chip on the page, for exampled the number of bowling games to play. These were more aesthetically pleasing in dark mode and they also enabled the use of icons or images in the list view.
To enable users to check availability quickly I changed the flow so that they select the minimum number of choices required to be able to show them availability, so, location, the type of event, the activity and number of series, and the number of guests. However after testing I realised that they were choosing a date on the very first page, then saw availability on the next page, but had to go back a step should they wish to change the date. So I moved the choose a date tab to the second page together with the 3-day overview. They can then choose a date and see available times over three days using tabs.
I had also set up the prototype assuming that they were choosing bowling, so I updated the flow again to reveal the bowling or laser tag choices - this was based on the fact that out of the 25 locations all offered bowling, 12 offered both bowling and lasertag and just 4 offered these and some other alternative options.
Additional updates through iterations included:
- Tagging activities and extras with “popular” (social proof)
- A clear all function to reset the number of guests
- Enabling the continue button so that users could click on it, but would be informed of any information required to continue
- Updating the steppers to be clickable and take a user to the stage they clicked on
- Auto calculating the time to play 1 or 2 series of bowling
Ideating
Solution
The final solution solved the problem of users not being able to view availability easily through the use of tabs controlled by chips. The task success rate for the existing site was 50% - where users either deleted their order or upon hitting back had to start again anyway to be able to check a second date. The new design increased the task success rate to 100%.
Additionally users can edit their choices throughout the process without losing information.
- A chip solution enables users to easily see and edit their choices throughout
- A stepper shows users where they are in the process and enables them to easily navigate between the order stages
- All information not required to check availability is moved to after this stage
- Price per person is added so that users can see the price when entering the number of guests
- A bottom draw is accessible for users as they proceed through the order process
- A carousel on the homepage markets activities and food and drinks
Iterating
Updates and next steps
I completed a heuristic review of the redesign and based on the findings I made the following changes:
- Ensured there were two ways in - through the hamburger menu, a visual card on the home page and through a Birthday landing page.
- Added error messages if a user hadn’t entered data that is required to continue or was going to delete their order. (This would also apply to food, drink or activities in a real product).
- Added a nearest location function and search location (not fully functional in the prototype!)
- Checked the process for content that supports the user, for example the time required to play dependent on nr of players, who to include in number of guests
- Enabled users to choose to eat before, during or after their activity - I changed this from an uneccesary choice of times to a simple before, between or after option.
- Updated the tabs to a simple underline and bold text as opposed to an old fashioned file tab
- Simplifying the choose a date and time section - removing the date tabs as they were a duplication of the day buttons.
- Simplified the availability from low, medium, high to simply busy or not busy
- Removed the tab functionality when choosing food and drinks as users didn't see the drinks tab, this was created as a page instead.
- Changed the activities to reflect the location chosen making it easier for users to see that an activity wasn't available at that location
Next steps would be to design for tablet and desktop and review whether the following features would also be beneficial.
- Adding packages for the business to up-sell and making it even quicker for users to book
- 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.
- A Do you need more time? feature would be beneficial for the business
- An AI chat function could save the business time
- There is a need to differentiate between adults and children when booking guests (i.e under/over 18 years)
- The age of the jubilant is required for a reason? If not this could be removed.
What did I learn?
I wish I had used pen and paper to brainstorm ideas initially instead of jumping too quickly into Figma. I also learnt that it would have been better to have worked in low fidelity more- keeping designs simple, testing, iterating then testing again. I was too eager to jump into creating!
I taught myself Figma throughout this project, so at times it was frustrating not having the technical skills to produce what I wanted to. However I have learnt a huge amount - from creating a design system for the project and learning how variables and conditionals work.
What would I do differently next time? I would work and test in low fidelity much more instead of worrying about colours and nuances of UI design too early on.
Thanks for checking out my portfolio!
