Arraste para explorar. Role ou use a pinça para aproximar. Abra a Ajuda para ver os atalhos de teclado.

Yan
ABERTO A
PROJETOS
Vamos conversar
Yan Fontão Boring view
Todos os trabalhos

Case 015Design de app mobile

DossApp

Um app de segurança residencial em português em que moradores pedem uma verificação ou uma cobertura, e os vigias recebem esses pedidos no lado deles. Os nomes, datas e valores nas telas são conteúdo de exemplo.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Uma pequena moto de segurança 3D com a sirene piscando.
Um objeto 3D feito para este mural.

01

Minha contribuição

DossApp é um app em português de segurança sob demanda para a casa, com um lado para moradores e outro para prestadores de serviço. Uma verificação pede que um vigia confira alguma coisa, como se um portão ficou trancado. Uma cobertura envia um vigia para acompanhar a chegada do morador.

O trabalho no Figma cobre os dois lados, com wireframes, fluxo do usuário e páginas de protótipo. Um arquivo separado guarda capturas de tela com legenda, preparadas para a página do app na loja.

Um passeio pelas telas do design, não uma gravação: home, histórico e o lado do prestador.
Duas telas escuras do app lado a lado: a home do morador e uma tela de Cobertura com o vigia a caminho e uma linha do tempo de quatro etapas.
A home do morador ao lado do acompanhamento de uma cobertura.

02

O que cada cor pede

Em uma tela escura, a cor faz a maior parte da organização. Os dois pedidos do dia a dia são os maiores blocos: Solicitar Verificação em cinza-claro e Solicitar Cobertura no amarelo da marca. Emergência fica à parte, como único elemento vermelho, ao lado da pergunta “Precisando de uma ajuda mais urgente?”, então o caminho urgente não se confunde com o de rotina. Conta, veículos, familiares e o resto ficam mais abaixo, em uma grade discreta de ícones.

Home do morador com um card de plano, os blocos Solicitar Verificação e Solicitar Cobertura, um botão vermelho Emergência e uma grade de seis ícones.
Home do prestador de serviço com um toggle ao lado do status online, os blocos Cobertura e Verificações, um botão vermelho Emergência e uma grade de ícones com Clientes.
Tela Histórico com os filtros Todos, Cobertura e Verificação e três registros de exemplo com data, horário, vigia e tipo de pedido.
A home separa os pedidos de rotina do caminho de emergência. O lado do vigia mantém o layout e muda o conteúdo. O histórico lista cada pedido por data, vigia e tipo.

03

Depois do pedido, o que está acontecendo agora

O pedido não termina no botão. A tela de cobertura diz qual vigia está a caminho e mostra quatro etapas, Criada, Enviada, Em andamento e Concluído, com a atual em negrito e Cancelar no topo. Depois, uma tela de mapa desenha a rota do vigia e a do morador em cores diferentes, conforme os dois se aproximam da casa.

A verificação acontece em um chat ligado à pergunta original. No exemplo, o vigia responde com a foto do cadeado e envia uma solicitação de resolução. Quando o morador marca como resolvida, o vigia fica livre para outros trabalhos.

Imagem para a loja, com legenda e uma tela de chat: o morador pergunta se o portão foi trancado, o vigia responde com a foto de um cadeado e uma solicitação de resolução aparece abaixo.
A verificação acontece em um chat, da pergunta à resolução.

04

A mesma tela do lado do vigia

A home do prestador de serviço mantém o layout da home do morador, então os dois lados do app se leem do mesmo jeito. O que muda é o conteúdo: um toggle substitui o nome do plano, os dois blocos grandes viram Cobertura e Verificações e a grade ganha Clientes e Notificações. Do lado do morador, o Histórico continua sendo um registro simples, com filtro por tipo e um card para cada data, vigia e pedido.

Imagem para a loja, com legenda e um mapa escuro de Campinas com duas rotas, identificadas como João e Você, que convergem perto de um marcador de casa.
O mapa acompanha o vigia e o morador a caminho da casa.
000

Instruções

Yan Fontão
Toque
Abre uma tela
Clique
Abre uma tela
Arrastar
Move pelo mural
Rolagem
Mouse aproxima, trackpad move, pinça aproxima
− +
Afasta até ver o mural inteiro, ou aproxima
Setas
No case: ↑↓ trocam de case, ←→ trocam de mídia. No mural: movem
Espaço
Abre ou volta
Enter
Abre
Esc Backspace
Volta
Home
Volta ao centro, depois à abertura
PgUp PgDn
Canal anterior ou próximo
Tab
Percorre projetos e links
R
Projeto aleatório
0–9
Digite um canal, 1–61
?
Esta página
Atalhos

Música do mural

Arquivos comprimidos e nivelados para a web.

ABERTO A
PROJETOS
Vamos conversar

Nova mensagem para o Yan

Conte quem você é e eu respondo.

000

Sobre o Yan

Oi, eu sou o Yan

Product Designer/ Design Engineer

A maioria dos produtos perde algo entre o design e o código. Os meus não: eu pesquiso o problema, desenho o produto e coloco a interface no ar, então o que você aprova é exatamente o que seus usuários recebem.

  • 2018início em software
  • UI + codedesign e implementação

Trabalhei com Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido ou presencial

Retrato de Yan Fontão sentado, de suéter verde e óculos, segurando um microfone.
ABERTO A
PROJETOS
Vamos conversar
ABERTO A
PROJETOS
Vamos conversar
000

canal bloqueado

Sob NDA

Digite o código

Peça o código ao Yan ↗
ABERTO A
PROJETOS
Vamos conversar
YAN FONTÃO Cases completos

Canal 15 Design de app mobile

DossApp

Um app de segurança residencial em português em que moradores pedem uma verificação ou uma cobertura, e os vigias recebem esses pedidos no lado deles. Os nomes, datas e valores nas telas são conteúdo de exemplo.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma

Ver no Dribbble

Uma pequena moto de segurança 3D com a sirene piscando.
Um objeto 3D feito para este mural.

Dois pedidos e um botão vermelho

Telas do design original no Figma e no Dribbble, com dados de exemplo.

Minha contribuição

DossApp é um app em português de segurança sob demanda para a casa, com um lado para moradores e outro para prestadores de serviço. Uma verificação pede que um vigia confira alguma coisa, como se um portão ficou trancado. Uma cobertura envia um vigia para acompanhar a chegada do morador.

O trabalho no Figma cobre os dois lados, com wireframes, fluxo do usuário e páginas de protótipo. Um arquivo separado guarda capturas de tela com legenda, preparadas para a página do app na loja.

Um passeio pelas telas do design, não uma gravação: home, histórico e o lado do prestador.
Duas telas escuras do app lado a lado: a home do morador e uma tela de Cobertura com o vigia a caminho e uma linha do tempo de quatro etapas.
A home do morador ao lado do acompanhamento de uma cobertura.

O que cada cor pede

Em uma tela escura, a cor faz a maior parte da organização. Os dois pedidos do dia a dia são os maiores blocos: Solicitar Verificação em cinza-claro e Solicitar Cobertura no amarelo da marca. Emergência fica à parte, como único elemento vermelho, ao lado da pergunta “Precisando de uma ajuda mais urgente?”, então o caminho urgente não se confunde com o de rotina. Conta, veículos, familiares e o resto ficam mais abaixo, em uma grade discreta de ícones.

Home do morador com um card de plano, os blocos Solicitar Verificação e Solicitar Cobertura, um botão vermelho Emergência e uma grade de seis ícones.
A home separa os pedidos de rotina do caminho de emergência.
Home do prestador de serviço com um toggle ao lado do status online, os blocos Cobertura e Verificações, um botão vermelho Emergência e uma grade de ícones com Clientes.
O lado do vigia mantém o layout e muda o conteúdo.

Depois do pedido, o que está acontecendo agora

O pedido não termina no botão. A tela de cobertura diz qual vigia está a caminho e mostra quatro etapas, Criada, Enviada, Em andamento e Concluído, com a atual em negrito e Cancelar no topo. Depois, uma tela de mapa desenha a rota do vigia e a do morador em cores diferentes, conforme os dois se aproximam da casa.

A verificação acontece em um chat ligado à pergunta original. No exemplo, o vigia responde com a foto do cadeado e envia uma solicitação de resolução. Quando o morador marca como resolvida, o vigia fica livre para outros trabalhos.

Tela Histórico com os filtros Todos, Cobertura e Verificação e três registros de exemplo com data, horário, vigia e tipo de pedido.
O histórico lista cada pedido por data, vigia e tipo.
Imagem para a loja, com legenda e uma tela de chat: o morador pergunta se o portão foi trancado, o vigia responde com a foto de um cadeado e uma solicitação de resolução aparece abaixo.
A verificação acontece em um chat, da pergunta à resolução.

A mesma tela do lado do vigia

A home do prestador de serviço mantém o layout da home do morador, então os dois lados do app se leem do mesmo jeito. O que muda é o conteúdo: um toggle substitui o nome do plano, os dois blocos grandes viram Cobertura e Verificações e a grade ganha Clientes e Notificações. Do lado do morador, o Histórico continua sendo um registro simples, com filtro por tipo e um card para cada data, vigia e pedido.

Imagem para a loja, com legenda e um mapa escuro de Campinas com duas rotas, identificadas como João e Você, que convergem perto de um marcador de casa.
O mapa acompanha o vigia e o morador a caminho da casa.