Fewer Screens And Using Available Data To Inform The User - A UX/UI Case Study

The Problem

As a frequent user of Fandango’s iOS app, I have identified an area in the current booking process that I feel detracts from the user experience.

The main problem I found is in the ticket quantity selection path. By utilizing radio buttons for each ticket type sold, it results in 6-7 separate pages to both load and go through to purchase tickets.

The second problem is more of a new way to expose existing data in a useful way to the user. For shows with reserved seating, by displaying how full showings are earlier in the booking process – the user is more informed and doesn’t have to run through a process multiple times to determine a time that works best for them.

Here is a look at the current steps needed to complete a purchase within the app.

The Process

Fandango Sketch

After identifying the problems, I took to my notebook to sketch out possible solutions. 

I started with the ticket quantity selection. By utilizing a stepper, the user can easily select quantities for multiple ticket types without going back and forth between screens.

I then focused on exploring how the current availability of a reserved seating showtime could be displayed, both from a data side and from a visual side. I started with the data side because I believe that data is the best tool a designer can have – the constraints any data provides, helps form what can be done and thus how something should be visually considered.

In looking at what information was available, you notice that each theater with reserved seating has its own unique set of total seats available, and when you go to purchase seating in any of these showings, you are presented with a map of that theater to choose seats from. Using this data, logic can be built to perform a simple equation to calculate the percentage of seats available. If you have 71/75 seats left in a theater you can then calculate a 94% available amount of seating. This is where the visual side comes in, as in my exploration of this, I felt that displaying “94% available” wouldn’t provide the right solution, for two reasons:

• With how small and fast the interaction with this piece would be – I felt that rounding to tens would be best so this would become 90%.

• I also felt a meter would be the best way to display this, and since that is filling rather than emptying, I felt that reversing the data would be best – so rather than saying “90% available” I felt that “10% full” did a better job at quickly getting the point across to the user.

I made it a point to implement this in a way that was familiar for the user, this happened to be the existing iconography that displayed theaters with assigned seating. By repeating that iconography here to the left of the data, I was effectively saying “this theater/showing has assigned seating and currently 10% of seats are sold” – but done with a recognizable icon, a percentage, and one word, all set in front of a filling meter backdrop.

Before & After

For ease of comparison, below is an image displaying the two existing screens within the Fandango app (left) and the screen I’ve designed to replace them (right) without losing any functionality, and in fact gaining functionality with the availability meter.

Fandango 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. I used Flinto to build a prototype that would convey the relationship between the theater/showtime selection into the next page where a small animation notifies the user of the availability meter, without being over the top. This is also where we see the steppers introduced, and I wanted to show how those would work and the transition between selecting quantity and actually moving forward in the process.

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.