Checkout Improvements

The Opportunity

Universe’s checkout was under strain. High-volume timeslot attractions were causing performance issues and to address this, engineering took on a backend rebuild to introduce incremental data loading.

The ask towards design was simple: maintain feature parity.

I saw an opportunity. A comprehensive backend rebuild inevitably touches on front-end code and my knowledge of existing UI issues in Checkout, accumulated over years of iterative shipping, placed me in a unique position to advocate for their resolution. I worked with my PM and Engineers to fold targeted, streamlined UX improvements into the existing engineering scope, without disrupting development velocity or requiring additional resources.

The baseline expectation for me was to maintain feature parity. Any additional value I could squeeze in was a way to expand my impact.

How I Prioritised

I couldn’t improve everything, so my mission was to improve the right things. To help navigate this,I assessed the checkout experience against three signals:

1. Internal support tickets to identify where users were getting stuck or confused
2. Archived design explorations to understand prior design efforts that never shipped
3. Usability heuristics to pinpoint moments where the UI violated basic legibility principles

Each candidate improvement was then validated against what engineering could afford to absorb within the current scope. Five areas made the cut.

Filters

Filters became nested behind a dropdown, taking away from their actionability and value recognition. Usage data confirmed that filters are actioned 40% less when hidden in a secondary menu which directly impacts users’ ability to find the tickets they want.

I surfaced filters to the primary UI layer to make them more obvious. The change was simple but the behavioural impact was significant.

Filter usage increased 141% after the change, which in turn contributed to more efficient ticket discovery and smoother checkout flows for users.

Ticket Types

Due to several iterative additions to checkout made over the last few years, the ticket type component structure became fragmented, exposing a lack of diligence and craft. Overlapping elements and crammed text made parsing ticket options an unpolished experience, adding cognitive load at a key moment in the flow that should feel easy.

I redesigned the ticket type components with clearer hierarchy and defined variants to accurately reflect the underlying data structure. My redesign did result in increased scroll height on pages with many ticket types but I deemed the trade-off worth it for the improved legibility and layout which are critical for providing a trustworthy touchpoint.

Add-Ons

Add-ons relied on an add-to-cart pattern inconsistent with ticket selection, costing users an additional click, despite looking visually similar. Hiding inconspicuously in plain-sight, this inconsistency led users to falsely believe they had successfully carted an add-on when they hadn't, resulting in missed purchases, support tickets, and frustrated event-goers at the door.

I standardised the add-on pattern to match ticket selection, refactoring the display of add-on options into an accordion-style layout to enable alignment with the established pattern.

Zero add-on quantity complaints across 4,039 orders with add-ons processed during the beta.

Tablets

Tablet viewports typically fall by the wayside as they represent the smallest share of sessions across the platform. The existing checkout experience leaves our tablet users in an awkward middle ground with a layout too wide to feel intentional. The only responsive logic implemented towards this breakpoint was for elements to fill the full width of the screen, resulting in an inconvenient browsing experience that could be improved with small tweaks.

I implemented a fixed-width layout that piggybacks off the optimised width of the desktop breakpoint, creating a more comfortable and focused browsing experience for tablet users. This was a case of resourcefully benefitting from the benefits of prior thinking and improving the experience with minimal design and engineering effort.

While there's minimal measured impact, this responsive behaviour update practically reduced line length from ~110–115 to ~85–90 characters per line. Although still above the ideal 60–75 range, this brings the experience closer to established readability heuristics while considering layout constraints.

Codes

Discount codes and access keys were two separate input flows that looked visually similar, causing confusion. Support tickets suggested that users commonly entered access keys into the more prominent and familiar discount code field, leading to failed checkouts and frustrated users.

Multiple code fields is an uncommon pattern that increases cognitive load to decipher. To eliminate this problem, I worked with Engineering to unify both systems into a single smart input field. The user no longer needs to make the distinction between two code systems and simply has to look for a single place to enter their code, reducing effort and eliminating a common point of failure in the checkout flow.