Verta Design System
Verta AI is a Machine Learning platform that helps enterprise data science and machine learning (ML) teams develop and deploy ML models.
Year: 2020
Problem: The product had very little consistency, rationale, or standards being followed in the existing components. They were solely functional. In a way, the UX designer had to build components like buttons or tables on the go for every project. This caused further inconsistency in their anatomy and delay in the delivery of assets to developers.
Solution: The solution was to create Verta’s design system. This included making a library of the frequently used components, proposed components, and icons and defining the typography, usage, and anatomy rules. In the end, Verta’s design system created a huge impact on the teams in terms of consistency of components, and speed of design & development.
Role: As a UX intern, I was responsible to define Verta’s defining the rules for the usage and anatomy of the components that would form Verta’s design system. This also included creating template for the library that would work well for every type of component and addressed the needs of a globally distributed team of developers. Every week, I along with the Lead UX Designer presented out work-in-progress with the Founder/CEO and the Lead Web Developer. All the deliverables were handed over to the development team and are currently in process of being converted into React Components.
The List
Components that are currently used in Verta’s product, possible components & proposed components:
Avatars
Badges
Breadcrumbs
Buttons
Cards
Checkboxes
Dropdown & Combo Boxes
Field Value Pairs
Header
Input Fields
Labels
Lozenges
Modals
Pagination
Tabs
Tables
Toast Notifications
Tooltips
Template
The global template consists of a brief description of the component, types within the component, anatomy, and usage along with notes for the developers.
Components
This is an example of how each component Sketch file is formatted and delivered. Each component is unique from the other in terms of complexity, categories within the component, types, states, etc.