25 / CASE VEDDU · Coleta e reciclagem de óleo
Site para empresa de coleta de óleo: Pego Óleo
O site da Pego Óleo, que recolhe óleo de cozinha usado em São Paulo e região, construído em torno da maior barreira de um serviço gratuito: acreditar que alguém vai mesmo aparecer para buscar.
A home inteira da Pego Óleo, do topo verde ao rodapé, no computador e no celular.
Contexto
do projeto
Resposta direta
Como fazer o site de uma empresa de coleta de óleo gerar pedidos
Com um agendamento curto e provas de que a coleta acontece de fato. Quem tem óleo usado para descartar não compara preços; decide se confia na empresa. Num site de coleta, o que o visitante consegue conferir sozinho pesa mais do que o discurso ambiental.
- Contexto
- Óleo de cozinha usado se acumula em casas, condomínios, restaurantes e cozinhas industriais até alguém retirá-lo. Empresas de coleta fazem essa retirada e encaminham o óleo para reciclagem. A Pego Óleo é uma delas, com base em Santo André.
- Desafio
- Convencer quem nunca pediu coleta a entregar telefone e endereço a uma empresa que acabou de conhecer.
- Decisão
- Deixar o pedido à mão de quem já chega decidido e usar o resto da página para mostrar a operação a quem ainda desconfia.
Quatro telas do site e a decisão por trás de cada uma.
As telas abaixo foram capturadas no site publicado em 5 de outubro de 2026. Nas duas primeiras, a versão do celular aparece encaixada ao lado da do computador.
Agendamento
O formulário de coleta avança sobre a foto do topo.
No desktop, o cartão branco do formulário sobrepõe a base do topo verde e vem antes de qualquer outra seção. São três campos, e o último já diz o que escrever, do CEP ao número da casa, empresa ou apartamento. No celular, o botão amarelo ocupa a largura toda, ao alcance do polegar.
Como funciona
Três cards dizem quem pode pedir, até onde vão e como o óleo sai.
O terceiro card resolve a dúvida mais prática de quem vai pedir pela primeira vez, que é onde guardar o óleo até a retirada: a empresa deixa bombonas de 50 L ou mais e depois manda um veículo dela buscar. Os dois primeiros dizem por extenso os tipos de cliente e as regiões atendidas, para a resposta não depender de uma ligação.
Sobre a empresa
A história da Pego Óleo vem com fotos da própria coleta.
O texto conta que a empresa começou em 2010, criada por um servidor público que trabalhou anos como agente ambiental. Duas fotos do carrossel são da própria operação: o galão ao lado da placa da Pego Óleo e a picape carregada de bombonas. Com ano de fundação, origem do fundador e veículo à vista, o visitante sabe quem vai bater à porta antes de agendar.
Localização
Um mapa do Google em largura total abre na ficha da empresa.
Antes do rodapé, a ficha da Pego Óleo mostra o endereço e o botão Abrir no Maps, e o visitante confere onde a empresa fica sem sair do site. O enquadramento vai de Pirapora do Bom Jesus a Bertioga e cobre, numa tela só, a capital e o litoral que o site diz atender.
Como a Veddu constrói um site que leva quem tem óleo usado a pedir a coleta.
Arquitetura · páginas e menu
- 1
- página de conteúdo: a home
- 4
- itens de menu, todos âncoras da home
- 2
- páginas legais: privacidade e termos de uso
- Início
- Depoimentos
- Sobre
- Contato
Páginas que o visitante alcança pelo menu e pelo rodapé da home.
Nada abaixo depende de registro interno: cada camada se confere hoje em pegooleo.com.br, na tela ou no código-fonte.
- 01
Uma página só, com o menu descendo até cada seção
O site inteiro cabe na home. Os quatro itens do menu descem até seções dela, e as páginas internas ligadas no rodapé são só a política de privacidade e os termos de uso.
Arquitetura · páginas e menu
- 1
- página de conteúdo: a home
- 4
- itens de menu, todos âncoras da home
- 2
- páginas legais: privacidade e termos de uso
Itens do menu- Início
- Depoimentos
- Sobre
- Contato
Páginas que o visitante alcança pelo menu e pelo rodapé da home.
- 02
Dois atalhos até o formulário e dois números no rodapé
Quem decide agendar chega ao formulário pelo botão do topo ou pelo item Contato, que aparece no menu e no rodapé. Quem prefere conversar antes encontra no rodapé um WhatsApp e um telefone, sem preencher nada.
Caminho de contato · links da home
- Botão Agendar coleta · topo
- desce até o formulário (#contato)
- Contato · menu e rodapé
- desce até o mesmo formulário
- WhatsApp · rodapé
- (11) 9 9330-7014
- Telefone · rodapé
- (11) 9 4007-0778
Nenhum dos quatro caminhos pede e-mail ao visitante.
- 03
O pedido abre no WhatsApp com a mensagem já escrita
Ao tocar no botão do formulário, um script da página monta a mensagem com o que a pessoa digitou e abre a conversa com a empresa no WhatsApp, pronta para enviar. Como ela começa com “Olá, vim do site”, quem atende sabe de onde veio o pedido.
1<script>2document.querySelector('#form-whats form').addEventListener('submit', function(e){3 e.preventDefault();4 let nome = document.querySelector('input[name="form_fields[nome]"]').value;5 let telefone = document.querySelector('input[name="form_fields[telefone]"]').value;6 let endereco = document.querySelector('input[name="form_fields[endereco]"]').value;7 let mensagem = `Olá, vim do site e gostaria de agendar minha coleta de óleo de cozinha gratuitamente!89Nome: ${nome}10Telefone: ${telefone}11Endereço: ${endereco}`;12 let urlWhats = `https://wa.me/5511993307014?text=` + encodeURIComponent(mensagem);13 window.location.href = urlWhats;14});15</script>Trecho do HTML publicado, sem os comentários e o evento que o envolve. Cada campo preenchido vira uma linha da mensagem.
- 04
Verde na estrutura, amarelo nos botões e a forma de pílula
Duas cores fazem quase todo o trabalho: o verde dá a estrutura, e o amarelo marca os botões de agendar e os ícones. A forma também se repete do menu ao formulário e aos cards de como funciona: pílula nos botões, nos campos e no menu, e cantos largos nos cards.
Sistema visual · estilo calculado da página
- Verde da marca
- #007503 · títulos de seção, cards, faixa Sobre e texto dos botões
- Amarelo
- #FFF11F · botões de agendar, círculos dos ícones e menu no celular
- Verde claro
- #4DAC70 · item ativo do menu
- Branco
- #FFFFFF · texto sobre o verde: topo, cards e faixa Sobre
- Grafite
- #141414 · rótulos do formulário, depoimentos e frase do rodapé
- Pílula
- raio de 60 e 150 px em botões, campos e menu
- Cards
- raio de 80 px nos três cards de como funciona
Cores e raios lidos no estilo calculado da página publicada.
Quantos pedidos de coleta o seu site traz hoje?
Para quem tem empresa de coleta de óleo, de reciclagem ou de outro serviço ambiental, a Veddu começa pelo diagnóstico: a sua região, os clientes que mais valem a visita e por onde os pedidos chegam. O site sai dessa conversa.