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.

Header.jpg

 

Colors for Verta webapp.png
Previous
Previous

Personal Project: Kinetic Typographic Video (WIP)

Next
Next

Presentation Design Template