Atom Tickets is a movie ticketing platform that has over 2 million app user. Backed by major movie studios like Lionsgate, Disney, and Twentieth Century Fox Film and accepted at nearly 19,000 screens across the U.S. including AMC Theatres, Regal Cinemas, and Showcase Cinemas, Atom’s user-friendly and socially driven interface allows movie lovers to search for films instantly, invite friends, buy tickets, pre-order concessions and enjoy a VIP experience at the theater.
Challenges & Goals
The initial Atom Tickets app was designed by a third party design agency without user experience in mind. The app in turn was struggling in four key metrics: retention, engagement, session conversion and ad impressions. While the wheel became a signature part of the Atom experience and a key market differentiator to the board members, it was an obtuse experience attributing to bounce rate.
The goal was to improve the app in aforementioned key metrics, while releasing an experience compelling enough to replace the wheel to the satisfaction of the board.
- Lead Product Designer
- Product Strategy & Research
- Wireframing / Prototyping
- User Testing
- UI Design
- Validation & Iteration
- Ameesh Paleja - CEO
- Alex Rouse - SVP Product
- Chris Brucia - Senior Product Manager
- Mitchell Kim - Principal Designer
- Ryan Nance - Product Designer
- Brian Borewic - Visual Designer
- Ricardo Olvera - Android Developer
- Kevin Bui - iOS Developer
- Stan Sultanov - QA Lead
Identifying Existing Problems
The first step was to identify locations in the app that were contributing to the poor metrics. The wheel, clarity on showtimes, obfuscated navigation and others were marked as being detrimental to the experience. We also discovered that the amount of data required for the initial app load was very high due the crossbar experience.
Ideation & Strategy
The next steps were to break down the app experience into modular blocks to see what would be absolutely necessary for the user at any given moment. This was also cross referenced by user location and frequency of time. By breaking down these components we were able to sketch initial wireframes of an app experience while being mindful of the impact it would have on engineering.
From the sketches, I developed some mid fidelity prototypes to start to get a sense of what the initial user experience could potentially be. Some early fidelity tests on levels of information being displayed helped refine the design. We also exposed a tab bar in this process to start to find tabs that would improve discoverability session engagement.
Early Atom exploration prototype
Cinemagraph Ad Unit
Having a delighter feature to replace the wheel was also a requirement I needed to tackle. By developing a way to integrate a motion poster to the intial app experience, I was able to solve for the key market differentiator problem while increasing ad impressions. Early testing demonstrated that as long as the ad was relevant to the content, users did not mind being shown an ad. Also by implementing a cubic-bezier animation curve on the fuse, I could provide the illusion of the ad being shorter than it actually is.
Testing subtle animation loops versus high action video.
Producing a Prototype
With confidence from early user testing, I was given the greenlight to develop a full app experience. The goal here was to provide a highly functioning prototype that would be used in focus group testing. We also started exploring other avenues, such as social, ticketing, checkout, offers and more. We also looked into ways to smoothly integrate ad units into the experience without disrupting the user flow.
Prototype used in early user testing
Defining a Style Guide
Updating the Atom style guide was also part of the new experience. Knowing that a high percentage of users typically buy a ticket within hours of the showtime at night, it naturally led to developing a dark theme. Being selective with high contrast colors that would not cause to much eyestrain helped elevate information that would be the most relevant to the user.
User Testing Validation
We did multiple rounds of user testing with multiple demographics for the app. As typical with user testing, a lot of our hypothesis were correct, while some were ambiguous and others clearly a problem. Iteration and validation went on for a course of two months.
Ben Schwartz comparing the legacy app to redesign
Some clear problems that were disovered in user testing was the high level of cognitive load needed to process the visual information. With testing, I could convince product to remove visual elements such as the theater logo, plf logos and reduce other visual elements. Search was another clear loser in user testing as too many options were present up front. This was solved with having very intentional form fields that focused the user to do a single action. I also looked to refine other areas that would help with session retention for a smoother experience.
Conclusion & Learning
One thing we realized immediately was that the scope of work we inherited should of been broken up into smaller incremental testable processes. Given the timing with marketing teams, large daily CCU, having a concurrent legacy app version, it was apparent that the risk was too high to large to launch a project of this scope in its entirety.
The initial redesign experience that released would include gateway, cinemagraph, showtimes, movie detail, upcoming calendar, search, and theaters experience. Large scope features that were cut were social, offers, profile and checkout as they should have been seperate initiatives and posed high risk. These sections were excluded from the case study as they have not reached final product.
The Atom app was eventually released to an aggressive 50% user base test. Retention rose by 41%, Engagement by 21%, Session Conversion 8% and ad impressions by 85%. These metrics will allow the Atom app to go 100% in the next available marketing window.
Studio approved version in the 50% test.