YANDesign de web app e dashboard
Synergy Insurance Affiliates. Metas, escritórios e agentes em uma só visão de trabalho
Uma plataforma web e mobile para afiliadas de seguros, com páginas de protótipo para os papéis de Super Admin, Admin e Agente. Ela acompanha metas, vendas, agentes e campanhas por escritório e inclui um construtor de formulários.
Em resumo
- O problema
- Uma rede de escritórios de seguros precisa acompanhar o desempenho em conjunto, mas cada papel tem responsabilidades diferentes.
- Minha parte
- Trabalhei nas interfaces desktop e mobile e nos fluxos de Super Admin, Office Admin e Agente, incluindo dashboards, metas e um construtor de formulários.
- A decisão principal
- Separar a leitura do desempenho das mudanças na operação. A navegação agrupa análise e gestão, enquanto o seletor de escritório muda o contexto do dashboard e do ranking em conjunto.
- Meu papel
- Fluxos por papel e interfaces para desktop e mobile
- Status do projeto
- Design de interface · Acervo do Figma
Telas dos arquivos de design originais no Figma, com dados de exemplo.
Minha contribuição
Trabalhei nos fluxos de usuário e nas interfaces para desktop e celular da Synergy Insurance Affiliates, arquivada como Media Base / Base Media. O design contempla os papéis de Super Admin, Office Admin e Agente, com páginas de protótipo separadas para cada papel nos dois formatos.
O material apresentado reúne design e protótipos no Figma. As telas de desktop compartilham o menu do Super Admin. Nomes, fotos e valores são exemplos usados para demonstrar a interface; o case não atribui resultados de negócio nem uso em produção ao projeto.
Dos papéis à hierarquia da informação
Os fluxos do usuário cobrem três papéis: Super Admin, Office Admin e Agente. A partir do dashboard, o fluxo do Super Admin se divide em metas, desempenho das afiliadas, análise financeira, ranking, escritórios afiliados e formulários.
Os wireframes em cinza mostram a hierarquia sem depender da identidade visual: indicadores de resumo, comparações e registros detalhados ocupam áreas distintas. Na interface final, Analytics, Management e Account separam o acompanhamento das ações que alteram a operação. Conferir o desempenho e executar uma tarefa administrativa têm, assim, destinos diferentes.
Começar pelo todo, depois escolher um escritório
A primeira decisão é o recorte da pergunta: como está o desempenho da rede e qual escritório merece uma análise mais próxima? O dashboard começa por renovação, caducidade, retenção e apólices vendidas, acompanhadas pelo Goal Score e pela receita semanal. O design mantém o contexto da rede à vista antes de entrar em um escritório específico.
A tela Affiliate Performance repete essa leitura para um escritório, escolhido em um seletor no topo. Ela acrescenta blocos coloridos de leads, vendas e taxa de fechamento e uma fileira de números de gastos, e a coluna da direita acompanha a escolha: o ranking vira Agent Leaderboard - Office.
Um ranking com os motivos ao lado
O Agent Leaderboard dá aos primeiros colocados cards grandes com leads, vendas, taxa de conversão e uma semana de atividade de vendas. O amarelo marca o primeiro lugar, e a fileira de cards continua por trás da coluna da direita. A tabela abaixo lista todos os agentes, com bill rate, CPA, gastos, vendas, leads e taxa de conversão em uma só linha.
Uma versão curta dessa lista fica na coluna da direita, abaixo de Notifications, na maioria das telas de desktop. Assim, o ranking e as últimas vendas e leads continuam à vista durante outras tarefas.
Campanhas por participação nas vendas
O Campaign Overview combina uma tabela com um gráfico de rosca que mostra a participação de cada campanha nas vendas. As taxas de conversão têm um ponto colorido, do vermelho na mais baixa ao verde na mais alta, o que ajuda as campanhas fracas a se destacarem em uma lista longa. Um filtro restringe a visão por escritório, e uma chave ativa a edição.
Formulários criados dentro do produto
O wireframe do construtor reserva espaços separados para o formulário e suas ferramentas de edição. O design final mantém essa divisão: as perguntas ocupam a coluna principal, enquanto o painel direito adiciona conteúdo. Form Builder, Settings e Preview distinguem editar uma pergunta, configurar o formulário e conferir o resultado.
Os formulários funcionam como um pequeno editor com três abas: Form Builder, Settings e Preview. Cada pergunta tem seu tipo de resposta e sua chave de obrigatoriedade, e todo bloco pode ser duplicado ou excluído. A coluna de notificações dá lugar a um painel para adicionar perguntas, títulos, imagens, vídeos e seções ou importar perguntas, com Copy Link e Save Form no topo.
A mesma operação no celular
O design mobile prioriza as mesmas perguntas operacionais com menos detalhes simultâneos. O progresso das metas continua visível, as tabelas mostram menos colunas e a adição de um elemento do formulário sai de um painel permanente para uma ação flutuante. A tarefa continua disponível enquanto o layout se adapta à tela menor.
No celular, uma barra flutuante com cinco ícones leva às áreas principais, e as taxas se reorganizam em uma grade de dois por dois acima do Goal Score. Em Goals Settings, abas separam afiliadas e agentes, e cada meta é um card com o objetivo, o status semanal ou mensal, uma barra de progresso e um lápis de edição.
O ranking mantém o card amarelo e reduz a tabela às primeiras colunas. O construtor de formulários fica empilhado em uma coluna, com um botão flutuante de adicionar no lugar do painel lateral do desktop.
