- Ano
- 2026
- Plataformas
- Website responsivo (WordPress), mostrado em telemóvel, com back office e IA
- O que fizemos
- Design de produto, UX/UI e desenvolvimento
O brief
A AllRisk é um mediador de seguros português que quer fazer o contrário do que o setor costuma fazer: falar claro, sem letras pequenas e sem formulários intermináveis. O site tem de mostrar, em segundos, que proteção faz sentido para cada pessoa e para cada empresa.
Em vez de um menu cheio de produtos, o site abre com uma pergunta: qual é o teu nível de risco? Um slider com três posições (baixo, médio e alto) muda a página inteira: o texto de abertura, as situações do dia-a-dia, as coberturas, os testemunhos, a cor de destaque, o logótipo e o vídeo de fundo. Como há uma página para particulares e outra para empresas, cada uma delas é, na prática, três páginas: seis experiências no mesmo site.
O tom é o de uma conversa: os particulares são tratados por tu e as empresas por vós, com pouca linguagem de seguros e muitos exemplos concretos.
Por trás do site há ainda um back office no WordPress e uma camada de IA que trabalha sobre documentos PDF (RAG e extração de conteúdos) e sobre atividades (CAE).
Para quem
-
01
Quem tem uma rotina previsível
Particulares e empresas de escritório que querem uma proteção simples e proporcional, sem jargão e sem pagar pelo que não precisam.
-
02
Quem vive (ou gere) em movimento
Conduz todos os dias, treina, viaja, gere uma equipa pequena ou uma frota. Procura uma cobertura que acompanhe o ritmo.
-
03
Quem trabalha em ambientes de risco
Obras, indústria, transportes, maquinaria pesada. Precisa de uma solução desenhada à medida da profissão e de falar com uma pessoa.
01 / 05
O slider de risco
No topo da página, por baixo do cabeçalho (com o interruptor entre particular e empresa, o logótipo, o botão de chamada e o menu), há uma pergunta, qual é o teu nível de risco, e um slider com três posições: baixo, médio e alto. Arrasta-se, clica-se na barra ou escolhe-se o nível no seletor fixo (01, 02, 03) que acompanha o scroll, por isso dá para mudar de nível em qualquer ponto da página. Cada posição tem um escudo com um símbolo diferente (um visto, uma exclamação, um alerta), que no nível alto até treme, e a página reage logo: mudam a etiqueta (proteção essencial, avançada ou total), o título e o texto de abertura, a cor de destaque, o logótipo e o vídeo de fundo, que se vê esbatido por trás do texto.
Cada nível fala à sua maneira. No baixo: a tua vida é tranquila e nós queremos que continue assim. No médio: tens desafios no dia-a-dia e nós estamos prontos para eles. No alto: a tua rotina exige mais e nós damos-te essa cobertura. A cor vai do verde ao âmbar e ao vermelho.
02 / 05
Isto és tu?
Por baixo do slider, uma lista de situações do dia-a-dia, em cartões que se selecionam, deixa o visitante confirmar se acertou no nível. Cada nível tem as suas cinco situações, desde o maior risco no trabalho ser entornar café no teclado até a segurança no trabalho ser o tema, e um indicador de progresso sobe à medida que se escolhem, com uma frase a dizer quão perto se está de uma correspondência total. A página para empresas tem a sua própria lista, com situações como a maquinaria pesada, as obras ou a responsabilidade ambiental, e a lista existe em tema claro e em tema escuro.
O botão no fim da lista também muda de frase com o nível: quero saber mais, fala comigo ou preciso de uma solução. Abre um formulário curto (nome, email e uma mensagem opcional), com o WhatsApp e o telefone para quem prefere falar, e o nível escolhido segue com o pedido de contacto, para quem responde já saber de que perfil se trata.
03 / 05
Testemunhos, contacto e coberturas
Perto do fim da página, os testemunhos passam num carrossel, um de cada vez, com setas e pontos: as estrelas, a citação, as iniciais da pessoa, a profissão e a cidade. Também mudam com o nível escolhido: quem conduz, quem treina, quem trabalha em obra.
Logo a seguir vem um bloco de contacto direto, com o WhatsApp como via preferida, o telefone e o formulário, e a mensagem de que do outro lado estão pessoas e não chatbots.
Mais acima, cada nível tem os seus cinco cartões de cobertura, com fotografia e um símbolo, só com o que faz sentido para esse perfil. No baixo: trabalho, mobilidade, saúde, família e casa. No médio: o trabalho com equipamentos e responsabilidade, a estrada, a saúde de quem treina, a família em movimento e a casa como investimento. No alto: cobertura total para profissões de risco, transportes, saúde para quem exige mais do corpo, a família protegida e o que se construiu. No telemóvel os cartões ficam numa só coluna.
04 / 05
As outras páginas: empresas e institucional
A página para empresas repete a mecânica com outra escala e outro tom (os visitantes são tratados por vós). O interruptor do cabeçalho, com os ícones de uma pessoa e de um edifício, troca entre as duas páginas, e o slider passa a perguntar qual é o risco da vossa empresa, com a proteção empresarial base, avançada e total. A lista de situações do nível alto, que se vê em tema escuro mais acima, pergunta por maquinaria pesada, obras, responsabilidade ambiental, colaboradores expostos e acidentes na operação.
O nível base é o da empresa de escritório: responsabilidade civil profissional, saúde coletiva para a equipa, escritório e equipamentos, cibersegurança, e vida e acidentes para colaboradores. O avançado é o da que tem frota, equipa no terreno ou mercadorias em trânsito. O total é o da indústria, das obras e dos grandes riscos, com perdas de exploração por avaria de máquinas, responsabilidade ambiental e soluções à medida.
A página institucional conta quem é a AllRisk e para quem trabalha (start-ups, profissionais de saúde, artistas e criativos, empresas expostas a ameaças digitais e grandes riscos), com um cartão por público, e segue com a missão, a visão e seis pilares, da transparência à independência (a AllRisk trabalha com várias seguradoras), até um convite final para descobrir o nível de risco.
05 / 05
Por trás do site: o back office e a IA
Por trás do site há um back office no próprio WordPress. Cada nível de risco, os cartões de cobertura, as situações e os testemunhos são tipos de conteúdo próprios, com campos à medida (ACF), por isso a equipa edita o texto de cada nível sem tocar no código, e os pedidos de contacto (o formulário que se vê acima) chegam por email já com o nível de risco escolhido. Há também uma calculadora de recheio (o valor do que está dentro do imóvel), que guarda as propostas, as envia ao cliente e à equipa, as exporta para CSV, as reenvia e as imprime em PDF.
A IA está integrada em duas frentes. Um assistente responde a perguntas com base em documentos PDF (RAG: os documentos são indexados e a resposta vem dos excertos encontrados, não da memória do modelo), e a extração de conteúdos transforma esses documentos em texto e campos estruturados. E há o SeguroIA, um plugin que identifica os seguros obrigatórios de uma atividade: a pessoa descreve-a por palavras suas ou indica o CAE, um modelo de linguagem ajuda a classificá-la e o resultado vem de uma base local de seguros obrigatórios.
Verde, âmbar e vermelho
O sistema visual tem dois temas, claro e escuro, que o visitante alterna e o site lembra. As superfícies são neutras e frias, e a cor de destaque é a do nível de risco: verde, âmbar ou vermelho, cada uma com uma versão mais escura no tema claro, para manter o contraste. O texto usa Outfit e as etiquetas e os números usam Space Mono. Os cartões têm cantos de 16 px.
AllRisk (escuro)
- Superfícies
-
#0A0A0F#1E1E2E - Texto
-
#F0F0F5 - Acentos: baixo, médio e alto
-
#2DD4A0#F5B428#E64646
AllRisk (claro)
- Superfícies
-
#F5F5F8#FFFFFF - Texto
-
#1A1A2E - Acentos: baixo, médio e alto
-
#106847#B44F09#B02020
Por trás do ecrã
O que é preciso para um site com tanto movimento continuar leve e legível.
-
Um tema à medida
O site é um tema WordPress próprio, com CSS e JavaScript escritos à mão e animação em GSAP, sem construtor de páginas.
-
Um nível, uma página
Os três níveis estão na mesma página e trocam-se no browser, sem recarregar. O texto de todos está no HTML, por isso os motores de busca leem-no, e só o painel do nível escolhido fica visível.
-
Vídeos só quando são precisos
O vídeo de fundo de cada nível só é pedido na primeira vez que esse nível é escolhido, para a página abrir leve.
-
Dois temas, três acentos
A cor de destaque é uma variável que o JavaScript troca com o nível, com dois conjuntos de valores (um por tema), para o contraste ser bom nos dois.
-
Conteúdo editável sem código
Os níveis, os cartões, as situações e os testemunhos são tipos de conteúdo do WordPress com campos próprios, por isso editam-se no painel, e os pedidos de contacto levam o nível de risco escolhido.
-
IA sobre documentos
Um assistente responde com base em documentos PDF indexados (RAG) e a extração de conteúdos transforma esses documentos em texto e campos estruturados. O SeguroIA usa um modelo de linguagem para classificar a atividade e consulta uma base local para dizer quais os seguros obrigatórios.
O que fizemos
Desenhámos e construímos o site de ponta a ponta: o UX/UI e o design system, o desenvolvimento do tema e das interações e o aspeto de cada nível, com a direção de arte da identidade visual. E construímos o back office no WordPress e a integração de IA e automação: o RAG sobre PDFs, a extração de conteúdos e a identificação de seguros obrigatórios por CAE.
FAQ
Perguntas, respondidas.
-
O website de um mediador de seguros português. Em vez de um menu de produtos, abre com uma pergunta: qual é o teu nível de risco?
-
Tem três posições (baixo, médio e alto) e muda a página inteira: o texto de abertura, as situações do dia-a-dia, as coberturas, os testemunhos, a cor de destaque, o logótipo e o vídeo de fundo. Há uma página para particulares e outra para empresas, por isso são, na prática, seis experiências.
-
Tem. O visitante alterna e o site lembra a escolha, e a cor de destaque de cada nível tem uma versão mais escura no tema claro, para manter o contraste.
-
Um assistente que responde com base em documentos PDF (RAG), a extração de conteúdos desses documentos e um identificador de seguros obrigatórios por atividade (CAE), que usa um modelo de linguagem para classificar a atividade e uma base local para dar o resultado.
-
Sim. Conta-nos o que tens em mente e dizemos-te como o abordaríamos, do desenho ao desenvolvimento. Escreve-nos pelo botão "Falar de um projeto assim", no topo e mais abaixo nesta página.
-
Por uma conversa para perceber o objetivo, quem vai usar o produto e o que já existe. Daí sai um âmbito claro, e avançamos por fases, com entregas que se podem ver e comentar pelo caminho.