Developer Informed MVP Design System
Enterprise SaaS design system for internal game management tools, creating a safer workflow and improving developer efficiency.
CLIENT
Riot Games - DevPlat
Company
Riot Games - DevPlat
CLIENT
Riot Games - DevPlat
Role
E2E Lead Designer
Role
E2E Lead Designer
Role
E2E Lead Designer
Problem Statement
Problem Statement
Problem Statement
Why do we need another design system?
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.
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.
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.
Scalability
Scalability
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.
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.
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 to two sizes, action-based colors (red, green), and two generic colors (blue, black). Colors were adjusted for accessibility, aiming for a balance between AA and AAA standards, as the latter could be too restrictive.
Users should be able to see all options, even if inactive, so adjustments were made to achieve that.
"Ghost buttons" were replaced by regular link text.
Text-only or icon-plus-text options met most of our needs, while also adding limited use of a dropdown version for controls.
Buttons
For the MVP, I reduced our options to two sizes, action-based colors (red, green), and two generic colors (blue, black). Colors were adjusted for accessibility, aiming for a balance between AA and AAA standards, as the latter could be too restrictive.
Users should be able to see all options, even if inactive, so adjustments were made to achieve that.
"Ghost buttons" were replaced by regular link text.
Text-only or icon-plus-text options met most of our needs, while also adding limited use of a dropdown version for controls.
Buttons
For the MVP, I reduced our options to two sizes, action-based colors (red, green), and two generic colors (blue, black). Colors were adjusted for accessibility, aiming for a balance between AA and AAA standards, as the latter could be too restrictive.
Users should be able to see all options, even if inactive, so adjustments were made to achieve that.
"Ghost buttons" were replaced by regular link text.
Text-only or icon-plus-text options met most of our needs, while also adding limited use of a dropdown version for controls.
Information Density
Information Density
Information Density
Balancing density of information for easy scanning & readability
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.
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.
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.
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.
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.
Safety & Trust
Safety & Trust
Safety & Trust
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.
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.
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.
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.
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.