Me and the Design Systems
Where did it start, you may ask?
My love for Design Systems started even before I knew they were called that. A bit strange, right? Let me explain.
During my tenure as a Senior UX/UI Intern at a Fintech and Legal tech startup company called Solvendo — they are trying to digitalise the Corporate and Pre-pack Insolvency Resolution Process. [don’t mind the jargon, it means that it helps companies that are in debt and cannot repay], I was given a user flow to design the UI for.
Whoa… that’s a huge user flow. Right?
I handled the complete Pre-pack Resolution Process End to End. Above is the picture showing the flow chart of the process. As you can see, the flow is quite big. My day to day tasks were to design the UI for the user [being the company itself (b2b)] who opted for Prepack Insolvency Resolution Process.
The product being this big, there is a multitude of places where I used to copy elements and paste them to other screens. Then my manager at the end of the day comes and do some changes to one screen and ask me to update them in all.
Oh boy, it used to take another 60–90 minutes to change every single element. I thought “there has to be a better way”. So I searched for the same in the Figma Forum and got to know about Components for the first time.
Where is my tidiness? duh…
Well, I certainly did not know back then that organising the components matters. On seeing this component page in Figma, my manager appreciated me for building this UI Kit. Me to myself: UI Kit? What’s that? I said thank you to her and obviously searched for UI Kits.
On my way to meet DESIGN SYSTEMS
On searching for UI Kits, I came across “DESIGN SYSTEMS”. That was the very first time I ever saw that word. I immediately searched for them, and my first DS [I’ll refer to Design System as DS from here] I ever laid my eyes was on Atlassian Design System. I instantly fell in love with it.
I liked how everything was organised, well explained in how to use the components in a well-defined pattern.
We became friends, me and the Design Systems
So eventually as I worked with components, I totally liked the idea of single source of truth. The documentation part is where I wanted to focus more but since my primary focus at my internship is to design UI and not Design System, I did not get any time to write documentation.
Although, my focus was on Design, I wanted to refactor everything, so I started creating more components and started to replace the original UI with instances of the components. Here are some of the things I did after getting to know the importance of file organisation.
The File Restructuring
I wanted to make everything tidy, so I have restructured the file like this. It immediately tells the developers where a specific flow is, and because of the indentation, devs can understand which type of user it is.
Screen Annotation and Status
I got to know the importance of screen annotations for developers and I started making them. The left side annotation states the flow and the top annotation says the information about the screen itself. Each of them is provided with tags to mark as approved, work in progress or ready for dev.
It did not stop there…
I was so obsessed with DSs that I joined every other community related to them. I followed several people on Twitter, went through all the popular design systems, and currently, my favourite DS so far is Orbit by Kiwi.
I eventually mastered Figma, and learnt basically every quirk and hack available out there. People also call me Mr Auto Layout. I reached the point where people started suggesting me to create a course on Figma. So I started one. Take a look at it here if you want to know more about it [currently it is discontinued].
And then, I got Lollypop!
After completing my internship in August, I joined one of the largest Global Design Studio in the world — Lollypop. I was given the role of UI Designer in the company. [Also btw, the current Lollypop Website you see was one of the works I did at Lollypop]. Due to a presentation that I gave on Figma in this company, I became the Go-To Figma person. Anyone who needs help with Figma used to reach out to me and ask.
And that’s how I found my niche in Design Systems
Fast-forwarding to 3 months at Lollypop, I got into BYJU’S Project, where developers specifically asked for a component library. I volunteered myself to my Lead that I’ll take up this responsibility. And since nobody in my team has any idea about them, he assigned it to me.
I felt super enthusiastic while crafting that component library. It felt challenging and I just liked the entire process of making components responsive, using referencing with tokens and basically auto layouting everything. So at that moment, I decided that I wanted to be a Design Systems Designer and a UX/UI Designer.
Decided to build Chirp
So given that Design Systems role is very niche area, organisations looks for someone who already has a solid experience in building a system from scratch. That is when I decided to start my own Design System.
And that is how CHIRP got into existence. Read the System documentation and process I used to build it at my portfolio.
