Buscador para una app sanitaria
Encontrar tu información de salud sin perderte
Diseñamos el buscador de la nueva versión de una app de salud pública, para que cualquier persona, también las mayores, encuentre sus informes, resultados, medicación o citas sin depender de navegar por menús.
Resumen
- Problema
- La app concentra muchísima información personal de salud y es poco intuitiva. Muchas personas, sobre todo mayores, se pierden buscando lo que necesitan.
- Mi papel
- Diseñar la experiencia completa del buscador, desde la propuesta hasta las pantallas finales en móvil y escritorio.
- Solución
- Un buscador con sugerencias mientras escribes, corrección de errores, filtros y ordenación para encontrar rápido lo importante.
- Resultado
- La propuesta se entregó con muy buena acogida interna, pero la nueva versión de la app se paró antes de lanzarse.
Contexto
La app permite a la ciudadanía consultar toda su información sanitaria: informes médicos, resultados de pruebas, imágenes como radiografías, medicación, vacunas y citas. La usa un número muy elevado de personas, y una parte importante son personas mayores.
En la app actual, encontrar algo exige navegar por menús a base de prueba y error. Por las entrevistas que habíamos hecho en proyectos anteriores y por lo que nos transmitía el personal sanitario, sabíamos que mucha gente se perdía. Las entrevistas de un proyecto anterior de medicación de la misma app dieron lugar a la persona y al mapa de propuesta de valor que se muestran a continuación.
Mientras la app actual seguía en funcionamiento, trabajábamos en paralelo en una nueva versión. El buscador era uno de los proyectos de esa nueva versión y la respuesta a este problema.
El reto
Diseñar un buscador que funcionara para todo el mundo, pensando especialmente en las personas mayores y con poca experiencia digital, con estas condiciones:
- Mucha información y muy diversa, en el espacio reducido de un móvil, donde se usa mayoritariamente la app.
- Cumplir las pautas de accesibilidad WCAG 2.1 AA.
- Partir del design system de la nueva app.
- Sin datos de uso: la app no tenía analítica porque, por confidencialidad, no se podían incorporar herramientas de medición. Trabajamos con lo que sabíamos de proyectos anteriores y del contexto sanitario.
Momentos clave
No reinventar la rueda
Para un público con poca experiencia digital, lo más intuitivo es lo que ya conocen. Analizamos cómo resuelven la búsqueda plataformas muy usadas que manejan muchísimos resultados, como Spotify, y nos basamos en patrones que la gente ya reconoce en lugar de inventar una interacción nueva.
Referencias de buscadores analizados: Spotify, una app de mensajería, Gmail y Zalando Ayudar mientras escribes
Diseñamos el buscador para que ayude mientras se escribe. Al abrirlo, el campo vacío muestra las búsquedas recientes, que se pueden borrar una a una. Al escribir, aparecen sugerencias con la ruta de cada resultado (por ejemplo, «Nivel 1 > Nivel 2»), para saber en qué parte de la app está. Y si hay una errata, propone la búsqueda correcta con un enlace.
Flujo del buscador: historial, sugerencias y coincidencias mientras escribes 
Pantallas finales: búsquedas recientes, sugerencias con ruta y corrección de errores Mostrar lo importante primero
Con tanta información, la forma de presentar los resultados era tan importante como la búsqueda. La página de resultados muestra el término buscado, el número de resultados y cómo están ordenados; por defecto, del más reciente al más antiguo. Cada resultado es una tarjeta con un icono que indica el tipo de contenido (medicación, informe, vacuna…), su fecha o detalle, su nombre y una descripción.
Los resultados se pueden filtrar y ordenar. Los filtros están en una ventana con categorías y fechas, y el botón indica cuántos resultados se mostrarán. Los filtros activos aparecen como etiquetas que se quitan con un toque, y el icono de filtros lleva un punto rojo. La ordenación se elige en una hoja propia: más reciente, más antigua y orden alfabético.
También pensamos en los momentos en que no hay nada que mostrar: mientras cargan los resultados y cuando una búsqueda no tiene coincidencias, donde se ofrece borrarla para empezar de nuevo.
Wireframes móviles: resultados, filtros y ordenación 
Pantallas finales: resultados con filtros activos, ventana de filtros y ordenación Del móvil al escritorio
El diseño partía del móvil, pero la app también se usa en escritorio. Adaptar el buscador fue un reto propio: la interacción cambia mucho entre una pantalla táctil pequeña y un ordenador con teclado, y había que mantener la coherencia sin perder las ventajas de cada formato.
Por ejemplo, el botón de filtros: en móvil es un icono dentro del campo de búsqueda y, en escritorio, lleva además el texto «Filtres». La página de escritorio añade también la ruta de navegación (Inici > Página actual) y el menú de la cabecera.
Página del buscador en móvil (izquierda) y en escritorio (derecha)
La solución
Un buscador que acompaña a la persona en cada momento: antes de escribir, con las búsquedas recientes; mientras escribe, con sugerencias y corrección de erratas; y al ver los resultados, con filtros y ordenación para llegar rápido a lo importante. Funciona en móvil y en escritorio.
Validación y resultados
- Presentamos la propuesta al equipo en una demo interna y la acogida fue muy positiva.
- El diseño se planteó desde el inicio para cumplir WCAG 2.1 AA.
- La propuesta se entregó completa, pero el cliente decidió parar la nueva versión de la app y centrar los esfuerzos en la actual, así que el buscador no llegó a implementarse ni a testearse con usuarios.
Aprendizajes
- Para públicos con poca experiencia digital, lo familiar suele funcionar mejor que lo original. Apoyarse en patrones conocidos es una decisión de diseño, no una falta de creatividad.
- Cuando no hay datos de uso, el conocimiento adquirido en proyectos anteriores y la voz de quien está en contacto con las personas usuarias, como el personal sanitario, son fundamentales para entender al usuario final.
- Lo que haríamos diferente: validar el buscador con personas mayores mediante un prototipo interactivo, aunque el proyecto no avanzara, para obtener evidencias de lo que funcionaba y lo que no, y poder plantear una siguiente iteración en busca de una mejora continua.
