- Show Ticket Selection

Redesigning a disconnected, multi-page process into a singular flow.

In Summary

Another notable project I worked on at was an idea I had after a conversation with a developer about an existing process in place for our ticket selection process. We both had frustrations about how it worked on the backend, and I actually used that to drive how we could make improvements there as well as on the customer facing side of things. I utilized a better understanding of our in house technological capabilities with competitive analysis, and put together a new solution that would eliminate a full step in launching a show’s seat map, as well as a new experience for the customer that eliminated an unnecessary page load in the show ticket purchase process. Below is a deeper dive into my process with accompanying screenshots and mocks. Changes in assigned seating are currently being rolled out and already we have seen a 1.6x increase in conversion on affected products.


The Problem

The problem was rooted in how many steps users had to take to purchase show tickets:

• Search by dates
• Select Show
• Select Date/Time
• Choose Section/Price Tier
• Be Shown Your Seats

This was 5 page loads, only to be shown your tickets rather than being able to see other seats that may accommodate your preferences better, and to give you that satisfaction of choosing them.

There was a secondary problem on the business side, in that, our backend required a custom SVG to be built for each theater, and then another employee to hand assign each seat to a corresponding ticket in our system. This process could take up to two work days to complete, assuming no other tasks popped up.


The Process - Search Results

The solution was aided by the conversation I had with a developer at work who mentioned that if we built the SVGs in a certain way, labeling each layer with the seat information (section, row, seat) – they could then target them and change them dynamically. At the same time, my boss and I were both very interested in a new look for our maps and happened to be very impressed by how a local theater had implemented their seat selection process. This spurred an idea in my head, that set off this redesign, as it would attack two problems at once, as mentioned above.

The first part of the process was relatively easy, as it would be an adjustment in how I built each theater’s map, but the small amount of extra workload on my side more than made sense because it took one, much larger, responsibility off of another team and allowed for our developers to adjust the map on the fly.

The second part of the process was how I could utilize this new system to deliver a better user experience, one that had long plagued me. I dove into some further competitive analysis that further confirmed that our experience felt aged, and also helped confirm that there are a certain amount of steps a user must go through to choose not only a show, but the date, time, and ticket type/pricing tier they desire. But, I posited, “steps” didn’t have to translate to pages or modals – rather they could take place within a single interface that changed roles as the user continued down the funnel.

Before & After


Once I worked out the static mockups in Sketch, I wanted to put together a quick flow to visually explain just how this new setup would work for the user, and the various interactions possible. Below is a live prototype built in Framer that shows off the interactivity available with this re-imagined shows path.

Feel free to browse ticket types, and add some Reserved seating tickets to your cart.

Let's Get Social

Follow me on the platforms below, and get in touch so we can work together on building something awesome!

Built with Elementor © 2019 Kristoffer Daniels. All Rights Reserved.