Game with visibility to tens of millions / month across 2 TV and 2 mobile platforms
Imagine stepping into any bar across America and sparking a fun round of trivia. The action unfolds across player’s phones and the venue’s TVs, with lively play-by-play commentary, and venue-specific leaderboards. This exciting vision was crafted by Atmosphere’s founders for Interactive Trivia, a project where I played a key role as the design lead.
CompanyAtmosphere TVYear2023Duration6 monthsRoleProject design lead, UX, research, gameplay
Atmosphere: streaming TV for business
A device and streaming service that businesses install behind screens in order to entertain their customers with 40+ channels of linear and video-on-demand short-form, audio-optional content.
65,000 venues
Atmosphere is in 10s of thousands of businesses across the US, offering over 40 channels of engaging, family-friendly entertainment
130 million viewers / month
Atmosphere reaches hundreds of millions of viewers per month in restaurants, bars, airports, and quick-service brands like Burger King, McDonald's, and many others.
From passive viewership to active gaming
The Trivia project started with 'Interact,' a team dedicated to engaging Atmosphere's audience. They tested on-screen QR codes to see if viewers were ready to move from passive watching to active interaction on their mobile devices.
Goals
The leaders envisioned a global game on four platforms, aiming for traction through group play at venues. The KPIs targeted five venues, each with five players. The concept relied on local communities, expecting player numbers (5-10 per game) to show the game's investment potential.
Goal
Global sync across four platforms
The core of the game needed to work in sync worldwide on iOS, AppleTV, Android and AndroidTV platforms
Goal
Improve the path into the game
Initial experiments showed a low willingness to scan QR codes. We needed maximize the number of viewer who made it to the game, with a KPI of 60% sign up conversion and at least 2x initial QR scan rates
Goal
Create groups of players to drive adoption
We hypothesized that an in-person, communal experience would create word-of-mouth momentum to fuel adoption. An initial KPI of seeing 5 venues with 5+ simultaneous players would provide data to test this theory.
Project phases
There were four major phases of developing the game - Kickoff, initial development, play testing, and launch.
Kickoff. Project definition and risk mitigation
Definition. Gaming prototypes and visual language
Playtesting. Getting feedback on the gameplay
Launch. Release across four platforms to millions of viewers
Phase
Kickoff
Definition
Playtesting
Launch
Derisking the player journey into the game
I persuaded the team to think fully about project risks
When the Interact team was established, they explored engagement options like Trivia. I held meetings with the lead product manager to discuss testing the willingness of viewers to scan QR codes. This resulted in the team creating a test to determine a baseline QR code scan ratio - scans per 1,000 impressions. With a baseline established, they moved on to improve scanning rates significantly.
To test this, we built a bare-bones survey in the form of an on-screen QR scan and played it across some key venues.
Initial test
Initially, QR engagement was .05 scans per 1,000 impressions. At a max of 10% of the fleet ever playing the Trivia channel, based on our experiment, it would yield 650 scans/month.
Improvement
The team increased the QR size, encoded less information and balanced the error correction level to our goals - resulting in codes that could be scanned from further away. The team took scans from .05 scans per 1,000 impressions to ~.12 scans per 1,000 impressions, a 2.4x improvement.
Team Feedback
Justin Martin
Product lead, Interactive
I had the pleasure of working with Jon on a greenfield project where, aside from a few base requirements, there was no bounding box on what we should build. This is where Jon excelled. Asking the right questions, talking to would-be users, researching, defining the problem space, and methodically mapping out a path to building a great product.
Committing to Trivia
We started game development. With our early QR-scan-to-survey tests showing improvements to our initial KPI, we moved on to solidify the path into the game. This was the one time during design of the game that I worked as the lone contributing designer.
Boosting sign-ups with streamlined account creation
With a commitment to build and the game and improvements to the QR scanning rate, we tackled the next KPI - meeting the conversion rate goal for the account creation flow.
The sign-up flow converted at 75% +
Once users scanned the QR code, we successfully converted them into players: 78% of users who scanned ended up playing Trivia on their phone, with a peak of nearly 90%. This unique user journey proved successful. The key decision that enabled this was pushing back against unnecessary sign-up fields.
Exploring sign-up flow input behaviors
During design, I considered different initial button states. One was a 'teaching' interface with always-available buttons providing additional info on press. Instead, I chose a 'focus' interface, with buttons disabled until a valid phone number is entered. This worked well since the structure of phone numbers is highly familiar - on something like password selection, a 'teaching' interface would probably be better suited.
Teaching
One option we explored was allowing players to click a button anytime - clicked with incomplete data in the input, the player would get an error message with additional information
Focus
We decided to go with a focus option - we removed the ability to click until the field had 10 digits - the only requirement for the field. Our results showed this to be an appropriate choice in this situation
Phase
Kickoff
Definition
Playtesting
Launch
Phone and TV gameplay
Screen flowcharts helped answer two key questions. First, what would the app look like and how would players navigate? Second, what was the relationship between the TV player and the mobile app? Each device needed to operate independently, while also pair together for a single, engaging experience.
Given the multi-device sync required, flowcharts were a necessary part of the requirements building, and helped the engineers and product managers envision how the TV and mobile app would interact. I created these during the sign-up flow work, and we used them throughout the development of the game.
The gameplay reward loop
Successful game mechanics employ novel visuals alongside cycles of build-up, pay-off and release. We used prototypes to get a gut-feeling on the efficacy of each mechanic. Fast iterations helped us progress quickly towards a stable core of the game.
Core of the game
Once through download and sign-up, the game had a simple loop.
The Trivia experience
The true product isn't screenshots or interactions - it's the player experience while out and about. Here's a peek into how we saw that experience right before launch
A creative collaboration brought the game's visual style to life
The visual style initially progressed slowly but gained momentum once I secured design resources from the visual communication design team at Atmosphere. This team, primarily focused on the content side of the business, operated separately from the product team. After discussing with the VP of Visual Design, I was able to allocate one of his highly talented team members, Chase, to the project. Together, Chase and I expanded on the early work I had done on the game play and UX. Our open collaboration proved to be a recipe for success in enhancing the game's visuals.
Games of this nature tended to be bold, colorful and full of personality. We tried to meld this with Atmosphere’s bold, tech-forward brand.
What I learned
Leadership and contribution aren't mutually exclusive
I enjoy putting the spotlight on the work of others. When seeking collaborations, this is a particularly valuable skillset. Who doesn't enjoy being recognized for the results of their dedication and skill? It makes collaborations seamless and in my experience, creates excellent outcomes.
Phase
Kickoff
Definition
Playtesting
Launch
I led the team to create and run a playtest that yielded mission-critical changes to gameplay
Playtesting proved critical for smoothing the rough edges of the initial game, ultimately having a huge impact on the time element of the game and time between games.
Interactive Trivia's first group play test
Photos from initial playtesting in Atmosphere's atrium. The team put this event together as a first real-world test, and to gather initial feedback about gameplay and timing.
What did we learn and how did that improve the game?
Playtesting lasted about 6 weeks - in that time we had groups of employees play the game, and we gave a survey after each round. We performed experiments, mostly on the time between questions and how long the countdown timer ran. We found excellent results with faster countdown speeds and longer spaces between games.
Results: reducing each question's countdown timer from 25 seconds to 12 seconds
NPS
Socialization with others during the game
Phase
Kickoff
Definition
Playtesting
Launch
Project launch
In a six-month timeframe, the team brought Interactive Trivia to life across Android mobile, AndroidTV, iOS and AppleTV - four platforms.
Here's where we stood on user engagement: On average, each player participated in 1.4 trivia games during a single session, tackling approximately 17 questions. Most users dedicated a solid 10 minutes to the experience, truly immersing themselves in the fun. Even more impressive, 30% of users kept coming back for more even after five weeks had passed.
Interactive Trivia reached a core of early adopters, some playing for over 60 min/session
Session length on the mobile app told us a lot about engagement. Some of our largest cohorts were players who were playing for 15 min to 1+ hours. Even though adoption plateaued after launch, we felt encouraged that we had some early adopters bought in for 2-4 games.
With average playtime at 1.5 games/session, there was ample opportunity to further engage players
Number of questions answered told us a lot about the engagement of players. With 10 questions per game, 17 questions answered on average told us they probably made it to the 2nd game (there were 4 games an hour) before dropping off. To improve this metric I believe Atmosphere would need to invest in the core player experience.
Project outcomes
This was a sprawling project and I'm proud of what we were able to accomplish. Particularly from an engineering standpoint, the lift of building on four platforms was a huge effort. My leadership made a difference at the beginning of the project, persuading the team to think through key risks - and my contribution as a designer made a huge impact in the sign-up flow. I was able to get buy-in from the creative team to co-design the visual style of the game, a huge win for the launch and overall branding.
Success
Globally synced play
The game launched with synchronization across the world on AppleTV and iOS, followed by Android and AndroidTV soon after
Success
Efficient path to gameplay
In the end, Trivia surpassed our initial QR code experiments by 10x, peaking at 30,000+ scans/mo. We also created a sign-up flow with 75%+ conversion rate - this all helped maximize the impact of the invitations to play Trivia.
Success
Community powers growth
We met and exceeded the KPI and achieved large clusters of players in a single venue for the same game. We had at least 10 venues with 10+ players, which was a validation of the communal, in-person vision for the game.
With persistence, drive and ownership we were able to launch the game and make some big impacts on KPIs especially where it mattered – the path into the game, core gameplay, and communal play.