Produto digital · Portal B2B e marca

Biobe.

Portal para RH e corretores gerirem milhares de vidas de planos de saúde e vida sem se perder.

Ver o que melhorou no UX Ver no Behance

Biobe Corretora Digital · 2019 — 2020 · UX/UI Designer e Brand Designer

O portal do cliente da Biobe aberto no painel inicial.

6 meses

de projeto, em 12 sprints

1.000 a 2.000

vidas geridas pelas empresas atendidas

2 plataformas

cliente (RH) e corretor

Fonte: imagem 02 do Behance (Prazo); imagem 02 do Behance (Impacto); imagem 02 do Behance (Missão).

O trabalho

A Biobe é uma corretora digital de seguros de saúde e vida empresariais. O trabalho entregou a identidade da marca e duas plataformas web, uma para o RH da empresa contratante e outra para o corretor: painel, movimentações de funcionários e dependentes, upload de documentos e confirmações, sobre Angular Material.

O contexto

Quem contrata um plano de saúde empresarial para 99, 800 ou 5.000 pessoas precisa manter esse cadastro vivo: funcionário entra, sai, casa, tem filho, muda de faixa etária, troca de plano. Isso costuma ser planilha, e-mail e telefone entre o RH e a corretora. A Biobe nasceu para colocar essa rotina num portal. De um lado, o profissional de RH responsável pelas vidas da empresa; do outro, o corretor que cuida de carteiras de saúde e vida empresarial. Foram seis meses em doze sprints, navegador em 1366 px, Angular Material, e a marca criada junto.

O desafio

O volume é o problema. Cada empresa carrega centenas ou milhares de vidas, e cada vida tem titular, dependentes, planos, contrato, documentos e histórico. Se a tela mostra tudo, ninguém acha nada; se esconde demais, o RH abre dez janelas para uma movimentação simples. O desafio foi condensar informação sensível e repetitiva de um jeito que a pessoa veja primeiro o que está pendente, aja dali mesmo e não perca o fluxo numa tarefa que exige atenção, como excluir um titular com três dependentes.

Setor: Seguros · Corretora de saúde e vida empresarialPeríodo: 2019 — 2020Função: UX/UI Designer e Brand DesignerFerramentas: Adobe XD, Photoshop, Illustrator, Angular Material

Como foi feito

Do problema à tela.

01
Entender as duas pontas
O RH quer saber o que falta fazer hoje e quantas vidas tem ativas. O corretor acompanha várias empresas e precisa ver em que etapa cada implantação está. Essa separação definiu duas plataformas com a mesma base visual, e não uma tela cheia de permissões.
02
Organizar o sistema por tarefas
O menu lateral segue como o RH pensa o trabalho, não como o banco de dados está organizado: Gestão Operacional (estipulante, funcionários e dependentes, cotações, renovações, implantações, contrato, movimentações, faturamento), Gestão de Saúde, Atendimento e Acessos. A trilha no topo de cada página mostra onde a pessoa está e devolve o caminho de volta.
03
Desenhar sobre o Angular Material
A biblioteca já trazia campos, abas, seletores e modais prontos para o time de desenvolvimento. O desenho adaptou esses componentes à marca Biobe, com grade de 8 px e entrega pixel perfect, para que o aprovado em tela chegasse igual ao navegador.
04
Marca junto com o produto
A identidade nasceu no mesmo projeto e virou regra na interface: roxo marca onde a pessoa está e o que é informação; verde-limão marca o que ela pode fazer agora; vermelho ficou só para excluir e para erro.

O que melhorou no UX

9 decisões, com a tela pra provar.

01 / 09

Painel que começa pelo que está pendente

O atrito: Quem gerencia muitas vidas entra no sistema sem saber por onde começar e descobre um documento faltante só quando a operadora recusa o cadastro.
O que a tela faz agora: O painel inicial abre com três cartões: Últimos avisos (documentação a ajustar, campo faltante, revisão na implantação), implantações em andamento com barra de etapas e botão único de continuar, e o total de vidas com um gráfico simples de saúde versus outros produtos.; Por que é melhor: A primeira tela responde às duas perguntas que o RH faz todo dia: o que falta fazer e quantas vidas tenho. A pessoa age a partir do que o sistema já destacou.

Painel inicial do portal do cliente: menu lateral com Gestão Operacional, Gestão de Saúde, Atendimento e Acessos; cartão de últimos avisos; implantações em andamento com barra de etapas; cartão de vidas com gráfico de pizza. — Painel inicial do RH: avisos, implantações em andamento e total de vidas em um só lugar.

O portal do cliente da Biobe aberto no painel inicial.

02 / 09

Avisos com peso visual só para o que é novo

O atrito: Lista de notificações em que tudo tem a mesma cara faz a pessoa reler o que já viu e perder o que é urgente.
O que a tela faz agora: No cartão de avisos, item não lido aparece em roxo e negrito; item já visto, em cinza. À direita, só o tempo decorrido (5 min, 15 min, 1 dia, 1 sem). Um link discreto de Ver todas no rodapé leva à lista completa.; Por que é melhor: O olho vai direto para o que mudou desde a última visita, sem abrir uma área de notificações.

Cartão de últimos avisos com quatro itens; os não lidos aparecem em roxo e negrito, os lidos em cinza, cada um com o tempo decorrido à direita. — Cartão de avisos: o que ainda não foi lido salta aos olhos.

03 / 09

Catálogo de movimentações em vez de formulário genérico

O atrito: Movimentação cadastral tem muitos tipos: titular, dependente, faixa etária, troca de plano, remissão, aposentadoria, transferência entre subestipulantes. Um formulário único com campos condicionais confunde e gera erro.
O que a tela faz agora: A página virou um catálogo de cartões, agrupados em Inclusão e Outros. Cada cartão diz em uma frase o que cobre (por exemplo, que dependente sempre precisa de um titular) e tem um só botão: Iniciar a movimentação.; Por que é melhor: A pessoa escolhe a tarefa com as palavras dela antes de ver qualquer campo. O formulário que abre já é o certo, menor e sem campos que não se aplicam.

Página de Movimentações com catálogo de cartões por tipo de movimentação; em destaque os cartões Funcionário/Titular e Dependente, cada um com descrição e botão Iniciar a movimentação. — Catálogo de movimentações: cada tipo explica o que faz antes de começar.

04 / 09

Dependente sempre amarrado ao titular

O atrito: Em cadastro em massa, o erro mais caro é alterar o titular sem querer a partir da tela do dependente.
O que a tela faz agora: Nome e CPF do titular aparecem no topo em campos bloqueados, com uma dica dizendo que a edição acontece na página dele, a um botão de distância. Um link de voltar à lista fica acima do título.; Por que é melhor: O contexto (de quem é este dependente) está sempre visível, mas protegido contra edição acidental.

Tela de gestão de dependente: trilha de navegação, link de voltar, dados do titular bloqueados com dica, abas Dependente, Planos, Cobrança, Documentos e Histórico, e seções de plano de saúde, odontológico e seguro de vida. — Gestão de dependente: titular travado, planos separados em seções que ligam e desligam.

05 / 09

Planos por seção, ligando e desligando

O atrito: Um dependente pode ter saúde, odontológico e seguro de vida, ou só um deles. Mostrar os campos de todos de uma vez vira uma parede de formulário.
O que a tela faz agora: Cada produto é uma seção com caixa de marcar no título. Desmarcada (como o odontológico na tela), fica fechada, só com o nome. Marcada, abre os campos do contrato, com número e operadora no mesmo seletor.; Por que é melhor: A tela cresce só na medida do que aquela pessoa tem: menos rolagem, menos campo vazio e leitura rápida de quais produtos estão ativos.

Seção Seguro de vida com contrato, cobertura e salário, linha de campos para adicionar beneficiário (nome, CPF, parentesco, percentual) e tabela dos beneficiários já incluídos com ação de excluir. — Beneficiários do seguro de vida: adiciona na mesma tela, sem abrir outra janela.

06 / 09

Beneficiário do seguro incluído na própria linha

O atrito: Abrir um modal para cada beneficiário é lento e tira a visão do conjunto, que importa quando os percentuais precisam fechar em 100%.
O que a tela faz agora: Acima da tabela há uma linha de campos (nome, CPF, parentesco, percentual) e um botão Adicionar. O beneficiário entra na tabela logo abaixo, com percentual visível e excluir em vermelho em cada linha.; Por que é melhor: A pessoa inclui, confere a soma e corrige sem sair da tela, no padrão da planilha que o RH já usa, mas com validação.

07 / 09

Upload por arrastar e soltar, com lista do que já foi enviado

O atrito: Documentos de vidas (RG, certidão de casamento, proposta) chegam em lote. Upload sem retorno faz a pessoa enviar duas vezes ou não saber se deu certo.
O que a tela faz agora: A janela tem uma área tracejada de arrastar e soltar, instrução direta (abaixo de 5 MB, formatos aceitos) e um botão grande. Logo abaixo, a tabela do que já foi enviado com tipo, data, a vida a que pertence, baixar e excluir. Um aviso verde confirma o sucesso; um vermelho explica o que fazer na falha.; Por que é melhor: Quem envia vê na mesma janela o que já está lá e o que acabou de entrar. O erro não culpa a pessoa nem deixa dúvida sobre o próximo passo.

Janela de upload de documentos com área tracejada de arrastar e soltar, instrução de tamanho e formato, botão de upload e tabela dos documentos enviados; abaixo, avisos de sucesso (verde) e erro (vermelho). — Upload de documentos por arrastar e soltar, com lista do que já foi enviado.

Dois avisos flutuantes: 'Arquivo enviado com sucesso!' em verde-limão e 'Erro no envio do arquivo! Por favor verifique o arquivo e envie novamente.' em vermelho. — Retorno imediato: deu certo ou o que fazer quando não deu.

08 / 09

Exclusão de titular com as consequências na frente

O atrito: Excluir um titular tira do plano também os dependentes e mexe com cobrança. Se a tela mostra só nome e botão, o impacto aparece depois, na fatura.
O que a tela faz agora: O modal mostra o nome bloqueado, as datas (vigência, início, envio, desligamento), valor do plano e pró-rata do mês, e lista cada dependente afetado com seu valor. Antes de confirmar, pede o motivo e alerta sobre documentação.; Por que é melhor: Toda a informação que a decisão exige está em uma janela. A pessoa confirma sabendo o que acontece com cada vida e com o valor cobrado.

Modal de exclusão de titular/beneficiário: nome do titular bloqueado, datas de vigência, início, envio e desligamento, valor do plano e pró-rata, lista de dependentes afetados, campo de motivo, alerta sobre documentação e botão confirmar. — Exclusão de titular: tudo que a decisão afeta cabe em uma janela só.

09 / 09

Modais curtos para não quebrar o fluxo

O atrito: Em tarefa repetitiva, uma janela cheia de texto no meio do caminho leva ao clique automático, justamente onde o erro custa caro.
O que a tela faz agora: As confirmações seguem um padrão só: ícone, pergunta curta, uma frase de contexto e dois botões. A cor do principal diz a ação: roxo salva, verde conclui, vermelho exclui. Na exclusão, o destaque é o Não; o Sim fica em contorno.; Por que é melhor: A pessoa reconhece o tipo de decisão antes de ler. Na ação irreversível, o desenho protege contra o clique por reflexo sem esconder a opção de seguir.

Conjunto de modais de confirmação: Salvar alterações?, Implantação concluída com sucesso, Deseja excluir o arquivo? (em vermelho) e Salvar e seguir para a próxima etapa?, cada um com ícone, texto curto e botões. — Família de confirmações: ícone, uma pergunta, dois botões.

Mais telas

O resto do trabalho, tela por tela.

Marca

Faixa com o logotipo Biobe (balões de conversa em verde-limão e roxo) ao lado do selo Angular Material e da etiqueta UX/UI. — A marca Biobe: dois balões de conversa, verde-limão e roxo.

O que fica desse trabalho

Em cadastro em massa, a primeira tela responde o que está pendente; o resto é navegação.
Catálogo de tarefas antes do formulário reduz campo condicional e erro de preenchimento.
Cor com função fixa (roxo estrutura, verde ação, vermelho risco) deixa o modal legível antes da leitura.
Ação irreversível pede a consequência visível e o botão de desistir em destaque.
Desenhar sobre a biblioteca do time encurta o caminho entre aprovação e produção.

Entregas