The problem
When I joined Hackerearth, there were tons of inconsistencies across the products owing to the complexities. There were different button styles, different inputs, different layouts for similar components, and different interactions for the same flows. We wasted a lot of time debating design details, just because there were no solid rules for our product. These inconsistencies often resulted in bad experience for our users: they caused confusion and made it harder to understand and learn the system.
On the development side, because of the variety in codebase, it was hard to find the “right code”. Developers writing codes from scratch instead of reusing the previously written codes led to even further inconsistency. It was a vicious circle, and with our team growing over time, communication and product delivery got increasingly difficult.
Design sprints for the project
After putting our heads together, we decided to create a design guideline as the solution for aforementioned problems. We started it as a side project. We organised weekly sprints to keep the project alive. It was one of the most efficient way of working since those 2-3 hrs were highly productive when 3-4 designers brainstormed together on a single project. Since the team was small, it never happened to work multiple designers collaborating on a single project.
The foundation
Started with the style guide - The infrastructure of the design system to get a head start to the whole process. We tried to list down all important elements on whiteboard, then group elements by their usages. For example, style group like basic assets such as colors and typography, and components group includes buttons, cards, dialogs, forms, input fields, drop-downs, modals, error states, alerts, loaders, icons, tables and grids and etc. More to get added though. We discussed and designed these components and then built them in SketchApp.
Creating a vision
We needed to have a vision for Hackerearth Design and we created 'Nuskha' - design system library for Hackerearth. We have added the basic UI components and now it keeps growing. Whenever new elements are designed, the team of designers will evaluate, discuss, iterate and finalise it in weekly design meetings. After everybody's approval, it gets added to Nuskha. That is how it is being updated. When we grow as team, Nuskha will evolve to better standards. Usage guidelines, Do's and Don'ts, philosophies and so on will get added to materialise the vision of a bunch of early designers at Hackerearth.
