Zion Design System
A year into working with BlueMatrix products I began to realized the inconsistencies in the UI.
I worked on this proof of concept for a design system for our internal products.
Conducted a visual audit log
Collected all components
Revised each category (at a high level)
High level categories I designed in this system:
Buttons
Navigation
Forms
Modals
Icons
Color
Typography
Tables
Dialogs
Confirmation dialogs
This component is pulling from the product Analyzer 2.0
Problem: Content and elements were being stretched at full width, contextual colors clashing at once, input fields with no clear labels.
Solution: Group elements that are related together, add white space in order to break out each section and identify each label accordingly.
Alert dialogs
Problem: Colors were overwhelming and had this urgency for the user to react promptly
Solution: Remove icon and include clear message what is the indent for the user to take.
Tabular Data
This component is pulling from the product Analyzer 2.0
Problem: Elements felt spread across and actions were not clear, user had to hover on each icon to learn the action.
Solution: Grouping all related elements and giving labels made it much clearer what kind of actions the user can take regarding this table.