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

Heartbeat

Um conceito de app de saúde moldado por uma frustração de um usuário fictício: muitos dados brutos e nenhuma palavra sobre o que eles significam. O projeto junta um mapa da experiência dele e telas que transformam leituras em um status simples.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Conceito de app mobile · Acervo do Figma
Mockup do heartbeat montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

O Heartbeat é um conceito de app mobile de saúde. A descrição no arquivo pede pouca entrada de dados, uma visão clara do estado de saúde da pessoa e alertas para sintomas de Covid.

Desenhei as telas em torno do John, um usuário fictício, e todas as leituras são dados de exemplo.

Gravação do protótipo no Figma. Um mostrador redondo de relógio: a frequência cardíaca e depois uma checagem curta de sintomas.

02

Dos dados brutos a uma resposta simples

O conceito começa com um mapa do John em seis etapas, da busca por apps até o momento de compartilhar um deles. O ponto mais baixo vem quando ele testa os apps que existem e vê que são voltados para pessoas saudáveis que acompanham treinos, batimentos e pressão, sem nenhum retorno sobre o que os números significam.

Essa lacuna define a hierarquia das telas. A Home abre com a frequência cardíaca ao lado de um status de saúde em uma palavra e, depois, uma linha do tempo que marca cada ponto com um rosto em vez de um valor.

Tela Home com uma saudação a John, frequência cardíaca de 126 bpm ao lado do status de saúde Neutral e uma curva verde na linha do tempo, marcada com rostos em emoji.
Tela My health com um resumo de status e cards escuros de pressão arterial e tosse, cada um com o nível da pessoa comparado à faixa normal e um link para Details.
Home: uma leitura, um status em uma palavra e uma linha do tempo de rostos. Dados de exemplo. My health: cada questão compara o nível da pessoa com a faixa normal. Dados de exemplo.

03

Quando uma leitura pede atenção

A tela My health lista cada questão com o nível da pessoa ao lado da faixa normal. Assim, a comparação fica no próprio card e Details, a um toque.

Tabela que acompanha um usuário fictício em seis etapas, com linhas de descrição, canais, objetivos, emoções e pensamentos, e uma curva que sobe de decepcionado a feliz.
Mapa de experiência do John, um usuário fictício. As citações fazem parte da persona.
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