Caso de estudio · Salud pública del condado · Minnesota

Kanabec County Community Health

El diseño visual de Kanabec County Community Health: una identidad tranquila y confiable y dos direcciones para la página de inicio que ponen primero la ayuda, para la salud pública, el apoyo familiar y la atención domiciliaria en el condado de Kanabec, Minnesota.

El reto de diseño

Kanabec County Community Health atiende a un condado rural del centro-este de Minnesota: salud pública, WIC, vacunas, atención domiciliaria, apoyo familiar y más. Su información estaba repartida en tres sitios web.

La encuesta de descubrimiento, que hizo el equipo de AndiSites con ocho personas del departamento, nombró los problemas: la gente no sabe qué es la salud pública, los servicios son difíciles de encontrar en el teléfono y el sitio del condado se sentía anticuado y poco acogedor. Mi parte empezó ahí: convertir esos hallazgos en un diseño que se sienta claro, cálido y confiable.

Diapositiva The Problem We’re Solving: tres tarjetas numeradas que dicen que tres sitios separados confunden a los usuarios, que la gente no sabe qué es la salud pública y que los servicios son difíciles de encontrar en el móvil, con la idea clave de empezar por los servicios y no por el nombre del departamento.
El problema, en palabras del propio equipo.

Lo que diseñamos en equipo

El diseño empieza por la ayuda, no por el nombre del departamento:

  • Una página de inicio en cinco partes. Una barra de búsqueda grande que pregunta «What do you need help with?», ocho tarjetas grandes de servicios, cuatro pasos simples que explican cómo pedir ayuda, una sección de confianza comunitaria y un aviso de emergencia que permanece oculto hasta que se necesita.
  • Una identidad visual basada en los valores del equipo. Confianza, disposición a ayudar, accesibilidad y colaboración se volvieron azul marino para la credibilidad, arena y dorado para la calidez, y rojo solo para la urgencia.
  • Tipografía. Titulares en Bookman Old Style, una serif clásica que se siente cercana y confiable, con una sans serif limpia para la lectura.
  • Componentes. Tarjetas de servicios, pasos numerados, cifras de impacto y el aviso de emergencia, diseñados como un solo sistema para que se vean igual en todas las páginas.
Diapositiva Homepage: What Visitors See First: un teléfono junto a cinco partes numeradas: barra de búsqueda grande, cuadrícula de ayuda rápida, cómo funciona, sección de confianza comunitaria y aviso de emergencia.
Primero la ayuda. El departamento se explica después.
Diapositiva Built-In Emergency Alert System: la página de inicio en modo normal y en modo de crisis, donde aparece arriba un aviso rojo de salud pública.
Un clic activa el aviso. Sin rediseñar nada.

Dos direcciones, un principio

Las dos páginas de inicio siguen la misma regla: primero la ayuda, después la institución.

Dirección 1, inmediatez. Jerarquía fuerte, alto contraste y bloques de servicios modulares llevan a la gente a la ayuda antes de que el departamento se presente. Bookman Old Style con Inter.

Dirección 2, calma. Una paleta azul suave y un banner con dibujos de línea fina de personas aportan calidez sin competir por la atención. Bookman Old Style con Nunito.

Dos direcciones para la página de inicio, una al lado de la otra. A la izquierda: una profesional de salud con una paciente detrás del titular Find Help. Get Support. Stay Healthy., una barra de búsqueda y una cuadrícula de tarjetas de servicios en azul pálido y arena. A la derecha: un banner azul suave con dibujos de línea de personas detrás del titular We’re here to help!, una barra de búsqueda y accesos a servicios.
Dirección 1, inmediatez. Dirección 2, calma.

Confianza para residentes y comisionados

El equipo describió a los comisionados como dudosos, por eso la página de inicio incluye una sección de confianza comunitaria que hace visible el trabajo del departamento: familias atendidas, vacunas aplicadas y aliados que trabajan juntos. Las cifras de los diseños son aproximadas.

Para las emergencias, el aviso y las «páginas oscuras» precargadas se activan con un clic, sin rediseñar nada.

Decisiones de accesibilidad

  • El azul marino lleva el texto: blanco sobre Deep Trust Navy da 15,8:1, y azul marino sobre Soft Sand, 11,2:1.
  • Alert Red solo para emergencias, con texto blanco a 6,6:1, para que el rojo siempre signifique urgencia.
  • Muted Gold como fondo o acento, con texto azul marino (5,8:1). Como color de texto, o bajo texto blanco, queda por debajo de 3:1, así que nunca lleva palabras por sí solo.
  • La búsqueda primero, tarjetas grandes fáciles de tocar, etiquetas en lenguaje sencillo y cuatro pasos que dicen qué esperar.
  • Diseñado para el teléfono desde el principio, porque ahí era donde los residentes se perdían.
Diapositiva Visual Identity: Colors That Build Trust: Deep Trust Navy #0C2340, Community Blue #18216D, Soft Sand #E7D8B6, Muted Gold Accent #BE965C, Warm White #F3EBDD y Alert Red #B42318 solo para emergencias.
Azul marino para la credibilidad, arena y dorado para la calidez, rojo solo para la urgencia.

Del diseño al desarrollo

El sitio está ahora en desarrollo con el equipo de AndiSites, y yo formo parte de la construcción: un solo sistema de contenidos para reemplazar los tres sitios, un directorio de servicios y el kit para emergencias. Una propuesta de diseño es un punto de partida, no una plantilla; a medida que avanza el desarrollo, el diseño sigue adaptándose a lo que el departamento necesita en el día a día.

Mi rol en el equipo

Parte del equipo de AndiSites Inc., a través de eMirDesigner LLC: identidad visual, diseño de la página de inicio, dos direcciones de diseño, componentes y la construcción en WordPress.