Doctori.com
Design System y estrategia de producto para la web de Doctori.com: cinco verticales de seguro (Salud, Coche, Moto, Decesos, Vida) unificadas bajo un mismo sistema de diseño, con más de 14 aseguradoras partner, liderado como UX Lead & Strategic Product Designer.
Sobre el proyecto
Doctori.com es un comparador de seguros en cinco verticales — Salud, Coche, Moto, Decesos y Vida — que conecta a los usuarios con la mejor tarifa entre más de 14 aseguradoras partner (Adeslas, Sanitas, Mapfre, Allianz, DKV, Reale, Verti, entre otras). El negocio no vive de una sola pantalla — vive de que cada vertical convierta, y de que lanzar una vertical nueva no implique reconstruir el producto desde cero.
Como UX Lead & Strategic Product Designer, lidero la evolución de este producto desde 2021: la arquitectura de Design Tokens y tipografía que unifica el sistema visual, la librería de componentes que usan todos los equipos de producto, y la estrategia de las landings de conversión de cada vertical. No es un rol de "diseñar pantallas" — es un rol de decidir qué se construye una vez y se reutiliza cinco veces, y qué se adapta por vertical porque el usuario de seguros de moto no tiene las mismas dudas que el de seguros de vida.
El crecimiento por verticales es bueno para el negocio y un riesgo para el diseño. Cada nueva vertical (Coche, Moto, Decesos, Vida, además de Salud) llegaba con presión de time-to-market, y sin una fuente única de verdad, el patrón natural era duplicar componentes y reinventar decisiones ya tomadas: un botón con radios distintos en cada landing, una tabla comparativa maquetada de cero cada vez, un formulario de captación de lead con validaciones distintas según quién lo construyera. Cada duplicado no es solo deuda visual — es deuda de conversión: un patrón que ya funciona en Salud tarda más en llegar a Moto si nadie lo sistematiza.
- Cinco verticales de seguro (Salud, Coche, Moto, Decesos, Vida) creciendo cada una con presión de time-to-market propia
- Sin una fuente única de verdad, cada landing nueva duplicaba componentes ya resueltos en otra vertical — deuda de diseño y de conversión
- Un patrón que funcionaba en una vertical (ej. posición del CTA) no llegaba a las demás porque nadie lo sistematizaba
Solución propuesta
Construí y mantengo un sistema de Design Tokens semánticos (color, tipografía, espaciado) como única fuente de verdad, y una librería de componentes — botones, inputs, badges, chips, checkboxes, tags, paginación — con todos sus estados documentados. Sobre esa base, definí el patrón de landing por vertical que se repite en Salud, Coche, Moto, Decesos y Vida: hero con CTA de cálculo inmediato, tabla comparativa de coberturas, bloques de valor, "estudio de mercado" con datos propios, FAQ y logos de aseguradoras partner como prueba social. También definí la estructura global (header con mega-menú de navegación y footer legal) y el sistema de módulos CMS que permite montar variaciones de landing sin depender de diseño o desarrollo. Cada vertical nueva parte de esos patrones — y lo que se prueba en una vertical se propaga a las demás sin rediseñar nada.
01. Contexto de Negocio
Un comparador que crece por verticales, no por pantallas
Doctori.com conecta a personas con la mejor tarifa de seguro entre más de 14 aseguradoras partner, en cinco verticales que compiten por el mismo usuario y por el mismo equipo de diseño: Salud, Coche, Moto, Decesos y Vida. El home unifica el acceso a las cinco, cada una con su propio comparador, su propia tabla de coberturas y su propio flujo de captación de lead. Esto cambia qué significa "diseñar" en este contexto. No se trata de optimizar una pantalla — se trata de decidir qué patrón se construye una vez y se reutiliza cinco veces, y dónde sí merece la pena diferenciar porque el usuario de cada vertical tiene dudas distintas. Ese es el criterio que aplico como UX Lead & Strategic Product Designer en cada decisión del sistema.
Insight Clave: El negocio no factura por pantalla bonita. Factura por lead cualificado en cada vertical. Cada decisión de diseño se evalúa contra esa métrica.
02. El Reto
Cada vertical nueva, un riesgo de duplicar lo ya resuelto
El flujo de captación de lead (el "Calcular" de cada tarjeta del home) abre un modal de cálculo inmediato sobre la propia página — capital a asegurar, fecha de nacimiento, teléfono, email — diseñado para minimizar fricción en el momento de mayor intención del usuario y capturar el lead sin sacarlo del contexto en el que estaba navegando. Este patrón se probó primero en Vida y Salud.
El riesgo no era diseñar este formulario una vez — era que se rediseñara cinco veces. Sin una fuente única de verdad, cada equipo que construía una vertical nueva partía de cero: nuevos componentes, nuevas validaciones, nuevo criterio sobre qué campos pedir primero. Cada duplicado no solo cuesta tiempo de diseño y desarrollo — retrasa que un patrón que ya convierte en una vertical llegue a las demás.
03. Sistema Tipográfico
Una escala tipográfica pensada para vender confianza, no solo para leerse bien
Junto a los tokens de color, documenté una escala tipográfica completa: Display y Heading (H1-H7) en Raleway ExtraBold para titulares con peso editorial, y Subtitle/Body/Table en Noto Sans para el contenido funcional — coberturas, condiciones, precios. Cada token tiene tamaño, line-height, letter-spacing y color de referencia documentados, con una categoría específica llamada "Insurance" para textos legales y de condiciones de seguro. Que exista un token de tipografía dedicado a contenido de seguros no es casualidad: en un producto financiero, la legibilidad de las condiciones no es un detalle estético — es lo que evita reclamaciones por "no lo vi claro". La escala se documenta en dos variantes, web y mobile, para que el mismo criterio se aplique en ambos canales.
Insight Clave: Un H3 mal definido no es un problema de estética — es un usuario que no distingue el titular de la cobertura del texto legal que la limita.
04. Design Tokens
Una paleta semántica y una escala de espaciado como única fuente de verdad
La base de todo el sistema es una arquitectura de Design Tokens semánticos: escalas Primary y Neutral para la identidad de marca, CTA para las acciones de conversión, Welcome para momentos de bienvenida/onboarding, y cuatro escalas semánticas — Error, Success, Alert, Info — para estados del sistema. Cada token tiene nombre semántico (`$di-color-cta-500`, `$di-color-semantic-error-400`) y valor hexadecimal versionado.
Esa misma disciplina se aplica al espaciado: una escala de tokens de spacing (`$di-spacing-01`, `$di-spacing-02`...) documentada con su valor en píxeles y un ejemplo visual, para que los ritmos verticales y los márgenes entre componentes sean una decisión de sistema, no un ajuste manual pantalla por pantalla. Un espaciado consistente es lo que hace que cinco verticales construidas por equipos distintos se perciban como un mismo producto.
Por qué importa a nivel de negocio: cuando el equipo de marketing pide un ajuste de color para una campaña, o cuando una vertical nueva necesita su propio acento de marca, el cambio se hace en un token, no pantalla por pantalla. Eso convierte una tarea de días en una tarea de minutos.
Insight Clave: Un token de color o de espaciado no es un capricho de sistema de diseño. Es lo que permite que un cambio de marca no se convierta en un proyecto de tres semanas.
05. Librería de Componentes
De botones aislados a un sistema con estados completos
Sobre los tokens se construye la librería de componentes: botones (primario, secundario, ghost, con icono, WhatsApp, error) con todos sus estados — default, hover, disabled, loading —, además de badges, chips, checkboxes, tags, bullets de carrusel y paginación. A eso se suma una capa de componentes de formulario más compleja: inputs con validación en tiempo real, autocompletado, selectores, y tarjetas de precio ("Product Title — 00,00€") reutilizadas en las landings.
Cada componente consume los tokens directamente, así que un ajuste en la paleta se propaga automáticamente a toda la librería. Esta librería es lo que hace posible que el mismo patrón de landing se replique en cada vertical sin que cada equipo reconstruya el mismo input con ligeras variaciones que, sumadas, generan inconsistencia y deuda de mantenimiento.
06. Estructura Global
Header y footer — la navegación como parte del sistema, no como excepción
El header no es solo un logo y cuatro enlaces: cada entrada de navegación ("Seguros de salud", "Seguros de coche"...) despliega un mega-menú con dos columnas — productos segmentados por audiencia (Baratos, Autónomos, Bebés, Embarazadas, Mayores de 70 años...) y aseguradoras partner de esa vertical, cada una con su logo. Es arquitectura de información aplicada a SEO y a conversión: cada segmento de audiencia con una necesidad distinta tiene su propia puerta de entrada.
El footer, por su parte, es donde vive el peso regulatorio del negocio: enlaces a Aviso legal, Datos del mediador, Entidades aseguradoras e Info legal de producto, junto al sello de valoración (9.8/10) y la identidad legal de la empresa ("iSalud Health Services SL, Sociedad de Agencia de Seguros Vinculada"). En un negocio de mediación de seguros, ese pie de página no es un trámite — es parte de lo que permite operar legalmente.
07. Landings por Vertical
Un mismo patrón de conversión, adaptado a cada seguro
Las cinco verticales comparten la misma estructura de landing: hero con CTA de cálculo inmediato y prueba social (rating de clientes), tabla comparativa de modalidades (ej. "Terceros" vs. "Todo riesgo" en Coche, "Cuadro médico con copago" vs. "Reembolso libre" en Salud, "Prima única" vs. "Prima renovable" en Decesos), bloques de coberturas imprescindibles, un bloque de "Estudio de [vertical] de Doctori.com" con datos de mercado propios, y FAQ.
Lo que cambia por vertical no es la estructura — es el contenido de decisión: en Coche y Moto, el usuario necesita comparar marcas de vehículo; en Salud, coberturas médicas; en Decesos y Vida, modalidades de prima y capital asegurado. El sistema separa lo que es patrón (reutilizable) de lo que es contenido (específico de cada negocio), y esa separación es una decisión de arquitectura de producto, no solo de UI.
Insight Clave: El patrón se diseña una vez. El contenido de decisión se adapta por vertical. Esa separación es lo que permite lanzar una vertical nueva en semanas, no en meses.
08. Confianza y Contenido Modular
Una librería de módulos CMS que el negocio monta sin diseño ni desarrollo
El corazón de la escalabilidad de contenido es una librería de módulos CMS: bloques autocontenidos, con su diseño y sus reglas ya definidos, que el equipo de contenido combina como piezas de Lego para montar cualquier landing sin pedir una sola pantalla nueva a diseño o desarrollo. Estos son los módulos que componen el sistema:
• Cómo Funciona — resume la propuesta de valor en cuatro pasos (Completas el formulario → Comparamos al instante → Eliges tu mejor opción → Te asesoramos gratis), atacando la desconfianza inicial de un comparador que el usuario no conoce.
• Opiniones y valoración — testimonios reales de clientes junto al sello de puntuación global (9.8/10), como prueba social que se reutiliza en todas las verticales.
• Expertos Visibles — pone cara y nombre al equipo de asesoramiento, convirtiendo un comparador anónimo en personas con las que se puede hablar.
• Estudio de mercado — bloques de datos propios (distribución de precios, edades, coberturas más contratadas por vertical) que funcionan como señal de autoridad, no como relleno.
• Coberturas frecuentes y FAQ — resuelven las dudas y objeciones típicas de cada seguro sin saturar el hero.
• Explicación del modelo de negocio — transparencia sobre cómo gana dinero el comparador, un módulo de confianza específico del sector.
Cada módulo consume los mismos tokens y componentes del sistema, así que combinarlos nunca rompe la coherencia visual. Añadir una variación de landing deja de ser un proyecto y pasa a ser una composición de bloques ya existentes.
Esa misma lógica de confianza se extiende a los modales legales: cada aseguradora tiene su propio modal de "Información legal del producto" con enlaces a Resumen de coberturas, Condiciones generales y Nota informativa — un requisito regulatorio en mediación de seguros resuelto como un componente reutilizable por aseguradora, no como una excepción por página.
Insight Clave: Un módulo de contenido bien diseñado no es una plantilla bonita — es la diferencia entre que el equipo de marketing necesite a un diseñador para cada variación, o no.
09. Decisiones de Producto
Por qué cada bloque de la landing está donde está
Cada bloque del patrón de landing responde a una razón de conversión o de confianza, no a una preferencia estética:
Hero con CTA + prueba social
El precio orientativo ("Desde 9€/mes") y el rating de clientes (9.8/10) aparecen antes que cualquier explicación. El usuario decide si sigue leyendo en los primeros 3 segundos — el CTA no puede esperar a que termine de leer.
Tabla comparativa temprana
Antes de explicar coberturas en detalle, se muestra la tabla comparativa de modalidades (ej. con copago / sin copago). El usuario de seguros llega comparando — el diseño responde a esa intención antes de pedirle que lea contenido educativo.
Logos de aseguradoras como prueba social
Adeslas, Sanitas, Mapfre, Allianz — mostrar con quién se compara genera confianza inmediata en un producto financiero donde el usuario no conoce a "Doctori" de entrada, pero sí conoce a las aseguradoras.
"Estudio de [vertical]" con datos propios
Cada landing incluye un bloque de datos de mercado (gráficos de distribución de precios, edades, tipos de cobertura más contratados). No es contenido decorativo — es una señal de autoridad que reduce la fricción de "¿puedo confiar en este comparador?".
FAQ al final, no al principio
Las preguntas frecuentes resuelven objeciones de último momento (¿es obligatorio?, ¿puedo cambiar de aseguradora?) justo antes de que el usuario decida si calcula su precio o abandona — su posición en el flujo es deliberada, no un cajón de sastre.
10. Arquitectura de Audiencia
Una puerta de entrada distinta para cada necesidad
El mega-menú de cada vertical no es solo navegación: es arquitectura de información al servicio del SEO y la conversión. Bajo "Seguros de salud" no hay un único enlace — hay puertas segmentadas por audiencia: *Baratos, Para autónomos, Para bebés, Para embarazadas, Para mayores de 70 años, Con cobertura dental, Sin copago…* Cada una es una landing propia, indexable, que responde a una búsqueda concreta con un lenguaje y unas coberturas concretas. Esto es una decisión de producto con impacto directo en negocio. Un usuario que busca "seguro de salud para embarazadas" no quiere una landing genérica de salud — quiere ver, en los primeros segundos, que este comparador entiende *su* necesidad. El sistema hace esto posible sin multiplicar el trabajo de diseño: cada landing segmentada parte del mismo patrón (hero, comparativa, coberturas, estudio de mercado, FAQ) y solo cambia el contenido de decisión. Una audiencia nueva es una configuración de contenido, no un proyecto de diseño. El resultado a nivel de sistema: decenas de puntos de entrada orgánicos, cada uno optimizado para una intención de búsqueda específica, todos coherentes entre sí y todos alimentando el mismo motor de captación de lead. La arquitectura de audiencia es lo que convierte un comparador en una red de puertas, no en una sola.
Insight Clave: Segmentar por audiencia no multiplica el coste de diseño cuando el patrón ya está sistematizado — multiplica los puntos de entrada al negocio con el mismo esfuerzo. Esa es la diferencia entre un sistema y una colección de páginas.
11. Reflexión
Qué significa liderar un Design System que no para de crecer
Un Design System en una empresa real no es un proyecto que se termina — es una infraestructura que se gobierna. Estas son las tensiones activas de liderar el de Doctori.com:
- Velocidad vs. consistencia — cada vertical nueva llega con presión de lanzamiento. La tentación de "total, es solo esta vez" es constante, y cada excepción que se acepta es una excepción que alguien más copiará en la siguiente vertical
- Cuándo diferenciar y cuándo unificar — no todo debe ser igual entre Salud y Moto. Parte del rol de Strategic Product Designer es decidir dónde la diferenciación aporta valor real al usuario y dónde es solo preferencia de un equipo
- Gobernanza sin fricción — un sistema que frena a los equipos de producto para "pedir permiso" en cada componente deja de usarse. El reto permanente es que seguir el sistema sea el camino más rápido, no una capa burocrática extra
- Contenido reutilizable, no solo componentes visuales — el sistema de módulos CMS extiende la misma disciplina de "construir una vez, usar muchas veces" al contenido, no solo al UI. Mantener esa coherencia según crece la librería de módulos es un frente permanente
- Siguiente frente — profundizar el patrón de landing en Decesos y Vida, las verticales más recientes, y auditar accesibilidad (WCAG) en toda la librería de componentes como base para el siguiente ciclo de madurez del sistema
Insight Clave: El valor de este trabajo no se mide en pantallas diseñadas — se mide en cuánto más rápido y con menos deuda se puede lanzar la próxima vertical gracias al sistema que ya existe.
Resultados
Otros proyectos
¿Tienes un proyecto en mente?
Me encantaría escuchar tu idea. Hablemos sobre cómo puedo ayudarte a crear algo extraordinario.