I helped design a new digital platform for connected pinball machines around the world.
Client: Stern Pinball
Industry: Arcades & Gaming
Duration: November 2019 - March 2020; November 2021
Role: Product Designer
Responsibilities: user research and defining core user stories; wireframing the achievements, dashboard, and profile management UIs; designing flows for scanning QR codes and registering pinball machines to the platform.
Stern Pinball, a true pioneer in the gaming industry has created fan-favorite pinball machines for decades.
The company can trace its history back to game’s infancy when Sam Stern became part-owner and President of Williams Electronics in the 1930s. In 2019, Stern set out to connect players and usher in a new pinball experience, bringing the joy of their games into the modern age. We helped Stern concept, brand, design and build Insider Connected — the industry’s most extensive digital platform that connects players’ devices with pinball machines around the world.
The Challenge
Stern Pinball wanted to modernize and extend the classic pinball experience into the digital realm, attracting a new generation of players while staying loyal to their brand fanbase. The business problem: expanding the community and the reach of the product; creating new revenue streams based on connected services.
“As designers we’re paid to envision the future but the user’s only frame of reference is the past.”
The Solution
A one of a kind digital platform that uses seamless interactions between mobile devices and connected pinball machines to help players track in-game progress, engage with the player community, and participate in promotions, without sacrificing the classic feel of a pinball game.
My Role: Product Designer
Our project team consisted of a Project Manager, Technical Project Manager, Product Designers (2), Art Director, Platform Engineer, and a UI Engineer. I worked closely with a Lead Product Designer. We paired on most aspects of the platform, though we did own separate features. I was responsible for:
user research, defining core user stories;
wireframing the game achievements, platform dashboard, and profile management user interface;
designing flows for scanning mobile QR codes and registering pinball machines to the platform.
Insights and Things I Learned
Engagement doesn’t always mean time on screen.
The Insider Connected platform works across multiple devices - specifically between mobile devices and connected pinball machines. But this connection is largely in service to the pinball machine, as it aims to extend that experience. Our sign-up flow was designed to get players into the platform and playing on the machine as soon as possible. In multi-device systems, make sure you have a clear understanding of the goal of the system, not just what can be done on a single device.
User generated content can suffice as user research.
You may not always have the time, budget or buy-in for user interviews and intercept surveys. But those methods aren’t the only way you can learn something useful from your users. I would encourage a review of support center forums, help desk logs, and other social network communities where real people are talking about how to get the most out of your product. Even new features for mature products need to be grounded in user goals and intent.
Have a plan for offline edge cases.
A reality of the pinball playing experience is that many machines are located in bars and arcades where cell service is unreliable. If a player can’t connect to the internet and thus can’t pull up their QR code to scan - that’s unacceptable. User research suggested players preferring analog methods so we added a way for players to print their QR code on paper. It’s not a perfect solution but it gets the job done. If offline support is crucial to your product experience, I would use research to find out what critical tasks users need to accomplish and work with developers to figure out easy wins first.
Process
Understanding Constraints & Users
“The most important button on the machine is the Start button”
Mobile Machine First Philosophy
Pinball has a long history. Over time manufacturers have codified a general set of conventions that players know well. For example, the pushing the “start” button always starts a game. If there’s money on the machine, a player should always be able to play by hitting “start”. The platform would interface with a connected machine, sending data to it, and executing user flows using both a mobile device and the machine in unison. However, any previously known conventions belonging to the machines needed to be maintained. As a rule, the platform could not create new ones.
Assessing Feature Parity
Stern’s vision was to innovate and evolve the pinball experience. They wanted Insider Connected to have experience parity with platforms like Xbox Live and Playstation Network. This meant features for connecting with other players, a rewards and achievements system, and organized competitions. We started by looking at what those platforms do well and what we could learn. At launch we knew Stern’s technology would put the platform lightyears ahead of the competition but we wanted to understand its true differentiators.
Web App
Stern made a decision early on that Insider Connected experience would be built as a client-side web app, which due to the scan in procedure, needed to be very performant on mobile devices. We wanted Insider Connected to feel like a snappy native app when you did use it. We approached everything we did with a mobile-first mindset.
Getting to know Pinheads (Users)
One of the most interesting and rewarding aspects of this project was the very specific user base we were trying to reach. I learned that pinball is an entire world in an of itself. There are forums, marketplaces, local clubs, organized competitions, and companies that sell modification kits. There is a pinball culture and those that are in it care about the games, the technology, and the history. People who care about pinball REALLY care about pinball.
The project timeline (or budget) didn’t call for user research. We didn’t interview or survey real users. Instead, I spent about a week reading through threads on one of the more trafficked forums trying to understand player sentiment on connected machines and features that they wanted. This proved to be an effective, cheap way to get real thoughts and opinions from real people without doing “proper” user research
Did you know…
Pinball is a professional, organized sport. Players compete throughout the year in tournaments sanctioned by two governing bodies the IFPA and PAPA. The top 200 players hold official rankings.
Conceptual Modeling & Exploration
Prioritizing the Product Roadmap
Stern had defined a product roadmap before our project started. The needed help organizing features and content into an interface that brought all these new things to users in a familiar and engaging way. We distilled the initial feature set into four conceptually distinct sections of the app: Personal Play, Competitive Play, Social Networking, and Collecting & Rewards.
Navigation Explorations
From there we explored initial navigation and architecture directions, which each of the four sections serving as main navigation items. We eventually moved away from a branded verbs approach to labeling and adopted a more accessible noun-based navigation.
Designing for Specific Use Cases
Scan In Procedure
A core tenant of the Insider Connected experience is that connected machines can recognize and represent a player in a game. Players “scan in” a connected machine using a unique QR code that the platform generates for them. After scanning, players see their initials and avatar on screen. This all works because each connected machine includes a special QR reader. However, the idea of scanning into a pinball machine was a brand new convention for the pinball community. It had never been done before.
Scan in procedure diagram
We needed to work out the best way for someone to physically walk up to a machine, display their player code, and scan into the machine. Some of the questions we considered:
How can we make the QR code easy to find and display?
What’s the optimal location for a QR code to make scanning efficient (and successful)?
How do we communicate failure and success states to players?
Signing Up On Location
A use case we wanted to account for was giving players an opportunity to sign up and create an account whenever they’re in front of a connected pinball machine. Displaying a QR code on a machine’s “kiosk mode” meant we could market the new platform on any game that wasn’t actively being played. Here’s how this would work:
Player walks up to a machine and scans a QR code on the screen
Player enters an account creation procedure, enters email, player initials, and selects an avatar and color.
Player is issued unique player QR code with instructions on how to scan into the game
Sign up on location diagram
You might notice that this doesn’t provide any sort of introduction to Insider Connected or storytelling of its features. We thought that would be misguided. Instead, our goal was to get players playing pinball as fast as possible, not learning about the platform.
Once they understood how the platform enhanced their experience with a pinball machine, they’d be interested in exploring the rest of the features. So we identified the minimum data needed to generate a player’s unique QR code and adjusted the flow to end with scanning back into the machine.
VISUAL DESIGN
Custom Components
The artwork included in each game is purposefully overwhelming. It’s meant to evoke wonder and delight. As amazing as they are, they posed the following unique challenges:
When used together, how do we keep them from clashing and colliding?
How can we make idiosyncratic art packages, with custom fonts, colors, and illustrations, all feel like they belong?
How can we celebrate the artwork while still containing it for smaller screens?
I paired with the Lead Product Designer to systematize the structure of these custom components. Each game is be represented by its icon, backglass artwork, and silhouette of the machine. Each of these representations shares a unique color palette and sense of depth. This instituted a consistent ruleset and ensured all games would behave the same visually.
Our Art Director really blew us away with how he used those color and depth attributes. He reworked the components so they could extend beyond their visual barrier, creating an amazing, larger-than-life feel and letting the art packages sing.
Making Better Achievements
Our discovery game us some insights on where we wanted to take in-game achievements. Achievements are things you earn for completing specific tasks in a game and usually reward players with some sort of trophy or badge. We found that some platforms had a very utilitarian view of achievements which made them feel too much like todos. We also saw this as an opportunity to help educate and introduce new players to the hidden depth of each game. By combining instructions and teasing unearned achievements, players can learn how to get more out of their favorite games.
Bringing the UI to Life
With our design system in place and app architecture refined, we fleshed out the rest of the UI for Insider Connected. I think the UI was and is such a success. I’m proud of the durability of our system - even zoomed out you can see clear hierarchy in text, identify what a link is, and distinguish important content through a sense of focus.
Finishing Up
This was one of the most rewarding experiences I’ve ever been apart of.
I’m truly grateful I got to play a role in designing an interactive platform for a beloved brand such as Stern Pinball. I think one of the reasons why Stern is so highly regarded is because leadership has such deep appreciation and respect for its customers. They pushed us to create something original yet authentic for its players - and I believe that desire to do right by your users is what helps product MVPs get ahead.