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 009Diseño de app móvil

DoBetrBoy

Una app para parejas que sigue las fases del ciclo, los antojos y pequeñas ideas para reconfortar. Un anillo de fases en Home, una checklist de antojos y una biblioteca de palabras de apoyo responden, cada uno, una pregunta práctica.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Portada de presentación de DoBetrBoy, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

DoBetrBoy es una app para parejas. Sigue en qué punto de su ciclo está ella, lleva el registro de lo que se le antoja y reúne pequeñas formas de reconfortarla. Diseñé sus pantallas en torno a una pregunta simple: ¿qué podría ayudar hoy?

Todas las fechas, fases y notas en pantalla son datos de ejemplo.

Pantalla Home con una franja semanal, un anillo dividido en cuatro fases del ciclo con leyenda, el texto Period in 15 days en el centro y una tarjeta con una cara durmiendo que indica que ella está en la fase lútea y podría necesitar un poco de descanso.
Tarjeta de la Comforting Library con la frase You don't have to fix everything. Just being there already means a lot, una ilustración de dos personas abrazándose y los botones atrás, compartir y siguiente.
Grabado del prototipo de Figma. Del anillo del ciclo al calendario, a la lista de antojos y al perfil. Home: el punto de hoy en el ciclo, con una nota corta debajo. Datos de ejemplo. Comforting Library: una frase a la vez, lista para compartir.

02

El día de un vistazo

Home empieza con un anillo dividido en las cuatro fases, un marcador en el día de hoy y dos líneas en el centro: la fecha y los días que faltan para el próximo período. Arriba hay una franja semanal y abajo una leyenda, así que el gráfico se explica solo.

Debajo del anillo, una tarjeta convierte la fase en una nota corta: “She is in the Luteal phase”, seguida de “She might need a little rest”. La redacción se mantiene tentativa: una sugerencia, no una afirmación sobre cómo se siente ella.

Craving list con una tarjeta de AI Assistant, pestañas List y Suggestions e ítems de checklist, como pastel de chocolate y bubble tea, agrupados en Sweets y Strange mix.
Cycle Calendar con un mes en el que cuatro días están resaltados con los colores de las fases y, debajo, una tarjeta con las notas del día seleccionado.
Craving list: ítems agrupados con casillas de verificación, más un asistente de IA para ideas. Cycle Calendar: colores de las fases en el mes, notas del día seleccionado. Datos de ejemplo.

03

Gestos pequeños y prácticos

El resto de la app convierte esa información en algo que se puede hacer. La Craving list agrupa los ítems en secciones como Sweets y Strange mix, cada uno con una casilla de verificación, y una tarjeta de AI Assistant ofrece generar más ideas. El Cycle Calendar lleva los colores del anillo al mes y guarda debajo las notas del día seleccionado.

La Comforting Library es la pantalla más tranquila: una frase y una ilustración a la vez, con controles para retroceder, avanzar o compartir.

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 09 Diseño de app móvil

DoBetrBoy

Una app para parejas que sigue las fases del ciclo, los antojos y pequeñas ideas para reconfortar. Un anillo de fases en Home, una checklist de antojos y una biblioteca de palabras de apoyo responden, cada uno, una pregunta práctica.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Portada de presentación de DoBetrBoy, del archivo de diseño original.
Portada de presentación del archivo original.

Seguimiento del ciclo desde el lado de la pareja

Pantallas del archivo de diseño original en Figma, con datos de ejemplo.

Mi contribución

DoBetrBoy es una app para parejas. Sigue en qué punto de su ciclo está ella, lleva el registro de lo que se le antoja y reúne pequeñas formas de reconfortarla. Diseñé sus pantallas en torno a una pregunta simple: ¿qué podría ayudar hoy?

Todas las fechas, fases y notas en pantalla son datos de ejemplo.

Grabado del prototipo de Figma. Del anillo del ciclo al calendario, a la lista de antojos y al perfil.
Pantalla Home con una franja semanal, un anillo dividido en cuatro fases del ciclo con leyenda, el texto Period in 15 days en el centro y una tarjeta con una cara durmiendo que indica que ella está en la fase lútea y podría necesitar un poco de descanso.
Home: el punto de hoy en el ciclo, con una nota corta debajo. Datos de ejemplo.

El día de un vistazo

Home empieza con un anillo dividido en las cuatro fases, un marcador en el día de hoy y dos líneas en el centro: la fecha y los días que faltan para el próximo período. Arriba hay una franja semanal y abajo una leyenda, así que el gráfico se explica solo.

Debajo del anillo, una tarjeta convierte la fase en una nota corta: “She is in the Luteal phase”, seguida de “She might need a little rest”. La redacción se mantiene tentativa: una sugerencia, no una afirmación sobre cómo se siente ella.

Tarjeta de la Comforting Library con la frase You don't have to fix everything. Just being there already means a lot, una ilustración de dos personas abrazándose y los botones atrás, compartir y siguiente.
Comforting Library: una frase a la vez, lista para compartir.
Craving list con una tarjeta de AI Assistant, pestañas List y Suggestions e ítems de checklist, como pastel de chocolate y bubble tea, agrupados en Sweets y Strange mix.
Craving list: ítems agrupados con casillas de verificación, más un asistente de IA para ideas.

Gestos pequeños y prácticos

El resto de la app convierte esa información en algo que se puede hacer. La Craving list agrupa los ítems en secciones como Sweets y Strange mix, cada uno con una casilla de verificación, y una tarjeta de AI Assistant ofrece generar más ideas. El Cycle Calendar lleva los colores del anillo al mes y guarda debajo las notas del día seleccionado.

La Comforting Library es la pantalla más tranquila: una frase y una ilustración a la vez, con controles para retroceder, avanzar o compartir.

Cycle Calendar con un mes en el que cuatro días están resaltados con los colores de las fases y, debajo, una tarjeta con las notas del día seleccionado.
Cycle Calendar: colores de las fases en el mes, notas del día seleccionado. Datos de ejemplo.