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

DoBetrBoy

Um app para parceiros que acompanha as fases do ciclo, as vontades dela e pequenas ideias para dar conforto. O anel de fases na Home, a checklist de vontades e a biblioteca de palavras de apoio respondem, cada um, a uma pergunta prática.

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

01

Minha contribuição

O DoBetrBoy é um app para parceiros. Ele acompanha em que fase do ciclo ela está, registra do que ela está com vontade e reúne pequenas formas de dar conforto. Desenhei as telas em torno de uma pergunta simples: o que pode ajudar hoje?

Todas as datas, fases e notas na tela são dados de exemplo.

Tela Home com uma faixa da semana, um anel dividido em quatro fases do ciclo com legenda, o texto Period in 15 days no centro e um card com um rosto dormindo, dizendo que ela está na fase lútea e pode precisar de um pouco de descanso.
Card da Comforting Library com a frase You don't have to fix everything. Just being there already means a lot, uma ilustração de duas pessoas abraçadas e os botões de voltar, compartilhar e avançar.
Gravação do protótipo no Figma. Do anel do ciclo ao calendário, à lista de vontades e ao perfil. Home: o ponto do ciclo em que ela está hoje, com uma nota curta abaixo. Dados de exemplo. Comforting Library: uma frase de cada vez, pronta para compartilhar.

02

O dia em uma olhada

A Home começa com um anel dividido nas quatro fases, um marcador no dia de hoje e duas linhas no centro: a data e os dias até a próxima menstruação. Acima fica uma faixa com a semana e, abaixo, uma legenda, então o gráfico se explica sozinho.

Abaixo do anel, um card transforma a fase em uma nota curta: “She is in the Luteal phase”, seguida de “She might need a little rest”. O texto fica no tom de sugestão, sem afirmar como ela se sente.

Craving list com um card de AI Assistant, as abas List e Suggestions e itens de checklist, como bolo de chocolate e bubble tea, agrupados em Sweets e Strange mix.
Cycle Calendar mostrando um mês com quatro dias destacados nas cores das fases e, abaixo, um card com as notas do dia selecionado.
Craving list: itens agrupados com checkboxes e um assistente de IA para ideias. Cycle Calendar: cores das fases no mês e notas do dia selecionado. Dados de exemplo.

03

Gestos pequenos e práticos

O resto do app transforma essa informação em algo para fazer. A Craving list agrupa os itens em seções como Sweets e Strange mix, cada um com seu checkbox, e um card de AI Assistant se oferece para gerar mais ideias. O Cycle Calendar leva as cores do anel para o mês e guarda, logo abaixo, as notas do dia selecionado.

A Comforting Library é a tela mais calma: uma frase e uma ilustração de cada vez, com controles para voltar, avançar ou compartilhar.

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

DoBetrBoy

Um app para parceiros que acompanha as fases do ciclo, as vontades dela e pequenas ideias para dar conforto. O anel de fases na Home, a checklist de vontades e a biblioteca de palavras de apoio respondem, cada um, a uma pergunta prática.

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

Acompanhar o ciclo pelo lado do parceiro

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

Minha contribuição

O DoBetrBoy é um app para parceiros. Ele acompanha em que fase do ciclo ela está, registra do que ela está com vontade e reúne pequenas formas de dar conforto. Desenhei as telas em torno de uma pergunta simples: o que pode ajudar hoje?

Todas as datas, fases e notas na tela são dados de exemplo.

Gravação do protótipo no Figma. Do anel do ciclo ao calendário, à lista de vontades e ao perfil.
Tela Home com uma faixa da semana, um anel dividido em quatro fases do ciclo com legenda, o texto Period in 15 days no centro e um card com um rosto dormindo, dizendo que ela está na fase lútea e pode precisar de um pouco de descanso.
Home: o ponto do ciclo em que ela está hoje, com uma nota curta abaixo. Dados de exemplo.

O dia em uma olhada

A Home começa com um anel dividido nas quatro fases, um marcador no dia de hoje e duas linhas no centro: a data e os dias até a próxima menstruação. Acima fica uma faixa com a semana e, abaixo, uma legenda, então o gráfico se explica sozinho.

Abaixo do anel, um card transforma a fase em uma nota curta: “She is in the Luteal phase”, seguida de “She might need a little rest”. O texto fica no tom de sugestão, sem afirmar como ela se sente.

Card da Comforting Library com a frase You don't have to fix everything. Just being there already means a lot, uma ilustração de duas pessoas abraçadas e os botões de voltar, compartilhar e avançar.
Comforting Library: uma frase de cada vez, pronta para compartilhar.
Craving list com um card de AI Assistant, as abas List e Suggestions e itens de checklist, como bolo de chocolate e bubble tea, agrupados em Sweets e Strange mix.
Craving list: itens agrupados com checkboxes e um assistente de IA para ideias.

Gestos pequenos e práticos

O resto do app transforma essa informação em algo para fazer. A Craving list agrupa os itens em seções como Sweets e Strange mix, cada um com seu checkbox, e um card de AI Assistant se oferece para gerar mais ideias. O Cycle Calendar leva as cores do anel para o mês e guarda, logo abaixo, as notas do dia selecionado.

A Comforting Library é a tela mais calma: uma frase e uma ilustração de cada vez, com controles para voltar, avançar ou compartilhar.

Cycle Calendar mostrando um mês com quatro dias destacados nas cores das fases e, abaixo, um card com as notas do dia selecionado.
Cycle Calendar: cores das fases no mês e notas do dia selecionado. Dados de exemplo.