Todo el trabajo

AllRisk

Un slider de riesgo que cambia todo el sitio: cada página son, en la práctica, tres.

  • Sitio web
  • Seguros
  • Páginas por nivel de riesgo
  • IA sobre documentos
Año
2026
Plataformas
Sitio web responsive (WordPress), mostrado en móvil, con back office e IA
Lo que hicimos
Diseño de producto, UX/UI y desarrollo

El brief

AllRisk es un mediador de seguros portugués que quiere hacer lo contrario de lo que suele hacer el sector: hablar claro, sin letra pequeña y sin formularios interminables. El sitio tiene que mostrar, en segundos, qué protección tiene sentido para cada persona y cada empresa.

En vez de un menú lleno de productos, el sitio abre con una pregunta: ¿cuál es tu nivel de riesgo? Un slider con tres posiciones (bajo, medio y alto) cambia la página entera: el texto de apertura, las situaciones del día a día, las coberturas, los testimonios, el color de acento, el logotipo y el vídeo de fondo. Como hay una página para particulares y otra para empresas, cada una de ellas son, en la práctica, tres páginas: seis experiencias en el mismo sitio.

El tono es el de una conversación: a los particulares se les trata de tú y a las empresas de vosotros, con poca jerga de seguros y muchos ejemplos concretos.

Detrás del sitio hay además un back office en WordPress y una capa de IA que trabaja sobre documentos PDF (RAG y extracción de contenidos) y sobre actividades (CAE).

Para quién

  • 01

    Quien tiene una rutina previsible

    Particulares y empresas de oficina que quieren una protección sencilla y proporcionada, sin jerga y sin pagar por lo que no necesitan.

  • 02

    Quien vive (o dirige) en movimiento

    Conduce todos los días, entrena, viaja, dirige un equipo pequeño o una flota. Busca una cobertura que siga el ritmo.

  • 03

    Quien trabaja en entornos de riesgo

    Obras, industria, transporte, maquinaria pesada. Necesita una solución diseñada a la medida de la profesión y hablar con una persona.

01 / 05

El slider de riesgo

En lo alto de la página, bajo la cabecera (con el interruptor entre particular y empresa, el logotipo, el botón de llamada y el menú), hay una pregunta, cuál es tu nivel de riesgo, y un slider con tres posiciones: bajo, medio y alto. Se arrastra, se hace clic en la barra o se elige el nivel en el selector fijo (01, 02, 03) que acompaña el scroll, así que se puede cambiar de nivel en cualquier punto de la página. Cada posición tiene un escudo con un símbolo distinto (un visto, una exclamación, una alerta), que en el nivel alto incluso tiembla, y la página reacciona al instante: cambian la etiqueta (protección esencial, avanzada o total), el titular y el texto de apertura, el color de acento, el logotipo y el vídeo de fondo, que se ve difuminado detrás del texto.

Cada nivel habla a su manera. El bajo: tu vida es tranquila y queremos que siga así. El medio: tienes retos en el día a día y estamos listos para ellos. El alto: tu rutina exige más y te damos esa cobertura. El color va del verde al ámbar y al rojo.

  • Tres niveles
  • Arrastrar, hacer clic o elegir
  • Selector fijo
  • Color, logotipo y vídeo
Nivel bajo: protección esencial, en verde
Nivel medio: protección avanzada, en ámbar
Nivel alto: protección total, en rojo

02 / 05

¿Eres tú?

Debajo del slider, una lista de situaciones del día a día, en tarjetas que se seleccionan, permite al visitante comprobar si ha acertado con el nivel. Cada nivel tiene sus cinco situaciones, desde que el mayor riesgo en el trabajo sea derramar el café sobre el teclado hasta que la seguridad laboral sea el tema, y un indicador de progreso sube a medida que se eligen, con una frase que dice cuánto falta para una coincidencia total. La página para empresas tiene su propia lista, con situaciones como la maquinaria pesada, las obras o la responsabilidad medioambiental, y la lista existe en tema claro y en tema oscuro.

El botón del final de la lista también cambia de frase con el nivel: quiero saber más, habla conmigo o necesito una solución. Abre un formulario corto (nombre, correo y un mensaje opcional), con WhatsApp y el teléfono para quien prefiere hablar, y el nivel elegido viaja con la solicitud de contacto, para que quien responde ya sepa de qué perfil se trata.

  • Cinco situaciones por nivel
  • Indicador de progreso
  • Un botón que cambia con el nivel
Situaciones del día a día: particulares, nivel bajo, tema claro
La misma lista para empresas: nivel alto, tema oscuro
Solicitud de contacto: el nivel elegido viaja con ella

03 / 05

Testimonios, contacto y coberturas

Cerca del final de la página, los testimonios pasan en un carrusel, uno a uno, con flechas y puntos: las estrellas, la cita, las iniciales de la persona, su profesión y su ciudad. También siguen el nivel elegido: quien conduce, quien entrena, quien trabaja en obra.

Justo después viene un bloque de contacto directo, con WhatsApp como vía preferida, el teléfono y el formulario, y el mensaje de que al otro lado hay personas y no chatbots.

Más arriba, cada nivel tiene sus cinco tarjetas de cobertura, con fotografía y un símbolo, solo con lo que tiene sentido para ese perfil. El bajo: trabajo, movilidad, salud, familia y hogar. El medio: el trabajo con equipos y responsabilidad, la carretera, la salud de quien entrena, la familia en movimiento y el hogar como inversión. El alto: cobertura total para profesiones de riesgo, transporte, salud para quien exige más al cuerpo, la familia protegida y lo que se ha construido. En el móvil las tarjetas quedan en una sola columna.

  • Testimonios por nivel
  • Contacto directo
  • Cinco coberturas por nivel
Testimonios del nivel elegido y el bloque de contacto directo

04 / 05

Las otras páginas: empresas e institucional

La página para empresas repite la mecánica a otra escala y con otro tono (a los visitantes se les trata de vosotros). El interruptor de la cabecera, con los iconos de una persona y de un edificio, cambia entre las dos páginas, y el slider pregunta ahora cuál es el riesgo de vuestra empresa, con la protección empresarial base, avanzada y total. La lista de situaciones del nivel alto, que se ve en tema oscuro más arriba, pregunta por maquinaria pesada, obras, responsabilidad medioambiental, empleados expuestos y accidentes en la operación.

El nivel base es el de la empresa de oficina: responsabilidad civil profesional, salud colectiva para el equipo, oficina y equipos, ciberseguridad, y vida y accidentes para empleados. El avanzado es el de la que tiene flota, equipo en el terreno o mercancías en tránsito. El total es el de la industria, las obras y los grandes riesgos, con pérdida de explotación por avería de maquinaria, responsabilidad medioambiental y soluciones a medida.

La página institucional cuenta quién es AllRisk y para quién trabaja (start-ups, profesionales de la salud, artistas y creativos, empresas expuestas a amenazas digitales y grandes riesgos), con una tarjeta por público, y sigue con la misión, la visión y seis pilares que van de la transparencia a la independencia (AllRisk trabaja con varias aseguradoras), hasta una invitación final a descubrir el nivel de riesgo.

  • Trato en plural
  • Tres niveles empresariales
  • De la oficina a la industria
  • Página institucional

05 / 05

Detrás del sitio: el back office y la IA

Detrás del sitio hay un back office en el propio WordPress. Cada nivel de riesgo, las tarjetas de cobertura, las situaciones y los testimonios son tipos de contenido propios, con campos a medida (ACF), por lo que el equipo edita el texto de cada nivel sin tocar el código, y las solicitudes de contacto (el formulario que se ve arriba) llegan por correo ya con el nivel de riesgo elegido. También hay una calculadora de contenido (el valor de lo que hay dentro del inmueble), que guarda las propuestas, las envía al cliente y al equipo, las exporta a CSV, las reenvía y las imprime en PDF.

La IA está integrada en dos frentes. Un asistente responde preguntas a partir de documentos PDF (RAG: los documentos se indexan y la respuesta sale de los fragmentos encontrados, no de la memoria del modelo), y la extracción de contenidos convierte esos documentos en texto y campos estructurados. Y está SeguroIA, un plugin que identifica los seguros obligatorios de una actividad: la persona la describe con sus palabras o indica el CAE, un modelo de lenguaje ayuda a clasificarla y el resultado sale de una base local de seguros obligatorios.

  • Contenido editable por nivel
  • Solicitudes con el nivel de riesgo
  • RAG sobre PDF
  • Extracción de contenidos
  • Seguros obligatorios por CAE

Verde, ámbar y rojo

El sistema visual tiene dos temas, claro y oscuro, que el visitante alterna y el sitio recuerda. Las superficies son neutras y frías, y el color de acento es el del nivel de riesgo: verde, ámbar o rojo, cada uno con una versión más oscura en el tema claro para mantener el contraste. El texto usa Outfit y las etiquetas y los números usan Space Mono. Las tarjetas tienen esquinas de 16 px.

AllRisk (oscuro)

Superficies
#0A0A0F #1E1E2E
Texto
#F0F0F5
Acentos: bajo, medio y alto
#2DD4A0 #F5B428 #E64646

AllRisk (claro)

Superficies
#F5F5F8 #FFFFFF
Texto
#1A1A2E
Acentos: bajo, medio y alto
#106847 #B44F09 #B02020

Detrás de la pantalla

Lo que hace falta para que un sitio con tanto movimiento siga siendo ligero y legible.

  • Un tema a medida

    El sitio es un tema de WordPress propio, con CSS y JavaScript escritos a mano y animación con GSAP, sin constructor de páginas.

  • Un nivel, una página

    Los tres niveles viven en la misma página y se cambian en el navegador, sin recargar. El texto de todos está en el HTML, así que los buscadores lo leen, y solo el panel del nivel elegido queda visible.

  • Vídeos solo cuando hacen falta

    El vídeo de fondo de cada nivel solo se pide la primera vez que se elige ese nivel, para que la página abra ligera.

  • Dos temas, tres acentos

    El color de acento es una variable que JavaScript cambia con el nivel, con dos conjuntos de valores (uno por tema), para que el contraste sea bueno en los dos.

  • Contenido editable sin código

    Los niveles, las tarjetas, las situaciones y los testimonios son tipos de contenido de WordPress con campos propios, por lo que se editan en el panel, y las solicitudes de contacto llevan el nivel de riesgo elegido.

  • IA sobre documentos

    Un asistente responde a partir de documentos PDF indexados (RAG) y la extracción de contenidos convierte esos documentos en texto y campos estructurados. SeguroIA usa un modelo de lenguaje para clasificar la actividad y consulta una base local para decir qué seguros son obligatorios.

Lo que hicimos

Diseñamos y construimos el sitio de punta a punta: el UX/UI y el design system, el desarrollo del tema y de las interacciones y el aspecto de cada nivel, con la dirección de arte de la identidad visual. Y construimos el back office en WordPress y la integración de IA y automatización: el RAG sobre PDF, la extracción de contenidos y la identificación de seguros obligatorios por CAE.

FAQ

Preguntas, respondidas.

  • El sitio web de un mediador de seguros portugués. En vez de un menú de productos, abre con una pregunta: ¿cuál es tu nivel de riesgo?

  • Tiene tres posiciones (bajo, medio y alto) y cambia la página entera: el texto de apertura, las situaciones del día a día, las coberturas, los testimonios, el color de acento, el logotipo y el vídeo de fondo. Hay una página para particulares y otra para empresas, así que en la práctica son seis experiencias.

  • Sí. El visitante alterna y el sitio recuerda la elección, y el color de acento de cada nivel tiene una versión más oscura en el tema claro para mantener el contraste.

  • Un asistente que responde a partir de documentos PDF (RAG), la extracción de contenidos de esos documentos y un identificador de seguros obligatorios por actividad (CAE), que usa un modelo de lenguaje para clasificar la actividad y una base local para el resultado.

  • Sí. Cuéntanos qué tienes en mente y te decimos cómo lo abordaríamos, del diseño al desarrollo. Escríbenos con el botón "Hablar de un proyecto así", arriba y más abajo en esta página.

  • Con una conversación para entender el objetivo, quién va a usar el producto y qué existe ya. De ahí sale un alcance claro, y avanzamos por fases, con entregas que se pueden ver y comentar por el camino.