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

Grand Plaza

Una app móvil para el centro comercial Grand Plaza que reúne eventos, servicios, campañas de premios y ofertas en un solo lugar. Los montos y los códigos 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
Mockup de Grand Plaza compuesto 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

Grand Plaza es una app en portugués para un centro comercial. Una barra inferior la divide en Início, Prêmios, Ofertas, Lojas y Perfil, con la pestaña Ofertas elevada en el centro, la única que rompe la línea.

El archivo de Figma guarda el proceso junto a las pantallas: wireframes de v0 a v4, un mapa mental, un sitemap y un flujo de usuario con mapa de contenido. Aquí muestro las pantallas diseñadas junto al mapa que las organizó.

Un recorrido por las pantallas del diseño, no una grabación: onboarding, la home y los premios.

02

Un evento a la vez

La home dedica la mayor parte de la pantalla a un solo evento: una tarjeta grande con foto, el nombre, las fechas y un botón Saiba mais, y un indicador de carrusel que muestra que hay más. Debajo hay tres atajos a servicios: el mapa del centro comercial, el estacionamiento y el cine, con un enlace Ver todos para el resto.

Cuatro pantallas de la app en fila sobre un fondo oscuro: la home, la campaña de Prêmios, la cuadrícula de servicios y la página de un evento.
Home, Prêmios, servicios y la página de un evento, en una versión con Serviços en la barra de pestañas.

03

Una campaña que dice cuánto falta

La pestaña Prêmios funciona con comprobantes de compra. La tarjeta de la campaña indica, en tres líneas breves, lo que la persona ya registró, cuánto falta para un regalo y cuánto falta para un número de la suerte. Cadastrar nota fiscal es el botón destacado y Saiba mais el discreto, así que el siguiente paso queda claro antes de que haga falta cualquier explicación.

Pantalla de inicio con el logo de Grand Plaza, una tarjeta grande con foto del evento Noites Culturais y un botón Saiba mais, tres atajos a servicios y una barra inferior con el botón Ofertas elevado.
Pantalla Prêmios con el banner de la campaña Eu Faço, el monto ya registrado, lo que falta para un regalo y para un número de la suerte, y un botón Cadastrar nota fiscal.
Pantalla de onboarding con una ilustración en negro, rosa y amarillo de ventanas de app, una llave y un cohete, un mensaje de bienvenida y los botones Próximo y Pular.
La home abre con un evento y luego los servicios principales. Prêmios muestra lo que falta para llegar a cada recompensa. El onboarding presenta la app en tres pasos.

04

Una lista larga de servicios, mapeada primero

El centro comercial ofrece más de lo que cabe en una barra de pestañas, así que Serviços do shopping reúne catorce servicios en una sola cuadrícula, del mapa del centro comercial y el estacionamiento al coworking, el estacionamiento para bicicletas y la carga de autos eléctricos. Las ofertas terminan en su propia pantalla, con el descuento, un código, un QR y una fecha de vencimiento para mostrar en la tienda.

El flujo de usuario y mapa de contenido ordena esta estructura como un árbol de pantallas que parte de la home. El archivo también guarda dos versiones del prototipo, una con íconos planos y otra con íconos 3D.

Un diagrama titulado Fluxo do usuário e content map, con un árbol de pantallas que se ramifica desde la home en filas numeradas.
El flujo de usuario y el mapa de contenido detrás de las pantallas.
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 14 Diseño de app móvil

Grand Plaza

Una app móvil para el centro comercial Grand Plaza que reúne eventos, servicios, campañas de premios y ofertas en un solo lugar. Los montos y los códigos 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

Mockup de Grand Plaza compuesto para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

Todo el centro comercial, a una pestaña de distancia

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

Mi contribución

Grand Plaza es una app en portugués para un centro comercial. Una barra inferior la divide en Início, Prêmios, Ofertas, Lojas y Perfil, con la pestaña Ofertas elevada en el centro, la única que rompe la línea.

El archivo de Figma guarda el proceso junto a las pantallas: wireframes de v0 a v4, un mapa mental, un sitemap y un flujo de usuario con mapa de contenido. Aquí muestro las pantallas diseñadas junto al mapa que las organizó.

Un recorrido por las pantallas del diseño, no una grabación: onboarding, la home y los premios.
Cuatro pantallas de la app en fila sobre un fondo oscuro: la home, la campaña de Prêmios, la cuadrícula de servicios y la página de un evento.
Home, Prêmios, servicios y la página de un evento, en una versión con Serviços en la barra de pestañas.

Un evento a la vez

La home dedica la mayor parte de la pantalla a un solo evento: una tarjeta grande con foto, el nombre, las fechas y un botón Saiba mais, y un indicador de carrusel que muestra que hay más. Debajo hay tres atajos a servicios: el mapa del centro comercial, el estacionamiento y el cine, con un enlace Ver todos para el resto.

Pantalla de inicio con el logo de Grand Plaza, una tarjeta grande con foto del evento Noites Culturais y un botón Saiba mais, tres atajos a servicios y una barra inferior con el botón Ofertas elevado.
La home abre con un evento y luego los servicios principales.

Una campaña que dice cuánto falta

La pestaña Prêmios funciona con comprobantes de compra. La tarjeta de la campaña indica, en tres líneas breves, lo que la persona ya registró, cuánto falta para un regalo y cuánto falta para un número de la suerte. Cadastrar nota fiscal es el botón destacado y Saiba mais el discreto, así que el siguiente paso queda claro antes de que haga falta cualquier explicación.

Pantalla Prêmios con el banner de la campaña Eu Faço, el monto ya registrado, lo que falta para un regalo y para un número de la suerte, y un botón Cadastrar nota fiscal.
Prêmios muestra lo que falta para llegar a cada recompensa.
Pantalla de onboarding con una ilustración en negro, rosa y amarillo de ventanas de app, una llave y un cohete, un mensaje de bienvenida y los botones Próximo y Pular.
El onboarding presenta la app en tres pasos.

Una lista larga de servicios, mapeada primero

El centro comercial ofrece más de lo que cabe en una barra de pestañas, así que Serviços do shopping reúne catorce servicios en una sola cuadrícula, del mapa del centro comercial y el estacionamiento al coworking, el estacionamiento para bicicletas y la carga de autos eléctricos. Las ofertas terminan en su propia pantalla, con el descuento, un código, un QR y una fecha de vencimiento para mostrar en la tienda.

El flujo de usuario y mapa de contenido ordena esta estructura como un árbol de pantallas que parte de la home. El archivo también guarda dos versiones del prototipo, una con íconos planos y otra con íconos 3D.

Un diagrama titulado Fluxo do usuário e content map, con un árbol de pantallas que se ramifica desde la home en filas numeradas.
El flujo de usuario y el mapa de contenido detrás de las pantallas.