Developer Informed MVP Design System
Enterprise SaaS design system for internal game management tools, creating a safer workflow and improving developer efficiency.
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.
Balancing density of information for easy scanning and readbility
Typography
This project was key to growth of the company, so we we needed to build a framework accounting for future features.
"Inter" provided the needed information density and clarity, but with fewer variations to improve implementation.
A grid tracked the fonts in use and their locations, helping identify what needed to be replaced or removed.
Font usage locations were identified, with additional research on other internal portals (not shown here) to lay the foundation for future alignment.
Alignment was created with the broader internal typography system overhaul that was in progress.
Options were streamlined around weights and headers, to simplify implementation and define standards.
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 better when right aligned.
Increased safety & improved knowledge to build user confidence and reduce live incidents
Destructive Actions
Friction is often spoken about negatively, but is use protectively here, and thus beneficial in this scenario.
Deletion might be the end goal, an accidental live incident is more problematic than additional pre-cautionary steps.
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.
The "type to confirm" code is modeled after destructive action prevention in github.
Clear cause and effect and instructions provide next step guidance.
More often than not, developers had no clear guidelines about features. Best practices, how features work, and the ability to find timely support was a challenge.
Providing proper context along with templated workflows following best practices, lowered the knowledge bar on complex experiences. Providing an easy path to specific feature help (via support ticket or documentation) streamlined troubleshooting on both ends, including providing a path to knowledge within our documentation.
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 we use the elements remained. This allowed us to retain the big picture requirements within use cases, creating safety and trust, with density of information for developer workflows.
