Auditing the platform
I began by reviewing and analyzing the extensive legacy content to understand UgoWork's core values and main usability challenges. Designing a system of this scale required thorough research and interviews, revealing that the design system would primarily be used by non-designers. This necessitated clear documentation alongside the design system to ensure effective implementation and ownership by the team.
I also familiarized myself with UgoWork's tech stack and development nomenclature. By considering developers as my primary users, I aimed to improve design hand-offs and communication between teams.
Noticing incoherences
My initial analysis identified numerous inconsistencies in design and brand application: the main accent color was not consistently used, shadows and depth effects were irregular, border radii were not uniform, and there were mismatches across different interfaces.
Design approach
For a project of this scale, I used a simplified version of the Atomic Design methodology, which helps build a modular component library and saves time by reusing micro-components (atoms) across multiple components.
The mission was spread across two sprints of two weeks during which I kept in close touch with the clients to ensure alignment.
Let's get to building!
Building the design system went smoothly. I began by focusing on styles, then moved on to layout and components, and finally addressed templates and design resources. Shortly after I started, Figma released a major update introducing variables and a new dev mode. I leveraged these new features to support potential future light mode. By assigning colors, radii, and spacings to variables, I ensured components were easy to use, including many Booleans, text variables, and comprehensive documentation.
