Structuring UgoWork design system to streamline design flows.

2023 • Ugowork

Energy-as-a-service for the material handling industry.

I joined UgoWork to help build a unified design system for their web app. I also worked with the team to review usability patterns and share guidance on design best practices.

Design SystemUX ThinkingVisual Design
  • Industry

    Electronic appliances

  • Company size

    Medium (51-200 employees)

  • Company founded

    2015

  • Website

    Visit website

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.

[Fig.1] Example of a list-item component built following the Atomic Design principles.
[Fig.1] Example of a list-item component built following the Atomic Design principles.

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.

[Fig.2] Overview of the variables defined for UgoWork.
[Fig.2] Overview of the variables defined for UgoWork.
ugowork
Copyright © Camille Massu 2025