Libretto
Una app para Android que ayuda a los padres a guardar los documentos de salud de sus hijos, encontrarlos rápido y mostrarlos cuando alguien los pide.
Los nombres de pantallas y botones de la app están en inglés, igual que en las capturas. Las citas de participantes están traducidas desde la versión en inglés de este caso de estudio.
2 estudios de usabilidad, 9 participantes, 6 problemas encontrados y abordados
Probar el prototipoVer los seis cambios de diseñoLeer todo en Notion ↗
👀 De un vistazo
El problema
Una escuela o un médico piden con poca anticipación una cartilla de vacunación o el resultado de un examen. Los padres guardan estos documentos en carpetas de papel, en la galería del celular y en chats, y perder uno puede significar una vacuna omitida o un examen repetido.
Mi rol
En solitario, de principio a fin: entrevistas, personas, wireframes, dos estudios de usabilidad, el diseño visual, un sistema de diseño de 43 componentes y el prototipo clicable.
Seis problemas, seis cambios de diseño
| Problema encontrado en las pruebas | Visto en | Qué cambié |
|---|---|---|
| La pantalla de detalles no decía qué hacer | 5 de 5 | Un formulario corto y conocido, con un campo Name |
| No estaban seguros de que el archivo se hubiera guardado | 1 de 5 | El guardado se confirma en Home, con el archivo en Recent |
| Home mezclaba archivos y citas | 2 de 5 | Tres pestañas: Home, My files, Calendar |
| No podían abrir un registro después de guardarlo | 4 de 4 | Una pantalla Record details con vista previa |
| "Destination" no tenía sentido | 3 de 4 | Se elige para quién es; la ruta de guardado se muestra en palabras simples |
| La app elegía al hijo sin preguntar | 2–3 de 4 | El nombre del hijo y un selector en la barra superior |
🧩 El problema
Los padres necesitan los documentos de salud de sus hijos en momentos inesperados: un formulario de la escuela para hoy, un especialista nuevo, una cita para vacunar. En mis entrevistas, esos documentos estaban en carpetas, cuadernos de papel, fotos del celular, chats de WhatsApp y carpetas en la nube, a menudo todo a la vez.
Es una locura depender de una sola copia física.
Una entrevistada, sobre el calendario de vacunación en papel de su bebé
Los sistemas de salud no siempre ayudan. Algunas clínicas no comparten los registros, así que cada médico nuevo significa empezar de cero. Un padre me contó que su hija de cinco meses ya había sido atendida en al menos cinco lugares distintos.
La tarea central: guardar un documento rápido, encontrarlo con seguridad y mostrarlo cuando alguien lo pide.
Cómo se redujo el alcance
Mi planteamiento inicial era amplio: que los padres pudieran revisar los registros de sus hijos, imprimirlos para la escuela o el campamento y ver cuándo toca cada consulta. Las entrevistas mostraron que todo lo demás depende de una sola cosa que tiene que funcionar primero: meter un documento y poder sacarlo de nuevo. Dejé la impresión y las citas para Pablo, la persona secundaria, y para trabajo futuro.
🔍 Investigación
Qué hice
Entrevisté a cinco padres y futuros padres en Argentina e Irlanda y luego agrupé las notas por temas en Mural. Antes de la primera entrevista probé mis preguntas con una madre ficticia y descubrí que una era tendenciosa: preguntar por "organizar" daba por hecha la necesidad, cuando podía ser igual de bien guardar, encontrar o compartir. La reformulé.
Qué escuché
📄 El papel es frágil
Una cartilla de vacunación muchas veces hay que mostrarla en persona. “Si la pierdes, se acabó.”
🧭 Los registros están dispersos
Distintas clínicas, distintos sistemas, nada compartido. “Tienes que empezar de cero.”
🗓️ Las citas viven en todas partes
Mensajes de WhatsApp a uno mismo, un pizarrón en la cocina, recordatorios por SMS, una libreta.
🌿 Un solo lugar quita estrés
Donde los registros están centralizados: “No tener que llevar la cuenta de los papeles me saca mucha responsabilidad de encima.”
Ver las notas originales y la auditoría de la competencia
Auditoría de la competencia. Comparé 7 competidores directos y 3 indirectos (Google Calendar, Google Drive, Notion) y analicé a fondo Guava Health y Google Drive. Todos los competidores directos ofrecían algún tipo de perfiles familiares. Ninguno de los dos que estudié a fondo ofrecía cifrado de extremo a extremo, y el lector de pantalla de Google Drive no leía en voz alta los nombres de los archivos. Eso apuntó a tres oportunidades: perfiles familiares simples, privacidad explicada con claridad y una identidad serena que no parezca un hospital.
👥 Personas
Anne, 25
Persona principal · Redactora publicitaria freelance · Vive con su pareja y su hija Amapola (6)
“No quiero depender de copias físicas. Si las llevo conmigo y las pierdo, estoy perdida.”
Objetivos
- Todos los registros de Amapola en un solo lugar digital
- Recordatorios de citas
- Dejar de preocuparse por perder papeles
Frustraciones
- No encuentra rápido el papel correcto
- Teme perder la única copia
- No hay un lugar único para gestionar las citas
Comodidad con la tecnología
Intermedia
Google Drive y Calendar. Celular Android, laptop con Windows.
Pablo, 31
Persona secundaria · Profesor de arte · Padre divorciado de Romeo (9)
“Un sistema de notificaciones me ayudaría muchísimo.”
Objetivos
- Recordatorios digitales simples para las citas
- Imprimir los registros como respaldo en papel
- Anotar la salud de Romeo de forma ordenada
Frustraciones
- Le preocupa que los registros digitales se pierdan
- Las fotos de papeles salen borrosas al compartirlas
- Sin recordatorio, se olvida de las citas
Comodidad con la tecnología
Básica
Apps de mensajería y notas en WhatsApp. Celular Samsung, iPad, ThinkPad.
Las fotos de las personas son ilustrativas. Diseñé primero para Anne; las necesidades de Pablo (recordatorios, impresión) dieron forma más adelante al Calendar.
🎯 Definir el problema
Planteamiento del problema
Storyboards
El storyboard sigue ese momento: Amapola necesita hoy un documento para la escuela, Anne no lo encuentra y, más tarde, con la app, lo encuentra en segundos.
Un segundo storyboard, más cercano, sigue el momento que la app tiene que resolver bien: Anne la abre, recibe la bienvenida, toca Add, elige escanear o subir, completa los datos, confirma y ve "File uploaded".
Del storyboard a los wireframes en papel
Dibujé cinco pantallas (Home, agregar un archivo o escanear, detalles del documento, confirmación y búsqueda), inspirándome en apps que la gente ya usa para gestionar archivos, como Google Drive, OneDrive, Proton Drive y Dropbox. Para Home dibujé cinco variaciones lado a lado y después redibujé una antes de pasar a Figma, donde reconstruí las pantallas como un prototipo clicable de baja fidelidad.
Ver los wireframes en papel de detalles y búsqueda
🧪 Estudio 1: probar el prototipo lo-fi
Objetivo: averiguar si la app permite recuperar un registro más rápido que una carpeta de papel. Quiénes: 5 personas de 23 a 50 años, entre ellas una médica o un médico y alguien que prefiere las copias en papel. Tareas: agregar un registro médico, completar sus detalles y luego encontrarlo desde Home. Los resultados que siguen describen dónde se confundió la gente. No incluyen tiempos por tarea, así que este estudio no puede decir si la app es más rápida que una carpeta de papel.
Ver cómo ordené las observaciones
Problema 1: La pantalla de detalles no decía qué hacer
Qué pasó
5 de 5 se confundieron con "Add more details", un conjunto suelto de etiquetas, perfiles y cuadros de comentarios. 1 de 5 no veía la diferencia entre "Skip for now" y "Continue". 2 de 5 esperaban poder ponerle nombre al archivo.
Qué cambié
Un formulario conocido con campos rotulados, un campo Name y un campo para indicar adónde va el archivo. Solo lo esencial al principio y sin "Skip for now": todos los campos eran opcionales, así que el botón principal ya cumplía esa función.
Principios: reconocer en lugar de recordar y divulgación progresiva: pedir lo mínimo ahora, más después.
Problema 2: No estaban seguros de que el archivo se hubiera guardado
Qué pasó
1 de 5 no pudo saber si el archivo se había subido. 1 de 5 no encontró cómo volver a Home. 1 de 5 se confundió porque "Add page" estaba separado de "Edit".
Qué cambié
Sin pantalla de confirmación aparte. La gente vuelve a Home, donde el archivo aparece en Recent files y un aviso confirma la carga. Las acciones extra pasaron al aviso y al propio archivo.
Principio: visibilidad del estado del sistema: mostrar el resultado donde la gente va a buscarlo.
Problema 3: Home mezclaba archivos y citas
Qué pasó
A 2 de 5 les gustaba tener un calendario, pero no junto a "Files". 2 de 5 no entendían "Recent records" ni "Coming up". 1 de 5 encontró confuso el menú de hamburguesa.
Qué cambié
Tres pestañas claras, Home, My files y Calendar, para que cada tarea tenga su lugar. Home se centra en los archivos recientes y el menú de hamburguesa desapareció.
Principio: agrupar lo relacionado y mantener la navegación visible.
🎨 Pasar a hi-fi
Color y tipografía
Quería que la app se sintiera confiable, cálida y familiar, no como un hospital. La mayoría de las apps de salud son azules y blancas, y los padres suelen estar ya estresados cuando abren una. Tomé como referencia el papel, la tinta, la madera y el verde: una paleta serena, sin colores saturados.
- Madera oscura
#4B2C1E - Oliva
#4B5936 - Papel
#F8F6EF - Papel claro
#F3EFE6 - Dorado
#CA9F5D - Tinta
#2C2C26
LibrettoRoboto Serif da la sensación de archivo de un libro de registros. Roboto Slab se usa solo para el nombre de la app.
Las decisiones de color y tipografía salen de mi moodboard y de mi propio criterio, no de un estudio con usuarios. Preferencia
Cómo cambió el aspecto, versión por versión
- Dos moodboards. El primero, en agosto, era un dúo de azules fríos, una dirección que abandoné. El segundo, en octubre, usó materiales reales en lugar de otras apps: veta de madera, papel cálido, un verde profundo y una biblioteca de madera. De ahí saqué la paleta con Adobe Color y la convertí en variables de Figma.
- Hi-fi v1. Fondo crema, botones principales en marrón muy oscuro, amarillo intenso para los estados presionado y activo, y un saludo grande: "Hi, Anne." La dirección se sentía bien, pero el amarillo rompía mi propia regla de no usar colores saturados, y el saludo le quitaba espacio a lo que Anne venía a hacer: ver y agregar registros.
- El negro pasó a marrón. Probé el negro total para los elementos más fuertes. Los botones principales usan ahora el marrón madera oscuro, que mantiene un contraste alto (9.39 : 1) pero se queda en la familia de la madera y el papel.
- El amarillo pasó a dorado. El dorado apagado funciona como estado presionado porque la tinta sobre dorado da 5.77 : 1. El dorado sobre papel da solo 1.83 : 1, así que nunca lo uso para texto.
- Hi-fi v3 le dio nombre a la app. Libretto se siente más cercano a un pequeño cuaderno personal de registros que "Health Records App". Home perdió el saludo y ganó un chip que muestra de quién son los registros que estás viendo.
Usé ChatGPT solo para explorar combinaciones de color. Claude, conectado a mis archivos de Figma y Notion, enumeró lo que le faltaba al primer prototipo hi-fi, y cada punto de esa lista está vinculado a un hallazgo de mi investigación.
Estructura
Material Design 3 para Android sobre una cuadrícula de 8 px, una acción principal por pantalla, siempre abajo, y la misma tarjeta de registro en todos los lugares donde aparece un registro, para que la gente la reconozca.
Revisiones de accesibilidad
Medí el contraste de los tokens de diseño con la fórmula de WCAG 2. Los umbrales son 4.5 : 1 para texto normal y 3 : 1 para texto grande y partes de la interfaz como bordes e íconos. Guía establecida
| Par de colores | Relación | Resultado |
|---|---|---|
| Tinta sobre papel (texto del cuerpo) | 10.54 | Cumple |
| Tinta sobre tarjeta | 12.24 | Cumple |
| Papel sobre marrón (botones principales) | 9.39 | Cumple |
| Papel sobre oliva | 5.67 | Cumple |
| Tinta sobre dorado (estado presionado) | 5.77 | Cumple |
| Contorno sobre papel (bordes, íconos) | 3.81 | Cumple para bordes e íconos, no para texto |
| Contorno sobre tarjeta | 4.42 | Un poco por debajo de 4.5 para texto |
| Dorado sobre papel | 1.83 | No cumple: nunca se usa para texto ni como única señal de un estado |
Los botones de ícono están en contenedores de 48 × 48 px. Los chips de filtro de 32 px están por debajo del mínimo de 48 px de Material, algo que todavía no he explorado. Los íconos rellenos y de contorno marcan la pestaña activa, así que la posición no depende solo del color. El soporte para lectores de pantalla y los tamaños de texto grandes todavía no se han revisado.
🧪 Estudio 2: probar el prototipo hi-fi
Cómo: 4 sesiones moderadas en septiembre de 2026, con pantalla compartida en computadora, pensando en voz alta. Tareas: agregar el resultado de un examen de sangre de un niño, encontrarlo cuando la escuela lo pide y luego editarlo. Después pregunté qué les había confundido, adónde creían que había ido el archivo y si confiarían en la app.
Problema 4: Nadie podía abrir un registro después de guardarlo
Qué pasó
4 de 4 no pudieron abrir el registro que acababan de guardar; al tocarlo solo aparecía una hoja de opciones. “No hay ninguna opción para abrir el registro, pero está ahí mismo.”
Qué cambié
Al tocar un registro se abre Record details: una vista previa con un botón Open para verlo completo y debajo el tipo, el tamaño, la fecha, de quién es el registro, su categoría y dónde está guardado.
Por qué importaba: la tarea de Anne termina cuando muestra el documento en la escuela o al médico. El flujo se detenía un paso antes.
Problema 5: "Destination" no tenía sentido y nadie sabía adónde iba el archivo
Qué pasó
3 de 4 no entendieron "Destination: Amapola's Records / 2026 / Tests". Una persona preguntó "¿Quién es Amapola?"; otra lo tocó esperando un selector de carpetas. 3 de 4 no supieron decir dónde se guardó el archivo. “No entendí la parte del destino.”
Qué cambié
Sin una elección Destination aparte. Se elige para quién es el registro y su tipo, y la app muestra dónde se archivará, como texto de solo lectura que se actualiza a medida que eliges: Amapola / Test results / 2026 / August. La misma ruta aparece como carpetas en Records.
Principio: coincidir con el mundo real: archivar las cosas como piensan los padres, por hijo y por tipo, con palabras simples.
Problema 6: La app elegía al hijo sin preguntar
Qué pasó
2–3 de 4 se preguntaron por qué ya estaba seleccionado "Person (daughter)": “¿Por qué 'Daughter'? ¡Lo decidió sola!” (traducido del italiano). Una persona no pudo saber de quién era el examen de sangre.
Qué cambié
El nombre del hijo reemplaza a "Person (you)" y "Person (daughter)". El hijo activo se muestra en la barra superior con un selector, y Record details indica de quién es el registro.
Principio: control del usuario: hacer visibles los valores predeterminados en lugar de silenciosos.
Arreglos menores y pendientes
| Hallazgo | Visto en | Cambio |
|---|---|---|
| No había forma de salir del flujo de carga | 1 de 4 | Cancelar con una confirmación "Discard this record?" |
| Un mensaje de guardado que seguía volviendo | 1 de 4 | El snackbar se cierra solo |
| "Test" era demasiado estrecho | 1–2 de 4 | "Test results", y los mismos cinco nombres de tipo en todas partes |
| Cómo se manejan mis datos | 2 de 4 | Pendiente: uso compartido y permisos controlados |
| Home como resumen de lo que necesita atención | 1 de 4 | Pendiente: primero hay que probarlo |
✨ El diseño final
Más allá del flujo central
También construí lo que el Estudio 2 no pudo poner a prueba: Records como carpetas (hijo, luego tipo, luego año) que reflejan la ruta de guardado, Search en registros y citas, y un Calendar con recordatorios para Pablo.
Probar el prototipo
Toca la pantalla una vez cuando cargue. Escribir está simulado: toca las teclas, porque Figma no admite texto en vivo.
Sistema de diseño
43 componentes construidos en tres niveles (componente principal, componente anidado y espacio para íconos), con el color, la tipografía y el espaciado guardados como variables y estilos de Figma.
Ver los componentes y los tokens de estructura
🚧 Límites y lo que todavía no he explorado
Todavía sin explorar
Son preguntas que aún no he respondido, no una lista de pendientes.
¿Funcionan los flujos nuevos para los padres?
Nadie ha probado los flujos rediseñados en un celular real, y todavía no he hablado con ningún padre sobre ellos.
¿Sirve Search con un volumen real?
Solo tuvo un registro. No sé cómo se comporta con 6 a 8 registros repartidos entre dos hijos.
¿Qué necesitan saber los padres sobre la privacidad?
2 de 4 plantearon la transparencia de los datos. El uso compartido controlado y una privacidad explicada con claridad todavía no están diseñados.
¿Cómo debería funcionar la impresión para Pablo?
Su necesidad de imprimir un respaldo en papel está documentada, pero no diseñada.
¿Son suficientemente grandes las áreas táctiles?
Los chips de filtro de 32 px están por debajo del mínimo de 48 px de Material.
¿Funciona con un lector de pantalla y con texto grande?
Ninguna de las dos cosas se ha revisado todavía.
🌱 Lo que aprendí
Resolver antes de dibujar
Mis primeros wireframes fueron difíciles porque estaba juntando piezas, no respondiendo una pregunta. Ahora empiezo por lo que cada pantalla tiene que resolver.
La gente recuerda lugares
Nunca habría imaginado que todos querrían ver de dónde viene un archivo y adónde va. Probar temprano lo descubrió.
La preparación es parte del diseño
Un solo registro de ejemplo y un nombre sin explicar ("¿Quién es Amapola?") me costaron evidencia. Voy a preparar los datos y el guion con el mismo cuidado que las pantallas.