Touch-enabled reserved seating: boosting sales by 300%

Until recently, Vendini's reserved-seating sales relied on a SWF component for seat selection. Customers on mobile devices could only book "best available" seats, and box office agents relied on desktop software. I designed an experience that uses HTML5 Canvas to turn existing map data into a touch-capable seat selecor with a simple, familiar flow.

Requirements

More than 90 percent of patrons buying tickets at a Vendini venue are buying for the first and only time. Forty percent of patrons visit a venue's website on a mobile phone. Tickets are held for as little as five minutes before being released back to inventory, and according to our survey customers are typically looking to complete their purchase in three minutes or less. The UI needed to be exceedingly clear.

Prototyping

Users needed to be able to zoom in and out and pan in all directions on the map without affecting the page scroll. This required a modal fullscreen view that scaled up responsively to desktop size. A series of storyboard frames tells the interaction story, stitched together in an HTML/JS shell for a scripted prototype.

Production

The HTML5 map module — rendered through Leaflet.js — also functions in a webview in iOS for box office agents selling from mobile devices. Box office agents using Vendini TicketAgent iOS get an enhanced view allowing them to identify the owners of sold seats, and to see box office holds and seat-specific comments. 

The map appears in the web app too, where agents can administer such parameters as holds, seat comments, and price scales.

Insights

Customer conversion coud be improved by providing the user with multiple opportunities along the funnel to reconfigure their selection parameters — row, seat number, area map, section, row and seat, price scale, and ticket type. This allowed the user to make changes without ever having to go back.