Rebranding e Design System
iPrazos · 2025
Agile Platform
Como reestruturei a experiência de um SaaS para melhorar controle e clareza operacional.
Overview
Da identidade visual à experiência do produto, o Agile foi redesenhado com foco em clareza, organização e escalabilidade.
O projeto envolveu a construção da marca, reestruturação da dashboard e definição de um design system escalável.
ROLES
Branding
UI/UX
Product Design
FERRAMENTAS
Figma
CorelDraw
After Effects
CONTEXTO
SaaS B2B
Startup
Contexto
Pequenas e médias empresas frequentemente operam com processos descentralizados, utilizando múltiplas ferramentas desconectadas para gerenciar demandas, clientes e acessos.
O Agile surge como uma plataforma SaaS modular, centralizando essas operações em um único sistema, com foco em simplicidade e eficiência no dia a dia.
Esse cenário gera:
Branding
Objetivo da marca
A identidade do Agile foi construída para refletir três pilares principais:
Simplicidade → reduzir complexidade operacional
Velocidade → facilitar execução de tarefas
Controle → organizar e estruturar processos
Referências
As referências visuais e conceituais partiram de:
Sistemas Modulares
Fluxos Contínuos
Interfaces Limpas e Funcionais
Construção da marca
A forma da marca foi pensada para transmitir fluidez e organização, refletindo a lógica modular do sistema.
Estrutura Organizada
Elementos Conectados
Fluxo Contínuo de Informação
Problema
Apesar da proposta do Agile, a interface anterior não refletia esses princípios.
Os principais problemas identificados foram:
Interface visualmente poluída
Baixa hierarquia de informação
Dificuldade na leitura e gestão de tickets
Estrutura baseada em grids rígidos, semelhante a planilhas
Decisão de Design
Mudança de paradigma: de grid para estrutura progressiva
A principal decisão foi abandonar o modelo de grid tradicional e adotar uma abordagem baseada em progressive disclosure, utilizando um componente expansível (accordion).
Problema do modelo anterior
Leitura horizontal extensa
Sobrecarga visual
Dificuldade em focar em tarefas específicas
Nova abordagem
Leitura vertical
Foco por item
Ações contextuais
Antes e Depois
A comparação entre as versões evidencia a evolução da interface.
Estrutura da Dashboard
A dashboard foi reestruturada com foco em organização e escalabilidade.
A nova arquitetura permite que o sistema cresça sem comprometer a experiência.
Principais mudanças:
Navegação lateral simplificada
Separação clara entre módulos
Redução de ruído visual
Navegação Lateral
Separação entre módulos
Design System
Princípios
O design system foi construído com base em:
Clareza → informação fácil de entender
Consistência → padrões reutilizáveis
Escalabilidade → suporte a novos módulos
Tokens
Definição de:
Paleta de cores
Tipografia
Espaçamentos
Componentes
Criação de componentes reutilizáveis:
Botões
Inputs
Sistema de tickets (accordion)
Manrope
Escolhida pela clareza e leveza na leitura em tela. Manrope entrega uma experiência visual confortável no uso diário, sem pesar a interface.
Shamrock
Ticket Module
HEX: #059669
Amber Gold
Vault Module
HEX: #FBBF24
Ink Black
Background
HEX: #14161B
Shadow Grey 1
Surface
HEX: #1C1E26
Shadow Grey 2
Accent
HEX: #272B35
Jet Black
Border
HEX: #2D313E
Bright Snow
Text
HEX: #F8FAFC
Platinum
Background
HEX: #F1F5F9
Bright Snow
Surface
HEX: #F8FAFC
Alice Blue 1
Accent
HEX: #E9EEF4
Alice Blue 2
Border
HEX: #E2E8F0
Ink Black
Text
HEX: #14161B
Resultado
Mesmo em estágio inicial, as melhorias trouxeram impactos claros:
Melhor leitura e organização dos tickets
Redução de complexidade na interface
Navegação mais intuitiva
