The Topps Company | Mobile Collecting Apps
Topps, a leading producer of 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.
Project Summary
Overview
Kids weren't buying cards; that's what it came down to. Armed with research that proved a majority of children—and baby boomers—spent most of their time on mobile devices, Topps knew it needed to incentivize and socialize its older fan community to collect Topps product in a mobile space and by doing so, perhaps they might engage a younger generation that had moved past collecting physical items.
My Role
Lead UX/UI Designer and Digital Art Director, originally responsible for content and visual design but the role evolved into oversight of UX/UI research, feature testing and iteration alongside developers; art direction of all visual, content and marketing design; hiring and managing a team of eleven visual/interaction designers and six rotating production artists.
How do you connect with your baseball tribe?
Traditionally, until 2011 Topps' digital solutions team had been a support group, helping to design the odd microsite or Facebook page, or audit a website or app built by third-party vendors. After a management change, the new VP of Digital wanted our team (two producers, a social media manager, an analyst and me) to contribute to the revenue of the company. To that end, we were going to build product rather than support them.
First we had to know what kind of products our fans might like, and how sports fans interacted on digital devices and in social channels.
1. How do baseball fans socialize?
2. Is being a baseball fan better as a solitary experience or shared?
3. Should our product evolve into a social destination for collectors ("Facebook for baseball"), a statistical experience, a gallery or a game?
The fledgling team created a set of surveys and questionnaires and sent them to existing collectors, as well as approaching fans at sporting events, card and comics conventions and even approaching them at local sports bars. We also looked at other popular sports games and apps in the App Store and on Google Play, and even popular mobile games that were not sports-related (Candy Crush, Farmville, Angry Bird.)
Once we gathered our data, it was the job of myself and our analyst to assemble a research document and set of user stories which would allow our team to circle around the kinds of social experiences Topps fans might enjoy.
Most baby boomers that had grown up collecting Topps cards circled around the idea of shared nostalgia, reminiscing about trading cards in their youth. We envisioned bringing that experience to a mobile device and a connected global audience: the idea of sitting on a porch or corner with friends, trading Topps cards from dawn until dusk. We would build an app that let fans trade Topps cards to anyone, anywhere at anytime around the world, thereby connecting with a global "sports or entertainment tribe" which may be a world away. As a Detroit Tigers fan living in New York City, I definitely understood the need to connect with fans of my team in a city that celebrated another. And trading cards would be the social currency of connection; sharing the rich history of Topps cards with a friend somewhere out there in the world.
A wall of cards.
Concerned that trading wouldn't engage fans for long, we decided to layer in a way to interact with cards by using them to win points and climb a leaderboard (overall, by team, by city) or unlock digital goods during real-time events (custom avatars, additional trading cards, and eventually digital currency.) The idea would be:
1. Play your nine cards in a contest when games are occurring in the real world.
2. If the player on your card does well, your points rise; if they don't, your points fall.
3. Better players become valuable or even rare, encouraging trading.
4. Leaderboards would be used to convey top fans, teams or cities to the community.
Blending the ease-of-use of a casual social game with the real-time, real-world action of fantasy sports, we would create an 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 avatars than encouraging social engagement or revenue.
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 they wanted to collect, trade or play. After our discovery, my role was to storyboard a Proof of Concept and customer journeys, which I did by hand to convey that "cartoony" aesthetic to which we aspired..
The original designs centered around a tablet breakpoint, using a 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.
What we learned:
1. Collectors were hungry for vintage Topps cards and more appealing card designs.
2. Achievers wanted to hold more than nine cards at a time, letting us know they were willing to pay.
3. The leaderboards were compelling to those only with top points, but depressing for those with low points or new users who couldn't hope to catch up.
Ideation: Designing a brand new ballgame.
For our baseball app, Topps BUNT, I spearheaded the card content and marketing design while our third-party developer ideated the original design. Once BUNT launched, I took over UX/UI iteration, interaction, content and marketing design for what would now be a suite of apps, growing with our first iPhone app, Topps HUDDLE in 2012.
The tricky part was that we did not have a digital license with the NFL; only the NFL Player's Association...which meant we could now show team names, colors or logos. I canvassed our avid BUNT fans with surveys and one-on-one discussions, diehard enthusiasts who bought Topps physical product as well as friends and colleagues that watched football every Sunday to understand the history and gravitas that sets football fans apart from baseball:
1. Baseball is pastoral, the experience at the stadium, the food and traditions, the music, the family bonding
2. Football is about the experience watching the GAME.
As such, I wanted to do the following:
1. Revise the interactions (sitting and starting a player, trading, visualizing what a digital card might be rather than the traditional size) to be more compelling and encourage fans to play around more. I used contextual inquiry to watch how fans interacted with BUNT to redefine the UI for trading, on-boarding and sitting/starting player cards.
2. Find a time or place in which fans could immerse themselves visually; football's most recognizable age. I landed on the early Monday Night Football years—late seventies, early eighties and gave HUDDLE a 1970's look/feel that captured the low-production, phosphor-dot and green-tinged quality that defined early broadcasts.
3. Identify a "guide" for both onboarding and play, a virtual mouthpiece through which users could relate and be given pertinent information. Of course, it had to be Howard Cosell.
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. I created all of the content and marketing assets including email designs and ancillary landing pages.
Iteration: Designing a whole new collectible market.
As the apps became popular, and our team gathered data from the tracking CMS, Google Analytics and App Annie, we realized the following:
1. Our true demographic was older (13-35); parents, rather than kids.
2. We needed to mature the experience, and add both socializing features and monetization—a pack store—and refine the UI toward our now-revealed older audience.
3. Fans were hungry for better card designs, and wanted to pay for them.
4. Adding a collect-trade-play-buy loop would lend depth to the experience and increase time spent in the app: fans could get x amount of coins per day, use them to open packs of cards, then use those cards to play and win the fantasy experience or collect editorially driven sets, both of which paid out more coins, which were then used to open more packs.
5. Users would trade to get the cards they needed to either collect sets or play the fantasy contests...but trading was not as easy as we wanted it to be (no one wanted to trade away valuable cards) and the addition of a store would allow 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.
Growing the business...and growing the team.
In 2014, I oversaw the work of an outside UI designer to mature the experience. We took larger steps toward moving from the kid-oriented look, leaning into familiar iOS7 patterns, walking away "cartoony/blocky" visual patterns and giving it a polished interactive look and feel. I contributed heavily toward the UI redesign while art directing design patterns for each new app (BUNT, HUDDLE and now KICK, a soccer app), overseeing a staff designer for each who undertook the content design (cards, packs, awards, etc.) I collaborated with front-end developers to create patterns and UI assets 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. We also started to offer unique card designs, sometimes creating 2-300 new cards per app per week, messaged to users via the app's curated news feed, push notifications and social media.
As the apps grew, and revenue started coming in, our team learned:
1. Fans were beginning to define rarity and value of our cards on their own, based on how hard it was to obtain or trade for the card...or how valuable the card was in the daily contests. In fact, a thriving secondary market had appeared on eBay and dedicated fan-sites built solely for the purpose of reselling our digital cards.
2. While the community in the news feeds and chat areas were vibrant and dedicated, the spillover to social media had cultivated a vast, opinionated Topps Digital community who felt the digital cards were more important—and often more superior—to the physical cards.
3. That said, fans were hungry for the vintage cards, and wanted to pay for them.
4. Fans also wanted to trade and collect Topps' entertainment cards, not only the sports cards.
A bold, new galaxy.
After proving the concept and growing success (hundred of thousands of Daily and Monthly Active Users, one million packs opened in the first two years, and consistently in the top ranking/ratings for Free Sports apps in the App Store), and establishing a market for digital cards, the question became: can the platform work without real-time, current events tied to gameplay? Can we get back to just leveraging the original vision, being a trading app? That was the challenge in 2015, when after the success of three sports apps, Topps Digital waded into its first entertainment license: Star Wars.
These are the cards you're looking for.
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 content and marketing materials. To establish the visual language, I conducted a round of surveys among members of the established Star Wars community (on social media, at comic book and Star Wars conventions) to identify key visual touch-points 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 editorially-driven set completion and a melding feature offered depth to our fans who no longer based on value on achievement. Now, instead of conveying achievement through winning, instead fans could win by hoarding a character, or getting a special chase card for completing a set or game. The timing was perfect— Star Wars Card Trader launched as the first wave of Star Wars: Episode VII trailers and photos were released. The resurgence in nostalgia coincided with excitement for the film and created a groundswell of support, not only gaining our apps coverage in traditional and online media, but also rocketed the app to the top of the App Store rankings for entertainment games and tripled our original revenue projections for 2015.
Though the UI and content design for the Star Wars app (and the Topps Digital platform overall) has changed over the years, the original offered a personalized, intimate experience for avid Star Wars fans; unique icons (Death Star for Home, Cantina for the market), tailored profile header dependent on your faction, unique and desirable content and Star Wars pack flourishes, like the blast door seen below.
Valuable cards your mom can't throw out.
Though the UX/UI has changed significantly since my time at Topps, since its inception in Topps Digital the mobile app platform has scaled to other licenses (MLB, NFL, Premier League/MLS, NHL, WWE, UFC, Star Wars, Marvel, Disney 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 billions of individual packs to millions of monthly active users.
