Ticket Purchase Flow
Decreasing cart abandon and customer support requests with targeted improvements
Our data revealed high cart abandon rates and general drop off in our ticket purchase flow, while our customer support team's inbox hinted at lack of key information for fans. I led a number of UX and UI improvements that decreased both of these metrics and streamlined fans' experience.
tl;dr
Targeted improvements to Planet's ticket purchase flow
End-to-end UX and UI design process
Figma, FigJam, PostHog
A fairer ticket purchase experience
Planet enhances the experience of both artist teams and fans within the live music industry with ticketing and fan engagement solutions.
Part of our product is a ticketing solution based on time-gated draws. Fans join at any point during the time window and pre-authorise the payment. Once the ballot closes, fans are informed of the results and payments are automatically captured or released. This removes the “first-come-first-served” philosophy that rules the live music industry, giving everyone a fair chance.
”Does this include the meet and greet?”
After running many ticket draws, we noticed that we were receiving a large number of customer support emails related to ticket and show details. This hinted at a lack of information throughout the flow, and prompted us to look into the journey as a whole.
Our Product Manager created funnels in PostHog that revealed where fans were getting stuck, leading to two new findings:
- High drop-off at the event selection stage.
- High cart abandon rates at the pre-authorisation stage.
At this point, it became clear that our ticket purchase flow was in need of some upgrades. Rather than a complete redesign, we opted for targeted improvements that our small engineering team could tackle incrementally.
DiscoveryGathering more insights
As the sole Product Designer, I led the design process end to end.
Before jumping into Figma, I conducted competitive analysis to identify common UX patterns, particularly around display of information and payment. I looked at Ticketmaster, Live Nation, and Eventim, among others.
Emerging patterns
Some platforms had dedicated spaces for event and ticket details, often in the form of large dialogs or even full pages, highlighting the importance of informed ticket purchase.
Most of the platforms I explored offered extra options during checkout, meaning I had to scroll very far down to complete my purchase. Due to the “first-come-first-served” nature, many had timers after which tickets would be released.
The competitive analysis surfaced common patterns that would be worth exploring. It also highlighted those that were not compatible with our fan-first approach. Looking at you, stress-inducing 10-minute timer.
The solutionSmall improvements for big impact
The right information at the right time
The customer support emails highlighted a lack of information for fans, but this went hand in hand with a lack of customisation for artist teams. I wanted to ensure my solution was flexible to account for a variety of use cases.
How might we surface the right information at the right time, while keeping the interface clutter-free and the content flexible?
The answer looks like this as a Figma prototype, but you should keep reading to know what changed!
Optional event “flag”
To clearly communicate offerings such as VIP packages, I added an optional flag to the event details component. It’s eye-catching, surfaced from the very first step, and persists for the entirety of the flow.
- User can only rely on the price and guess which option includes meet and greet.
- Meet and greet option is obvious at a glance.
Thanks to its flexibility, this flag has been used in many unexpected ways, such as surfacing unusual age restrictions or pre-sale codes.
Event information
For more complex event details, accessibility information, and age restrictions, I designed a modal dialog that can be accessed at every step. When selecting events, it’s a subtle information icon, which becomes a more eye-catching link at the ticket selection step.
- 'Info' icon during event selection stays subtle.
- 'More info' link during ticket selection catches the user's attention closer to purchase.
- Easily skimmable with organised sections.
- Fully customisable copy with formatting support in each section.
Ticket section information
The dialog pattern also came in handy for section details. Special conditions are sometimes tied to specific ticket tiers. For example, restricted views, age restrictions for standing areas, or seating areas that come with a meet and greet bonus.
- 'More details' link during ticket selection is highly visible and shown in context.
- Fully customisable copy with formatting support is suitable for any use case.
It’s all in the details
You may have noticed some other improvements. Alongside the changes above, they elevated the user experience and modernised our interface.
- Allow access before the draw is open. Fans can see the list of shows (and starting prices) in advance, reassuring them of where to find the ticket draw once it opens.
- Custom event names surfaced alongside location. Fans can clearly tell apart special events like charity shows, and artist teams have more flexibility.
- ‘High demand’ label. Encourages fans to enter for low demand events and maximise their chances.
- Surface door times. Frankly, not sure how this one had gotten past us… 😅
- Making it more obvious that selectors are clickable. Just in case.
Easy, trustworthy payments
Next up, I aimed to fix the cart abandon issue by streamlining the user experience, removing distractions, and increasing trust.
Planet’s ballots are meant to reduce the 9 AM rush, but many fans are used to to buying tickets in that manner. Optimising the flow to make it quick and painless is still key, so we aimed to keep the most important details and actions above the fold.
How might we streamline payment, while still surfacing the information fans need?
This was the Figma prototype I presented to the team as my answer.
Streamlined pre-authorisation
Fans can save their details for future payments, but this doesn’t benefit new sign ups. To address this, we integrated with Apple Pay and Google Pay, allowing fans to skip the form.
Additionally, I redesigned the price breakdown to be collapsible, allowing for a quick initial scan. This also allowed me to include more information about how the ticket draw works in the expanded state, without overcrowding the page.
- Summary takes up half of the page.
- Tedious payment form.
- Collapsed summary gives enough context.
- Fans that would like reassurance are still able to get it.
- Quick payment options above the fold, and easier access to full payment form.
Capturing cart abandons
While working on this redesign, I conducted some research into abandoned cart emails. I found that almost 30% of clicks on cart abandon emails convert into a sale. Planet has an advantage here in that we can reassure the fan that they’re still in time to enter the draw, whereas other platforms can’t guarantee there will be tickets left.
We implemented and email that fired off a few hours after a user abandoned their pre-authorisation, reminding them of the closing time.
The cherry on top
Other small tweaks to the pre-authorisation step included:
- Loader animation in payment button. Reassures fans with slow connections that their payment is being processed.
- ‘Powered by Stripe’ badge. Increases perceived trust in the product.
Putting it all together
Below is an interactive Figma prototype of the full flow. It was a simple prototype made to communicate the improvements to the team, so not everything is clickable. Click anywhere on the screen, and interactive elements will be highlighted in blue.
ImpactBut, did it actually work?
The redesign of Planet’s ticket purchase flow showcased the value of targeted improvements. The approach allowed our small engineering team to work through the changes at a great pace, and delivered the results we expected.
We saw lower cart abandon rates on average after the redesign shipped.
We saw less customer support emails regarding ticketing, especially those enquiring about ticket conditions, age requirements, and accessibility. This resulted in less manual work for our team.
The number of steps to find age restrictions and accessibility info was reduced to 1, and the checkout funnel required significantly less effort from digital wallet users.