Drag to explore. Scroll or pinch to zoom. Open Help for keyboard controls.

Yan
OPEN
TO WORK
Let’s talk
Yan Fontão Boring view
All work

Case 014Mobile app design

Grand Plaza

A mobile app for the Grand Plaza mall that brings events, services, prize campaigns and offers into one place. Amounts and codes on screen are sample content.

Contribution
Product flows and interface design
Project status
Interface design · Figma archive
Mockup of Grand Plaza composed for this board from real screens of the project.
Mockup composed for this board from real project screens.

01

My contribution

Grand Plaza is a Portuguese-language app for a shopping mall. A bottom bar divides it into Início, Prêmios, Ofertas, Lojas and Perfil, with Ofertas raised in the centre as the one tab that breaks the line.

The Figma archive keeps the process beside the screens: wireframes from v0 to v4, a mind map, a sitemap and a user flow with a content map. Here I show the designed screens next to the map that organised them.

A walkthrough of the design’s screens, not a recording: onboarding, the Home and the prizes.

02

One event at a time

Home gives most of the screen to a single event: a large photo card with the name, the dates and one Saiba mais button, and a carousel indicator showing there are more. Below it sit three service shortcuts, mall map, parking and cinema, with a Ver todos link to the rest.

Four app screens in a row on a dark background: home, the Prêmios campaign, the services grid and an event page.
Home, Prêmios, services and an event page, in a version with Serviços in the tab bar.

03

A campaign that says what is left

The Prêmios tab runs on receipts. A campaign card states, in three short lines, what the person has already registered, how much more earns a gift and how much more earns a lucky number. Cadastrar nota fiscal is the strong button and Saiba mais the quiet one, so the next step is clear before any explanation is needed.

Home screen with the Grand Plaza logo, a large photo card for the Noites Culturais event with a Saiba mais button, three service shortcuts and a bottom bar with a raised Ofertas button.
Prêmios screen with an Eu Faço campaign banner, the amount already registered, what is left for a gift and for a lucky number, and a Cadastrar nota fiscal button.
Onboarding screen with a black, pink and yellow illustration of app windows, a key and a rocket, a welcome message and Próximo and Pular buttons.
Home leads with one event, then the main services. Prêmios shows what is left to reach each reward. Onboarding introduces the app in three steps.

04

A long list of services, mapped first

The mall offers more than a tab bar can hold, so Serviços do shopping collects fourteen services in a single grid, from the mall map and parking to coworking, bike racks and EV charging. Offers end on their own screen, with the discount, a code, a QR code and an expiry date to show at the store.

The user flow and content map lays this structure out as a tree of screens branching from the home. The file also keeps two versions of the prototype, one with flat icons and one with 3D icons.

A diagram titled Fluxo do usuário e content map, with a tree of screens branching out from the home across numbered rows.
The user flow and content map behind the screens.
000

Instructions

Yan Fontão
Tap
Open a screen
Click
Open a screen
Drag
Look around the board
Wheel
Mouse zooms, trackpad moves, pinch zooms
− +
Pull back to see the whole board, or come closer
Arrows
In a case: ↑↓ change case, ←→ change media. On the board: move
Space
Open, or go back
Enter
Open
Esc Backspace
Back
Home
Back to the center, then the introduction
PgUp PgDn
Previous or next channel
Tab
Walk projects and links
R
Random project
0–9
Type a channel, 1–61
?
This page
Shortcuts

Music on the board

Files compressed and levelled for the web.

OPEN
TO WORK
Let’s talk

New message to Yan

Tell me who you are and I’ll get back to you.

000

About Yan

Hello, I’m Yan

Product Designer/ Design Engineer

Most products lose something between design and code. Mine don’t: I research the problem, design the product and ship the interface myself, so what you approve is exactly what your users get.

  • 2018started in software
  • UI + codedesign and implementation

Worked with Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brazil · Remote, hybrid or on-site

Portrait of Yan Fontão seated, in a green sweater and glasses, holding a microphone.
OPEN
TO WORK
Let’s talk
OPEN
TO WORK
Let’s talk
000

locked channel

Under NDA

Enter the code

Ask Yan for the code ↗
OPEN
TO WORK
Let’s talk
YAN FONTÃO Case studies

Channel 14 Mobile app design

Grand Plaza

A mobile app for the Grand Plaza mall that brings events, services, prize campaigns and offers into one place. Amounts and codes on screen are sample content.

Contribution
Product flows and interface design
Project status
Interface design · Figma archive

See it on Dribbble

Mockup of Grand Plaza composed for this board from real screens of the project.
Mockup composed for this board from real project screens.

Everything in the mall, one tab away

Screens from the original design in Figma and Dribbble, with sample data.

My contribution

Grand Plaza is a Portuguese-language app for a shopping mall. A bottom bar divides it into Início, Prêmios, Ofertas, Lojas and Perfil, with Ofertas raised in the centre as the one tab that breaks the line.

The Figma archive keeps the process beside the screens: wireframes from v0 to v4, a mind map, a sitemap and a user flow with a content map. Here I show the designed screens next to the map that organised them.

A walkthrough of the design’s screens, not a recording: onboarding, the Home and the prizes.
Four app screens in a row on a dark background: home, the Prêmios campaign, the services grid and an event page.
Home, Prêmios, services and an event page, in a version with Serviços in the tab bar.

One event at a time

Home gives most of the screen to a single event: a large photo card with the name, the dates and one Saiba mais button, and a carousel indicator showing there are more. Below it sit three service shortcuts, mall map, parking and cinema, with a Ver todos link to the rest.

Home screen with the Grand Plaza logo, a large photo card for the Noites Culturais event with a Saiba mais button, three service shortcuts and a bottom bar with a raised Ofertas button.
Home leads with one event, then the main services.

A campaign that says what is left

The Prêmios tab runs on receipts. A campaign card states, in three short lines, what the person has already registered, how much more earns a gift and how much more earns a lucky number. Cadastrar nota fiscal is the strong button and Saiba mais the quiet one, so the next step is clear before any explanation is needed.

Prêmios screen with an Eu Faço campaign banner, the amount already registered, what is left for a gift and for a lucky number, and a Cadastrar nota fiscal button.
Prêmios shows what is left to reach each reward.
Onboarding screen with a black, pink and yellow illustration of app windows, a key and a rocket, a welcome message and Próximo and Pular buttons.
Onboarding introduces the app in three steps.

A long list of services, mapped first

The mall offers more than a tab bar can hold, so Serviços do shopping collects fourteen services in a single grid, from the mall map and parking to coworking, bike racks and EV charging. Offers end on their own screen, with the discount, a code, a QR code and an expiry date to show at the store.

The user flow and content map lays this structure out as a tree of screens branching from the home. The file also keeps two versions of the prototype, one with flat icons and one with 3D icons.

A diagram titled Fluxo do usuário e content map, with a tree of screens branching out from the home across numbered rows.
The user flow and content map behind the screens.