HSJD · Hospital Sant Joan de Déu

En 2022 participé desde Fail Fast en la definición de la Escola de Salut, una plataforma educativa del Hospital Sant Joan de Déu Barcelona. Mi trabajo partió de las necesidades recogidas por el equipo en workshops previos. Las traduje en criterios de diseño, arquitectura y wireframes para escritorio y móvil, y me encargué de priorizar la propuesta por fases ante las preocupaciones sobre su implementación. El caso se centra en cómo estas decisiones dieron estructura a una experiencia que reunía información de salud, enfermedades y recursos para familias y cuidadores.

Las necesidades y los requerimientos recogidos reunían perspectivas de stakeholders, familias con hijos sanos y familias con hijos crónicos. La plataforma debía responder a necesidades de prevención, información sobre enfermedades y apoyo cotidiano.

• Encontrar lo relevante: acceder a contenidos entre temas y formatos diversos.
• Comprender información compleja: orientar la lectura y aclarar términos médicos.
• Adaptarse al tiempo disponible: contemplar formatos rápidos y contenidos de mayor profundidad.
• Conectar información y cuidados: acercar recursos útiles para afrontar la enfermedad.

El objetivo de diseño era definir una estructura que permitiera orientarse, localizar información relevante y explorarla con distintos niveles de detalle.

El equipo había realizado los workshops antes de mi incorporación. Revisé las capturas de necesidades recibidas y las contrasté con un benchmark de plataformas de salud.

La comparación me ayudó a evaluar cómo los referentes resolvían el acceso, la lectura y la relación entre contenidos. Utilicé ese análisis para seleccionar patrones que respondieran a las necesidades del proyecto y detectar dificultades que convenía evitar.

De ahí surgieron tres criterios:

• Adaptar el acceso a la intención de consulta.

• Organizar la lectura con distintos niveles de profundidad.

• Hacer visibles la procedencia de la información y los recursos relacionados.

  Proceso

  Workshops previos → benchmark → criterios de diseño → arquitectura → wireframes

Una familia que busca consejos generales no llega con la misma pregunta que alguien que necesita entender un diagnóstico. La arquitectura debía contemplar esas diferencias y conectar las páginas de entrada con las fichas de detalle.

Definí un sitemap y un diagrama que organizaban las áreas de vida saludable, patologías, apoyo a familias, formación y actualidad, junto con la búsqueda.

Trabajé también la página de inicio y las páginas de entrada a las secciones para dar contexto a cada área y acercar sus contenidos. La arquitectura establecía la relación entre estas capas: entrada general, selección de contenidos y consulta del detalle.

Los primeros wireframes utilizaban bloques amplios para revisar jerarquías y relaciones antes de concretar su presentación.

Las necesidades de las familias con hijos sanos incluían acceder a consejos y contenidos sobre hábitos saludables. Para esa exploración, propuse distribuidoras con categorías y filtros que permitieran recorrer los artículos y acotar lo relevante.

En las familias con hijos crónicos aparecía la necesidad de conocer una enfermedad, sus síntomas o sus tratamientos. Para la consulta de una enfermedad concreta, propuse búsqueda y acceso alfabético que facilitaran localizar un término conocido.

Explorar contenidos y buscar información concreta debían convivir. Adapté el mismo concepto de distribuidora a ambas necesidades: distintos mecanismos de acceso con una función común, ayudar a llegar al contenido de detalle.

Las necesidades recibidas mostraban que algunas familias tenían poco tiempo y preferían formatos rápidos. En los artículos propuse un resumen de lo que se aprendería, lectura rápida y contenido completo: una estructura que permitía elegir cuánto profundizar.

Para las familias con hijos crónicos, la consulta abarcaba entender la enfermedad, conocer tratamientos y encontrar apoyo. Organicé las fichas en apartados que acompañaban esas preguntas, desde la explicación inicial hasta la convivencia y los recursos para familias.

Definí índices y menús laterales para acceder a cada apartado, incluida su adaptación al móvil, e incorporé autoría, fuentes y fechas de revisión para hacer visible la procedencia del contenido.

El trabajo descendió al nivel de los bloques: listados, tablas, imágenes y contenidos que requerían énfasis, como las señales de alarma. Estas reglas orientaban cómo presentar la información según su naturaleza.

Cuando la propuesta estaba definida, surgieron preocupaciones sobre la implementación de ciertas funcionalidades y urgencia por avanzar. El equipo me encargó generar la priorización.

Revisé qué aportaba cada función a las necesidades identificadas y organicé la propuesta por fases. Reflejé esa secuencia directamente sobre los wireframes, con marcas que distinguían los elementos previstos para momentos posteriores.

La entrega ofrecía una referencia para avanzar progresivamente y mantener visible la evolución propuesta.

Revisé la arquitectura y los wireframes con el equipo y mi responsable. Después, el equipo de UI desarrolló la propuesta visual, que revisamos conjuntamente para asegurar la continuidad de la experiencia.

Mi conocimiento de componentes UI me ayudó a concretar estructuras y comportamientos desde los wireframes. En Fail Fast recibía habitualmente feedback sobre su claridad y la facilidad para trasladarlos al diseño visual. Esa concreción dio al equipo una base para continuar el trabajo: jerarquías, patrones de contenido e interacciones ya definidos.

Nota de atribución: la investigación previa a mi incorporación fue responsabilidad del equipo, y la aplicación visual final correspondió al equipo de UI. Mi contribución se centró en la arquitectura de información, los wireframes y la priorización por fases.

La entrega reunió una arquitectura conectada, patrones de página para escritorio y móvil y una secuencia de implementación por fases.

En la plataforma consultada recientemente se reconocen estructuras presentes en las propuestas:

• Entradas por temas y edades, visibles en la navegación (se abre en una pestaña nueva).
• Consulta alfabética, en la distribuidora de enfermedades (se abre en una pestaña nueva).
• Navegación por apartados, en la ficha de enfermedad (se abre en una pestaña nueva).
• Autoría, fechas y contenidos relacionados, en la ficha de artículo (se abre en una pestaña nueva).

Estos patrones permiten observar continuidad estructural con el producto actual, que ha seguido evolucionando desde mi participación.

Ver la Escola de Salut (se abre en una pestaña nueva)