Lerian Console
Da análise à arquitetura de uma plataforma unificada de core banking.
Papel
Product Designer
Cliente
Lerian
Ano
2025
Status
Em andamento
Dados ilustrativos para demonstração.
A Lerian é uma startup de core banking que oferece um ecossistema modular de soluções financeiras, do ledger open source (Midaz) a produtos de orquestração, reconciliação e geração de relatórios. A proposta: dar às instituições financeiras infraestrutura flexível, segura e escalável para operar e ir a mercado mais rápido.
O Console nasceu como interface de um único produto. Com o crescimento do ecossistema, cada novo produto ou plugin entrava sem um padrão comum, gerando inconsistência visual, curva de aprendizado repetida e fricção de navegação. O desafio: transformar o Console na porta de entrada única do ecossistema, capaz de comportar múltiplos produtos sob uma experiência coerente.
Antes de desenhar, fiz uma leitura crítica do produto existente e do mercado. Sem uma etapa de pesquisa com usuários neste projeto, a base de decisão veio de duas frentes: uma avaliação heurística da interface e um benchmark de referências.
Avaliação Heurística
Conduzi uma avaliação heurística do Console, mapeando os principais atritos: navegação sem padrão à medida que novos produtos entravam, inconsistências entre o que estava documentado no design system e o que estava implementado, e falta de um modelo claro de transição entre os produtos do ecossistema.
Benchmark de Referências
Analisei referências de mercado para calibrar as decisões de arquitetura e navegação: o que adotar, o que evitar e onde havia oportunidade de diferenciação.
A arquitetura em duas camadas
Camada I — A Suíte
O “Lerian Console”: a plataforma que gerencia o acesso ao portfólio de produtos (Midaz, Reporter, Flowker…) e a governança global. A ativação de produtos vive no Header Global, em um Modal de Configurações persistente em toda a navegação. Referência: Atlassian.
Camada II — O Produto
O “Espaço de Trabalho”: a experiência dentro de um produto específico, com a gestão contextual de seus plugins e extensões. Cada produto possui sua própria área de Configurações para feature toggles. Referência: Slack.
Referências analisadas
Atlassian
App Launcher & Marketplace. Análogo direto para as Camadas I e II.
Slack
Plugin Discovery. Padrão-ouro em UX de Marketplace.
Vercel
Developer Experience. Gestão de projetos e integrações.
Brex
Financial UI. Padrões de tabelas, dashboards e dados densos.
Insights acionáveis
Componente App Switcher Global
Adotar “waffle menu” onipresente no Header como método principal de alternância entre Midaz, Reporter, Matcher e Flowker.
Home Focada em Ação
O dashboard principal não é só um launcher: ele permite ativar novos produtos.
Navegação Híbrida de Plugins
Entrada “Plugins” visível na Sidebar de cada produto, não escondida em Settings.
Drawer Pattern para Instalação
Gaveta lateral para detalhes do plugin, com instalação sem redirecionamento.
Tipografia e Tokens Financeiros
Fonte monoespaciada para valores monetários e IDs. Tokens “Subtle” no design system para badges e tags.
Decisões arquiteturais derivadas
Header Global unificado com Modal de Configurações persistente em toda a navegação.
Camada II mantém configuração de plugins interna ao produto.
Componentes “App Switcher”, “Plugin Hub” e “Drawer” criados como módulos reutilizáveis no design system da plataforma.
Diagnóstico do ecossistema: Console como camada única sobre produtos novos e legado.
Com os achados em mãos, o trabalho passou a ser decidir, não só desenhar. Cada decisão respondeu a um atrito concreto.
Navegação do ecossistema
Problema
Cada novo produto entrava sem um padrão comum de navegação, gerando fricção e curva de aprendizado repetida.
Decisão
Refatorei a Sidebar para comportar +15 rotas sob uma arquitetura de navegação única.
Porquê
Um padrão conhecido reduz a curva de aprendizado a cada novo produto que entra no ecossistema.
Transição entre produtos
Problema
Não havia uma forma clara de transitar entre os produtos do ecossistema.
Decisão
Componente de troca global de contexto (App Switcher) sempre presente no Header.
Porquê
O Console deixa de ser uma interface isolada e passa a ser a coluna vertebral do ecossistema.
Padrões reaproveitáveis
Problema
Cada produto tendia a reinventar seus próprios componentes.
Decisão
Consolidei padrões reaproveitáveis no design system da plataforma.
Porquê
Consistência passa a nascer por padrão, não por revisão manual a cada entrega.
Exploração: Fluxos e Wireframes
Traduzi as decisões em fluxos e wireframes de baixa fidelidade, testando a navegação entre a suíte e os produtos antes de subir para a alta fidelidade.
Do dashboard ao produto: como o usuário navega entre a suíte e os produtos pelo App Switcher.
Exploração do fluxo de seleção de produtos, detalhamento e gestão de plugins.
01 — Seleção de Produtos
02 — Detalhe do Midaz
03 — Plugins ativos
04 — Plugins instalados
Discovery e wireframes. Clique para ampliar.
Plataforma Unificada
O resultado é um Console que integra os produtos do ecossistema (Midaz, Matcher, Flowker, Reporter e Tracer) sob uma experiência única. Cada produto entra por um padrão conhecido, com navegação, contexto e identidade consistentes.
Protótipos: plataforma unificada e novo login. Dados ilustrativos para demonstração.
Gestão de Infrações (Pix / DICT)
Um exemplo concreto do Console em produção: o fluxo de gestão de infrações do Pix no Midaz. Listagem com filtros por ID Bacen e ID de transação (E2E), e um Sheet de detalhes com abas (Infração, Transação, Participantes), em light e dark, sobre o mesmo sistema de componentes.
Mesmo fluxo em light e dark, sobre os mesmos tokens. Dados ilustrativos para demonstração.
Padrão de Sheet de detalhes: estados e variações do relatório. Dados ilustrativos.
Refatorei a base de componentes do design system da plataforma e criei novos (ex.: Dropdown, Calendar, Sheet Details e padrões de fluxo de pagamento). A auditoria mapeou dezenas de inconsistências entre o documentado e o implementado. Resultado: múltiplos squads passaram a consumir a mesma fonte de verdade, com cada novo componente já nascendo alinhado.
Componentes modulares no design system da plataforma e o Modal de Configurações global (Camada I).
Componentes em Ação
Novas famílias criadas do zero, nativas ao sistema de tokens e com suporte a light/dark:
Dropdown / Select
Família de seleção com popover + checkbox: seleção simples, múltipla e toggle de colunas em tabelas.
Calendar
Calendário mensal modular, reutilizável entre produtos e nativo ao design system.
Datepicker + Time
Seleção de data e hora consistente, com os mesmos tokens e padrão de foco.
Componentes em ação. Dados ilustrativos.
Decisões de Design
Cada componente respondeu a um atrito concreto de consistência, escala ou acessibilidade.
Nativo vs. embrulhar biblioteca
Problema
Bibliotecas prontas (react-select, react-day-picker) trazem “baggage”: dependências, tema e API próprios.
Decisão
Construir os componentes nativos do design system, do zero.
Porquê
O componente precisa ser parte do ecossistema de tokens, não um externo adaptado.
Tokens e light/dark
Problema
Valores fixos (hardcoded) quebravam a consistência e não suportavam dark mode.
Decisão
100% dos componentes vinculados a tokens, com light/dark automático.
Porquê
Consistência nasce por padrão e a troca de tema acontece sem retrabalho.
Foco acessível (WCAG AA)
Problema
O focus ring inicial (2px accent) falhava no contraste AA.
Decisão
Iterei até um foco com borda interna + halo externo, contraste ≥ 3:1.
Porquê
Acessibilidade não é opcional em produto financeiro.
Identidade Visual: Branding Update 25.1
Criação de ícones e logos para caracterizar cada produto do ecossistema Lerian: marcas que funcionam como ícones, escaláveis e consistentes.
Lerian Brand DS
Library of our Brand + Marketing Design System.
Branding Update 25.1
Objetivo
Criar ilustrações (ícones, logos) para caracterizar e facilitar a comunicação e entendimento de nossa linha de produtos.
Branding Update 25.1
Premissas
Marcas como ícones
Grade 1:1, estética FontAwesome Sharp.
Escalabilidade
Fácil aplicação em múltiplos contextos.
Evoluir a marca
Preservando integridade, aportando consistência.
Ícones animados: identidade em movimento.
Usei IA (Claude) como apoio em análise, síntese e exploração de interface ao longo do processo.
- →Arquitetura de plataforma unificada: múltiplos produtos integrados sob um padrão único.
- →Sidebar refatorada como núcleo agnóstico para produtos e plugins.
- →Novas integrações sem quebra de consistência, com padrão estabelecido e replicável.
- →Design system da plataforma aplicado como única fonte de verdade em toda a experiência.
Aprendizados
Decidir é mais difícil, e mais importante, do que desenhar. O benchmark me deu repertório, mas cada decisão precisou responder a um atrito concreto do Console, não a uma referência bonita.
Consistência nasce por padrão, não por revisão. Consolidar componentes no design system evitou que cada produto reinventasse a roda a cada nova integração.
Há uma tensão real entre consistência e velocidade: nem toda decisão coube num único ciclo. Aprendi a priorizar primeiro o padrão que destrava mais integrações.
Em constante evolução
O Lerian Console evolui de forma contínua, incorporando feedbacks de stakeholders e times multidisciplinares em cada ciclo.