The Epic Design System leverages Nike’s consumer facing design system to empower enterprise applications.
Nike’s design system landscape had been siloed, and there were multiple existing design systems in use by various groups within the company before summer 2020, when the Nike Design System was released internally. The Nike DS was primarily designed for consumer facing applications, such as Nike.com, SNKRS, and NTC with a mobile first approach. Internal Nike users of data rich enterprise applications had additional requirements outside of the scope of Nike DS, and needed a way to build branded experiences that would meet their needs as well.
Role
My role was to provide a forward looking strategy for the Epic Design System that would allow our team to build enterprise experiences with the closest possible alignment to Nike’s new consumer facing design system.
Team
2 UX Designers
2 Engineers
Design Tools
Figma, Confluence, Storybook
Goals
Align design and styling of Epic DS components as closely as possible to Nike’s consumer facing design system.
Create rules for developing unique components meant to solve enterprise specific problems, that may never be adopted by Nike DS.
Build the design system in a way that requires minimal maintenance from the small enterprise design and engineering teams and can be quickly adapted for future changes to Nike’s enterprise design strategy.
User Insights
Users of internal enterprise applications at Nike had different, and additional, needs that fell outside of the scope of the consumer facing design system.
Hierarchy & Interest — Internal enterprise applications rarely have the same ability to use dynamic model and product photography in order to create hierarchy and interest within a data-rich layout.
Content Density — Enterprise applications tend to be more content/data dense than consumer products, and we needed components that would better fit into these types of situations.
Team Capacity — The design and development teams building enterprise applications were typically smaller than those working on consumer facing products. These teams needed to be able to scale their processes while spending less time on design and development.
Strategy
The Epic Design System can be broken down into 3 sub-sections:
Foundations — Core design principles and rules including color, spacing, typography, etc.
Components — UI elements that can be combined to build screen layouts.
Icons — Symbols that represent common workflow elements, actions, or objects.
By heavily leveraging the Nike Design System, Epic DS retains the strong design and usability principles created by the consumer design team, while only requiring enterprise design and engineering teams to maintain a small number of unique components.
Deviation Guidance
Providing guidelines and examples for how, when and why Epic DS deviates from Nike DS allows both designers and engineers to maintain consistency when building unique components.
The rationale for deviation was provided using the 3 sub-sections (Foundations, Components, Icons) of Epic DS.
Documentation
Detailed documentation enables designs to be rapidly transformed into coded Storybook components by small design and engineering teams. The documentation process includes both visual and written guidelines for each component, including information on when to use a specific component versus another, design and development best practices, and interaction guidelines.
Implementation
Pairing the design of components with the strategy and documentation information of Epic DS empowers small enterprise design and engineering teams at Nike. They can now design and implement user interfaces for data-rich enterprise applications that align to the styles of the Nike Design System, require minimal maintenance, and can be quickly updated or augmented as Nike evolves its’ overall design system landscape.
Conclusion
The strategy for the Epic Design System has been shared with the larger Customer Experience team within Nike Enterprise Architecture and Platforms, and is being used as a guide for building out the atomic components in both Figma and Storybook.