Topps HUDDLE blends the ease-of-use of a casual social game with the real-time, real-world action of fantasy football. Fans declare their football allegiance, collect and trade NFL players, and earn points based on their performance. HUDDLE allows fans to stay more connected with football through rewards and achievements.
In 2012, faced with a change in management and desire to get into the mobile apps business, the newly established Topps Digital team strategized a number of potential ideas, one of which was an easier way for casual fans to play fantasy sports by allowing their Topps cards to win them points (and eventually, digital currency) via playing them against real-time events. In addition, the idea was to digitally recreate the nostalgia of trading sports cards with friends on a street corner—expanding said corner to a global scale: Trade your cards with anyone, anytime, anywhere. If a user played the right cards during the right game, they got more points and rose a leaderboard for bragging rights (this was engagement-based at the start—non-revenue). The first app to launch out of our gate was Topps BUNT, a baseball version geared towards younger card collectors (age demo 6-13). The original BUNT design was cartoony, limited fans to nine cards at a time, and focused a lot on unlocking premium avatars.
For BUNT, as digital designer, I was mostly involved with storyboarding the original concept and customer journeys (see original sketches on this gallery page) as well as designing the card content and marketing design in 2012. But in 2013, I took over the UX/UI from an outside developer and helped mature it slightly while retaining the basic visual style. Additionally, we established a deal with the NFLPA to bring the experience to football fans by building Topps HUDDLE. For this app, I keyed off the basic visual touchstones of BUNT (cartoony, avatars) but opted to revise the user flows and visuals to make it more specific to football. Together with the team, I canvassed our existing BUNT fans, diehard sports enthusiasts who bought Topps product, as well as friends and colleagues who avidly watched football games every Sunday. I realized that the sense of history and gravitas is what sets football fans apart from baseball fans—baseball is pastoral, about the experience around the game: at the stadium, the food and traditions, the music, the family bonding; football is about the experience watching the GAME. And as such, we wanted to focus on what made the game great—and 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 when it came to discussing a "golden age" for football, and that was the early Monday Night Football years—late seventies, early eighties. 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 created all of the cards, packs and marketing assets including the email design shown in the sixth "Howard Cosell-branded" iPhone near the bottom of the gallery. Here are customer journeys for Huddle 2012, documenting how to sign in (including as a BUNT fan) and add cards via trade, as well as how to sit, start and manage player cards.
As the department and suite of apps began to grow, we matured our experience even further along the way, distancing ourselves from the original demographic as we began to socialize and monetize, aiming for an age of 13 and higher. For the 2014 versions of BUNT and HUDDLE, I directed design for all content and shepherded the UX/UI direction by overseeing the work of an outside UI designer, helping mature it toward a modern iOS7 look. In addition, in 2016 we were granted the rights to use NFL colors, logos and marks — I art directed the visual look and feel of both apps, working with a staff designer and frotn-end developers to create all packaging assets (splash, icon, login screens), content (cards, packs, store and news headers) as well as interactions and flourishes (like a breaking gum flourish when opening packs). You can see new Sign in/Sign user flows here, and individual flows around earning coins to buy packs here and here. Finally, here are some wireframes circling monetization and opening packs, now the lifeblood of the Topps apps.