CeletiHub

Design System para Paltaforma de Recursos Humanos

Atuação

Product Designer

Responsabilidades

User Interface

Times envolvidos

UX, Design e Dev

Duração

1 mês

Contexto


🔹 Projeto desenvolvido para a plataforma Supercomm, ferramenta interna da empresa focada em centralizar processos de RH.


🔹 Funcionalidades da plataforma incluem: histórico de avaliação de desempenho, gestão de benefícios e folha de pagamento, cadastro e consulta de dados do colaborador.

Contexto


🔹 Projeto desenvolvido para a plataforma Supercomm, ferramenta interna da empresa focada em centralizar processos de RH.


🔹 Funcionalidades da plataforma incluem: histórico de avaliação de desempenho, gestão de benefícios e folha de pagamento, cadastro e consulta de dados do colaborador.

Problema


 ❌ A plataforma precisava de unificação visual e técnica


❌ Falta de um Design System padronizado dificultava a escalabilidade e aumentava o retrabalho.


❌ Necessidade de facilitar o handoff entre Design e Desenvolvimento, garantindo consistência e eficiência.

01

Pesquisa & Insights

🎯 Objetivo: investigar as necessidades específicas do time de RH


📌 Metodologia:

✅ Entrevistas qualitativas com todos os membros da equipe de Recursos Humanos.

✅ Estudo de ferramentas como Gupy e Sólides


📊 Principais descobertas:

🟢 Processos ainda eram realizados através do Excel

🟢 Fricção na experiência de gestão de dados do colaborador

🎯 Objetivo: investigar as necessidades específicas do time de RH


📌 Metodologia:

✅ Entrevistas qualitativas com todos os membros da equipe de Recursos Humanos.

✅ Estudo de ferramentas como Gupy e Sólides


📊 Principais descobertas:

🟢 Processos ainda eram realizados através do Excel

🟢 Fricção na experiência de gestão de dados do colaborador

02

Definição

🎯 A partir das pesquisas, iniciei a análise técnica com os desenvolvedores para alinhar a base do sistema de design.


🔹 Framework usado pela equipe de desenvolvimento: Laravel.


🔹 Em conjunto com o time, decidimos usar a biblioteca shadcn/ui, baseada em React e Tailwind CSS.


📌 Vantagens:
✅ Compatibilidade direta com Laravel
✅ Alto nível de personalização
✅ Base sólida para acessibilidade, responsividade e manutenção

🎯 A partir das pesquisas, iniciei a análise técnica com os desenvolvedores para alinhar a base do sistema de design.


🔹 Framework usado pela equipe de desenvolvimento: Laravel.


🔹 Em conjunto com o time, decidimos usar a biblioteca shadcn/ui, baseada em React e Tailwind CSS.


📌 Vantagens:
✅ Compatibilidade direta com Laravel
✅ Alto nível de personalização
✅ Base sólida para acessibilidade, responsividade e manutenção

03

Desenvolvimento

🎯 Preparação


🔹 Estudo técnico da documentação do Shadcn/ui


🔹 Alinhamento com o time de Design Gráfico para incorporar Paleta de cores da marca, Tipografia e estilo visual



📌 Processo:


1️⃣ Modelagem dos componentes no Figma

2️⃣ Criação de variáveis para light e dark mode

3️⃣ Refino dos tokens e controles de variantes

4️⃣ Documentação detalhada para desenvolvedores e designers

🎯 Preparação


🔹 Estudo técnico da documentação do Shadcn/ui


🔹 Alinhamento com o time de Design Gráfico para incorporar Paleta de cores da marca, Tipografia e estilo visual



📌 Processo:


1️⃣ Modelagem dos componentes no Figma

2️⃣ Criação de variáveis para light e dark mode

3️⃣ Refino dos tokens e controles de variantes

4️⃣ Documentação detalhada para desenvolvedores e designers

04

Testes & Ajustes

📌 Metodologia:

Quality assurance (QA) ou Controle de qualidade, Validação contínua com o time de desenvolvimento para:


✔️ Verificação da fidelidade entre Figma e código real


✔️ Ajustes nos componentes para melhorar performance e flexibilidade

📌 Metodologia:

Quality assurance (QA) ou Controle de qualidade, Validação contínua com o time de desenvolvimento para:


✔️ Verificação da fidelidade entre Figma e código real


✔️ Ajustes nos componentes para melhorar performance e flexibilidade

CONCLUSÃO

01

O Design System criou uma base sólida, escalável e coesa para a plataforma Supercomm

02

A integração entre design e desenvolvimento foi um ponto-chave do sucesso

03

O projeto reduziu significativamente o tempo de entrega e retrabalho das demandas futuras