Action Design System
A humble beginning
In order to accommodate changing requirements and provide consistent user experience, a modular and adaptable system was needed. I created the card system to achieve better grouping of information, better visual consistency and better usability across feature and platform requirements.
The Card System
The card system has three main sections:
Header Section - important highlights/headlines
Content Section - relevent media/info
Call-to-Action Section - link to addtional info/benefits
Scalability and consistency
The implementation of the card system for schedule proved to be essential in terms of scalability and consistency across our platforms. Started with mobile, the card system eventually found itself being used across our web apps and TV apps. The success of the card system also demonstrated our dire need of a design system, one that can be leveraged as soon as possible.
Multi-layer card system used throughout the web app, designed by a fellow desktop UX designer.
Cards used for a prototype project, designed by the same desktop UX designer.
Apple TV landing screen with a slightly modified card design for the schedule.
Designing the design system
In preparation for the beginning of the season, every platform (and there were many) was evolving at a breakneck pace and the design system needed to be immediately usable and easy-to-understand.
Which tool?
Sketch, Figma, Adobe XD, Framer X, Invision's Design System Manager and the list of both old and new UX design tool goes on and on. However, given the entire design team used Sketch and the urgency, the tool selection was obvious. We chose Sketch as the tool to implement the Action Design System.
May 2019 Update: Adobe XD seems to be the best tool for creating and maintaining design system.
How to organize a
design system?
I took some time to research how other companies and individuals organized their design system and came away with the following structure.
I used pages to organize major sections and components, such as changelog, colors, typography, cards, layout, etc.
Each page also includes artboards to represent different designs and day/night mode.
An evolving timeline
One of the sections/pages is our changelog! The changelog section was a place where we tracked all the changes in design and updated priorities in the roadmap. This way we know what has been changed, what to do next and whoever opens the document can get up to speed fairly quickly.
What's next?
In the context of a fast-paced, real-time sports entertainment technology company, immediacy is the key to making a usable and practical design system. I ask myself these questions to prioritize what's next: What are the immediate needs of the designers and stakeholders? What kind of guidelines and components do they need now? What are the most used components not yet included in the design system?