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

TerasApp

Um app mobile para os sensores IoT de temperatura TERAS em fazendas: parear dispositivos, ler a temperatura mais recente, acompanhar os registros do sensor e exportar relatórios. Todas as leituras são dados de exemplo.

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

01

Minha contribuição

O TerasApp é o app em português que acompanha os sensores de temperatura TERAS. Cada sensor ganha um nome, como a “Caldeira da fazenda 1” do exemplo, e o app gira em torno de três verificações: a leitura mais recente, o estado do sensor e como a temperatura se comportou nos últimos sete dias.

O arquivo do Figma guarda toda a cadeia, dos wireframes de baixa fidelidade (onboarding, acesso, home, pareamento, dispositivo) ao protótipo de 31 frames mobile e aos componentes por trás dele. Aqui me concentro nas telas que sustentam essas três verificações.

Gravado do protótipo no Figma. Login, busca por sensores próximos e dois dispositivos novos adicionados à lista.
Três telas inclinadas sobre fundo escuro: o dashboard do dispositivo, os relatórios com gráficos de bateria e temperatura e as configurações.
Um sensor visto pelo dashboard, pelos relatórios e pelas configurações.

02

A leitura vem primeiro

A página do dispositivo abre com um card escuro que traz o nome do sensor, o horário da última atualização e a temperatura, o único bloco da página com contraste forte. Abaixo vêm o intervalo de registro e os registros guardados na memória e no app, depois o sinal e a bateria. Lida de cima para baixo, a tela vai do número ao estado do sensor por trás dele.

Página do dispositivo Caldeira da fazenda 1, com um card escuro que mostra o Sensor TMP1 e a temperatura, seguido dos registros do sensor, do sinal e da bateria.
Tela de relatórios com um gráfico de barras vermelhas da faixa de temperatura nos últimos sete dias e um botão Exportar e salvar.
Home com o logo TERAS, um botão Procurar dispositivos e três cards de dispositivos, um deles em cinza, sem sinal.
A página do dispositivo começa pela leitura mais recente. Os relatórios mostram em gráfico a faixa de temperatura dos últimos sete dias. A home lista cada sensor conectado com o status e o sinal.

03

Sete dias de temperatura em um só gráfico

A tela Relatórios mostra a faixa de temperatura dos últimos sete dias em barras vermelhas, com linhas fixas em 50 e 100 °C. Ao selecionar uma barra, um tooltip escuro mostra o mínimo, o máximo e a média daquele ponto, e o gráfico fica limpo até alguém pedir o detalhe. Dá para adicionar e remover gráficos, e exportar e salvar um relatório, com as exportações anteriores guardadas em um histórico.

Duas versões da tela de relatórios ligadas por uma seta desenhada à mão: o gráfico em repouso e o mesmo gráfico com um tooltip escuro de mínimo, máximo e média.
Selecionar uma barra mostra o mínimo, o máximo e a média.

04

Encontrar um sensor e cuidar dele

A home lista os dispositivos conectados em cards com status, temperatura e sinal, e um sensor sem sinal fica cinza. Procurar dispositivos leva a uma lista de pareamento que marca o sinal de cada sensor como Forte, Médio ou Fraco. A tela Configurações reúne armazenamento, bateria, nome do dispositivo e intervalo de registro e deixa as duas ações destrutivas, apagar os registros locais e desconectar o sensor, no final, com ícones vermelhos.

Uma grade diagonal densa de telas do app: onboarding, login, lista de dispositivos, pareamento, dashboard do dispositivo, relatórios, configurações e uma confirmação de exportação.
O app, do onboarding ao relatório exportado.
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 06 Design de app mobile

TerasApp

Um app mobile para os sensores IoT de temperatura TERAS em fazendas: parear dispositivos, ler a temperatura mais recente, acompanhar os registros do sensor e exportar relatórios. Todas as leituras são dados de exemplo.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma

Ver no Dribbble

Logo do TerasApp sobre um disco preto.
O logo.

Um sensor da fazenda, legível pelo celular

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

Minha contribuição

O TerasApp é o app em português que acompanha os sensores de temperatura TERAS. Cada sensor ganha um nome, como a “Caldeira da fazenda 1” do exemplo, e o app gira em torno de três verificações: a leitura mais recente, o estado do sensor e como a temperatura se comportou nos últimos sete dias.

O arquivo do Figma guarda toda a cadeia, dos wireframes de baixa fidelidade (onboarding, acesso, home, pareamento, dispositivo) ao protótipo de 31 frames mobile e aos componentes por trás dele. Aqui me concentro nas telas que sustentam essas três verificações.

Gravado do protótipo no Figma. Login, busca por sensores próximos e dois dispositivos novos adicionados à lista.
Três telas inclinadas sobre fundo escuro: o dashboard do dispositivo, os relatórios com gráficos de bateria e temperatura e as configurações.
Um sensor visto pelo dashboard, pelos relatórios e pelas configurações.

A leitura vem primeiro

A página do dispositivo abre com um card escuro que traz o nome do sensor, o horário da última atualização e a temperatura, o único bloco da página com contraste forte. Abaixo vêm o intervalo de registro e os registros guardados na memória e no app, depois o sinal e a bateria. Lida de cima para baixo, a tela vai do número ao estado do sensor por trás dele.

Página do dispositivo Caldeira da fazenda 1, com um card escuro que mostra o Sensor TMP1 e a temperatura, seguido dos registros do sensor, do sinal e da bateria.
A página do dispositivo começa pela leitura mais recente.
Tela de relatórios com um gráfico de barras vermelhas da faixa de temperatura nos últimos sete dias e um botão Exportar e salvar.
Os relatórios mostram em gráfico a faixa de temperatura dos últimos sete dias.

Sete dias de temperatura em um só gráfico

A tela Relatórios mostra a faixa de temperatura dos últimos sete dias em barras vermelhas, com linhas fixas em 50 e 100 °C. Ao selecionar uma barra, um tooltip escuro mostra o mínimo, o máximo e a média daquele ponto, e o gráfico fica limpo até alguém pedir o detalhe. Dá para adicionar e remover gráficos, e exportar e salvar um relatório, com as exportações anteriores guardadas em um histórico.

Home com o logo TERAS, um botão Procurar dispositivos e três cards de dispositivos, um deles em cinza, sem sinal.
A home lista cada sensor conectado com o status e o sinal.
Duas versões da tela de relatórios ligadas por uma seta desenhada à mão: o gráfico em repouso e o mesmo gráfico com um tooltip escuro de mínimo, máximo e média.
Selecionar uma barra mostra o mínimo, o máximo e a média.

Encontrar um sensor e cuidar dele

A home lista os dispositivos conectados em cards com status, temperatura e sinal, e um sensor sem sinal fica cinza. Procurar dispositivos leva a uma lista de pareamento que marca o sinal de cada sensor como Forte, Médio ou Fraco. A tela Configurações reúne armazenamento, bateria, nome do dispositivo e intervalo de registro e deixa as duas ações destrutivas, apagar os registros locais e desconectar o sensor, no final, com ícones vermelhos.

Uma grade diagonal densa de telas do app: onboarding, login, lista de dispositivos, pareamento, dashboard do dispositivo, relatórios, configurações e uma confirmação de exportação.
O app, do onboarding ao relatório exportado.