Case study: Initiating a startup’s design system from scratch.
How I created a foundation for a stealth startup’s design system.
--
As the first Product Designer at Highspace, I felt it was incumbent on me to build (or at least attempt to build) a foundation for the company’s digital design language—a design system that will act as the go-to source of components for anyone who’ll design and build the product.
This case study shows how I set off to build a design system, and ended with building a library of UI components—a UI library.
As of me editing this case study in Jan 2021, the final website is still in its development stage and yet to go live.
Alright, let’s go!
About Highspace
Highspace is an online C2C platform where users can rent or list on-demand high quality studios (similar to Airbnb, except here instead of renting homes, it’s studios.)
How it started
After the initial week or two of designing the website’s landing page, sign up/login page, and a few other foundational screens, I noticed they lacked consistency. I knew we needed a system that guides and keeps Highspace’s design consistent. That’s when I got to know about design systems.
The co-founder, Abhishek shared a mood board of pictures that he said portrayed how Highspace as a brand had ought to look and feel like (Fig 1).
Defining basic atoms
With the help of the mood board, I created the color palette, type scale, & buttons (Fig 2). With these in place, I knew I would be able to kickstart designing product flows with a base level of consistency and then build from there.
Creating components
With the help of color and type, I started to design the fundamental site components like input fields, navbar, alert pop-ups, and drop down menus (Fig 3).
Gathering UI components library occurred simultaneously while designing the rest of the product.
After these fundamental site components were designed, it was just a matter of documenting new components as I designed more screens. For instance, while designing the Listings page, Bookings, and the Notifications pages, the following components were derived (Fig 5):
When the time to design the Highspace Blog came by, I knew that the current UI type scale wasn’t going to do justice to Blog content’s readability. This was because 16px body text is a little hard on the eyes, so I created a separate type scale for Blog content with the root element’s font-size as 21px (Fig 7).
Reflection
Realistically, this UI library that I’d built was nowhere close to a comprehensive design system for Highspace, but my goal wasn’t to achieve completeness. I had set on this endeavour to build a foundation for Highspace’s digital design language. A foundation that the designers who work on the product in the future can build upon without having to start from a blank slate.
This project helped me understand in reality how design systems bring clarity in the chaos. It also helped me hone my Figma skills by pushing me to use Components, Auto Layout, Variants, and healthy naming conventions.
🔥 Thank you for reading this case study! Hope you like it. I would love to hear any feedback you have! Leave your comments here, or hit me up 👇🏻
