Topps Digital Apps

September 12, 2018

Role: Digital Art Director, User Experience Designer, Content Designer

Challenge:
How do you bring a company built on selling pieces of cardboard into the digital age? One of Topps’ solutions was an easier way for casual collectors to interact with their cards by using them to win them points (and eventually, digital currency) against real-time events. Blending the ease-of-use of a casual social game with the real-time, real-world action of fantasy sports, Topps envisioned an app platform that digitally recreated the nostalgia of trading sports cards with friends on a street corner—expanding said corner to a global scale: Trade cards with anyone, anytime, anywhere around the globe. The first app to launch would be Topps BUNT, a baseball version geared towards younger collectors (age demo 6-13). But the original design — the UI conceived by an outside agency, where I spearheaded the content and marketing design— was cartoony, limited fans to nine cards at a time, and focused more on unlocking premium avatars than it encouraged downloads, engagement or scale to add much-needed revenue.

Solution: While my original role was to storyboard the concept and journeys (see original sketches on this page) as well as create card content and marketing design, I eventually took over the experience design and matured it while retaining the basic visual style. Additionally, after establishing a deal to bring the experience to football fans by building Topps HUDDLE, I canvassed our existing BUNT fans, diehard enthusiasts who bought Topps product, as well as friends and colleagues who watched football every Sunday to understand the history and gravitas which sets football fans apart from baseball—baseball is pastoral, the experience at the stadium, the food and traditions, the music, the family bonding; football is about the experience watching the GAME. As such, I wanted to find a specific time or place in which football fans could instantly feel transported and immerse themselves in football's most recognizable age. One era set itself apart, the early Monday Night Football years—late seventies, early eighties. And so I altered the design, giving HUDDLE a 1970's Monday Night Football look/feel that captured the low-production quality, phosphor-dot and green-tinged glowing experience of early broadcasts. I revised the customer journeys, user flows and visuals to make it more specific to football, created all of the content and marketing assets including email designs and ancillary landing pages. Here are journeys for Huddle 2012, documenting how to sign in and add cards via trade, as well as how to sit, start and manage cards. 

As Topps scaled, we matured the experience further, distancing ourselves from the original demographic as we added socialize features and monetization, aiming for higher demographics. In 2014, I directed design for all content and shepherded the experience direction by overseeing the work of an outside UI designer. In 2016, Topps made a deal to use NFL colors, logos and marks — I art directed the style and patterns of the app, overseeing a staff designer and collaborating with front-end developers to create UI assets (splash, icon, login screens), content (cards, packs, store and news headers) as well as interactions and animation. Sign in/Sign user flows can be seen here, and individual flows around earning coins to buy packs here and here. Finally, here are wireframes highlighting monetization and opening packs,  the lifeblood of the Topps apps. Since their inception in 2012, Topps has scaled to eight working apps (including both sports and entertainment), many of which have been featured and achieved high rankings in both the App Store and Google Play Store, and have collectively sold over one billion individual packs.

Before we dove into building any of our apps, we created a quick set of storyboards based on our user research, personas and surveys of various Topps and sports fans. The folllowing boards were created by me, by hand, to quickly visualize what the apps might look like and how they could be used. The most basic scenario we had in mind was a young boy on a car trip being forced to uses a tablet or phone to pass the time (boy, as a father of four I can relate to this one— my kids either have their noses in a device or are watching a movie wherever we go!)
The very first key visual for the Topps apps was the "wall of cards" — the idea being that you could swipe and scroll through a never-ending set of digital cards, view unique data and decide which you wanted to collect, trade or play.
The original vision for the apps were very different than what they are today, to be honest. At the time, the iPad was considered the wave of the future and we hadn't done the complete research yet on exactly how many phones were out there (and being used) in the marketplace. So our first designs centered around tablets, using the wide screen for portals of information on a Home screen (roster, avatar, cards and points). We also envisioned a way to customize your avatar (unlocking premium content through achievement and eventually, direct purchase) as well as achieve through unlocking badges ala Foursquare (we turned that into awards at some point, a journey which is still being iterated upon to this day).
Trading, of course, was going to be key for the Topps apps — the idea that you can trade with anyone, anywhere at any time was a way to bridge the nostalgic and modern ages. This layout and scenario mostly made it into the apps unharmed.
Then we decided to bridge scenarios — our boy, Jack, offers a blind trade out into the community and it's received by our second user, Amy, who has her device on her desk while at work. Amy has little time to really engage, but can quickly negotiate a trade (the power of the push notification!) and move back to her work responsibilities without missing a beat.
Amy, our second user, quickly views the trade (she can see a limited view of the other user's profile, including a custom avatar and team affiliation (how do you connect with your football tribe??) and can either accept, decline or make a counter offer. This entire loop made it into the apps and has been iterated upon in one way or another for the last five years.
The original UI for Topps HUDDLE 2012 was based on the UI of Topps BUNT 2012 (cartoony, bold fonts, avatars) while the visual design was overhauled to reflect a 1970's Monday Night Football look/feel that captured the low-production quality, phosphor-dot and green-tinged, glowing experience of early MNF broadcasts. Without an NFL deal in place, football players were depicted using headshots from our partners at the NFLPA, team colors and marks could not be shown nor could city affiliations. A 1970's color palette was established (lots of orange, yellow and green) and we used Champion as a key font, inspired by font treatments seen on early football programs and 1970's issues of Sports Illustrated.

In 2015/2016, I art directed the visual update and revised UX/UI for Topps NFL Huddle, adopting the new platform look and feel from Topps BUNT 2014 (for which I oversaw the work of a UI designer and a team of front-end developers). Until this year we hadn't had an NFL license, and so for 15/16 we finally incorporated NFL logos, marks, colors and players. Art directed UX/UI and content designers, established visual language and content guidelines. The incorporation of the NFL marks also allowed us to create a great number of unique insert cards that were sold in packs (monetization having been brought to our apps in 2013), traded and then resold on the secondary online market (eBay, etc).

ALL PHOTOS