Montar SquadSolicitar Orçamento

Case de produto digital

Redesenho do app da One e um backoffice criado do zero.

A X-Apps atualizou as telas do app de clientes da One Innovation, mantendo a identidade da marca, e criou o backoffice que alimenta o app com obra, financeiro e comunicados.

Abertura do app One, com o logotipo branco sobre a foto de um prédio ao anoitecer

Início

Uma tela inicial por ordem de prioridade.

Levamos para o topo o apartamento, a obra e a próxima parcela, e transformamos contrato, fotos e informe de IR em atalhos.

De manhã cedo, um guindaste amarelo gira sobre a laje de um prédio em construção, com operários de capacete e a cidade ao fundo.
Entrar com e-mail e senha ou com Face ID na área do cliente

Acesso

Entrada mais curta, com Face ID.

Trocamos a tela cheia de campos por uma folha sobre a foto do empreendimento, com login por biometria.

Início do app: o empreendimento, o andamento da obra em 80%, a próxima parcela e atalhos para fotos, contrato e informe de IR

Início

Uma tela inicial por ordem de prioridade.

Levamos para o topo o apartamento, a obra e a próxima parcela, e transformamos contrato, fotos e informe de IR em atalhos.

De manhã cedo, um guindaste amarelo gira sobre a laje de um prédio em construção, com operários de capacete e a cidade ao fundo.
Cliente
One Innovation
Produto
App do cliente e backoffice
Escopo
Redesenho de UI, componentes padronizados e backoffice web

Mantivemos a identidade da One e refizemos o app e a operação por trás dele.

O desafio

O app tinha a base certa, mas telas datadas, e a construtora não tinha onde publicar a obra, conferir antecipações e falar com os clientes.

A atuação da X-Apps

Redesenhamos as telas do app com tipografia mais leve, ícones e componentes padronizados, e desenhamos o backoffice web do zero.

A entrega

Dez telas do app em alta, os fluxos de pagamento e antecipação refeitos e cinco telas de backoffice: painel, contratos, antecipações, obras e comunicados.

A solução

Cinco frentes redesenhadas e ligadas entre si.

Mantivemos o preto, o degradê azul e o logotipo da One e refizemos cada fluxo com tipografia mais leve, ícones consistentes e componentes reaproveitáveis.

  1. Obra

    Andamento por etapa e galeria do mês, no lugar de um percentual solto.

  2. Financeiro

    Parcelas reorganizadas em abertas, pagas e futuras, com o saldo à vista.

  3. Pagamento

    Valor, QR Code Pix e código para copiar reunidos numa tela só.

  4. Antecipação

    Fluxo em dois passos: marcar as parcelas e simular antes de confirmar.

  5. Backoffice

    Painel, contratos, antecipações, obras e comunicados, criados do zero.

Obra

Andamento por etapa, não um número só.

Desenhamos as barras de cada fase e a galeria do mês. Os percentuais vêm do que a engenharia publica no backoffice.

Notificações

Avisos organizados por assunto.

Criamos filtros de obra, financeiro e documentos, agrupamos os avisos por dia e destacamos o que ainda não foi lido.

Obra: fotos do mês e o andamento por etapa, da fundação ao acabamento, com agendamento de visita

Obra

Andamento por etapa, não um número só.

Desenhamos as barras de cada fase e a galeria do mês. Os percentuais vêm do que a engenharia publica no backoffice.

Obra: fotos do mês e o andamento por etapa, da fundação ao acabamento, com agendamento de visita

Notificações

Avisos organizados por assunto.

Criamos filtros de obra, financeiro e documentos, agrupamos os avisos por dia e destacamos o que ainda não foi lido.

Notificações separadas por obra, financeiro e documentos, agrupadas por dia
Num apartamento novo e vazio, de janelas grandes, um casal sorri, os dois se olham e riem, e a mulher mostra a chave nova.

Financeiro

As parcelas em três abas claras.

Separamos abertas, pagas e futuras, demos cor ao atraso e ao vencimento próximo e deixamos o saldo do contrato sempre visível.

Pagamento

Pagar sem sair do app.

Reunimos valor, vencimento, QR Code e código Pix numa tela só, com a opção de boleto ao lado.

Financeiro: total em aberto, parcelas com aviso de atraso e de vencimento, saldo do contrato e convite para antecipar

  1. Em abertoO total do mês

  2. VencimentoAviso 5 dias antes

  3. PixCódigo na hora

  4. BaixaEm até 10 minutos

Financeiro

As parcelas em três abas claras.

Separamos abertas, pagas e futuras, demos cor ao atraso e ao vencimento próximo e deixamos o saldo do contrato sempre visível.

Financeiro: total em aberto, parcelas com aviso de atraso e de vencimento, saldo do contrato e convite para antecipar
  1. Em aberto
  2. Vencimento
  3. Pix
  4. Baixa

Pagamento

Pagar sem sair do app.

Reunimos valor, vencimento, QR Code e código Pix numa tela só, com a opção de boleto ao lado.

Pagar parcela com Pix: valor, vencimento, QR Code e o código para copiar

Antecipação

Antecipação em dois passos.

Redesenhamos a seleção para mostrar total e desconto a cada parcela marcada. O pedido segue para aprovação no backoffice.

Antecipar parcelas: as parcelas futuras marcadas, o total selecionado e o desconto estimado

Antecipação

Antecipação em dois passos.

Redesenhamos a seleção para mostrar total e desconto a cada parcela marcada. O pedido segue para aprovação no backoffice.

Antecipar parcelas: as parcelas futuras marcadas, o total selecionado e o desconto estimado
Simulação da antecipação: data de pagamento, desconto e o valor final a pagar

Simulação

Uma folha com o valor final.

Criamos a simulação com data, desconto e saldo depois da antecipação, para o cliente decidir antes de confirmar.

Relatórios: informe de rendimentos, demonstrativo de valores pagos e extrato do contrato, em PDF ou por e-mail

Relatórios

Relatórios num só lugar.

Padronizamos informe de rendimentos, demonstrativo e extrato com o mesmo seletor de ano e duas saídas: PDF ou e-mail.

Backoffice

Criamos o backoffice que faltava à construtora.

Desenhamos do zero o painel da carteira e a fila de antecipações que chegam do app, para o time de relacionamento conferir e aprovar.

  1. 01

    A carteira num relance.

    Recebido no mês, inadimplência, antecipações e quantos clientes usam o app.

  2. 02

    Recebíveis e obras lado a lado.

    Parcelas pagas e antecipações mês a mês, com o andamento e as vendas de cada empreendimento.

  3. 03

    Os pedidos que chegam do app.

    Cliente, unidade, parcelas e valor, na ordem em que foram feitos.

  4. 04

    Conferir e aprovar.

    Desconto pela regra da construtora, verificações automáticas e a aprovação que gera o boleto e o Pix.

Painel em conceito: recebido no mês, inadimplência, antecipações, clientes ativos no app, gráfico de recebíveis por mês e o andamento de cada empreendimento.
Antecipações em conceito: a fila de pedidos feitos pelo app e o detalhe de um pedido com parcelas, desconto, valor a pagar, verificações e os botões aprovar e recusar.

Backoffice

Criamos o backoffice que faltava à construtora.

Desenhamos do zero o painel da carteira e a fila de antecipações que chegam do app, para o time de relacionamento conferir e aprovar.

Painel em conceito: recebido no mês, inadimplência, antecipações, clientes ativos no app, gráfico de recebíveis por mês e o andamento de cada empreendimento.
  1. 01

    A carteira num relance.

    Recebido no mês, inadimplência, antecipações e quantos clientes usam o app.

  2. 02

    Recebíveis e obras lado a lado.

    Parcelas pagas e antecipações mês a mês, com o andamento e as vendas de cada empreendimento.

Antecipações em conceito: a fila de pedidos feitos pelo app e o detalhe de um pedido com parcelas, desconto, valor a pagar, verificações e os botões aprovar e recusar.
  1. 03

    Os pedidos que chegam do app.

    Cliente, unidade, parcelas e valor, na ordem em que foram feitos.

  2. 04

    Conferir e aprovar.

    Desconto pela regra da construtora, verificações automáticas e a aprovação que gera o boleto e o Pix.

Obras e comunicados

Obra e comunicados publicados pela construtora.

Criamos as telas em que a engenharia atualiza cada etapa e envia as fotos do mês, e o relacionamento agenda avisos para os clientes.

  1. 01

    O percentual de cada etapa.

    Da fundação ao acabamento, o mesmo número que o cliente vê no app.

  2. 02

    As fotos do mês.

    Enviadas em rascunho e publicadas com uma notificação para os clientes do empreendimento.

  3. 03

    Para quem, o quê e quando.

    Filtros por empreendimento e unidade, tipo de aviso, mensagem e agendamento no app e por e-mail.

  4. 04

    A prévia no celular.

    Como a notificação aparece para o cliente antes de enviar.

Andamento da obra em conceito: percentual de cada etapa, da fundação ao acabamento, e as fotos do mês em rascunho, prontas para publicar.
Novo comunicado em conceito: público, tipo, título, mensagem, data de envio e canais, com a prévia da notificação na tela de bloqueio do celular.

Obras e comunicados

Obra e comunicados publicados pela construtora.

Criamos as telas em que a engenharia atualiza cada etapa e envia as fotos do mês, e o relacionamento agenda avisos para os clientes.

Andamento da obra em conceito: percentual de cada etapa, da fundação ao acabamento, e as fotos do mês em rascunho, prontas para publicar.
  1. 01

    O percentual de cada etapa.

    Da fundação ao acabamento, o mesmo número que o cliente vê no app.

  2. 02

    As fotos do mês.

    Enviadas em rascunho e publicadas com uma notificação para os clientes do empreendimento.

Novo comunicado em conceito: público, tipo, título, mensagem, data de envio e canais, com a prévia da notificação na tela de bloqueio do celular.
  1. 03

    Para quem, o quê e quando.

    Filtros por empreendimento e unidade, tipo de aviso, mensagem e agendamento no app e por e-mail.

  2. 04

    A prévia no celular.

    Como a notificação aparece para o cliente antes de enviar.

Ao pôr do sol, uma família olha a cidade da varanda de um apartamento novo, o pai com a criança no colo.

Resultado

Um app atual e uma operação conectada.

O que a construtora publica no backoffice aparece para o cliente, e o que o cliente pede no app chega para a construtora.

  • App78%Clientes ativos mensalmente no app
  • Atendimento–76%Solicitações administrativas por atendimento
À noite, um casal descansa no sofá da sala do apartamento novo, entre caixas de mudança, com as luzes da cidade na janela.

X-Apps

App redesenhado e backoffice novo.

Mais cases

Conheça os outros produtosque a X-Apps constrói.

Ver o portfólio completo

Depoimentos

Quem constrói com a X-Apps.

Gestores, diretores e times de produto de outros clientes contam, nas próprias palavras, como é construir com a X-Apps.