Live entertainment booking flow
An complete overhaul of seatmap experience for users looking to go to London theatre
Timeline
~4 month
incl. Design, BE and FE
Role
Product designer
CONTEXT
A little bit of backstory...
A good chunk of Headout's bookings come from live entertainment, London theatre (Westend) to be more precise. Musicals, plays, opera, you name it and we got it :)
But our booking flow for it didn't do justice to the name "Westend" and wasn't a great experience for our users either.
This was one of the first major projects that I picked up after joining Headout and I dove into existing user insights that we had gathered from user interviews as well as going through tons of user session recordings using clarity to figure what the flaws and issues.
Additionally, I tried to scrape through our user reviews to figure out if there are any issues expectations while booking vs reality of attending a show.
One of the bigger challenges we had was lack of quantitative insight for this flow because of lack of data events setup. As I started work with already existing insights, we got the data events set up and waited for the data to come in.
Few obvious issues
INSIGHTS
What we found and what we did about it?
Back forth between select page and seatmap page to change dates
Lot of our users are for shorter lead time and that combined with less availability closer to show date meant that users are switching dates to find a more suitable date
We added easier calendar and time selection to the seatmap page which the user can use to see availability as soon as they select a date
Selecting multiple seats to check for price and compare
Redesigned the filters and added proper color coding in order of cheapest to most expensive tickets.
Easy selection and deletion of seats introduced so that user doesn't have to refresh the page to select their preferred seats
Users scrolling through the filters and just leaving
Users might be perceiving the filters as a price legend for the seatmaps
Redesigned the filters with chips as well as quick overview.
Currently live version has only price based filters, but in ideal scenario we want to give emphasis on accessible seats as well as special promos.
Design and copy issue with the error messages
Most of the users are either ignoring the error and just selecting the
Reworked the copy for the error message to be clearer
Divided the error into two categories: One which can be timed vs ones which need to be persistent.
Users tilting the phone to view the seatmap
Since the most of the seating plans for shows are vertical, it didn't make sense for us to optimise our booking flow for this behaviour right away that involved a lot of ops overhead as well.
Zoom in issue with the seating map
I sat with the developers during our QA process to figure the right level of zoom as well as those interaction which made a great impact on how seamless the experience is.
INTERACTIONS
Interactions are breathe life into a product..
Seat selection
Seating plan minimap
Seat delete and undo
Filters
LEARNINGS
How did the revamp go for us?
Direct CVR increase of
+X%
We didn't have a proper setup to measure rage clicks before this and our insights for that was derived from user session recordings (most of them indicated rage clicks). After the revamp, we were able to see an rage click percentage of ~X%.
We optimising the actual page load time and reducing the perceived load time, we reduced the drop off rate by XY% from the seat selection page.
Our qualitative analysis also indicated towards lesser no of people dropping off while waiting for seatmap to load.