Caso de éxito de diseño web para clínica: plantilla profesional y cita en tres toques

Contexto y punto de partida

La clínica llegaba con un sitio heredado de una plantilla comprada y nunca adaptada: la misma página para las dos sedes, sin jerarquía entre tratamientos generales y especialidades, y una home que mostraba seis imágenes grandes antes del primer dato útil. El 78 % del tráfico era móvil y ahí estaba el problema.

El objetivo acordado no fue «rediseñar la web», fue conseguir más citas desde el móvil sin perder velocidad ni credibilidad clínica. Todo lo demás se subordinó a eso.

Sector

Salud · clínica dental con dos sedes

Tamaño

34 páginas · 2 sedes · 14 tratamientos

Periodo

7 semanas de diseño, maquetación y migración

Métrica de éxito

Citas solicitadas desde móvil y LCP de campo

Línea base: solicitudes de cita de los 6 meses anteriores, LCP móvil de los datos de campo de los últimos 28 días y tasa de abandono del formulario en la herramienta de analítica.

Qué encontramos

• LCP de 4,6 s en móvil. Tres imágenes de cabecera de 1,8 MB cada una, cargadas sin formato moderno ni dimensiones declaradas. La cabecera era el elemento más grande y también el más lento.
• Formulario de cita de siete campos. Nombre, apellidos, teléfono, correo, sede, tratamiento, motivo y consentimiento. Cada campo adicional reducía la finalización, y la mitad se podían preguntar por teléfono.
• Las dos sedes competían entre ellas. Una sola página de contacto sin dirección ni horario diferenciado, y ningún dato estructurado local. Google no podía entender que eran dos ubicaciones.
• Jerarquía plana. Urgencias, ortodoncia y una revisión de rutina tenían el mismo peso visual. El paciente no sabía por dónde entrar ni qué hacer en caso de dolor.
• Cero señales de confianza visibles. Ni número de colegiado, ni titulaciones, ni autoría de los contenidos. En salud, esa ausencia es la que más pesa en la decisión.

La plantilla y su estructura

Partimos de una plantilla profesional de WordPress y construimos encima un tema hijo con nuestros propios bloques. No inventamos un diseño desde cero: elegimos una base sólida en rendimiento y accesibilidad y la adaptamos al sector clínico, que es más rápido, más mantenible y mucho más barato de evolucionar para el cliente.

clinica-dental.es

Decisiones de diseño

1. Primero la estructura, después el colorAntes de elegir tipografía definimos el mapa de páginas: urgencias, tratamientos, especialidades, sedes, equipo y precios orientativos. La estética se aplicó sobre una arquitectura ya validada, no al revés.
2. La cita, a tres toques desde cualquier páginaBotón fijo en móvil, formulario reducido a tres campos visibles con el resto opcional, y confirmación por teléfono y WhatsApp como alternativas. Menos campos, más citas.
3. El hero deja de ser una foto grandeSustituimos la imagen de cabecera por un mensaje claro, la especialidad principal y el botón de cita. El texto no pesa y se lee en el primer segundo.
4. Confianza visible y verificableNúmero de colegiado, titulaciones, años de experiencia y autoría de cada contenido clínico, revisada por un profesional de la clínica. En salud, la credencial es parte del diseño.
5. Dos sedes, dos entidadesUna página por sede con dirección, horario, equipo y datos estructurados propios, enlazadas desde un selector visible. Deja de haber una sede de primera y otra invisible.
6. Rendimiento como condición de entregaNo aceptamos la entrega hasta cumplir los umbrales de Core Web Vitals en datos de campo, no en laboratorio. Si el LCP no baja, el diseño no está terminado.

Entregables

• Mapa de arquitectura de información con la jerarquía de tratamientos, sedes y páginas de conversión.
• Tema hijo documentado con los patrones de bloque propios y su guía de uso para el equipo del cliente.
• Página de urgencias y página de cada sede con datos estructurados locales y horarios diferenciados.
• Ficha de tratamiento reutilizable con campos personalizados y su plantilla de presentación.
• Informe de Core Web Vitals antes y después, con datos de campo de móvil y escritorio.
• Manual de edición de 8 páginas para que el personal de la clínica pueda publicar sin ayuda técnica.

Resultados

Cifras de ejemplo con el formato de entrega real. Las métricas de rendimiento se leen en los datos de campo de Core Web Vitals del propio dominio y las de conversión en la analítica del cliente. Sustituye estos valores por los verificados antes de publicar.

Antes y después

Preguntas frecuentes

Los umbrales de rendimiento que exigimos en la entrega son los publicados en la guía de Core Web Vitals de web.dev, y las recomendaciones de accesibilidad siguen las pautas WCAG 2.2 del W3C.

Servicio y método relacionados

Este caso corresponde al servicio de diseño y desarrollo web con WordPress. La parte técnica que acompaña a cualquier maquetación está en el checklist técnico.

Maqueta del sitio de este caso

La plantilla que se describe arriba, navegable y con su estructura completa: Clínica Dental Bosque. Es una demostración de diseño creada por nosotros para documentar el trabajo, no un sitio real publicado ni indexado.