UX, diseño, sistemas, arquitectura, SEO y GEO — para replicar las best practices del referente en el sector health.
Toda la arquitectura gira en torno a un único insight: el paciente llega con una necesidad concreta (síntoma, condición, especialidad) y necesita llegar al proveedor correcto con el mínimo de fricción. El diseño no intenta impresionar — intenta desbloquear.
El elemento más inteligente del site. En lugar de listar especialidades infinitas, agrupan toda la oferta en 4 caminos por urgencia/tipo:
App propia, condiciones frecuentes (gripe, rash, UTI), mayores de 3 años. Disponibilidad: 24/7/365.
Cortes, esguinces, ojos rosa, amigdalitis. Desde 3 meses. Urgencias + Express Online + Same-Day Clinic.
Preventivo, crónicos, pediatría. Citas programadas + limitadas mismo día. Todas las edades.
Cardiología, neurología, oncología, ortopedia... Edad varía por especialidad.
Cada tarjeta incluye: condiciones tratadas (lista concreta, no abstracta) + rango de edad. Esto reduce la llamada de "¿puedo ir con mi hijo?" en recepción.
| Necesidad | Dónde se resuelve | Posición en el site |
|---|---|---|
| «Necesito ver a alguien ahora» | Same-Day + Virtual | Fold 1 (grid triage) |
| «Quiero pedir cita con mi médico» | Request Appointment (utility) | Header siempre visible |
| «Busco especialista por condición» | Specialties megamenu | Nav principal |
| «Busco clínica cerca» | Locations megamenu | Nav principal |
| «Quiero ver mis resultados» | Patient Portal (utility) | Header siempre visible |
| «Quiero aprender sobre mi condición» | Blog / Health Library | Footer + blog section |
MCHS no usa Google Fonts ni fuentes genéricas. Tiene una tipografía corporativa propia: MayoClinicSans, en 6 pesos (Regular, Light, Bold, RegularItalic, BoldItalic, Black). Las cargan con rel="preload" para que estén listas antes del render.
Sistema simple de 3 niveles: azul institucional + blanco clínico + gris cálido para fondos secundarios.
El uso del azul profundo (#002554) en headers y CTAs crea confianza institucional. El rojo se reserva exclusivamente para urgencias / Same-Day Care — psicología del color aplicada a UX médico.
Espaciado generoso en secciones (≥64px entre bloques), contenido de texto ancho máximo ~780px para legibilidad. Las tarjetas tienen padding interno consistente (~24px). No hay densidad excesiva — el «aire» es intencional: reduce la ansiedad del paciente.
La imagen del hero es consistentemente una familia o persona real en contexto clínico cálido (no laboratorio clínico frío). Formato 636×724px desktop — casi cuadrado, ocupa el lado derecho. El copy va a la izquierda.
Siempre visible, en header sticky. Los tres botones resuelven el 80% de las razones por las que un paciente existente visita el site:
Resultados, historial, mensajes con el médico. Fidelización del paciente activo.
Reduce llamadas al call center. Self-service de facturación.
CTA primario de captación. Siempre visible, siempre accesible.
El flujo está diseñado para ser reversible: en cada paso hay breadcrumbs + links relacionados. Si el paciente elige la vía incorrecta, puede corregir sin volver al inicio.
Buscador siempre accesible desde header. Cubre especialidades, condiciones, médicos y localizaciones. Es la alternativa de escape cuando la navegación no es suficiente.
Cada especialidad tiene una página dedicada con estructura consistente:
El blog tiene doble función: SEO (long-tail symptoms queries) y educación del paciente. Los artículos siguen un formato de «answer-first»: respuesta directa en los primeros 2 párrafos, contexto clínico después.
Listado completo de +90 especialidades ordenado alfabéticamente, cada una con descripción de 2-3 líneas y URL limpia (/services-and-treatments/[slug]). Funciona como crawlable sitemap de contenido para bots.
| Tag | Valor real (extraído) | Diagnóstico |
|---|---|---|
<title> | «Home» | ❌ Crítico Solo "Home" — sin brand ni keyword |
meta description | «As part of Mayo Clinic, our clinics, hospitals and healthcare facilities serve communities in Iowa, Wisconsin and Minnesota.» | ⚠️ Mejorable Funcional pero genérico |
og:type | «article» | ❌ Error Homepage debería ser "website" |
og:image | (vacío) | ❌ Crítico Sin imagen en preview de redes |
twitter:image | (vacío) | ❌ Crítico Sin imagen en Twitter cards |
twitter:card | «summary» | ⚠️ Debería ser "summary_large_image" |
canonical | Sí, presente | ✅ OK |
viewport | Sí, presente | ✅ OK |
keywords | «Mayo Clinic, health care, Minnesota, Wisconsin, Iowa, patient care, mchs» | ⚠️ Irrelevante para Google, pero indica intención |
Se detectó un único bloque JSON-LD en la homepage:
{
"@type": "ItemList",
"itemListElement": [
{ "@type": "Service", "name": "Virtual Care 24/7", "url": "..." },
{ "@type": "Service", "name": "Same-Day Care", ... },
{ "@type": "Service", "name": "Primary Care", ... },
{ "@type": "Service", "name": "Specialty Care", ... }
]
}Organization — autoridad de marca no declaradaMedicalOrganization — tipo específico de healthcareFAQPage — oportunidad perdida de Featured SnippetsBreadcrumbList — no aparece ruta en SERPsPhysician / MedicalSpecialty en páginas de doctorLocalBusiness en páginas de clínicaPatrón limpio y predecible:
/services-and-treatments/[specialty] → Especialidades
/find-a-doctor → Buscador de médicos
/patient-online-services → Portal paciente
/locations/[state]/[city] → Clínicas
/hometown-health/[slug] → Blog
/request-appointment → CTA conversiónrel="preload" en todas las fuentes tipográficas (6 archivos .woff2)rel="preload" en imagen del hero (LCP optimizado).min.css)llms.txt — no declaran explícitamente qué contenido pueden usar los LLMs| Técnica GEO | Impacto | MCHS lo hace | Implementar en site nuevo |
|---|---|---|---|
| FAQPage schema en cada especialidad | +40% AI visibility | ❌ No | ✅ Prioridad 1 |
| Estadísticas con citas académicas | +37% | ❌ Parcialmente | ✅ En cada servicio |
| Answer-first copy structure | +20% | ⚠️ Inconsistente | ✅ Template rígido |
| Organization + MedicalOrganization schema | Alta | ❌ No | ✅ En homepage |
| llms.txt | Media | ❌ No | ✅ Fácil de hacer |
| Physician schema por médico | Alta | ❌ No detectado | ✅ En perfiles de doctor |
CSS propio (desktop-mvp.min.css). jQuery UI para interacciones (megamenu, tooltips). Font Awesome para iconos. Stack legacy pero estable.
Bot protection agresiva (bloquea scrapers). Performance global excelente. Caché de borde para activos estáticos.
6 pesos en .woff2, preloaded. Sin dependencia de Google Fonts. Máximo control de brand.
Facebook App conectado (fb:app_id). Twitter/X conectado (@mayoclinichs). Pinterest domain verify.
| # | Best Practice | Por qué importa | Prioridad |
|---|---|---|---|
| 1 | Grid de triage en homepage 4 vías de atención con condiciones + edades |
Reduce bounce rate. Responde «¿a qué servicio voy?» en <2 clics. | 🔴 P1 |
| 2 | Utility bar sticky con 3 CTAs Portal · Pago · Cita |
Los pacientes existentes encuentran lo que necesitan sin fricción. El CTA de cita siempre visible. | 🔴 P1 |
| 3 | URL structure semántica /services/[slug], /locations/[city] |
SEO + UX + crawleabilidad para LLMs. URLs que se explican solas. | 🔴 P1 |
| 4 | Font preloading (crítico) rel="preload" en .woff2 antes del CSS |
Elimina FOUT (Flash of Unstyled Text). LCP más rápido. Core Web Vitals. | 🔴 P1 |
| 5 | LCP hero preload rel="preload" as="image" en imagen del hero |
Imagen del hero es casi siempre el LCP element. Preloadarla mejora directamente el score. | 🔴 P1 |
| 6 | Copy en lenguaje de paciente «Care for heart disease» no «Servicios cardiológicos» |
Mejor matching con búsquedas reales. Menor fricción cognitiva. Mejor GEO. | 🟡 P2 |
| 7 | Página A-Z de servicios Listado completo crawleable |
Indexación total de especialidades. Google entiende el scope del site. Usuarios pueden buscar directamente. | 🟡 P2 |
| 8 | Foto humana en hero Familia/persona real, no stock médico genérico |
Trust building. Diferenciación. Reduce la frialdad clínica que genera ansiedad. | 🟡 P2 |
| 9 | Megamenu con specialties featured Top 10 visible sin scroll |
Las 10 especialidades más buscadas accesibles sin navegar. Reduce tiempo a destino. | 🟡 P2 |
| 10 | Blog como Health Library Artículos answer-first sobre síntomas |
SEO long-tail + GEO citation + educación del paciente + confianza. | 🔵 P3 |
MCHS tiene autoridad de marca inigualable pero su implementación técnica muestra su edad. Estas son las ventanas donde un site nuevo puede superarle:
El error más básico. Una página nueva con title «[Nombre Sistema] — Especialistas en [Ciudad/Región]» rankea mejor desde el día 1.
Cuando alguien comparte el site, no aparece imagen en redes. Un site nuevo con esto bien configurado tiene mejor CTR social.
Las preguntas de pacientes («¿qué es la cardiología?») son el formato que más cita la IA. 0 implementación en todo el site.
Los LLMs no tienen una definición estructurada de quién es MCHS. Fácil de implementar, impacto alto en visibilidad AI.
Legacy. 87KB de JS para interacciones que se pueden hacer con 2KB de Vanilla JS. Impacta levemente en TTI.
Debería ser «website». Error que puede afectar cómo se parsea la página en previews de redes y LLMs.