SaaS Design System
A 0-to-1 design system for organization SaaS software.
Through staff augmentation, I joined the Orgspace team for seven weeks to lead the initiative of building a 0-to-1 design system for their product refresh.
🤔The company CEO hired me to build the Design System because they received feedback that they needed to modernize their UI and UX to attract more investment
The team comprised only three developers: the CEO, who also coded, the CTO, and a Principal Developer. They hired a designer on Upwork to design the product's V1. When they had difficulty getting more funding, they knew they had to hire a Product Design expert to set them up for success.
Translating to Code
I worked closely with the startup's CTO to align design tokens on Github, which they could then pull into their code base.
We could push tokens directly to GitHub through the Figma plug-in Tokens Studio.
Typography
To maintain consistency throughout the software, they badly needed a font, weights for that font, and Sizing and spacing conventions.
They didn't have this before I engaged with them.
Colors
I had started trying to define their semantic naming conventions because they hadn't used any naming convention previously. After an audit and inventory of all their products, I consolidated and defined color hierarchies and other styles. Additionally, to prepare for the consumer product using the system, I needed to add a supporting color to prevent the conflict of their primary brand color being red and negative states on input controls.