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 002Design de web app e dashboard

Rei do Pitaco

O fluxo de cadastro de uma lista de espera para um produto de apostas: escolher como entrar, informar os dados em passos curtos e confirmar o e-mail.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Logo do Rei do Pitaco sobre um disco preto.
O logo.

01

Minha contribuição

Trabalhei no Rei do Pitaco como Product Designer de março a outubro de 2022, no jogo de fantasy e no lançamento de um novo produto de apostas. Na prática, fiz UX e UI design, design de interação, testes de usabilidade, avaliação heurística, pesquisa de UX e product discovery.

Aqui mostro a lista de espera do produto de apostas, do planejamento à área logada. A pesquisa com usuários por trás dela é outro case, protegido por código.

Uma rolagem pelo design: a página da lista de espera, dos prêmios à explicação dos pontos.
Tela de celular com a foto de torcedores de camisa amarela, o logo Rei do Pitaco Betting, dois botões de cadastro e links para entrar ou recuperar a senha.
Tela escura de celular pedindo o CPF, com o campo vazio contornado em vermelho, um erro de campo obrigatório, uma nota abaixo e os controles Voltar e Próximo.
Gravação do protótipo no Figma. O cadastro, uma pergunta de cada vez. Um e-mail de exemplo está desfocado. A primeira tela do cadastro separa conta nova de conta existente. O passo de identidade mostra o erro ali mesmo, com o campo vazio.

02

Mapear o lançamento antes de desenhar

O trabalho começou pela estrutura: um sitemap da lista de espera e um fluxo principal em quatro etapas. O cadastro traz a pessoa, o KYC confirma quem ela é, a indicação e o compartilhamento trazem outras pessoas, e a pontuação mostra onde ela está. Toda tela que veio depois precisava servir a uma dessas etapas.

Tela escura de celular com campos de nome completo, data de nascimento, senha e confirmação de senha, dois checkboxes de confirmação e os controles Voltar e Próximo.
Tela escura de celular com o logo, uma mensagem avisando que um e-mail foi enviado, um botão verde de reenviar e um botão contornado de fechar.
O último passo reúne os dados da conta e duas confirmações. A data mostrada é um exemplo. Depois do cadastro, o fluxo pede a confirmação do e-mail e oferece reenviar a mensagem.

03

Duas entradas, um passo de cada vez

A primeira tela separa duas situações: criar uma conta nova ou usar uma conta do Rei do Pitaco que já existe. Quem está voltando tem links próprios abaixo desses botões, um para entrar e outro para recuperar a senha.

Cada passo seguinte mantém a mesma estrutura: logo no topo, um título, os campos daquele passo e, embaixo, Voltar e Próximo em volta de três pontos de progresso. O passo do CPF mostra o erro de campo obrigatório ali mesmo, com uma nota abaixo explicando que o número não pode ser alterado mais tarde. Depois do último passo, o fluxo se resume a uma mensagem e duas ações: reenviar o e-mail ou fechar.

Fluxo principal: cadastro, KYC, indicação e compartilhamento, e pontuação.
O fluxo principal, em quatro etapas.

04

Uma lista de espera que explica o prêmio

A landing page anuncia o novo produto de apostas com uma frase, “O betting do Rei vem aí!”, e uma ação: deixar o e-mail e entrar na lista. Tudo o que vem abaixo responde por que vale a pena, a começar por mais de R$ 1 milhão em prêmios.

Faixas de prêmio, como funcionam os pontos e um FAQ curto vêm nessa ordem, para a página resolver a questão do dinheiro antes de pedir qualquer outra coisa.

Sitemap da lista de espera.
O sitemap da lista de espera.

05

Depois do cadastro, uma contagem regressiva

Lá dentro, a área logada mantém o lançamento em evidência: os dias restantes, uma escada de prêmios e o status de verificação da conta. O arquivo tem as versões verificada e não verificada, para quem parou no meio ver o que falta.

O cadastro em si pede uma coisa por tela, do e-mail ao nome e à data de nascimento, depois o CPF, com uma nota simples explicando por que esse número é necessário.

Área logada com a posição no ranking, os pontos e o checklist de verificação.
A área logada de uma conta não verificada. Nome de exemplo e prêmios ocultos.
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 02 Design de web app e dashboard

Rei do Pitaco

O fluxo de cadastro de uma lista de espera para um produto de apostas: escolher como entrar, informar os dados em passos curtos e confirmar o e-mail.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Logo do Rei do Pitaco sobre um disco preto.
O logo.

Uma lista de espera em passos curtos

Telas dos arquivos de design originais no Figma, com dados de exemplo.

Minha contribuição

Trabalhei no Rei do Pitaco como Product Designer de março a outubro de 2022, no jogo de fantasy e no lançamento de um novo produto de apostas. Na prática, fiz UX e UI design, design de interação, testes de usabilidade, avaliação heurística, pesquisa de UX e product discovery.

Aqui mostro a lista de espera do produto de apostas, do planejamento à área logada. A pesquisa com usuários por trás dela é outro case, protegido por código.

Gravação do protótipo no Figma. O cadastro, uma pergunta de cada vez. Um e-mail de exemplo está desfocado.

Mapear o lançamento antes de desenhar

O trabalho começou pela estrutura: um sitemap da lista de espera e um fluxo principal em quatro etapas. O cadastro traz a pessoa, o KYC confirma quem ela é, a indicação e o compartilhamento trazem outras pessoas, e a pontuação mostra onde ela está. Toda tela que veio depois precisava servir a uma dessas etapas.

Fluxo principal: cadastro, KYC, indicação e compartilhamento, e pontuação.
O fluxo principal, em quatro etapas.
Sitemap da lista de espera.
O sitemap da lista de espera.

Duas entradas, um passo de cada vez

A primeira tela separa duas situações: criar uma conta nova ou usar uma conta do Rei do Pitaco que já existe. Quem está voltando tem links próprios abaixo desses botões, um para entrar e outro para recuperar a senha.

Cada passo seguinte mantém a mesma estrutura: logo no topo, um título, os campos daquele passo e, embaixo, Voltar e Próximo em volta de três pontos de progresso. O passo do CPF mostra o erro de campo obrigatório ali mesmo, com uma nota abaixo explicando que o número não pode ser alterado mais tarde. Depois do último passo, o fluxo se resume a uma mensagem e duas ações: reenviar o e-mail ou fechar.

Tela de celular com a foto de torcedores de camisa amarela, o logo Rei do Pitaco Betting, dois botões de cadastro e links para entrar ou recuperar a senha.
A primeira tela do cadastro separa conta nova de conta existente.
Tela escura de celular pedindo o CPF, com o campo vazio contornado em vermelho, um erro de campo obrigatório, uma nota abaixo e os controles Voltar e Próximo.
O passo de identidade mostra o erro ali mesmo, com o campo vazio.
Tela escura de celular com campos de nome completo, data de nascimento, senha e confirmação de senha, dois checkboxes de confirmação e os controles Voltar e Próximo.
O último passo reúne os dados da conta e duas confirmações. A data mostrada é um exemplo.
Tela escura de celular com o logo, uma mensagem avisando que um e-mail foi enviado, um botão verde de reenviar e um botão contornado de fechar.
Depois do cadastro, o fluxo pede a confirmação do e-mail e oferece reenviar a mensagem.

Uma lista de espera que explica o prêmio

A landing page anuncia o novo produto de apostas com uma frase, “O betting do Rei vem aí!”, e uma ação: deixar o e-mail e entrar na lista. Tudo o que vem abaixo responde por que vale a pena, a começar por mais de R$ 1 milhão em prêmios.

Faixas de prêmio, como funcionam os pontos e um FAQ curto vêm nessa ordem, para a página resolver a questão do dinheiro antes de pedir qualquer outra coisa.

Uma rolagem pelo design: a página da lista de espera, dos prêmios à explicação dos pontos.

Depois do cadastro, uma contagem regressiva

Lá dentro, a área logada mantém o lançamento em evidência: os dias restantes, uma escada de prêmios e o status de verificação da conta. O arquivo tem as versões verificada e não verificada, para quem parou no meio ver o que falta.

O cadastro em si pede uma coisa por tela, do e-mail ao nome e à data de nascimento, depois o CPF, com uma nota simples explicando por que esse número é necessário.

Área logada com a posição no ranking, os pontos e o checklist de verificação.
A área logada de uma conta não verificada. Nome de exemplo e prêmios ocultos.