top of page
Cover (6).jpg

SmartConnect Design Library

 

Guiding interface design through clarity, consistency, and structure

The SmartConnect Design Library was created to centralize visual patterns and interface components used across DHL’s intranet. Designed to support both designers and developers, the library provides a shared reference for UI decisions, promotes consistency across teams, and speeds up the design-to-development process. It includes foundations, components, and usage guidelines tailored for internal tools and responsive environments.

Problem

  • Creation of the Design System library;
     

  • Maintenance and updates;
     

  • Documentation for developers and designers;

My role

  • Smart Connect was not following a unified DHL Design System;
     

  • No documentation existed on how to use the components;
     

  • Lack of consistency and standards across the platform;
     

  • Design was outsourced, and key decisions were fragmented with no single source of truth.

Results

  • Centralized the Design System, giving developers a single source of truth and reducing dependency on external design vendors.
     

  • Accelerated the creation of new screens and prototypes, making the process around 30% faster for the product team.
     

  • Improved design consistency across 10+ modules of Smart Connect, ensuring a unified experience for employees worldwide.
     

  • Reduced back-and-forth in design decisions, enabling faster alignment between internal and external stakeholders.

My Design Process

Audited existing UI

Reviewed existing SmartConnect interfaces to identify inconsistencies, repetitive patterns, and gaps in visual and interaction design.

1

Mapped foundational elements

Defined core design foundations—color palette, typography, spacing scale, icons, and grid—to build a consistent and scalable visual base.

2

Defined component structure

Created modular UI components (e.g., buttons, inputs, navigation) with documented states, variations, and usage rules to support flexibility and clarity.

3

Documented everything in Figma

Organized the entire system in Figma with clear usage guidelines, best practices, accessibility notes, and do’s & don’ts for both designers and developers.

4

Frame 14-15.png
Frame 14-8.png
Frame 14-7.png
Frame 15-4.png
Frame 14-9.png
Frame 14-14.png

Work in progress...

Coming soon:
- Card Components with structure and different types;
- Documentation with cases of use;
- Navigation library with the main Smart Connect components.

bottom of page