Star Wars Card Trader

July 5, 2017

CASE STUDY:
In 2015, following the success of three mobile trading card apps (BUNT, HUDDLE and KICK, our European football app), Topps Digital waded into it's first non-sports license—Star Wars. Topps has been making Star Wars cards since 1977—the first licensor to offer product based on the franchise ever. So it was only natural that it be our first foray into entertainment.

The key question was how to offer an app without real-time, current events tied into some type of gameplay. Would our diehard BUNT and HUDDLE fans gravitate to an app where all you could do was collect, trade and complete sets? Pivoting to set completion and a limited melding feature offered depth to our intrigued fans, but the timing was perfect— the app launched in early '15, just as the first wave of Episode VII: The Force Awakens trailers and photos were hitting the public. The resurgence in Star Wars nostalgia coinciding with excitement for the upcoming film created a groundswell of support for the app, pushing it to the top of the App Store rankings for entertainment games and creating a thriving secondary market

Based on the UI of our sports apps, the UX was changed slightly to reflect the lack of no real-time data or gameplay. I art directed both the content and UI design for Star Wars Card Trader by Topps, overseeing a team of staff and freelance content designers, establishing it's visual language and content guidelines. After a brief round of surveys among the established Star Wars community (on social media, in person at conventions, friends and colleagues) we had to decide what the key visual touchpoint would be for an expansive franchise—what was the most recognizable, all encompassing visual that tied the three originals, three prequels, cartoon and upcoming film together? The answer: the iconic opening crawl.

We set a palette rooted in black, white and yellow with reds, blues and tans for accent. The original body font was Franklin Gothic, the font used in the crawl and on early Star Wars packaging. The display font is always based on Lucasfilm's current global branding font (at the time it was "SwCrawl" — nowadays it's "Eund").

The visual language of Star Wars Card Trader had to be inspired by key visuals that could connect all six movies (seven, with the upcoming Force Awakens) and cartoons. The iconic opening crawl — fonts, colors, background— was used to speak to Star Wars fans of all ages, no matter when they began their journey in a galaxy far, far away.
The visual language applied to the original on boarding / sign-in flow. Fans entered their birthday, chose an identifying faction or class (customization!), set a fan name and then confirmed the information. The color palette and fonts are culled directly from the iconic Star Wars opening crawl.  See more of the visual language applied here.
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, Jabba's palace for the market), tailored profile header dependent on your chosen faction, unique and desirable card content and Star Wars specific pack flourished, like the blast door opening seen above.. See more of the content here.

ALL PHOTOS