HSJD · Hospital Sant Joan de Déu

In 2022, at Fail Fast, I worked on defining the Escola de Salut, an educational platform from Hospital Sant Joan de Déu Barcelona. My work started from the needs the team had gathered in earlier workshops. I turned them into design criteria, architecture, and wireframes for desktop and mobile, and I prioritized the proposal into phases when concerns came up about implementing it. The case focuses on how these decisions gave structure to an experience that brought together health information, conditions, and resources for families and caregivers.

The needs and requirements gathered brought together the perspectives of stakeholders, families with healthy children, and families with chronically ill children. The platform had to address prevention, information about conditions, and everyday support.

• Find what’s relevant: reach content across many topics and formats.
• Understand complex information: guide reading and explain medical terms.
• Fit the time available: offer quick formats as well as more in-depth content.
• Connect information and care: bring useful resources closer to help families cope with the illness.

The design goal was to define a structure that let people find their way, locate relevant information, and explore it at different levels of detail.

The team had run the workshops before I joined. I reviewed the needs I received and compared them with a benchmark of health platforms.

The comparison helped me assess how leading examples handled access, reading, and the relationships between content. I used that analysis to choose patterns that answered the project’s needs and to spot problems worth avoiding.

Three criteria came out of it:

• Adapt access to what people are looking for.

• Organize reading at different levels of depth.

• Make the source of the information and related resources visible.

  Process

  Earlier workshops → benchmark → design criteria → architecture → wireframes

A family looking for general advice doesn’t arrive with the same question as someone who needs to understand a diagnosis. The architecture had to account for those differences and connect the landing pages with the detail pages.

I defined a sitemap and a diagram that organized the areas of healthy living, conditions, family support, training, and news, along with search.

I also worked on the home page and the section landing pages to give each area context and bring its content closer. The architecture set the relationship between these layers: general entry, choosing content, and reading the details.

The first wireframes used broad blocks to review hierarchies and relationships before defining how they would look.

Families with healthy children needed access to advice and content about healthy habits. For that kind of exploration, I proposed hub pages with categories and filters to browse articles and narrow down what was relevant.

Families with chronically ill children needed to learn about a condition, its symptoms, or its treatments. For looking up a specific condition, I proposed search and alphabetical access to make it easy to find a known term.

Exploring content and looking up specific information had to work side by side. I adapted the same hub page concept to both needs: different ways in, with one shared purpose, helping people reach the detailed content.

The needs we received showed that some families had little time and preferred quick formats. For articles, I proposed a summary of what you would learn, a quick read, and the full content: a structure that let people choose how deep to go.

For families with chronically ill children, looking up a condition meant understanding it, learning about treatments, and finding support. I organized the condition pages into sections that followed those questions, from the first explanation to living with the condition and resources for families.

I defined indexes and side menus to reach each section, including their mobile version, and added authorship, sources, and review dates to make the origin of the content visible.

The work went down to the level of content blocks: lists, tables, images, and content that needed emphasis, like warning signs. These rules guided how to present information based on its nature.

Once the proposal was defined, concerns came up about implementing some features, along with pressure to move forward. The team asked me to prioritize.

I reviewed what each feature contributed to the needs we had identified and organized the proposal into phases. I showed that sequence directly on the wireframes, with marks that set apart the elements planned for later.

The delivery gave the team a reference to move forward step by step while keeping the proposed evolution visible.

I reviewed the architecture and wireframes with the team and my manager. Then the UI team developed the visual design, which we reviewed together to keep the experience consistent.

My knowledge of UI components helped me define structures and behaviors from the wireframe stage. At Fail Fast, I often got feedback on how clear my wireframes were and how easy they were to carry into the visual design. That level of detail gave the team a base to keep working from: hierarchies, content patterns, and interactions already defined.

Attribution note: the research done before I joined was the team’s work, and the final visual design was the UI team’s. My work focused on information architecture, wireframes, and phased prioritization.

The delivery brought together a connected architecture, page patterns for desktop and mobile, and a phased implementation sequence.

On the platform, as checked recently, structures from the proposal are still recognizable:

• Entry points by topic and age, visible in the navigation (opens in a new tab).
• Alphabetical lookup, on the conditions hub page (opens in a new tab).
• Section navigation, on the condition page (opens in a new tab).
• Authorship, dates, and related content, on the article page (opens in a new tab).

These patterns show structural continuity with today’s product, which has kept evolving since I worked on it.

Visit the Escola de Salut (opens in a new tab)