E Ericson Campos
Início/Portfólio/Checkplant
UX/UI Design · Produto digital

Edição de pluviômetros na Farmbox

Redesenho da gestão de pluviômetros da Farmbox: pesquisa com usuários, wireframes e protótipo de uma tela que mostra a fazenda, os pluviômetros no mapa e a área que cada um cobre.

Edição de pluviômetros na Farmbox
ClienteCheckplant
ProdutoFarmbox
Meu papelUX Research, protótipo e UI
TimeCS, devs, PM e sócios
Contexto

O que é um pluviômetro

É o instrumento que coleta e mede a chuva, em milímetros. Na fazenda, cada pluviômetro alimenta os cálculos de chuva de uma região, por isso é preciso saber onde ele está, desde quando mede e se está funcionando.

Objetivo

Por muito tempo os usuários reclamaram da experiência na gestão dos pluviômetros. O objetivo do time era entender os problemas técnicos, de UX e de UI, e propor uma solução fácil de entender e de usar.

Antes

Como era feito.

O ponto de partida: uma lista de nomes ligada a talhões, sem mapa, e um cadastro no app que dependia de coordenadas.

Tela web antiga: pluviômetros como lista de nomes ligados a talhões
Tela web antiga: pluviômetros como lista de nomes ligados a talhões
Fluxo antigo no app para cadastrar um pluviômetro
Fluxo antigo no app para cadastrar um pluviômetro
  • 01Os pluviômetros eram atribuídos ao talhão, sem posição no mapa.
  • 02Não dava para ver em que local cada pluviômetro estava.
  • 03Mudar a localização só era possível digitando coordenadas.
  • 04Para desativar um pluviômetro, a única saída era apagá-lo.
  • 05Só os gestores tinham acesso à localização dos pluviômetros.
  • 06O encarregado precisava ir até o local para conferir se o equipamento estava no lugar certo, gerando frustração e retrabalho.
Processo

Da conversa com o usuário ao handoff.

01

Pesquisa

  • Entrevistas gravadas com gestores, monitores e proprietários
  • Problemas mapeados com o time de CS
  • Backlog de oportunidades
02

Definição

  • Affinity mapping
  • Sessão de ideação
  • Matriz esforço x valor
  • Backlog priorizado
03

Criação

  • Wireframes
  • Validação com stakeholders
  • Validação com usuários
  • Protótipo de alta fidelidade
04

Entrega

  • Handoff para desenvolvimento
  • Plano de próximos passos
Solução definida

O que a nova tela precisava fazer.

  1. 01

    Nova tela de gestão na web, mantendo e melhorando o que já existia no app.

  2. 02

    Fazenda inteira no mapa, com cada pluviômetro no local onde está.

  3. 03

    Lista e mapa lado a lado, com edição e cadastro nos dois lugares.

  4. 04

    Malha Voronoi para mostrar a abrangência e a influência de cada pluviômetro.

  5. 05

    Ativar e inativar pluviômetros, com períodos de inatividade que não contam como seca nos cálculos.

  6. 06

    Data de início definida pelo usuário, que escolhe a partir de quando a medição vale.

A ideia central

Malha Voronoi.

O diagrama de Voronoi divide um plano em regiões, cada uma ligada ao ponto mais próximo. Aplicado à fazenda, cada pluviômetro ganha a sua área de influência, e a interpolação da chuva passa a respeitar a posição real dos equipamentos.

Diagrama de Voronoi sendo construído a partir de pontos
Wireframes da tela de pluviômetros
Wireframes

Rabiscar antes de desenhar.

Com o feedback dos clientes, as solicitações do backlog e os requisitos do projeto, os primeiros rabiscos mostraram o que cabia na tela e qual era o melhor fluxo. Depois de reuniões de validação com o time de CS, os wireframes foram ajustados e fechados.

Protótipo

A nova gestão de pluviômetros.

Mapa da fazenda
Mapa da fazendaA fazenda inteira e todos os pluviômetros no lugar onde estão, com status ativo ou inativo.
Malha Voronoi
Malha VoronoiUm botão liga a malha e mostra a área que cada pluviômetro cobre.
Lista e mapa juntos
Lista e mapa juntosEstados de carregamento, lista vazia e filtros de ativos e inativos, sempre ao lado do mapa.
Período de inatividade
Período de inatividadeO usuário informa quando e por que o pluviômetro parou, e esse período fica fora do cálculo de chuva.
Redesign conceitual

A mesma solução, com um olhar novo.

Uma releitura conceitual das telas, feita para este portfólio. A base é a mesma solução validada, com hierarquia mais clara, dados de chuva direto no mapa e menos cliques para as tarefas do dia a dia.

Visão da fazenda
Visão da fazenda Lista com indicadores e filtros ao lado do mapa. A cor de cada área mostra quanto choveu.
  • Cada célula da malha Voronoi é colorida pela chuva acumulada, então a leitura da fazenda é imediata.
  • Indicadores no topo da lista: chuva média, pluviômetros ativos e área coberta.
  • Painel lateral com o histórico do pluviômetro, sem sair do mapa.
  • Inativação guiada, com motivo, período e o efeito no cálculo explicado na hora.
  • No app, o pluviômetro é posicionado arrastando o mapa ou pelo GPS, sem digitar coordenadas.
Detalhe do pluviômetro
Detalhe do pluviômetroChuva por dia, área de influência, coordenadas e histórico em um painel sobre o mapa.
Inativar com contexto
Inativar com contextoPeríodo, motivo e uma explicação clara de que a área não será contada como seca.
No app, em campo
No app, em campoMapa com resumo da chuva e cadastro de um novo pluviômetro arrastando o pino.
Próximos passos

Colher feedback dos usuários para ajustes, acompanhar o engajamento com a nova funcionalidade e validar as hipóteses. Com o que a versão web ensinar, desenvolver a versão mobile.

Aprendizado

Projetar é um processo iterativo. Este projeto reforçou a importância de testar teorias antes de se apegar à primeira boa ideia, ouvir com atenção o feedback dos usuários e entregar sempre a melhor experiência.

Agenda aberta

Quer um resultado assim?

Conte o seu projeto. A proposta chega no mesmo dia.

Fale comigo