Building to scale, one element at a time

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a7c2e9c-88b0-487d-b3ab-45f15bb2ba97/Unide.png

Overview


Introduction

Creating a UI Library for in-house design system at UNI.xyz

<aside> ⚪ Jump to final design

</aside>

Key stats

Context


Background

'Design system' is a current day UX buzzword and for all the right reasons. I am a big advocate of that and have been proud to develop that for a web platform. While a design system is much larger entity on its own which includes principles, design philosophy, guidelines and assets, in this project, I'll limit myself to the UI library part.

Project history

To me, creating a UI library came naturally as a hack to save repetitive work. Initially at UNI, each element was designed from scratch which obviously meant more design (and development) time. Also there were several UI inconsistencies which would creep in due to the same. I remember auditing a web page to find we've used 9 font styles in single page! Thus, in order to reduce my work and ensuring consistency, I started creating a file for UI elements from where I could simply copy paste the elements whenever I needed them. That's how the UNI UI library came into existence. It started with 2 buttons & stayed that way for nearly a month.

A glimpse of how UI library looked after 3 months from existence

A glimpse of how UI library looked after 3 months from existence

Task