2026 • Product Designer

Como redesenhei o InPeace Manager para funcionar na pressa e sem sinal

Reorganizei a operação de check-in e o modo offline do aplicativo para dar velocidade aos voluntários na portaria, resolvendo gargalos de usabilidade sem depender de alterações no backend.

Visão geral do redesenho do InPeace Manager com três telas principais
CONTEXTO OPERACIONAL & RESTRIÇÃO DE ENGENHARIA

Fila andando na porta, internet instável e zero espaço para mexer no backend

O InPeace Manager é o aplicativo usado por equipes de recepção e voluntários de igrejas para três tarefas presenciais: cadastrar visitantes, validar carteirinhas de membros e fazer o check-in de eventos. A escala varia bastante de cliente para cliente, indo de encontros menores até conferências para 3.000 pessoas ou mais, onde qualquer dúvida na tela forma fila na calçada em poucos minutos.

O aplicativo antigo já tinha leitor de QR Code e opção de baixar a lista de inscritos para usar sem internet. O problema estava na forma como essas funções apareciam na tela: ações importantes escondidas em gestos pouco óbvios, falta de avisos claros quando havia dados esperando sincronização e uma câmera que lia códigos sem parar, gerando incerteza se o ingresso anterior tinha sido validado.

Havia ainda um trade-off importante de produto: o time de backend estava sobrecarregado com outras demandas prioritárias da empresa e não conseguiria desenvolver nada novo para o InPeace Manager. Por causa dessa restrição, eu não podia propor mudanças que dependessem de novas regras no servidor. Toda a evolução precisava acontecer na camada de interface e no comportamento do próprio aplicativo, aproveitando melhor os dados que o sistema já entregava.

ESTRATÉGIA DO REDESIGN

Resolver na interface o que travava a operação na fila

Estruturei o projeto em quatro frentes progressivas: leitura rápida de QR Code com controle tátil, nova lista de inscritos com progresso visível, detalhamento por categoria de ingresso e avisos claros de sincronização offline.

BENCHMARK DE MERCADO

Testando na prática como os principais apps de eventos resolvem o check-in

Antes de desenhar as novas telas, gravei e analisei o fluxo real de validação em quatro referências do mercado de eventos: Sympla, Eventbrite, Shotgun e E-Inscrição. O objetivo foi observar como ferramentas maduras lidam com leitura de câmera, busca rápida de participantes, indicação de progresso e operação sem internet.

Esse mapeamento ajudou a separar o que era essencial para um operador em pé na portaria e o que podia ser descartado sem exigir mudanças na estrutura de dados da InPeace.

COMPARATIVO 01 • TELA INICIAL

Home: interface mais limpa para priorizar as três ações do dia

ANTES • VERSÃO ANTIGA

Excesso de informações de suporte e ações no topo

Tela inicial antiga do aplicativo InPeace Manager
1

Sem aviso de pendências

Não avisava quando havia check-ins feitos sem internet esperando envio.

2

Ações longe do polegar

Botões principais no topo dificultavam o uso com apenas uma mão.

3

Suporte ocupava 70% da tela

Dúvidas e botões de chat escondiam as funções principais do app.

DEPOIS • NOVO REDESIGN

Foco nas 3 ações principais e alerta claro de sincronização

Nova tela inicial do aplicativo InPeace Manager com alerta de sincronização

Alerta de sincronização

Mostra na hora quando há check-ins locais pendentes de envio.

Ações na base da tela

Os 3 botões principais desceram para perto do polegar.

Esquerda: Home antiga tomada por suporte. Direita: Nova Home com ações na base e alerta de sincronização.

Na versão antiga, as seções 'Principais dúvidas' e 'Converse com a gente' ocupavam cerca de 70% da tela inicial. Quem abria o aplicativo na hora do evento encontrava uma página de ajuda em vez de uma ferramenta de trabalho.

Além disso, os três botões de ação ('Inscrever pessoa', 'Validar eventos' e 'Validar membros') ficavam espremidos na metade superior da tela, uma região difícil de alcançar com o polegar usando apenas uma mão. Outro ponto crítico era o silêncio da tela inicial quando o aplicativo tinha validações feitas sem internet esperando para subir para o servidor.

Home limpa no dia a dia

Sem pendências, a tela destaca só a igreja no topo e as 3 ações principais na base.

Home limpa no dia a dia
Home em operação normal.

Ajuda sob demanda

Dúvidas e contato via WhatsApp saíram da Home e abrem em um painel próprio pelo rodapé.

Ajuda sob demanda
Painel de ajuda aberto pelo rodapé.

Envio de pendências

Tocar no alerta mostra quantos ingressos estão salvos no celular e envia tudo com um toque.

Envio de pendências
Tela de sincronização de check-ins.
COMPARATIVO 02 • GESTÃO DE EVENTOS

Listagem de eventos: busca direta, download no card e proteção de dados offline

ANTES • VERSÃO ANTIGA

Sem busca de eventos e sem download direto no card

Listagem de eventos antiga sem busca e sem botão de download no card
1

Sem busca de eventos

Era preciso rolar a lista inteira para encontrar o evento.

2

Alerta vermelho confuso

O ícone pequeno e a faixa vermelha pareciam um erro do app.

3

Sem download no card

Exigia abrir o evento primeiro para conseguir baixar a lista.

DEPOIS • NOVO REDESIGN

Busca rápida e botão de baixar lista em cada evento

Nova listagem de eventos com busca no topo e botão de baixar lista no card

Busca fixa no topo

Filtra qualquer evento pelo nome logo ao abrir a tela.

Download direto no card

Baixa a lista de inscritos com um toque sem precisar abrir o evento.

Esquerda: Lista antiga sem busca e com alerta ambíguo. Direita: Busca no topo e download direto no card.

Igrejas grandes costumam ter dezenas de eventos simultâneos no calendário. Na tela antiga, não existia barra de busca, obrigando o voluntário a rolar a lista inteira até achar o evento certo. Também não era possível baixar a lista de inscritos direto pelo card: era preciso abrir evento por evento para salvar os dados no aparelho.

Quando um evento tinha validações feitas sem internet ainda não sincronizadas, o card antigo mostrava apenas um pequeno ponto de exclamação vermelho ao lado do título. O ícone não explicava o que estava acontecendo e parecia um erro do aplicativo.

Aviso antes de baixar

Explica que os ingressos funcionarão sem internet e como atualizar a lista depois.

Aviso antes de baixar
Confirmação antes de baixar a lista.

Aba de eventos baixados

Separa os eventos salvos no aparelho e mostra a data e hora exatas do download.

Aba de eventos baixados
Registro de data e hora do download.

Etiqueta clara de pendência

Troca o ícone vermelho pela tag 'Sincronização pendente' e mantém eventos encerrados visíveis até o envio.

Etiqueta clara de pendência
Tag 'Sincronização pendente' no card.
COMPARATIVO 03 • LISTA DE INSCRITOS E ESTATÍSTICAS

Participantes: fim do gesto escondido de arrastar e progresso visível na mesma tela

ANTES • VERSÃO ANTIGA

Gesto de arrastar escondido, sem filtros e métricas separadas

Lista de inscritos antiga com gesto de arrastar e botões grandes no rodapé
1

Dados em outra tela

Exigia sair da lista para ver quantos participantes já tinham entrado.

2

Sem filtro por status

Não separava quem já entrou de quem ainda faltava chegar.

3

Validação por gesto escondido

Arrastar o nome para a esquerda era pouco óbvio e atrasava a fila.

4

Rodapé ocupando a lista

Dois botões grandes fixos reduziam o espaço para ver os inscritos.

DEPOIS • NOVO REDESIGN

Progresso no topo, filtros rápidos e modo local bem diferenciado

Nova tela de participantes com progresso no topo, filtros e FAB

Progresso e modo visíveis

Barra de check-ins no topo e cor de fundo diferente para online e offline.

Filtros em um toque

Alterna rápido entre 'Todos', 'Validados' e 'Pendentes'.

Câmera em botão flutuante

Libera o rodapé para exibir mais nomes na tela.

Esquerda: Gesto de arrastar escondido e estatísticas fora da tela. Direita: Progresso no topo, filtros e toque direto.

Na versão anterior, validar um participante manualmente pelo nome exigia arrastar o card para a esquerda. Esse gesto dependia de um aviso textual no topo ('Arraste para o lado esquerdo para validar') e gerava lentidão quando o voluntário estava em pé segurando o celular com uma mão.

Além disso, não havia filtros para separar quem já tinha entrado de quem ainda faltava chegar. Na parte inferior, dois botões grandes empilhados ('Fazer leitura do Qr code' e 'Atualizar/Baixar lista') roubavam espaço da listagem, enquanto o número total de presentes ficava escondido em outra tela, atrás de um ícone pequeno no canto superior direito.

Validação com um toque

Tocar no participante abre os detalhes do ingresso com o botão direto para validar.

Validação com um toque
Validação manual em um toque.

Ocupação por lote

O botão 'Ver mais dados' detalha quantos ingressos foram validados em cada categoria.

Ocupação por lote
Ocupação detalhada por tipo de ingresso.

Trava contra exclusão

Impede apagar a lista salva no celular enquanto houver check-ins offline não sincronizados.

Trava contra exclusão
Bloqueio de exclusão com pendências.
COMPARATIVO 04 • LEITOR DE QR CODE

Câmera de validação: controle de leitura para evitar disparos acidentais e dúvidas na fila

ANTES • VERSÃO ANTIGA

Leitura contínua sem pausa, sem lanterna e troca rápida demais

Câmera de validação antiga com leitura contínua sem pausa
1

Sem lanterna no leitor

Dificultava ler códigos impressos ou telas escuras em locais fechados.

2

Leitura contínua sem pausa

A câmera lia códigos vizinhos por acidente enquanto a fila andava.

3

Confirmação sumia rápido

Se outro QR Code passasse na frente, o nome validado trocava na hora.

DEPOIS • NOVO REDESIGN

Lanterna integrada, 'Segure para escanear' e pausa para confirmação

Nova câmera de validação com lanterna e botão Segure para escanear

Lanterna no topo

Ilumina o código com um toque sem sair da câmera.

Pausa após cada leitura

Trava na tela de confirmação até tocar em 'Realizar outra validação'.

Botão 'Segure para escanear'

Só lê o QR Code enquanto o botão está pressionado, evitando erros.

Esquerda: Leitura contínua sem pausa. Direita: Botão 'Segure para escanear', lanterna e confirmação pausada.

Na câmera antiga, o painel branco na parte inferior era fixo e não atrapalhava a área de leitura do QR Code. O problema real era o comportamento contínuo do leitor: a câmera ficava lendo sem parar o tempo todo. Quando várias pessoas se aproximavam com o celular na mão, o aplicativo lia códigos vizinhos por acidente.

Isso criava uma situação pior quando o ingresso era válido: diferente da tela de 'Ingresso já utilizado' (que tinha um botão para continuar), o estado de 'Ingresso validado!' apenas mostrava o nome do participante no painel fixo da base e continuava com a câmera ativa. Se outro QR Code passasse na frente um segundo depois, o nome anterior sumia na hora e o voluntário ficava na dúvida se o primeiro ingresso tinha mesmo sido validado ou não.

Confirmação travada na tela

Mostra nome, lote e horário sem risco de sumir até o voluntário iniciar a próxima leitura.

Confirmação travada na tela
Leitura pausada após validar.

Histórico em ingresso repetido

Informa na hora quem validou o ingresso antes e o horário exato da primeira entrada.

Histórico em ingresso repetido
Aviso com autor e horário do check-in.

Alerta rápido para inválido

Exibe o aviso no topo sem travar o botão de escanear, permitindo tentar de novo na hora.

Alerta rápido para inválido
Alerta no topo sem bloquear o leitor.
COMPARATIVO 05 • CADASTRO DE VISITANTES

Formulário de inscrição: campos bem delimitados e máscaras de preenchimento

ANTES • VERSÃO ANTIGA

Campos com linha fina sem exemplos de preenchimento

Formulário antigo com linhas finas embaixo dos campos
1

Campos só com linha fina

Pareciam textos soltos, sem deixar claro onde tocar para digitar.

2

Sem máscara nem exemplo

Telefone e data não mostravam o formato esperado nem o país.

DEPOIS • NOVO REDESIGN

Campos em caixas claras com exemplos e máscaras visuais

Novo formulário com campos delimitados e máscara de telefone

Caixas bem delimitadas

Área de toque clara com aviso de quais campos são obrigatórios.

Máscara de telefone e data

Seletor de país com bandeira e formatação automática ao digitar.

Esquerda: Campos antigos com linha fina. Direita: Caixas delimitadas e máscara de telefone.

O cadastro rápido de pessoas é usado no fim dos cultos para registrar visitantes. Na interface antiga, cada campo tinha apenas uma linha fina cinza embaixo do título, fazendo o formulário parecer uma lista de textos soltos em que não ficava claro onde tocar para digitar.

Também faltavam exemplos de preenchimento e formatação automática para telefone e data de nascimento, o que aumentava os erros de digitação quando o voluntário preenchia os dados conversando com o visitante.

Telefone com DDI e máscara

Formata o número automaticamente e permite escolher o país para igrejas no exterior.

Telefone com DDI e máscara
Seletor de país e máscara de celular.

Erro indicado no campo

Destaca exatamente o campo incompleto ou com CPF e e-mail inválidos antes de salvar.

Erro indicado no campo
Aviso direto nos campos inválidos.

Aviso de cadastro concluído

Confirma o registro no topo da tela e já limpa o formulário para o próximo visitante.

Aviso de cadastro concluído
Confirmação rápida no topo.
03 / EXPLORATION & ARTIFACTS

Trade-offs, aprendizados e próximos passos

3 módulos
TextoTrade-off de engenharia

O que ficou de fora

Sem agenda do time de backend, recursos como sincronização em tempo real entre vários aparelhos ficaram para uma próxima fase.

TextoAprendizado de produto

Interface simples

Voluntários mudam toda semana. Trocar gestos escondidos por botões visíveis e pausas na câmera eliminou dúvidas na fila.

TextoPróximos passos

Evolução planejada

Medir o tempo de fila nas conferências e ativar o envio automático em segundo plano assim que o celular recuperar o sinal.