0-1 Enterprise Design System
MVP Enterprise SaaS design system for internal game management tools at Riot Games, creating a safer workflow and improving developer efficiency by designing solutions informed by the needs of developers.
———
Problem Statement
Why would developers benefit from their own design system?
Value Proposition
Players and developers have distinct goals and needs, and Riot had a player facing system, but not one for internal tooling. A unified tooling design system could streamline development, ensure consistency across teams, reduce technical debt and reliance on external frameworks.
The goals were:
Create a centralized, scalable design system that simplifies developer workflows.
An experience that works across teams prioritizing dense and scannable data, increased build safety, with design support in place.
Forward thinking system that might allow for all internal tooling to use one system, reducing maintenance costs by deprecating existing duplicate systems.
———
Scalability
Focus on scalable baseline patterns and methodology
Navigation
I improved upon initial plan from another designer to view more options via hover, which would otherwise provide some UX challenges.
Accidental mouse movement could change what is being presented and cause friction. I organized a pivot to expandable elements, with nested content that went one level deep.
This improved usability, while still being scalable.
Buttons
For the MVP, I reduced our options from the initial wider scope to simplify implementation and maximize cost efficiency.
———
Information Density
Balancing density of information for easy scanning and readability
This project was key to growth of the company, so I needed to account for future features and work across products.
Tables
Top down data organization via Tabs
The most relevant data per feature was front and center, nesting additional content inside a dropdown.
Text fields are easier to scan when left aligned.
Number fields are more readable when right aligned.
———
Safety & Trust
Increased safety & improved knowledge to build user confidence and reduce live incidents
Often negative, friction is a positive on these use cases, when added with user guidance. The "type to confirm" code is modeled after destructive action prevention in github.
Guided instructions pace the process while providing context around destructive actions. Using an outlined button with red and an icon for a destructive action, reduces emphasis while retaining action clarity. Clear cause and effect and instructions provide next step guidance.
———
Final Outcomes
What was the result?
The launch of the design system was an initial success, but shortly after all the hard work was forced to be removed for an out of the box option.
Despite best efforts, implementation was inconsistent and incorrect across a variety of UI, which ended up causing repeated build breaks when other teams integrated their workflow. The project started as a collaboration between my team and another internal team to pool resources, but eventually the other team quietly reallocated resources. This meant the project lacked the appropriate resources, and by the time the problems were identified, it became less work to use an external framework than fix all the problems with the current elements.
Though much of the UI was removed for templated elements, the thinking and theory behind HOW and WHY use cases remained, despite moving to an external framework. This allowed us to retain the big picture requirements within use cases, creating safety and trust, with density of information for developer workflows.
