Go Back to my Work

The Topps Company | Mobile Collecting Apps

Topps, a leading producer of collectible sports and entertainment cards, needed to engage with their increasingly mobile-focused user base by bringing a set of products to the digital market. Hoping to create an additional revenue stream that could contribute to both its annual financial growth and sorely needed mobile presence, Topps invested a start-up team with the means to figure out how to bring a company built on selling pieces of cardboard into the digital age.

My Role: Research and Analysis, UX, UI, Art Direction, Visual and Interaction Design, Production, Marketing Design, Management

WHAT ARE WE BUILDING AND WHAT NEED DOES IT SOLVE?

Kids weren't buying baseball cards; that's what it came down to. Armed with research that proved a majority of children—and baby boomers—in the world spent most of their day on mobile devices, Topps knew it needed to properly incentivize and socialize its increasingly older fan community to collect Topps products in the mobile space. By doing so, perhaps they could also engage a younger generation that had moved beyond collecting physical cards.

DISCOVERY: HOW DO YOU CONNECT WITH YOUR BASEBALL TRIBE?

First, we had to understand what kind of digital products our fans might like, and understand how sports fans interacted online and on mobile. The above led our team to a round of discovery aiming at questions such as "how do baseball fans socialize?” Is being a baseball fan better as a solitary experience or shared? Should our app evolve into a social destination for collectors, a statistical experience, a gallery or what? To find answers, we created  surveys and questionnaires and spoke to baseball fans, surveying Topps collectors as well as approaching them at games, conventions and in local sports bars.

I landed on a shared research document and set of user stories which allowed our team to circle around the kinds of social experiences Topps fans would enjoy...and in discussion amongst our team—most of us suburban baby boomers that had grown up collecting Topps cards—we leveraged shared nostalgia, reminiscing about trading cards in our youth. Could we bring that experience—sitting around with friends, trading cards until dusk—to a global audience? Could we build an app that let fans trade their Topps cards, imbued with rich, visual history, to anyone, anywhere at anytime, thereby connecting with a "sports or entertainment tribe" which may be a world away? As a Detroit Tigers fan living in New York, I definitely understood that need—wanting to connect with fans of my team in a city that celebrated another.

DEFINITION: A GIANT WALL OF CARDS.

Concerned that a trading app wouldn't engage fans for long, we layered in a way for collectors to interact with their cards by using them to win points or unlock digital goods (custom avatars and then digital currency) by playing against real-time events. Blending the ease-of-use of a casual social game with the real-time, real-world action of fantasy sports, we would create a baseball app geared towards younger collectors (ages 6-13). The UI style would be bright and cartoony, limiting fans to nine cards at a time, focused more on unlocking premium avatars than encouraging social engagement or revenue within the experience.

And, of course, there would be a giant, scrolling wall of cards. Our very first key visual was the "wall of cards" — the idea being that users could swipe and scroll through an infinite gallery of Topps content, view unique data and decide which you wanted to collect, trade or play.

After the discovery, my role was to storyboard the proposed app concept and customer journeys, which I did by hand. I drew  a set of storyboards based on our research, personas and surveys to visualize what the apps could look like and how they might be used. The basic scenario we had in mind was a boy on a car trip forced to use his device to pass the time (as a father of four I relate to this one— my kids have their noses in a device wherever we go).

The original vision for the Topps apps were different than what they are today. At the time, the iPad was growing in popularity and we hadn't done complete research yet on how many phones were in the marketplace. So our first designs centered around tablet, using its wide screen for portals of information on a Home screen (roster, avatar, cards and points). We envisioned a way to customize avatars (unlocking content through achievement and direct purchase) as well as achieve through unlocking badges ala Foursquare. Trading, of course, would be key—the idea that a user could trade with anyone at any time via a mobile device would bridge the nostalgic and modern. This journey made it into the apps from our original boards unharmed.

IDEATING: DESIGNING A BRAND NEW BALLGAME.

The original UI for our baseball app, Topps BUNT, was conceived by an outside agency, whereas I spearheaded the card content and marketing design. After that, I took over UX/UI iteration, visual, content and marketing design for the apps, beginning with our football app, Topps HUDDLE in 2012.

The original UI for HUDDLE was based on BUNT 2012 (cartoony, bold fonts, avatars - see below image) but I wanted to give it a football-specific pattern and style. I canvassed BUNT fans, diehard enthusiasts who bought Topps product, as well as friends and colleagues that 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 time or place in which football fans could immerse themselves; 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, phosphor-dot and green-tinged quality that defined those early broadcasts. In addition, we used contextual inquiry to watch how fans interacted with BUNT to redefine the UI for trading, on-boarding and sitting/starting player cards.

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.

I revised the customer journeys and user flows—including how to sit and start players, how to register and trade, and how to manage cards— and altered patterns and visuals to make it specific to football. I created all of the content and marketing assets including email designs and ancillary landing pages.

DESIGNING A WHOLE NEW COLLECTIBLE MARKET.

As the Topps apps became popular, and our team gathered data from the tracking CMS, Google Analytics and App Annie, we realized our true demographic was older (13-35). To that end,, we matured the experience, adding socializing features and monetization—a pack store—while refining the UI toward an older audience. Now we could add a collect-trade-play-buy loop: enter the app and get x amount of coins; use those coins to open packs of cards; use the cards to either play and win the fantasy experience or collect editorially driven sets (broadcast via a news feed and push notifications), both of which paid out more coins, which were then used to open more packs. Users trade to get the cards they needed to either collect sets or play the fantasy contests.

At first, we didn't want a large visual leap between the 2012 and 2013 UI as to not drop a complete redesign on fans still becoming familiar with the app overall. So we retained our font, some  general blockiness and moved toward a "refined cartoony" pattern set while removing avatars (users could now upload images from their device), gradually turning the Home screen into a dashboard/portal view while pivoting the wall of cards toward a searchable binder. The addition of a store allowed fans to obtain and possess more than nine cards at a time (eleven in HUDDLE) for the first time in the experience, and the team proposed ways for the user to catalog both their card sheet as well as view/filter every card released into the app.

In 2014, I directed design for all content and oversaw the work of an outside UI designer. In 2016, Topps made a deal to use NFL colors, logos and marks and we began adding licenses. We took larger steps toward maturing the experience, leaning into iOS7 patterns, walking away any "cartoony/blocky" visual patterns and giving it a more polished look and feel. I contributed heavily toward the UI redesign while art directing the style and patterns of each new app, overseeing a staff designer and collaborating with front-end developers to create patterns and UI assets (splash, icon, login screens), content (cards, packs, store and headers) as well as interactions and animation, while collaborating on feature development and UI redesigns based on limited contextual testing, surveys and data from our CMS and Google Analytics.

After proving the concept and growing success (financially and in terms of ranking/ratings) of a real-time digital card collecting game, and establishing a market for digital cards, the question became: can we translate the platform to an app that doesn't offer real-time, current events tied to gameplay? That was the challenge in 2015, when after the success of three mobile trading sports apps (baseball, football and soccer), Topps Digital waded into its first entertainment license: Star Wars. Would diehard sports fans gravitate to an experience where all a fan could do was collect, trade and complete sets?

Based on the UI of the sports apps, we altered the experience slightly to reflect a lack of real-time data or gameplay. I conceived and implemented the original UI design for Star Wars Card Trader alongside our development team, overseeing the work of content designers to build cards, packs, visual and marketing materials. To establish the visual language, we conducted a round of surveys among members of the established Star Wars community (on social media, at conventions) to identify key visual touchpoints for an expansive franchise—we needed to find the most recognizable, all-encompassing visual that could appeal to all ages of fans. The solution: the iconic Star Wars  opening crawl.

Pivoting to set completion and a melding feature offered depth to our intrigued fans, but the timing was perfect— Star Wars Card Trader launched just as the first wave of Episode VII trailers and photos were released. The resurgence in Star Wars nostalgia coinciding with excitement for the film created a groundswell of support, pushing the app to the top of the App Store rankings for entertainment games while also creating a thriving secondary market.

The overall UI and content design of the app has changed over the years, but the original offered a personalized, intimate experience for the avid Star Wars fan — unique icons (Death Star for Home, the cantina for the market), tailored profile header dependent on your chosen faction, unique and desirable card content and Star Wars specific pack flourishes, like the blast door opening seen below.

A BOLD, NEW FRONTIER FOR PIECES OF CARDBOARD.

Since its inception in 2012, Topps Digital has scaled its offerings to eight working apps (MLB, NFL, Premier League/MLS, NHL, WWE, UFC, Star Wars and the Walking Dead), 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.

JAFRA

B2B CONSULTANT APP

NORDIC NATURALS

MOBILE RESPONSIVE WEBSITE

THE TOPPS COMPANY

MOBILE COLLECTING APPS

MATH DONE WRITE

EDUCATIONAL APP

VIRTUSA

MOBILE CHECKOUT REDESIGN