Rafael Eugênio

Ninguém sabia se o paciente tinha embarcado

A dor que virou eixo do trabalho apareceu na primeira rodada de conversas: a confirmação de retorno registrada no sistema anterior não provava que a viagem tinha acontecido, e a equipe dependia do relatório manual da agência para saber quantas pessoas embarcaram no mês.

Em volta dela havia outras camadas. A fila da regulação era uma lista única sem categoria, processos ficavam parados sem prazo nem alerta, e a ajuda de custo era calculada em planilha, caso por caso, sem histórico dos ciclos anteriores.

Onze papéis dentro de um processo só

Recepção municipal, coordenação estadual, médico auditor, regulação, agendamento no destino, passagens, financeiro, serviço social, controle interno, administração e o paciente em acesso assistido dividem o mesmo processo, cada um com um recorte diferente dele e com uma dor própria, do médico auditor que trabalhava fora do sistema ao financeiro que calculava diárias à mão.

A jornada tem doze etapas, do cadastro ao encerramento, e é governada por uma máquina de dezoito status com transições disparadas por evento: registrar um parecer deferido já move o processo para a fila de regulação.

O discovery que sustenta cada decisão

Nove atas de discovery, uma matriz CSD de quatro encontros, nove documentos de persona e os fluxos em versão atual e futura viraram vinte e três especificações de front-end e vinte e uma de back-end, com vínculo cruzado entre a tela e a regra que a sustenta.

A validação com pessoas incluiu teste de usabilidade moderado sobre três telas, com participantes escolhidos fora do domínio de saúde: se alguém sem repertório clínico navega, o operador treinado navega. O ciclo fechou com auditoria de UX multiespecialista sobre doze telas, e os achados viraram roadmap priorizado.

Da análise de domínio à interface implementável

Mapeei o domínio, os atores e a arquitetura da informação do fluxo completo.

Desenhei os fluxos e estados da solicitação, etapa por etapa.

Defini critérios de interface e conduzi os protótipos.

Documentei a consistência de componentes para a implementação.

Apoiei o desenvolvimento e revisei a entrega com a equipe técnica.

Usei agentes especializados em análise, documentação e QA, sem delegar decisão de produto.

O que cada módulo resolve

A navegação abre no painel de indicadores e se divide em três blocos: o fluxo do processo, com solicitações, regulação, agendamentos, viagens, ajuda de custo, permanência e encerramento; os cadastros de paciente, unidade e regional; e a gestão, com relatórios, permissões e trilha de logs.

A regulação virou fila única de parecer e encaminhamento, viagens cobre cotação, emissão, remarcação e confirmação de embarque nos modos aéreo, terrestre e fluvial, e a ajuda de custo calcula o período descontando os dias de internação do paciente.

O escopo inclui também as peças documentais do processo, do laudo médico digital e do termo de compromisso ao voucher consolidado, à consulta pública por protocolo e ao recibo de pagamento.

As escolhas que fizeram o fluxo caber na tela

1. O detalhe da solicitação virou cards por etapa, cada um com os próprios dados e documentos, porque cada etapa pertence a um setor diferente.

2. O cadastro foi fatiado em duas fases: a recepção registra paciente e documentos, e o diagnóstico cai numa fila clínica separada.

3. A fila de regulação recebeu categorias, tags por processo, coluna de tempo parado e alerta de cobrança externa aberta.

4. Tempo e prazo entraram como informação de primeira classe, com faixas semânticas e filtro por dias parado, para que um processo esquecido apareça sozinho.

5. As ações de fluxo acontecem em drawer, e a tramitação entre setores é um botão explícito de envio, com o que está fora do perfil visivelmente desabilitado.

6. As validações codificam regra de negócio, da duplicidade de documento com histórico ao valor de diária configurável em tabela.

7. O campo de outros contatos ficou em texto livre, e as múltiplas viagens de uma mesma solicitação passaram a existir na interface.

Por que aqui não há nenhuma tela real

Este sistema guarda dado pessoal sensível de saúde, protegido pela LGPD, e publicar print de tela exporia nome, documento, diagnóstico e itinerário de gente real.

As telas desta página vêm do protótipo navegável do sistema, alimentado apenas por dados fictícios criados para demonstração; nenhuma captura do ambiente real aparece aqui, apenas a tela pública de login.

Confidencialidade faz parte do ofício: quem trabalha com serviço público de saúde apresenta o trabalho sem carregar dado de ninguém junto.

Uma referência implementável para a equipe

A entrega é a jornada inteira organizada, com os módulos conectados e uma base de especificação que a equipe de desenvolvimento usa como referência de implementação.

O próximo passo é observar a navegação no dia a dia de cada setor e ajustar estados, prazos e permissões, com as correções da auditoria na ordem já priorizada.

Um app para uma operação individual

O app é de uso individual por decisão de escopo: uma pessoa por instalação, sem equipe, sem papéis e sem convites, porque a operação real é exatamente assim.

O cliente nunca entra no sistema. Ele aparece como cadastro e recebe o recibo pronto por mensageria, o que mantém tudo dimensionado para uma única mão operando no celular.

O que doía no controle em papel

O fiado é a dor central, então ganhou lugar fixo na tela: o painel separa total geral, valor recebido e valor pendente, em vez de somar tudo em um número que engana. A conta de cabeça virou subtotal e total calculados a cada item adicionado.

Cobrar era a parte mais desconfortável, e o recibo já sai com a chave de pagamento embutida e o pedido de comprovante escrito. Perder o caderno significava perder tudo, então cada cliente tem histórico permanente, com os itens de cada pedido e campo de observação.

Pesquisa por convivência

Não houve roteiro formal de entrevista aqui, e dizer isso com clareza faz parte do case: o levantamento veio de conversa e de observação continuada de como ela já resolvia cada coisa no papel, com cada entrega voltando ao uso real antes da próxima decisão de escopo.

A especificação, em contrapartida, ficou formal, com seis módulos escritos em duas camadas espelhadas de front e back, mais um índice com glossário dos conceitos compartilhados e as regras de contexto cruzado.

As regras que protegem o dinheiro dela

1. Preço congelado na venda: o valor unitário é copiado do produto no registro e não muda depois, o que mantém o faturamento antigo íntegro.

2. Na especificação, fiado em aberto ignora o filtro de período, para manter dívida antiga visível; a presença dessa regra no build segue em validação.

3. Fiado é forma de pagamento comum, com aviso antes de salvar, e cria a venda já pendente, sem contorno possível.

4. Pago é irreversível, e cancelada também: só uma venda pendente muda de estado.

5. Excluir um cliente não apaga as vendas dele, que passam a existir como avulsas.

6. Produto com venda associada só pode ser desativado: sai da busca de novas vendas e continua no histórico.

7. Cliente é opcional na venda, e a data vem como hoje mas aceita edição, para quando ela lança a semana toda no domingo.

Interface para quem não usa sistema

A tarefa mais frequente ficou a um toque: quitar um fiado acontece no próprio badge da lista, e ver os itens de um pedido expande o card no lugar. A escala é grande de propósito, com valor principal em corpo bem alto e alvo de toque generoso.

O fluxo de venda nunca a joga para outra tela, porque cadastrar cliente ou produto acontece dentro do próprio campo de busca. A linguagem é de dona de negócio, com quantidade em stepper de mais e menos, e depois de salvar uma tela dedicada traz o resumo, a prévia do recibo e o botão de compartilhar.

Uma rotina concreta em experiência direta

O resultado é um aplicativo instalável no celular que transforma uma rotina real de vendas em algo consultável, com o fiado visível e o histórico preservado.

Esse é o tipo de produto que se corrige na semana seguinte, então o próximo passo é seguir observando o uso para reduzir o esforço das tarefas do dia a dia.

Perder um prazo tem consequência irreversível

A primeira decisão de produto foi transformar risco processual em número visível: cada prazo carrega um valor em risco, e o painel do escritório soma esse valor para mostrar quanto está em jogo naquele momento.

Honorário, na mesma leitura, deixou de ser um campo só. O sistema rastreia quatro naturezas, valor contratado, valor no êxito, valor sucumbencial e valor da causa, porque na prática são quatro conversas diferentes com o cliente.

Cinco papéis, cinco módulos, negação por padrão

Os papéis são administrador, advogado, financeiro, atendente e usuário. O papel define o alcance geral, e uma segunda camada trabalha por módulo, com visualizar, editar e excluir independentes.

A escolha estrutural é a negação por padrão, porque em produto que guarda informação sigilosa de cliente o silêncio precisa fechar a porta.

Os dois painéis ficaram separados por regra explícita de escopo: o pessoal mostra apenas o trabalho de quem está logado, e o do escritório mostra receita, despesa e balanço do negócio inteiro.

Cinco módulos e o que cada um assume

O jurídico é o coração: processos, tarefas, prazos preclusivos, audiências, clientes, parceiros e comunicação interna, com o detalhe do processo aberto em dez abas, da visão geral e da movimentação até honorários, partes e financeiro.

Prazos ganharam módulo próprio, com métricas de atrasado, vencendo hoje e próximos sete dias, e um botão que gera itens na caixa de entrada dos responsáveis pelos prazos em risco.

Cada módulo recebeu a visão que o trabalho dele pede: kanban nas tarefas, pipeline de leads no comercial, tickets com tempo médio de resposta no atendimento e transações, recebíveis, dívidas, contas e patrimônio no financeiro.

Escuro por jornada longa, violeta por diferença

O sistema visual foi documentado antes das telas, com o racional escrito: modo escuro como padrão porque advogado passa horas seguidas na tela, violeta elétrico como acento por ser cor pouco usada no setor, e Inter em toda a interface, com monoespaçada só em número de processo e documento.

O manual registra também o que foi recusado e por quê, de neumorfismo a Material clássico, o que evita que a discussão volte do zero seis meses depois. O princípio mais operante é que o status fala mais alto que o texto, então todo badge usa par de fundo e texto, com cor sempre acompanhada de peso ou ícone.

O catálogo emergiu das telas: as vinte e sete telas foram especificadas primeiro, e os quinze componentes principais apareceram por recorrência, cada um com a frequência de uso registrada.

Um padrão de tela e regras que o sistema garante

1. Toda listagem segue o mesmo padrão em quatro blocos, métricas, ações, abas de status e tabela, repetido em cerca de vinte telas.

2. A exceção é deliberada e está justificada: atendimentos usa lista de cards, porque ali o conteúdo de cada item importa mais que a comparação entre linhas.

3. O menu de ação da linha aparece só no hover, e a ação destrutiva fica isolada por separador, em vermelho, longe do clique acidental.

4. Existe uma regra antideriva declarada: nenhuma cor de status nova, nunca duas no mesmo elemento, e vermelho reservado para urgência e erro.

5. As regras de negócio protegem o histórico: prazo perdido não se edita, processo encerrado fica somente leitura, e processo com vínculo não pode ser removido.

6. Registrar o recebimento de um recebível gera a transação de receita automaticamente, e recebível vencido muda de estado sozinho.

7. Toda alteração gera log de auditoria e toda exclusão é lógica, como fundação transversal dos cinco módulos.

Por que as telas aqui são representações

Um sistema jurídico guarda dado protegido por sigilo profissional e por LGPD ao mesmo tempo: nome de parte, número de processo, valor de causa e honorário contratado.

As telas desta página são capturas do sistema real rodando com dados de demonstração: nenhum nome, número de processo ou valor corresponde a caso real.

A mesma disciplina orientou a especificação: vocabulário que ainda precisava de confirmação ficou marcado como pendente em vez de virar taxonomia inventada.

Um protótipo funcional de plataforma operacional

O resultado é uma plataforma prototipada com cinco módulos que compartilham linguagem, componentes e infraestrutura de permissão, documentada em especificações de tela, de domínio e de design system que se referenciam entre si.

O próximo passo é entrar com um módulo novo para confirmar se a arquitetura de objetos conectados se sustenta sem retrabalho estrutural. É esse teste que separa um sistema de um conjunto de telas parecidas.

Confiança sem parecer burocrática

Marca e interface foram tratadas como um assunto só desde a primeira decisão, para que o sistema de produto herdasse a promessa do brandbook em lugar de reinterpretá-la a cada tela nova.

Primeiro a fala, depois o desenho

O brandbook começa pelo território verbal: essência, missão, visão, posicionamento e tom de voz vêm antes de qualquer decisão de forma.

O tom ficou em cinco atributos, clara, confiável, institucional, tecnológica e parceira, que depois orientaram o texto institucional e também os rótulos e as mensagens dentro dos produtos.

Construção geométrica e versões previstas

O símbolo nasce de um grid de traçado documentado, com nós, diagonais e eixos de alinhamento, o que permite redesenhar a marca no futuro sem depender da memória de quem a desenhou.

Cada versão foi definida junto com o fundo em que pode aparecer, seis combinações para o símbolo e quatro para o logotipo horizontal, com respiro e tamanho mínimo no mesmo capítulo.

Um azul em dez degraus

O azul da marca abre em dez degraus, cada um com hexadecimal, RGB e nome de token: o mesmo degrau que aparece no manual é o que a interface chama por nome na folha de estilo.

O azul institucional carrega a assinatura da marca, e os degraus vizinhos resolvem contraste de texto, estado de componente e superfície dentro das telas.

Três famílias com função declarada

Red Hat Display para cabeçalho, Inter para corpo de texto e Red Hat Mono para legenda e dado técnico, cada família com um papel escrito, o que reduz decisão discricionária ao montar uma tela nova.

As três têm licença aberta, largura confortável em densidade alta e numeral tabular, o que importa em sistema que exibe valor, protocolo e data em tabela.

Do avatar de perfil ao moletom da equipe

As aplicações fecham o manual em suportes de limites bem diferentes: perfil social em tema claro e escuro, papelaria, vestuário e mochila, cada um testando o tamanho reduzido, a impressão em tecido ou o recorte contra fundo colorido.

A prancha de papelaria entrou em recorte, porque a metade original trazia cartão de visita com nome, telefone e endereço legíveis.

O brandbook virou token, componente e governança

Do manual para o produto, o token vem em três camadas: o primitivo guarda o valor bruto, o semântico diz para que serve e o de componente amarra o uso em um lugar específico, o que permite trocar um tom sem caçar valor solto pelas telas.

Sobre essa base ficaram documentados os componentes, os padrões de tela e os templates, com densidade, navegação por teclado, foco, estado vazio e estado de erro desde o começo, porque é neles que a pessoa passa o dia.

Minha atuação cobriu a estratégia e os fundamentos da marca, o sistema de logo, cor, tipografia e aplicações, as foundations e os tokens, a documentação de componentes e a governança que decide o que entra no sistema.

O que eu levaria adiante

Um Design System nunca fica pronto, e o próximo passo é ampliar a cobertura de componentes e aprofundar a documentação de acessibilidade conforme novos módulos entram em produção.

O indicador que eu observaria é a frequência com que uma equipe cria um valor fora do sistema para resolver uma tela: cada vez que isso acontece, existe um componente faltando.

Uma marca para ser vista na tela e na rua

O símbolo foi construído em contorno aberto, com traço de espessura constante, para segurar tanto o tamanho grande do ambiente urbano quanto o tamanho pequeno do digital.

Cor como assinatura

A paleta reúne laranja, azul turquesa, azul profundo e vermelho sob o título que a própria marca deu ao conjunto, The Colors of Innovation. Cada cor tem fundo previsto e par de contraste definido, o que libera a aplicação sobre tinta, textura e fotografia.

Do muro ao feed

O mesmo símbolo aparece pintado em muro, impresso em grande formato e reduzido no perfil social, com a leitura conferida suporte por suporte, porque é no ambiente urbano que a marca perde detalhe primeiro.

A galeria completa do projeto

As demais peças da identidade estão publicadas na galeria do projeto.

A marca apresentada pertence ao cliente. O trabalho mostrado é de direção de arte e design.

• Ver Inside Lab Brand no Behance↗(abre em nova aba)

Cuidado clínico com temperatura

O padrão gráfico entrou desde o começo como elemento de sistema, para dar continuidade visual entre peças de tamanhos muito diferentes.

Um símbolo construído a partir de três ideias

Saúde, terapia e empatia são os três conceitos que a clínica queria comunicar, e a cruz arredondada reúne os três em uma forma só, com cantos suaves que tiram a rigidez do repertório médico tradicional.

A paleta define um azul institucional e um turquesa de apoio, cada um com referência Pantone para impressão e escala de tons para uso digital.

Papel, tecido e sinalização

Papelaria clínica, sinalização de rua e bordado em tecido têm limites de reprodução bem distintos, e foi o bordado que definiu o tamanho mínimo do símbolo, porque nele o traço engrossa e a contraforma fecha primeiro.

A galeria completa do projeto

As demais peças da identidade estão publicadas na galeria do projeto.

A marca apresentada pertence ao cliente. O trabalho mostrado é de direção de arte e design.

• Ver Bem Saúde Branding no Behance↗(abre em nova aba)

Energia física traduzida em marca

O logotipo usa tipografia condensada e inclinada, que sugere movimento e ainda ocupa pouca largura em aplicação estreita.

Três famílias tipográficas e um verde de assinatura

Três famílias dividem título, texto e apoio, o que mantém a voz da marca reconhecível em peça longa e em peça curta.

A paleta fecha em verde, amarelo, preto e branco, com referência Pantone para impressão: o verde carrega a marca, e os demais tons sustentam contraste e leitura.

Superfície pequena e superfície curva

A papelaria e a coqueteleira preta colocam a marca em área reduzida e em superfície curva, onde a tipografia condensada precisa de respiro, e a versão sobre fundo escuro virou a aplicação principal do dia a dia.

A galeria completa do projeto

As demais peças da identidade estão publicadas na galeria do projeto.

A marca apresentada pertence ao cliente. O trabalho mostrado é de direção de arte e design.

• Ver VITA Center Branding no Behance↗(abre em nova aba)

Renovar sem apagar o reconhecimento

O escopo cobriu a revisão do símbolo, da tipografia e das aplicações principais, preservando os sinais que o público já usava para identificar a marca.

Um losango com engenharia por trás

A marca nova nasce de uma malha com eixos a 60 graus e se desdobra em três versões responsivas, cada uma com o próprio contexto de uso.

Neon com estrutura

Roxo e verde neon sobre o escuro dão a energia de esports; a tipografia de display e o pattern geométrico derivado do triângulo carregam a identidade para qualquer formato.

A marca ao vivo na Twitch

O sistema fecha nas telas do canal: overlays de chat, contagem regressiva e os quadros de intervalo da transmissão.

A galeria completa do projeto

As peças do rebranding estão publicadas na galeria do projeto.

A marca apresentada pertence ao cliente. O trabalho mostrado é de direção de arte e design.

• Ver Rebranding Saus no Behance↗(abre em nova aba)

Uma seleção reunida pelo método

A ordem de trabalho é a mesma em todos: hierarquia primeiro, leitura em tela estreita depois, acabamento visual no fim.

O site do VITA Center abre a seleção porque mostra a tipografia condensada da identidade funcionando em bloco de conteúdo.

A galeria completa da seleção

Os demais projetos web da seleção estão publicados na galeria do Behance.

As marcas apresentadas pertencem aos respectivos clientes. O trabalho mostrado é de direção de arte e design de interface.

• Ver Website Projects no Behance↗(abre em nova aba)

A identidade sobre a key art

A saída foi um símbolo cheio em rosa neon, com o nome do campeonato em tipografia condensada logo abaixo, sempre no mesmo eixo central.

Um padrão que organiza o fundo

O padrão em blocos escalonados de roxo separa o símbolo da key art, funcionando como camada intermediária em capa, tela de espera e peça de divulgação.

Rosa e roxo definem os dois níveis de contraste do pacote: o rosa carrega marca e destaque, o roxo carrega estrutura e fundo.

A galeria completa do campeonato

As demais peças do pacote visual estão publicadas na galeria do projeto.

Os elementos de jogo que aparecem nas peças pertencem aos respectivos detentores de direitos. O material autoral aqui é a identidade, a interface de transmissão e o movimento.

• Ver RDFX League no Behance↗(abre em nova aba)

Uma marca em relevo como base

A arte de fundo foi construída em camadas, para que placar, chaveamento e telas de escolha pudessem ser montados sobre a mesma base sem retrabalho.

Telas de escolha para dois jogos

Counter-Strike e Valorant escolhem mapas e agentes de formas distintas, então as duas telas de picks e bans compartilham grade, tipografia e ritmo de animação e mudam apenas o conteúdo que cada jogo exige.

O preenchimento em sequência acompanha a decisão das equipes, deixando visível o que já foi definido em cada etapa.

O que segura a tela entre as partidas

Entre partidas, o chaveamento anima o avanço das equipes fase por fase e a tela de espera mantém o padrão em movimento contínuo.

O banner do estúdio fecha o pacote, aplicando o mesmo relevo em uma variação escura para peça de divulgação.

A galeria completa do campeonato

As demais peças do pacote de transmissão estão publicadas na galeria do projeto.

Os elementos de jogo que aparecem nas peças pertencem aos respectivos detentores de direitos. O material autoral aqui é a identidade, a interface de transmissão e o movimento.

• Ver Bahia Gaming Series no Behance↗(abre em nova aba)

Textura de rua dentro da transmissão

As faixas de seção usam a mesma pintura para separar assuntos na apresentação do campeonato, o que dá ritmo ao material sem depender de moldura.

Quatro fundos, uma marca

A paleta define turquesa, magenta, roxo e um roxo quase preto, com versão de marca prevista para cada fundo e o hexadecimal registrado ao lado.

A faixa em rolagem contínua transforma o padrão em elemento de transição, mantendo movimento em tela sem competir com a informação da partida.

As telas que o público vê ao vivo

A tela de espera concentra a contagem regressiva em um bloco central, com a textura ocupando o resto do quadro.

A tela de MVP organiza as estatísticas em colunas fixas, para receber os números de qualquer partida sem ajuste manual.

A galeria completa do campeonato

As demais peças do pacote de transmissão estão publicadas na galeria do projeto.

Os elementos de jogo que aparecem nas peças pertencem aos respectivos detentores de direitos. O material autoral aqui é a identidade, a interface de transmissão e o movimento.

• Ver Hype Series Bahia no Behance↗(abre em nova aba)