Topps Huddle

July 5, 2017

CASE STUDY:
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.

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