TurboHire's
Design System
To create a scalable and standardized design system. There are many limitations to the existing pattern and the makeshift design system. To take the platform to a new level, the idea of an updated Design System was made, by taking aesthetics, usability, consistency, and scalability into account.​
​
Role: UX/UI Designer & Researcher
Timeline: 3 months (Ongoing)
Team Involvement: 2 UX/UI Designers
Project Status: Ongoing
Navigate to -->
Note: Note that the sample of components that are shown in this project is not the total amount that conforms to the design system, but rather a group of them that have been majorly completed and ones where I was majorly involved in. It is also important to consider that not all the work was done just by myself, but rather that the definition process of the new components or updates is carried out cross-functionally, so the credits are also shared with the other peers that collaborate in the Design System.
About the Project
TurboHire is a Talent Intelligence platform that combines candidate discovery with integrated interviews to create a structured recruitment process. Its design system was last updated a year back and the structure was not created as per Industry standards.
​
TurboHire is growing dynamically and scaling each day. Hence it was important to update the design system and take on a more structured approach that would help scale the design system with its increasing use cases and size.
My Role
The Team is built by approximately 3 designers, 1 Researcher, 2 Product Managers, 2 UX Leads and 1 UX Testing Engineer. But for this project, only the 3 Designer (including me) worked on.
My role is as a Designer and Researcher within the design system team and together with the Engineering Team and Co-founder, we were in charge of preparing the timeline of the project- about 3 months to revamp the entire design system and fixing the UI and structure of the entire design system.
Research
I study leading world-leading designs and files from the figma community in what I would call a personal training montage. To learn how they make their products look so neat and pleasing. I look at how leading apps use typography (the weight, the sizes). I observed the sizes of buttons they use, how round they are, and the spacing they use. I study down to the pixels by using screenshots at 1x resolution. I suggest all aspiring UI designers do this to learn about the typical sizes of the elements on the screen.
​
Here’s a list of designs I looked at :
Gmail, Vood Design System, Material UI, Vladin Design System,Zendesk
Experimenting
To make sure all the pieces work and the selected color palettes and spacing system support all desired UI components and structure, I test the design system with actual designs. Making adjustments to make sure the basic building blocks provide enough flexibility and choices to make the system easily scalable. All the while, I try to limit variations and choices to make the system easy to use. I also ensure that all decisions are logical and systematic.
The Process
To enter a new component or a component update to the design system, initially, the requirements come from the business needs (market) in which the UX and UI designers designated to that project start working with the first sketches, then it is taken to the Playground where feedback from the entire design team is shared, including the Product Manager and the Engineering team as well as those of us who integrate the Design System team in order to have a sense of transversal approach of the component and avoid focusing in a specific use case of a single market.
After a joint review, it is defined if it is necessary to test with the research team before componentizing the component and with those iterations, we (DS) take it to define behaviour, responsiveness, variants and all the necessary aspects of the definition of done checklist before hand-off to the engineering team. After this step, in a demo touchpoint, we can see the outcome of the component developed, available in a staging environment. Then during the QA process, the implementation of the flow is if its evaluation is correct considering the component documentation.