2013
Project Requirements
Create multiple versions of a mobile app to enable players of the role playing game “Magic The Gathering” to do several online and offline tasks including:
- Keep complex scoring records for up to 8 players
- Look up Magic cards from a large historical database
- Create and manage multiple card “Decks” and player profiles
- Purchase new card packs online
- Locate physical store and tournament locations
- View scheduled events and add them to the device’s native calendar
The main technical challenge was to leverage a preexisting database of over 10,000 cards (artwork and information) that had been built on legacy technology. Some functionality was to be influenced by features that existed on the client’s current desktop-only website. The result was a single app, designed slightly differently to format onto tablet, iPhone, and Android mobiles. Two sets of wireframes and 4 sets of UI designs and were created to accommodate the various formats and vertical/horizontal orientation on Tablet.
My role as Creative Director at the digital agency Hoverstate was firsthand design of the app strategy and user flows, initial concept art, and eventually managing a team of 1 wireframe artist, 2 graphic designers, and 1 sound designer. I also was liaison to the technology team and the client product managers.
Information Architecture
The organization of the app revolved around a main menu that could be could be rearranged based on the user’s preference. Various user flows were considered and designed to work seamlessly with each other while considering future features. Complicated gameplay options could be turned on or off. Overall, a total of over 100 screens were needed.
User Experience Design
The main user experience challenge was to fit very complex functionality onto small mobile screens. Various features needed to be familiar to those who have used the desktop version of some of those features. The strategy was to reference and improve on familiar interactions from other successful applications (at the time) such as Facebook and LinkedIn. Complex functionality was stored behind collapsible “drawers”. Download Example Wireframe Document >
User Interface Design
This was obviously the fun part. After some meetings with the in-house designers from Wizards of The Coast, in which they mocked up some general aesthetic ideas, our team created an bronze and leather armor-inspired UI that showcased the exquisite artwork from Magic The Gathering products. Bright metallic gold highlights emphasized important interactions on each screen. The app experience was enhanced with smooth iOS-like motion and optional fantasy-inspired sound effects.
