Case Study
Ayasdi - Core Design System
Project Info
While designing multiple products for Ayasdi, I created this design system and guide to house a living inventory of UI components. Anyone working on Ayasdi products was able to reference this guide and its associated InVision page or sketch cloud page for specifications, copy component-specific CSS or download actual sketch components.
The Challenge
To refine Ayasdi’s visual language to be simpler, more concise, and use color in a communicative way.
This design system expedited my process as well as becoming a style reference for both local and offshore developers.
Client
Ayasdi
Dates
05/2018-12/2018
Responsibilities
– Design (visual and interaction)
– Hi-fi prototyping (final designs for approval and handoff to dev)
The Approach
Develop a single, unified system that was transferable across all platforms and devices as well as having the majority of components function in either a dark or light theme.
The color system was based on Ayasdi’s logo colors.
Ayasdi orange became a color of immediacy to be used for important messaging as well as CTAs.
The cyan was then derived from orange as a complementary secondary color.
The rest of the palette was created using combinations in Adobe’s Color tool using orange as a base.
The Stark accessibility Sketch plug-in was applied to monitor contrast for all usage of type.
The chart colors were also chosen to accommodate color blindness.
The typography system using the Google typeface “Roboto”.
Form fields and other input UI
Dropdowns and tables
Tables with specific states and interactions.
Callouts
Button types