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 011Design de app mobile

HubProlog

Um app mobile em que os chapas, ajudantes de carga e descarga, encontram trampos curtos e pagos, aceitam o serviço e guardam os comprovantes de pagamento.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Mockup do HubProlog montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

O HubProlog, que aparece na tela como hub, é um app em português para quem pega trabalhos curtos e pagos, como o de chapa, o ajudante de carga e descarga. O app chama esses trabalhos de trampos, como se diz no dia a dia.

O arquivo de design tem 47 frames mobile, entre acesso, propostas, busca, comprovantes e perfil. Os trampos, locais e valores mostrados aqui são conteúdo de exemplo.

Tela Buscar com o título Propostas em São Paulo, um card grande com a ilustração de um trabalhador de armazém, o serviço Chapa por R$ 100 a diária, a 11 km de distância, e os botões de recusar, desfazer e aceitar.
Tela Convocação com o logo do hub sobre uma ilustração desbotada de armazém, a descrição do serviço, a lista de atividades incluídas e os botões Recusar e Aceitar.
Gravação do protótipo no Figma. Passar pelas convocações, filtrar por cidade e abrir uma delas. Buscar mostra um trampo de cada vez, com recusar, desfazer e aceitar. A convocação explica o serviço antes de pedir uma resposta.

02

Um trampo de cada vez na tela

A tela Buscar mostra os trampos disponíveis como cards para deslizar, um card grande de cada vez. O card diz qual é o serviço, quanto paga, onde fica e a que distância, com o texto sobre um degradê escuro para continuar legível em cima da ilustração. Logo abaixo ficam três controles redondos: recusar, desfazer e aceitar.

03

Primeiro ler, depois responder

A convocação abre com uma descrição simples do serviço e uma lista do que está incluído. A pergunta só aparece no fim, “Você aceita este trampo?”, logo acima de Recusar e Aceitar, para a pessoa decidir depois de ler. O coral indica a recusa e o verde-limão da marca indica o aceite, a mesma dupla de cores em todas as telas de propostas.

Tela Comprovantes com as abas Holerites e Comprovantes de PIX e uma lista por semana com pagamentos de exemplo de R$100 recebidos por PIX.
Tela de acesso com o logo do hub, um campo de CPF e um botão escuro Continuar.
A tela Comprovantes agrupa os registros de pagamento por semana. O acesso pede uma coisa só: o CPF.

04

O comprovante do que foi pago

A tela Comprovantes separa Holerites de Comprovantes de PIX e agrupa os registros por semana. Cada card começa pelo valor, depois vêm o serviço e a data. O acesso é curto do mesmo jeito: um campo de CPF e um botão Continuar.

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 11 Design de app mobile

HubProlog

Um app mobile em que os chapas, ajudantes de carga e descarga, encontram trampos curtos e pagos, aceitam o serviço e guardam os comprovantes de pagamento.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Mockup do HubProlog montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

Trampos curtos, decididos card a card

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

Minha contribuição

O HubProlog, que aparece na tela como hub, é um app em português para quem pega trabalhos curtos e pagos, como o de chapa, o ajudante de carga e descarga. O app chama esses trabalhos de trampos, como se diz no dia a dia.

O arquivo de design tem 47 frames mobile, entre acesso, propostas, busca, comprovantes e perfil. Os trampos, locais e valores mostrados aqui são conteúdo de exemplo.

Gravação do protótipo no Figma. Passar pelas convocações, filtrar por cidade e abrir uma delas.
Tela Buscar com o título Propostas em São Paulo, um card grande com a ilustração de um trabalhador de armazém, o serviço Chapa por R$ 100 a diária, a 11 km de distância, e os botões de recusar, desfazer e aceitar.
Buscar mostra um trampo de cada vez, com recusar, desfazer e aceitar.

Um trampo de cada vez na tela

A tela Buscar mostra os trampos disponíveis como cards para deslizar, um card grande de cada vez. O card diz qual é o serviço, quanto paga, onde fica e a que distância, com o texto sobre um degradê escuro para continuar legível em cima da ilustração. Logo abaixo ficam três controles redondos: recusar, desfazer e aceitar.

Tela Convocação com o logo do hub sobre uma ilustração desbotada de armazém, a descrição do serviço, a lista de atividades incluídas e os botões Recusar e Aceitar.
A convocação explica o serviço antes de pedir uma resposta.

Primeiro ler, depois responder

A convocação abre com uma descrição simples do serviço e uma lista do que está incluído. A pergunta só aparece no fim, “Você aceita este trampo?”, logo acima de Recusar e Aceitar, para a pessoa decidir depois de ler. O coral indica a recusa e o verde-limão da marca indica o aceite, a mesma dupla de cores em todas as telas de propostas.

Tela Comprovantes com as abas Holerites e Comprovantes de PIX e uma lista por semana com pagamentos de exemplo de R$100 recebidos por PIX.
A tela Comprovantes agrupa os registros de pagamento por semana.

O comprovante do que foi pago

A tela Comprovantes separa Holerites de Comprovantes de PIX e agrupa os registros por semana. Cada card começa pelo valor, depois vêm o serviço e a data. O acesso é curto do mesmo jeito: um campo de CPF e um botão Continuar.

Tela de acesso com o logo do hub, um campo de CPF e um botão escuro Continuar.
O acesso pede uma coisa só: o CPF.