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

HubProlog

Una app móvil donde los chapas, los ayudantes de carga y descarga de Brasil, encuentran trabajos cortos pagados, los aceptan y guardan sus registros de pago.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Mockup de HubProlog armado para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

01

Mi contribución

HubProlog, que en pantalla aparece como hub, es una app en portugués para quienes toman trabajos cortos pagados, como el de chapa, el ayudante de carga y descarga. La app llama trampos a estos trabajos, la palabra de uso diario en Brasil para un trabajo ocasional.

El archivo de diseño tiene 47 frames de celular entre acceso, propuestas, búsqueda, comprobantes y perfil. Los trabajos, lugares y montos que se muestran aquí son contenido de ejemplo.

Pantalla Buscar con el título Propostas em São Paulo, una tarjeta grande con la ilustración de un trabajador de almacén, el trabajo Chapa a R$ 100 por día, a 11 km, y botones de rechazar, deshacer y aceptar.
Pantalla Convocação con el logo de hub sobre una ilustración desvanecida de un almacén, la descripción del trabajo, una lista de actividades incluidas y los botones Recusar y Aceitar.
Grabado del prototipo de Figma. Deslizar convocatorias, filtrar por ciudad y abrir una. Buscar muestra un trabajo a la vez, con rechazar, deshacer y aceptar. Una convocatoria explica el servicio antes de pedir una respuesta.

02

Un trabajo en pantalla a la vez

Buscar convierte el trabajo disponible en tarjetas deslizables, una tarjeta grande a la vez. La tarjeta dice qué trabajo es, cuánto paga, dónde está y a qué distancia, con el texto sobre un degradado oscuro para que se lea bien sobre la ilustración. Debajo hay tres controles redondos: rechazar, deshacer y aceptar.

03

Primero leer, después responder

Una convocatoria abre con una descripción simple del servicio y una lista de lo que incluye. La pregunta aparece solo al final, “Você aceita este trampo?”, justo encima de Recusar y Aceitar, para que la decisión llegue después de la lectura. El coral indica el rechazo y el verde limón de la marca indica la aceptación, el mismo par que se usa en las pantallas de propuestas.

Pantalla Comprovantes con las pestañas Holerites y Comprovantes de PIX y una lista semanal de pagos de ejemplo de R$100 recibidos por PIX.
Pantalla de acceso con el logo de hub, un campo de CPF y un botón oscuro Continuar.
Comprovantes agrupa los registros de pago por semana. El acceso pide una sola cosa: el CPF.

04

La prueba de lo que se pagó

Comprovantes separa Holerites de Comprovantes de PIX y agrupa los registros por semana. Cada tarjeta empieza con el monto, seguido del trabajo y la fecha. El acceso es igual de corto: un campo de CPF y un botón Continuar.

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

HubProlog

Una app móvil donde los chapas, los ayudantes de carga y descarga de Brasil, encuentran trabajos cortos pagados, los aceptan y guardan sus registros de pago.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Mockup de HubProlog armado para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

Trabajos cortos, decididos tarjeta por tarjeta

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

Mi contribución

HubProlog, que en pantalla aparece como hub, es una app en portugués para quienes toman trabajos cortos pagados, como el de chapa, el ayudante de carga y descarga. La app llama trampos a estos trabajos, la palabra de uso diario en Brasil para un trabajo ocasional.

El archivo de diseño tiene 47 frames de celular entre acceso, propuestas, búsqueda, comprobantes y perfil. Los trabajos, lugares y montos que se muestran aquí son contenido de ejemplo.

Grabado del prototipo de Figma. Deslizar convocatorias, filtrar por ciudad y abrir una.
Pantalla Buscar con el título Propostas em São Paulo, una tarjeta grande con la ilustración de un trabajador de almacén, el trabajo Chapa a R$ 100 por día, a 11 km, y botones de rechazar, deshacer y aceptar.
Buscar muestra un trabajo a la vez, con rechazar, deshacer y aceptar.

Un trabajo en pantalla a la vez

Buscar convierte el trabajo disponible en tarjetas deslizables, una tarjeta grande a la vez. La tarjeta dice qué trabajo es, cuánto paga, dónde está y a qué distancia, con el texto sobre un degradado oscuro para que se lea bien sobre la ilustración. Debajo hay tres controles redondos: rechazar, deshacer y aceptar.

Pantalla Convocação con el logo de hub sobre una ilustración desvanecida de un almacén, la descripción del trabajo, una lista de actividades incluidas y los botones Recusar y Aceitar.
Una convocatoria explica el servicio antes de pedir una respuesta.

Primero leer, después responder

Una convocatoria abre con una descripción simple del servicio y una lista de lo que incluye. La pregunta aparece solo al final, “Você aceita este trampo?”, justo encima de Recusar y Aceitar, para que la decisión llegue después de la lectura. El coral indica el rechazo y el verde limón de la marca indica la aceptación, el mismo par que se usa en las pantallas de propuestas.

Pantalla Comprovantes con las pestañas Holerites y Comprovantes de PIX y una lista semanal de pagos de ejemplo de R$100 recibidos por PIX.
Comprovantes agrupa los registros de pago por semana.

La prueba de lo que se pagó

Comprovantes separa Holerites de Comprovantes de PIX y agrupa los registros por semana. Cada tarjeta empieza con el monto, seguido del trabajo y la fecha. El acceso es igual de corto: un campo de CPF y un botón Continuar.

Pantalla de acceso con el logo de hub, un campo de CPF y un botón oscuro Continuar.
El acceso pide una sola cosa: el CPF.