Portada — Medradr · Interaction Pattern Library · 2016
El encargo era un video demo para inversionistas. Antes de animar una sola pantalla, tuve que construir el sistema que lo haría posible: una librería de patrones de interacción que documentó el lenguaje de motion de toda la plataforma y sirvió como referencia para el equipo de desarrollo.
El objetivo inicial era producción pura: animar pantallas en After Effects para crear un demo que se viera real. Trabajé directamente con el CEO y en paralelo con el UI designer responsable de la identidad visual y las pantallas. Mi trabajo abarcó desde la definición estructural de la app — flujos, wireframes, arquitectura de navegación — hasta el motion design final.
Lo primero que hice fue diseñar el flujo completo de usuario para entender qué pantallas necesitaba animar y en qué secuencia.
Animar con precisión obligaba a tomar decisiones constantes: ¿cómo entra esta pantalla? ¿con qué curva? ¿qué pasa con el status bar al hacer scroll? Sin un criterio compartido, el motion se volvía arbitrario y las discusiones con el equipo, inevitablemente subjetivas.
La solución fue dar un paso atrás antes de animar: definir primero los principios.
Propuse crear una librería de patrones de interacción antes de producir cualquier animación. El objetivo no era documentar por documentar, sino establecer un lenguaje común que permitiera tomar decisiones desde criterios de diseño. Sobre todo porque el desarrollo de la app sería hecho por un equipo externo: sin reglas explícitas, cada pantalla podía interpretarse de forma distinta.
La librería quedó organizada en cinco categorías. Cada una con su propio patrón definido, sus curvas y tiempos documentados, y su razón de ser.
Comunicar el estatus de la aplicación y retroalimentar al usuario sobre lo que sucede en cada momento.
Reforzar el sentido de manipulación directa: el usuario siente que controla lo que ocurre en pantalla.
Mostrar al usuario el resultado de sus acciones de forma clara e inmediata, sin ambigüedad.
La navegación entre secciones funciona por niveles apilados: cada pantalla nueva se desplaza por encima de la anterior, generando un sentido claro de profundidad y jerarquía. El swipe para regresar responde en tiempo real al movimiento del dedo, y el status bar hace fade in y fade out sincronizado con el gesto. Reserve es el único flujo con navegación independiente: aparece de abajo hacia arriba, señalando que es un acceso directo y no parte del flujo lineal.
La carga de contenido sigue dos patrones generales: listas verticales que cargan de arriba hacia abajo, y listas horizontales que cargan de izquierda a derecha. Cada sección principal tiene su propio patrón definido según lo que el usuario necesita ver primero. Especialidades + Home, Card Doctor y Explore tienen estructuras distintas que responden a esa pregunta antes de mostrar cualquier dato.
Los modales aparecen fuera del flujo normal de navegación para comunicar mensajes que ocurren una sola vez: permisos de ubicación, acceso a contactos. Usan blur de fondo con capa de opacidad para separarse visualmente del contexto sin romper la continuidad de la experiencia.
Los componentes son controladores de selección, como el date picker para elegir fecha y hora de una cita. Su animación de despliegue usa una capa alpha para mantener la visibilidad del contexto mientras el usuario interactúa con el selector.
El ícono de carga animado representa el pulso de vida, alineado con el contexto médico de la app. Se usa en dos momentos distintos: como placeholder en la carga inicial de datos, y como estado intermedio cuando la app necesita refrescar información entre pantallas.
Con los patrones definidos, el motion de los videos no fue una serie de decisiones arbitrarias sino la ejecución consistente de un sistema. Cada transición, cada carga de contenido, cada gesto respondía a criterios ya establecidos. Eso es lo que le da coherencia visual a un demo: no el estilo, sino la consistencia del comportamiento.
El video recorre el flujo completo desde el lado del paciente: desde el home hasta la confirmación de una cita. Fue el material central de la presentación con la que Medradr levantó su primera ronda de capital.
El segundo video muestra la experiencia desde el lado del doctor, con la app de gestión de calendario y pacientes. Mismo sistema de interacción, perspectiva distinta.
Medradr consiguió inversión y arrancó operaciones. El proyecto cerró un año después. La librería de interacción quedó como referencia para el equipo de desarrollo externo durante la etapa de construcción.
La librería no era solo documentación para el equipo de desarrollo externo — era el argumento que hacía posible tomar decisiones desde criterios de diseño en lugar de preferencias personales. Cada transición del video demo tenía una razón de ser. Y esa razón estaba escrita.
Este proyecto me hizo entender que el motion design no es decoración. Es comunicación. Cada transición le dice al usuario dónde está, qué acaba de pasar y qué puede hacer a continuación. Trabajar desde principios explícitos en lugar de intuición cambió la forma en que pienso sobre interacción hasta hoy.
También aprendí que sistematizar antes de producir no es perder tiempo. Es lo que hace posible escalar sin perder coherencia, y lo que saca las conversaciones de diseño del terreno de las preferencias personales.
El equipo priorizó producción y perfección antes que validación. Un prototipo de fidelidad media con insights reales habría sido más útil en etapas tempranas que un video altamente producido sin haber probado la propuesta de valor con usuarios.
La librería de interacción llegó en el momento correcto para el video, pero ese trabajo habría ganado mucho más impacto si hubiera informado también decisiones de producto desde el principio.