Project summary

A journey of all things VSorts™ AI

VSorts AI UI Library

The design library was curated over a number of months using Figma's componentization capabilities and auto layout functions. A standardization was made for all rounded buttons and various others. Each component in the button category had some sort of hover and activate state which could be viewed through a prototyping screen.

​Icons and other visuals were split between uniform and non-uniform in order to organize and accurately implement them into different spaces.

Text and color styles were set up with the ability to add special cases or new styles at any time (which the team tried to avoid, but had the capability to execute). Text styles were put into 4 categories being a decorative, heading, body, and utility categorization.

Color styles had 3 internal styles and were specifically named to match the backend code base. The styles included the main color as well as a tint and shade color to use as accents. In some cases, there was a Main accent color that would either be a lighter version, or a 50% opacity defined as a hex code.

Different navigations were curated for the multiple products that were encased under PairTree. This included both a mobile and desktop setting which were created through a series of building blocks and Figma's auto layout function.

Global styles were created to be used as bases across the platform. These global pieces were use for functions, error states, spacing examples, and more within Figma and the design itself.

Gathering Inspiration

Using pre-existing screens that were created before my arrival, Dribbble, Behance and more allowed me to create a large inspiration board. This served as a source of drive for the creation of PairTree as a redesigned platform

Emails were also gathered as inspiration in order to revamp the marketing emails that went out to all of our users for both general and specific purposes.

Next project

PairTree