Star Wars Card Trader

September 12, 2018

Role: Digital Art Director, User Interface Designer, Content Designer

Challenge:
After proving the success of a real-time digital card collecting game, and establishing a market for digital cards, how do you translate the platform to an app that cannot offer real-time, current events tied into some type of gameplay? That was the challenge in 2015, when after the success of three mobile trading sports apps), Topps Digital waded into its first entertainment license—Star Wars. Would diehard sports fans gravitate to an experience where all a fan could do was collect, trade and complete sets?

Solution:
Based on the UI of the sports apps, I altered the experience slightly to reflect a lack of real-time data or gameplay. I conceived and implemented the original UI design for Star Wars Card Trader, overseeing a team of content designers to build the cards, packs and marketing materials. To establish the visual language, I conducted a brief round of surveys among members of the established Star Wars community (on social media, at conventions) to identify a key visual touchpoint for an expansive franchise—we needed to find the most recognizable, all-encompassing visual that would appeal to all ages of fans spanning the original trilogy, three prequels, a cartoon and a brand-new film. The solution: the iconic Star Wars  opening crawl.

I set a palette rooted in black, white and yellow with reds, blues and tans for accent. The original font was Franklin Gothic, the font used in the crawl and early packaging. The display font is always Lucasfilm's current global branding font, and we set it all on a twinkling background of stars.

Pivoting to set completion and a melding feature offered depth to our intrigued fans, but the timing was perfect— Star Wars Card Trader launched just as the first wave of Episode VII  trailers and photos were released, and the resurgence in Star Wars nostalgia coinciding with excitement for the film created a groundswell of support, pushing the app to the top of the App Store rankings for entertainment games and creating a thriving secondary market

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