Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 003Seguimiento de hábitos y rutinas compartidas

BetterTogether

Una app funcional para que las parejas den seguimiento a sus hábitos, registren la ingesta de calorías y el ejercicio, y sigan un desafío compartido. Su panel diario conecta los registros individuales con una racha conjunta, recompensas y el progreso a lo largo del tiempo.

Mi papel
Estrategia de producto, UX/UI e implementación
Estado del proyecto
Flutter Web/PWA publicado
Vista diaria de BetterTogether, recorrido compartido y balance calórico.
Vista general de BetterTogether en modo oscuro.
Componentes actuales de la app con datos sintéticos de demostración. Interacciones actuales de la app: vista diaria, balance calórico y registro. Grabación hecha con los componentes reales de la app y datos sintéticos de demostración.

01

Mi contribución

BetterTogether lleva los pequeños registros de una rutina diaria a un desafío compartido: marcar un hábito, sumar las calorías de una comida, anotar el ejercicio y volver para ver qué cambió. Trabajé en la estrategia de producto, el UX/UI y la implementación en Flutter.

La app le da a cada persona una vista diaria y mantiene visible el recorrido de la pareja. El trabajo de diseño se concentra en la relación entre una acción, su resultado registrado y el progreso que la interfaz muestra a continuación.

Hábitos diarios y estados de completado de BetterTogether.
Balance calórico interactivo de BetterTogether.
Hoja de registro de calorías de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.

02

Dar un día a cada registro

La tira de fechas cambia a la vez los registros de hábitos y los totales de calorías del panel. La persona puede volver a un día anterior, revisar sus registros y agregar un registro de ingesta o de ejercicio en la fecha seleccionada.

Los hábitos tienen su propia pantalla, enfocada en ellos, con un selector de fecha y controles para marcarlos como completados. Un toque actualiza el estado de inmediato; si falla el guardado, la app restaura el estado anterior y explica que no se pudo guardar el registro.

03

Hacer legible el cálculo de calorías

La ingesta y el ejercicio se ingresan a mano en una hoja numérica. La calculadora pone esos registros en relación visual con la meta diaria configurada, con un anillo, un resultado con signo y orientación contextual.

Una segunda vista de la calculadora explica los términos detrás de lo que se muestra: metabolismo, ingesta, ejercicio y meta. El color distingue entre avanzar, alcanzar la meta y superarla. La persona puede revisar el cálculo desde el mismo componente en el que aparece el resultado.

Explicación del balance calórico de BetterTogether.
Tarjeta de cuenta regresiva del desafío de BetterTogether.
Balance calórico de BetterTogether después de un registro.
Componentes actuales de la app con datos sintéticos de demostración.

04

Definir qué cuenta como un día en pareja

La racha conjunta tiene una regla específica: cada participante debe completar al menos un hábito y registrar ingesta o ejercicio el mismo día. La interfaz muestra la racha actual, la racha más larga y si hoy ya cuenta.

Un carrusel horizontal mantiene a mano el desafío, la cuenta regresiva y la revelación bloqueada. Las recompensas marcan hitos a lo largo del recorrido compartido. Cuando la revelación final queda disponible, pasa a una vista más grande con una retrospectiva del desafío.

05

Llevar el feedback a toda la app

El sistema visual implementado usa fondos neutros, un naranja cálido, tipografía redondeada y grano. Los temas claro y oscuro mantienen la misma jerarquía en el panel, las hojas numéricas y las vistas de progreso. La respuesta al toque, los números que cambian y las transiciones de página conectan los estados.

Los ajustes del desafío también hacen explícita la visibilidad de los datos: privada o compartida entre los participantes. Quien crea el desafío controla ese ajuste, y la persona invitada lo hereda. Mi trabajo conecta estas decisiones de interfaz con la app de Flutter y sus registros en Supabase.

000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos

Canal 03 Seguimiento de hábitos y rutinas compartidas

BetterTogether

Una app funcional para que las parejas den seguimiento a sus hábitos, registren la ingesta de calorías y el ejercicio, y sigan un desafío compartido. Su panel diario conecta los registros individuales con una racha conjunta, recompensas y el progreso a lo largo del tiempo.

Mi papel
Estrategia de producto, UX/UI e implementación
Estado del proyecto
Flutter Web/PWA publicado
Período
2026
Vista diaria de BetterTogether, recorrido compartido y balance calórico.
Componentes actuales de la app con datos sintéticos de demostración.
Interacciones actuales de la app: vista diaria, balance calórico y registro. Grabación hecha con los componentes reales de la app y datos sintéticos de demostración.
Vista general de BetterTogether en modo oscuro.
Componentes actuales de la app con datos sintéticos de demostración.

Hábitos, comidas y movimiento en una vista diaria

Componentes e interacciones actuales de la app, demostrados con datos sintéticos.

Mi contribución

BetterTogether lleva los pequeños registros de una rutina diaria a un desafío compartido: marcar un hábito, sumar las calorías de una comida, anotar el ejercicio y volver para ver qué cambió. Trabajé en la estrategia de producto, el UX/UI y la implementación en Flutter.

La app le da a cada persona una vista diaria y mantiene visible el recorrido de la pareja. El trabajo de diseño se concentra en la relación entre una acción, su resultado registrado y el progreso que la interfaz muestra a continuación.

Dar un día a cada registro

La tira de fechas cambia a la vez los registros de hábitos y los totales de calorías del panel. La persona puede volver a un día anterior, revisar sus registros y agregar un registro de ingesta o de ejercicio en la fecha seleccionada.

Los hábitos tienen su propia pantalla, enfocada en ellos, con un selector de fecha y controles para marcarlos como completados. Un toque actualiza el estado de inmediato; si falla el guardado, la app restaura el estado anterior y explica que no se pudo guardar el registro.

Hábitos diarios y estados de completado de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.

Hacer legible el cálculo de calorías

La ingesta y el ejercicio se ingresan a mano en una hoja numérica. La calculadora pone esos registros en relación visual con la meta diaria configurada, con un anillo, un resultado con signo y orientación contextual.

Una segunda vista de la calculadora explica los términos detrás de lo que se muestra: metabolismo, ingesta, ejercicio y meta. El color distingue entre avanzar, alcanzar la meta y superarla. La persona puede revisar el cálculo desde el mismo componente en el que aparece el resultado.

Balance calórico interactivo de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.
Hoja de registro de calorías de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.
Explicación del balance calórico de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.

Definir qué cuenta como un día en pareja

La racha conjunta tiene una regla específica: cada participante debe completar al menos un hábito y registrar ingesta o ejercicio el mismo día. La interfaz muestra la racha actual, la racha más larga y si hoy ya cuenta.

Un carrusel horizontal mantiene a mano el desafío, la cuenta regresiva y la revelación bloqueada. Las recompensas marcan hitos a lo largo del recorrido compartido. Cuando la revelación final queda disponible, pasa a una vista más grande con una retrospectiva del desafío.

Tarjeta de cuenta regresiva del desafío de BetterTogether.
Componentes actuales de la app con datos sintéticos de demostración.

Llevar el feedback a toda la app

El sistema visual implementado usa fondos neutros, un naranja cálido, tipografía redondeada y grano. Los temas claro y oscuro mantienen la misma jerarquía en el panel, las hojas numéricas y las vistas de progreso. La respuesta al toque, los números que cambian y las transiciones de página conectan los estados.

Los ajustes del desafío también hacen explícita la visibilidad de los datos: privada o compartida entre los participantes. Quien crea el desafío controla ese ajuste, y la persona invitada lo hereda. Mi trabajo conecta estas decisiones de interfaz con la app de Flutter y sus registros en Supabase.

Balance calórico de BetterTogether después de un registro.
Componentes actuales de la app con datos sintéticos de demostración.