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 015Mobile app design

DossApp

A Portuguese-language residential security app where residents request a verification or cover, and guards receive those requests on their own side. Names, dates and prices on screen are sample content.

Contribution
Product flows and interface design
Project status
Interface design · Figma archive
A small 3D security motorbike with its siren flashing.
A 3D object made for this board.

01

My contribution

DossApp is a Portuguese-language app for on-demand security around the home, with one side for residents and another for service providers. A verification asks a guard to check something, such as whether a gate was locked. Cover sends a guard to accompany the resident’s arrival.

The Figma work covers both sides, with wireframes, a user flow and prototype pages, and a separate file holds captioned screenshots prepared for a store listing.

A walkthrough of the design’s screens, not a recording: the Home, the history and the provider side.
Two dark app screens side by side: the resident home and a Cobertura screen with the guard on the way and a four-step timeline.
The resident’s home next to a cover request being followed.

02

What each colour asks for

On a dark screen, colour does most of the sorting. The two everyday requests are the largest blocks, Solicitar Verificação in light grey and Solicitar Cobertura in the brand yellow. Emergência stands apart as the only red element, beside the question “Precisando de uma ajuda mais urgente?”, so the urgent path cannot be confused with a routine one. Account, vehicles, family members and the rest stay lower down in a quiet grid of icons.

Resident home with a plan card, Solicitar Verificação and Solicitar Cobertura blocks, a red Emergência button and a grid of six icons.
Service provider home with a toggle beside the online status, Cobertura and Verificações blocks, a red Emergência button and an icon grid with Clientes.
Histórico screen with Todos, Cobertura and Verificação filters and three sample entries with date, time, guard and request type.
The home separates routine requests from the emergency path. The guard’s side keeps the layout and changes the content. History lists each request by date, guard and type.

03

After the request, what is happening now

A request does not end at the button. The cover screen names the guard on the way and shows four steps, Criada, Enviada, Em andamento and Concluído, with the current one in bold and Cancelar at the top. A map screen then draws the guard’s route and the resident’s in different colours as they converge on the home.

A verification runs as a chat tied to the original question. In the sample, the guard replies with a photo of the padlock, then sends a resolution request that the resident marks as resolved, which releases the guard for other work.

Captioned store image with a chat screen: the resident asks if the gate was locked, the guard replies with a photo of a padlock, and a resolution request appears below.
A verification runs as a chat, from the question to its resolution.

04

The same screen from the guard’s side

The service provider’s home keeps the layout of the resident’s, so both sides of the app read alike. What changes is the content: a toggle replaces the plan label, the two large blocks become Cobertura and Verificações, and the grid adds Clientes and Notificações. On the resident’s side, Histórico stays a simple record, filtered by type, with one card for each date, guard and request.

Captioned store image with a dark map of Campinas showing two routes, labelled João and Você, converging near a home marker.
The map follows the guard and the resident on the way to the home.
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 15 Mobile app design

DossApp

A Portuguese-language residential security app where residents request a verification or cover, and guards receive those requests on their own side. Names, dates and prices on screen are sample content.

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

See it on Dribbble

A small 3D security motorbike with its siren flashing.
A 3D object made for this board.

Two requests and one red button

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

My contribution

DossApp is a Portuguese-language app for on-demand security around the home, with one side for residents and another for service providers. A verification asks a guard to check something, such as whether a gate was locked. Cover sends a guard to accompany the resident’s arrival.

The Figma work covers both sides, with wireframes, a user flow and prototype pages, and a separate file holds captioned screenshots prepared for a store listing.

A walkthrough of the design’s screens, not a recording: the Home, the history and the provider side.
Two dark app screens side by side: the resident home and a Cobertura screen with the guard on the way and a four-step timeline.
The resident’s home next to a cover request being followed.

What each colour asks for

On a dark screen, colour does most of the sorting. The two everyday requests are the largest blocks, Solicitar Verificação in light grey and Solicitar Cobertura in the brand yellow. Emergência stands apart as the only red element, beside the question “Precisando de uma ajuda mais urgente?”, so the urgent path cannot be confused with a routine one. Account, vehicles, family members and the rest stay lower down in a quiet grid of icons.

Resident home with a plan card, Solicitar Verificação and Solicitar Cobertura blocks, a red Emergência button and a grid of six icons.
The home separates routine requests from the emergency path.
Service provider home with a toggle beside the online status, Cobertura and Verificações blocks, a red Emergência button and an icon grid with Clientes.
The guard’s side keeps the layout and changes the content.

After the request, what is happening now

A request does not end at the button. The cover screen names the guard on the way and shows four steps, Criada, Enviada, Em andamento and Concluído, with the current one in bold and Cancelar at the top. A map screen then draws the guard’s route and the resident’s in different colours as they converge on the home.

A verification runs as a chat tied to the original question. In the sample, the guard replies with a photo of the padlock, then sends a resolution request that the resident marks as resolved, which releases the guard for other work.

Histórico screen with Todos, Cobertura and Verificação filters and three sample entries with date, time, guard and request type.
History lists each request by date, guard and type.
Captioned store image with a chat screen: the resident asks if the gate was locked, the guard replies with a photo of a padlock, and a resolution request appears below.
A verification runs as a chat, from the question to its resolution.

The same screen from the guard’s side

The service provider’s home keeps the layout of the resident’s, so both sides of the app read alike. What changes is the content: a toggle replaces the plan label, the two large blocks become Cobertura and Verificações, and the grid adds Clientes and Notificações. On the resident’s side, Histórico stays a simple record, filtered by type, with one card for each date, guard and request.

Captioned store image with a dark map of Campinas showing two routes, labelled João and Você, converging near a home marker.
The map follows the guard and the resident on the way to the home.