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

DossApp

Una app de seguridad residencial en portugués donde los residentes solicitan una verificación o una cobertura, y los guardias reciben esas solicitudes en su propio lado. Los nombres, las fechas y los precios en pantalla son contenido de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Una pequeña moto de seguridad en 3D con la sirena parpadeando.
Un objeto 3D hecho para este mural.

01

Mi contribución

DossApp es una app en portugués de seguridad bajo demanda para el hogar, con un lado para residentes y otro para prestadores de servicio. Una verificación le pide a un guardia que revise algo, por ejemplo si un portón quedó cerrado con llave. Una cobertura envía a un guardia a acompañar la llegada del residente.

El trabajo en Figma cubre los dos lados, con wireframes, un flujo de usuario y páginas de prototipo, y un archivo aparte guarda capturas con leyenda preparadas para la ficha de una tienda de apps.

Un recorrido por las pantallas del diseño, no una grabación: la home, el historial y el lado del prestador.
Dos pantallas oscuras de la app lado a lado: la home del residente y una pantalla de Cobertura con el guardia en camino y una línea de tiempo de cuatro etapas.
La home del residente junto a una solicitud de cobertura en seguimiento.

02

Qué pide cada color

En una pantalla oscura, el color hace la mayor parte del trabajo de ordenar. Las dos solicitudes cotidianas son los bloques más grandes, Solicitar Verificação en gris claro y Solicitar Cobertura en el amarillo de la marca. Emergência queda aparte como el único elemento rojo, junto a la pregunta “Precisando de uma ajuda mais urgente?”, de modo que el camino urgente no puede confundirse con uno de rutina. La cuenta, los vehículos, los familiares y el resto quedan más abajo, en una cuadrícula discreta de íconos.

Pantalla de inicio del residente con una tarjeta del plan, bloques Solicitar Verificação y Solicitar Cobertura, un botón rojo Emergência y una cuadrícula de seis íconos.
Pantalla de inicio del prestador de servicio con un interruptor junto al estado en línea, bloques Cobertura y Verificações, un botón rojo Emergência y una cuadrícula de íconos con Clientes.
Pantalla Histórico con los filtros Todos, Cobertura y Verificação y tres registros de ejemplo con fecha, hora, guardia y tipo de solicitud.
La home separa las solicitudes de rutina del camino de emergencia. El lado del guardia mantiene el layout y cambia el contenido. El historial muestra cada solicitud por fecha, guardia y tipo.

03

Después de la solicitud, lo que está pasando ahora

Una solicitud no termina en el botón. La pantalla de cobertura muestra el nombre del guardia que va en camino y cuatro etapas, Criada, Enviada, Em andamento y Concluído, con la actual en negrita y Cancelar arriba. Después, una pantalla de mapa dibuja la ruta del guardia y la del residente en colores distintos mientras convergen en la casa.

Una verificación funciona como un chat ligado a la pregunta original. En el ejemplo, el guardia responde con una foto del candado y luego envía una solicitud de resolución que el residente marca como resuelta, lo que deja libre al guardia para otras tareas.

Imagen de tienda con leyenda y una pantalla de chat: el residente pregunta si el portón quedó cerrado con llave, el guardia responde con la foto de un candado y abajo aparece una solicitud de resolución.
Una verificación funciona como un chat, de la pregunta a su resolución.

04

La misma pantalla desde el lado del guardia

La home del prestador de servicio mantiene el layout de la del residente, así que los dos lados de la app se leen igual. Lo que cambia es el contenido: un interruptor reemplaza la etiqueta del plan, los dos bloques grandes pasan a ser Cobertura y Verificações, y la cuadrícula suma Clientes y Notificações. Del lado del residente, Histórico sigue siendo un registro simple, filtrado por tipo, con una tarjeta para cada fecha, guardia y solicitud.

Imagen de tienda con leyenda y un mapa oscuro de Campinas con dos rutas, rotuladas João y Você, que convergen cerca de un marcador de casa.
El mapa sigue al guardia y al residente camino a la casa.
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 15 Diseño de app móvil

DossApp

Una app de seguridad residencial en portugués donde los residentes solicitan una verificación o una cobertura, y los guardias reciben esas solicitudes en su propio lado. Los nombres, las fechas y los precios en pantalla son contenido de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma

Verlo en Dribbble

Una pequeña moto de seguridad en 3D con la sirena parpadeando.
Un objeto 3D hecho para este mural.

Dos solicitudes y un botón rojo

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

Mi contribución

DossApp es una app en portugués de seguridad bajo demanda para el hogar, con un lado para residentes y otro para prestadores de servicio. Una verificación le pide a un guardia que revise algo, por ejemplo si un portón quedó cerrado con llave. Una cobertura envía a un guardia a acompañar la llegada del residente.

El trabajo en Figma cubre los dos lados, con wireframes, un flujo de usuario y páginas de prototipo, y un archivo aparte guarda capturas con leyenda preparadas para la ficha de una tienda de apps.

Un recorrido por las pantallas del diseño, no una grabación: la home, el historial y el lado del prestador.
Dos pantallas oscuras de la app lado a lado: la home del residente y una pantalla de Cobertura con el guardia en camino y una línea de tiempo de cuatro etapas.
La home del residente junto a una solicitud de cobertura en seguimiento.

Qué pide cada color

En una pantalla oscura, el color hace la mayor parte del trabajo de ordenar. Las dos solicitudes cotidianas son los bloques más grandes, Solicitar Verificação en gris claro y Solicitar Cobertura en el amarillo de la marca. Emergência queda aparte como el único elemento rojo, junto a la pregunta “Precisando de uma ajuda mais urgente?”, de modo que el camino urgente no puede confundirse con uno de rutina. La cuenta, los vehículos, los familiares y el resto quedan más abajo, en una cuadrícula discreta de íconos.

Pantalla de inicio del residente con una tarjeta del plan, bloques Solicitar Verificação y Solicitar Cobertura, un botón rojo Emergência y una cuadrícula de seis íconos.
La home separa las solicitudes de rutina del camino de emergencia.
Pantalla de inicio del prestador de servicio con un interruptor junto al estado en línea, bloques Cobertura y Verificações, un botón rojo Emergência y una cuadrícula de íconos con Clientes.
El lado del guardia mantiene el layout y cambia el contenido.

Después de la solicitud, lo que está pasando ahora

Una solicitud no termina en el botón. La pantalla de cobertura muestra el nombre del guardia que va en camino y cuatro etapas, Criada, Enviada, Em andamento y Concluído, con la actual en negrita y Cancelar arriba. Después, una pantalla de mapa dibuja la ruta del guardia y la del residente en colores distintos mientras convergen en la casa.

Una verificación funciona como un chat ligado a la pregunta original. En el ejemplo, el guardia responde con una foto del candado y luego envía una solicitud de resolución que el residente marca como resuelta, lo que deja libre al guardia para otras tareas.

Pantalla Histórico con los filtros Todos, Cobertura y Verificação y tres registros de ejemplo con fecha, hora, guardia y tipo de solicitud.
El historial muestra cada solicitud por fecha, guardia y tipo.
Imagen de tienda con leyenda y una pantalla de chat: el residente pregunta si el portón quedó cerrado con llave, el guardia responde con la foto de un candado y abajo aparece una solicitud de resolución.
Una verificación funciona como un chat, de la pregunta a su resolución.

La misma pantalla desde el lado del guardia

La home del prestador de servicio mantiene el layout de la del residente, así que los dos lados de la app se leen igual. Lo que cambia es el contenido: un interruptor reemplaza la etiqueta del plan, los dos bloques grandes pasan a ser Cobertura y Verificações, y la cuadrícula suma Clientes y Notificações. Del lado del residente, Histórico sigue siendo un registro simple, filtrado por tipo, con una tarjeta para cada fecha, guardia y solicitud.

Imagen de tienda con leyenda y un mapa oscuro de Campinas con dos rutas, rotuladas João y Você, que convergen cerca de un marcador de casa.
El mapa sigue al guardia y al residente camino a la casa.