top of page

Luciana Caetano

Workfreeli

Building a scalable UI system for a collaborative business platform.

Role

UI Designer

Design System
Component Library
Visual Design

Developer Handoff
Documentation

image 10
image 16

Created while at Navigate Group

Workfreeli

Building a scalable UI system for a collaborative business platform.

Role

UI Designer

Design System
Component Library
Visual Design

Developer Handoff
Documentation

image 16
image 10

Created while at Navigate Group

About the Project

Workfreeli is a collaborative business platform that brings communication, task management, and business workflows into a single product. As the platform expanded, maintaining a consistent interface across features became increasingly important.
As the UI Designer, my role was to create and evolve the product's visual language, translating UX concepts into a scalable design system that designers and developers could use consistently throughout the application.

image 43
image 42

Responsibilities

  • Designing the visual interface for new product features

  • Building and maintaining the Figma component library

  • Establishing typography, color, spacing, and icon standards.

  • Creating reusable components and interaction states

  • Supporting developers during implementation

  • Maintaining visual consistency across the platform

image 17
image 11
image 24
image 22
image 26

The Challenge

As the product evolved, new features were being introduced across multiple areas of the application. Without a shared UI system, inconsistencies could quickly emerge, slowing development and creating an uneven user experience.
The challenge was to establish a flexible design foundation that could scale with the product while remaining easy for both designers and developers to use.

My Approach

Rather than designing individual screens in isolation, I focused on creating reusable interface patterns that could be applied across the product.

This included defining:
Component structure
Visual hierarchy
Spacing rules
Color usage
Typography hierarchy
States (hover, focus, disabled, active)
Consistent interaction patterns

Working closely with the UX Designer ensured that interaction flows remained intuitive, while collaboration with developers helped keep the system practical and implementation-friendly.

image 13
image 41

Design System

  • Color Tokens

  • Typography

  • Components

  • Buttons

  • Forms

  • Cards

  • Tables

  • Navigation

  • Variables

  • Documentation

image 37
image 35
image 27
image 29
image 38
image 40
image 33
image 32
bottom of page