When I joined Hubject, the main challenge was the lack of a cohesive design system and clear ownership. To ensure consistent user experiences, I focused on establishing a robust design system library and a single source of truth. My priority in the second quarter was organizing and documenting all design elements systematically for a seamless user experience across our products.
Role
Principal product designer
Duration
May - July 2022
The challenge
In the absence of an in-house design team, there was no ownership of user experience expertise from research to final UI. In this context, my initial focus was on establishing a single source of truth. This foundation was essential for enabling fast scaling with the future design team and ensuring consistency and efficiency in our design processes.
Establishing source of truth
First, I organized the three main design files: Explorations for experimental UI work, Design System for documenting library components, and Hubject Platform for official designs shared with developers. I created an epic in Jira and corresponding tickets to bridge the gap between our CSS library and Figma. This process is enhanced by weekly routines with the design team, POs, and developers to update component usage and plan upcoming changes.
Centralized components: Data Table
After preparing the UX/UI consistency plan and tickets, and discussing priorities with the developers, we began by centralizing the data table component. In a B2B platform, this is one of the most important and frequently used elements.
The sidebar
Afterwards came the sidebar which was being handled indivually per page which caused a lot of inconsistencies like different interaction behaviours.
The header
Probably together with the table and the sidebar the most common used component across all pages of our product is the header. This one was also slightly different in each of the CSS pages. We designed it to have a unified header centralized in the CSS library.
Adaptiveness
92.3% of visits to our portal are from desktop devices, as many customers use it while working from home or in the office on large screens. Thus, going fully responsive for mobile wasn't necessary. Instead, we focused on adaptiveness to cater to different screen resolutions.
Results in numbers
The UX/UI consistency epic, which I managed and owned, has been successfully implemented. This initiative increased development velocity by 3% and removed up to 150 redundant lines of code from the portal.
Rituals
Collaborating with developers and product owners, we've established routines and rituals for shared components and interaction patterns across the Hubject portal. This ongoing process gains momentum as more colleagues come on board, leading us toward full consistency at a faster pace.
