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

Univesell

Um app de marketplace de dois lados para eventos. Quem organiza um evento acompanha tarefas, orçamento e convidados em um só lugar, e os fornecedores acompanham os ganhos no lado deles.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Capa de apresentação do Univesell, do arquivo de design original.
Capa de apresentação do arquivo original.

01

Minha contribuição

Univesell é um app de marketplace de dois lados para eventos: de um lado, quem organiza um evento; do outro, os fornecedores. Quem organiza navega por empresas, profissionais e agências e gerencia cada evento no mesmo app.

O arquivo mostra os dois lados como fluxos do usuário, junto com as telas que desenhei. Este case acompanha as ferramentas de evento e termina nos ganhos do fornecedor.

Tela de evento de um casamento de exemplo, com cabeçalho escuro, gráfico em anel do orçamento, número de convidados, dias restantes e um checklist de tarefas.
Tela de gestão de eventos com um casamento e um aniversário, cada card com barras de progresso de tarefas e orçamento, e um botão New no topo.
Um passeio pelas telas do design, não uma gravação: a gestão de um evento, dos detalhes ao convite e aos ganhos do fornecedor. Detalhes do evento: orçamento, convidados, dias restantes e tarefas em uma só rolagem. Dados de exemplo. Lista de eventos: tarefas e orçamento em duas barras em cada card.

02

Um evento em uma tela

A tela de detalhes do evento junta em uma só rolagem as perguntas em torno dele: quanto do orçamento já foi usado, como está a lista de convidados, quantos dias faltam e quais tarefas continuam abertas. Um cabeçalho escuro traz o nome do evento, e cada bloco abaixo responde a uma pergunta.

A lista de eventos aplica a mesma ideia um nível acima. Cada card mostra tarefas e orçamento em duas barras de progresso, então dá para comparar os eventos antes de abrir um deles.

Tela de ganhos com um gráfico em anel de valores em andamento e passados, acima de um histórico de pedidos e saques.
Formulário de configurações do convite com campos de título, mensagem, data e hora de expiração, lembretes e arquivo enviado, acima de Save settings e Cancel.
Lado do fornecedor: ganhos, com o mesmo padrão de gráfico e histórico. Dados de exemplo. Convites: mensagem, validade, lembretes e um arquivo anexo.

03

O outro lado do marketplace

No lado do fornecedor, a tela de ganhos reaproveita a mesma estrutura: um gráfico em anel no topo e uma lista de histórico abaixo, agora separando valores em andamento e passados, com pedidos e saques na lista. Com o mesmo padrão, dá para reconhecer os dois lados como um só produto.

Diagrama largo de caixas verdes e lilás conectadas, com as telas do fluxo do usuário, do primeiro acesso às ferramentas de evento, passando por marketplace, pedidos e carteira.
Fluxo do usuário do lado de quem organiza, com cores por status naquela etapa.

04

O produto inteiro em um mapa

No lado de quem organiza, o fluxo do usuário começa no primeiro acesso e no cadastro, passa por marketplace, carrinho, pedidos e carteira e chega às ferramentas de evento. As cores marcam quais telas estavam prontas e quais ainda não tinham começado naquela etapa, então o mapa também servia de quadro de progresso do trabalho.

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

Univesell

Um app de marketplace de dois lados para eventos. Quem organiza um evento acompanha tarefas, orçamento e convidados em um só lugar, e os fornecedores acompanham os ganhos no lado deles.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Capa de apresentação do Univesell, do arquivo de design original.
Capa de apresentação do arquivo original.

Um evento, o orçamento e os convidados em uma só tela

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

Minha contribuição

Univesell é um app de marketplace de dois lados para eventos: de um lado, quem organiza um evento; do outro, os fornecedores. Quem organiza navega por empresas, profissionais e agências e gerencia cada evento no mesmo app.

O arquivo mostra os dois lados como fluxos do usuário, junto com as telas que desenhei. Este case acompanha as ferramentas de evento e termina nos ganhos do fornecedor.

Um passeio pelas telas do design, não uma gravação: a gestão de um evento, dos detalhes ao convite e aos ganhos do fornecedor.
Tela de evento de um casamento de exemplo, com cabeçalho escuro, gráfico em anel do orçamento, número de convidados, dias restantes e um checklist de tarefas.
Detalhes do evento: orçamento, convidados, dias restantes e tarefas em uma só rolagem. Dados de exemplo.

Um evento em uma tela

A tela de detalhes do evento junta em uma só rolagem as perguntas em torno dele: quanto do orçamento já foi usado, como está a lista de convidados, quantos dias faltam e quais tarefas continuam abertas. Um cabeçalho escuro traz o nome do evento, e cada bloco abaixo responde a uma pergunta.

A lista de eventos aplica a mesma ideia um nível acima. Cada card mostra tarefas e orçamento em duas barras de progresso, então dá para comparar os eventos antes de abrir um deles.

Tela de gestão de eventos com um casamento e um aniversário, cada card com barras de progresso de tarefas e orçamento, e um botão New no topo.
Lista de eventos: tarefas e orçamento em duas barras em cada card.

O outro lado do marketplace

No lado do fornecedor, a tela de ganhos reaproveita a mesma estrutura: um gráfico em anel no topo e uma lista de histórico abaixo, agora separando valores em andamento e passados, com pedidos e saques na lista. Com o mesmo padrão, dá para reconhecer os dois lados como um só produto.

Tela de ganhos com um gráfico em anel de valores em andamento e passados, acima de um histórico de pedidos e saques.
Lado do fornecedor: ganhos, com o mesmo padrão de gráfico e histórico. Dados de exemplo.
Formulário de configurações do convite com campos de título, mensagem, data e hora de expiração, lembretes e arquivo enviado, acima de Save settings e Cancel.
Convites: mensagem, validade, lembretes e um arquivo anexo.

O produto inteiro em um mapa

No lado de quem organiza, o fluxo do usuário começa no primeiro acesso e no cadastro, passa por marketplace, carrinho, pedidos e carteira e chega às ferramentas de evento. As cores marcam quais telas estavam prontas e quais ainda não tinham começado naquela etapa, então o mapa também servia de quadro de progresso do trabalho.

Diagrama largo de caixas verdes e lilás conectadas, com as telas do fluxo do usuário, do primeiro acesso às ferramentas de evento, passando por marketplace, pedidos e carteira.
Fluxo do usuário do lado de quem organiza, com cores por status naquela etapa.