Topps Pennant

July 5, 2017

CASE STUDY:
Topps Pennant was the modern box score. As baseball fans, we at Topps Digital wanted a single place to check out scores from last night’s game as well as relive meaningful moments from over 30 years of baseball history. So Topps acquired an app in 2012 - our first act of bringing a company built on cardboard and physical objects into the mobile space. We discussed how to add new features—social sharing, check-ins, audio and more— with the aim of bringing a unique mobile tool to fellow baseball fans who could see its value. 

Topps Pennant captured all the teams, all the games, and all the plays from the most recent MLB game way back to 1952. Nearly 60 years’ worth of baseball data brought to life and presented in elegant, interactive infographics on the iPad and iPhone. The question we asked was this: how do we scale this? How do we get users to engage for more than a single search at a time? That led to larger questions such as "how do baseball fans socialize online? Even more, how do they socialize in person? Is being a baseball fan better as a solitary experience ("I love my Tigers") or as a shared experience within one's tribe ("Bless our Boys!")? if we would turn this app inot a social destination for baseball fans, what shape would that take?

To find a road to some answers, we started by talking to fans, surveying existing Topps collectors as well as approaching baseball watchers at games and in local bars. How do YOU share and interact with your baseball "tribe"? In the end, we landed on a shared research document and user stories that allowed us to understand—should Pennant simply be the new "Facebook for baseball fans" or is it more of an "elegant Retrosheet (data provider)" and perhaps the new features we had been dreaming about should be less about socializing, chatting and liking...and more about consuming unique, elegant data and helping others consume by tagging past games and reminiscing via a commenting feature and on social media.

As the app was pretty much designed, after the research documentation my involvement in it's scale was two-fold: First, I helped create new branding—I designed and art directed the logo, icon and splash page, as well as collaborated with a development team in creating new features (audio playback, tagging and checking, sharing moments to social media) and revised interactions (such as a seamless transition between radial and grid box score views). Second, I was most instrumental in conceiving, designing and art directing marketing landing pages for the app alongside a writer/editor and small team of freelance front-end developers whom I oversaw. The wireframes for the browser-based landing pages are here. We also created a "Summer Barnstorm" Campaign (highlighting shared Twitter memories on a team-by-team basis throughout the summer of 2012), all marketing materials and mobile ads. The designs for those pages can be seen on his gallery page.

Final visual design for the Topps Pennant landing page as viewed on browser. I designed the logo and the overall visual design (fonts, textures, colors) was pulled from the app's design system. In addition, I added an interactive carousel for testimonials beneath the left rail and added a place for marketing videos below the logo/tag. On the final landing page, the iPhone in the right rail presented a brief slideshow following a single data/memory search within the app.
AT TOP: Final visual design for the Topps Pennant landing page as viewed on tablet. AT BOTTOM: Final visual design for the "Summer Barnstom" landing page — each dot on the map coincided with a team and memory we "traveled" to that summer. When the Pennant team highlighted a specific team, fans had a limited amount of time to share their favorite memory of that team to Twitter — a randomly chosen memory won that fan a piece of baseball memorabilia from that specific team. I designed the landing page, the interactions (each city had a before, during and after state as well as a tapped state that would highlight the stadium and date of the Topps Pennant "visit" —whether upcoming or already completed). I oversaw a team of front-end developers and worked alongside a writer/editor in order to bring the campaign for life.
AT TOP: Final "About" page for the Campaign. AT BOTTOM: Highlighted current stop with team-specific hashtag
Final visual designs for the Topps Pennant landing page and the "Summer Barnstom" landing page as viewed on a phone.

ALL PHOTOS