A tarefa
O dono do carro pergunta duas coisas primeiro: quanto custa e como vai ficar depois. O site tinha que responder as duas antes de alguém pegar o telefone.
A oficina pega as rodas em jogo e cobra por tipo de serviço e por aro, então uma tabela comum seria uma parede de números. Ela precisava virar algo que o visitante usa em dois cliques e do qual sai um valor só.
O que construímos
A primeira tela já diz o preço
A tela de abertura diz qual é o serviço, em que cidade e a partir de quanto, e ainda conta onde fica a oficina e quanto tempo leva um jogo de rodas. Dois botões: calcular o valor ou ver os trabalhos.
O telefone e o horário de funcionamento ficam no topo em todas as telas, então quem já está pronto para escrever não precisa rolar a página para achar.
A calculadora de preço
A calculadora é uma tabela: os tipos de serviço na lateral, os aros no topo. Você toca numa célula e o valor aparece embaixo da tabela, com um botão de contato ao lado, então o preço e o passo seguinte ficam no mesmo lugar.
Abaixo, os serviços vêm um a um: uma cor, duas cores ou filete, torneamento diamantado, desempeno, solda, restauração local, polimento, pinças, montagem de pneus. Cada um com o seu preço inicial e uma linha dizendo o que esse valor cobre.
A galeria de trabalhos, antes e depois
As rodas prontas aparecem em uma grade, e os pares de antes e depois têm uma alça que você arrasta pela imagem. A legenda traz a cor, o tipo de serviço e o aro.
É essa parte que responde à segunda pergunta. Quem está escolhendo a cor vê ela em uma roda, e não em uma amostra, e vê ao lado como essa mesma roda chegou.
Da vistoria à entrega
O trabalho é apresentado em etapas, da vistoria à entrega, então o visitante sabe o que acontece depois que ele escreve. O site pede uma foto das rodas, e isso basta para a oficina dizer o preço e o prazo.
Toda tela tem uma saída para o WhatsApp, o Telegram ou uma ligação, e o bloco de contato também aceita um telefone para retorno. O contato vai direto para a oficina, sem ninguém no meio.
Por dentro do projeto
Debaixo da página estão a tabela de preços, o caminho que um contato faz até a oficina e o que foi medido no site no ar.
Contatos
Uma tabela de preços para o site e o bot
A calculadora monta o preço pelo tipo de serviço, pelo aro, pelo estado das rodas e pelos adicionais.
O contato cai no Telegram
Um serviço pequeno no servidor confere o telefone, monta uma mensagem legível e envia para o chat da oficina no Telegram, onde ela é lida na hora.
O formulário filtra spam
Um campo escondido pega os envios automáticos, e o número de contatos vindos de um mesmo endereço e telefone é limitado.
Um bot separado para agendar
Além do formulário há um bot de Telegram que conduz o agendamento passo a passo e guarda o estado da conversa.
Velocidade
A galeria carrega conforme a rolagem
A página tem 75 fotos, e 60 delas só são buscadas quando o visitante chega nelas.
Busca
Escrito do jeito que as pessoas buscam
Na parte de SEO do Lighthouse a página tira 100 de 100 no celular e no computador.
Versão para celular
A página no celular
Em uma tela de 390 pixels a página cabe na largura, sem rolagem lateral, e o botão da calculadora tem 275 por 52 pixels.
Confiabilidade
A conexão é criptografada
Um acesso por http comum é redirecionado para https, e o navegador é instruído a usar https pelos próximos dois anos.
No celular
O que saiu disso
- Os contatos chegam direto pelo site, sem intermediários
- O preço já é conhecido antes da primeira ligação
- Cada serviço tem o seu valor e a sua explicação
A primeira conversa agora é do site. O dono do carro vê o preço do aro dele, acha uma cor na galeria, manda uma foto e recebe uma data. O que antes era uma troca longa de mensagens hoje começa com a resposta já dada.
