YANApp móvil y landing page
Hidratasport. Entrenamiento y nutrición en la misma línea de tiempo
Una app de seguimiento de entrenamiento y nutrición, que en pantalla aparece como Hidrata, con macros, entrenamientos, suplementación y análisis con IA, además de la landing page que la presenta. Todas las cifras son datos de ejemplo.
- Mi papel
- Flujos de producto y diseño de interfaz
- Estado del proyecto
- Diseño de interfaz · archivo de Figma
Pantallas del archivo de diseño original en Figma, con datos de ejemplo.
Mi contribución
Hidratasport aparece en pantalla como Hidrata, una app en portugués creada para apoyar el entrenamiento y la nutrición. El archivo de la app está organizado por flujos, desde el primer uso y el paywall hasta la home, los entrenamientos, los registros, el ranking y el perfil, y un segundo archivo guarda la landing page. Aquí muestro las pantallas de uso diario de la app y la página que las presenta.
Dos versiones de la misma mañana
El archivo guarda una home anterior junto a una más reciente, y la diferencia es un cambio de prioridad. La versión anterior abría con un gráfico de hidratación y los totales del día. La nueva pone primero la sincronización de datos, luego anillos de macros para proteínas, grasas, carbohidratos y calorías frente a sus metas diarias, y convierte el resto de la página en una línea de tiempo del día con etiquetas como Pós-treino.
Una carrera, leída por capas
La página de un entrenamiento empieza con la distancia y el tiempo en dos bloques grandes, y luego el recorrido en un mapa, con el ritmo, la frecuencia cardíaca y las calorías al lado. Más abajo, un gráfico superpone el entrenamiento actual al anterior, con marcadores a lo largo de las líneas. El análisis con IA tiene su propia pestaña, para que los números simples se mantengan despejados.
La pantalla de actividad trabaja a una escala más amplia: un resumen diario o semanal de entrenamientos, distancia y tiempo sobre un gráfico de barras, con un banner cuando un análisis nuevo con IA está listo.
Una landing page que explica mostrando
La landing page abre con “Treine com inteligência. Performe com precisão.” sobre el azul de la app, con la home en un celular debajo del titular. Desde ahí recorre las funciones principales, cómo encaja la app en una rutina, pantallas reales bajo “Mais do que dados: contexto” y tres pasos para desbloquear el modo PRO invitando a amigos.
