Meu novo design de site de baixo custo que aumentou as taxas de conversão em 42% em 7 semanas
Publicados: 2021-08-19Fazer uma reformulação completa do site da minha loja online está na minha lista de “coisas a fazer” há muito tempo, mas não consegui puxar o gatilho porque nunca foi uma prioridade.
Aqui está a coisa. Minha taxa de conversão sempre foi muito boa (> 3%). E minha loja online tem crescido na casa dos dois dígitos a cada ano, então por que abalar o barco?
Mas então eu participei de uma reunião de mentor 3 meses atrás com um grupo de outros veteranos do comércio eletrônico e decidi trazer isso à tona durante minha vez no "hotseat".
Olá a todos. Estou pensando em fazer uma reformulação do site, mas minha taxa de conversão atual ainda é muito boa. Eu preciso atualizá-lo agora? E você acha que é ruim o suficiente que eu precise consertar isso hoje? Posso adiar mais um ano?
As respostas que recebi foram terrivelmente dolorosas de ouvir.
- Este site parece ter sido desenhado nos anos 90. Se você reformular, aposto que poderá obter um aumento de 50% na taxa de conversão. - Mike Jackness
- Você faz um curso? Eu não faria sua aula se visse isso. - Kevin Stecko
- Esses são os tipos de sites que gosto de comprar , consertar e revender com lucro. - Dana Jaunzemis
Ouvir esses comentários realmente feriu meu orgulho e eu tentei o meu melhor para não ficar na defensiva.
Mas assim que voltei do cérebro, imediatamente contatei meu designer, fiz um rápido modelo no Photoshop e comecei a trabalhar nele .
Meu processo de implementação foi bastante direto. Eu mesma examinei e vasculhei cada uma das páginas, coloquei "aproximadamente" como eu queria que ficasse e pedi ao meu designer que escolhesse as peças para "parecer melhor".
Eu orcei cerca de 6 semanas para fazer o redesenho comigo, contribuindo com cerca de 40 horas do meu próprio tempo. Cada página do site foi totalmente refeita.
No geral, o projeto acabou demorando 7 semanas devido a circunstâncias imprevistas com a compatibilidade do navegador (eu odeio você, IE!) E me custou $ 1840 .
Nota do Editor: Aqui está um link para meu novo site e você pode usar a máquina de retorno para ver a versão antiga.
Obtenha meu mini curso grátis sobre como iniciar uma loja de comércio eletrônico de sucesso
Se você está interessado em começar um negócio de comércio eletrônico, reuni um pacote abrangente de recursos que o ajudarão a lançar sua própria loja online do zero. Certifique-se de pegá-lo antes de sair!
Resultados da reformulação do meu site
Os resultados de conversão a seguir são para celular, desktop e tablet, apenas para o tráfego de CPC do Google .
Como meu site recebe uma tonelada de tráfego de páginas de conteúdo que não necessariamente se convertem em vendas, executar os números para o tráfego de anúncios ppc direcionado fez mais sentido para fins de comparação.
- As taxas de conversão de desktop aumentaram 46% . Atualizado!
- As taxas de conversão móvel aumentaram 21% Atualizado!
- As taxas de conversão de tablets aumentaram em 25% . Atualizado!
Observação: meus dados de taxa de conversão foram comparados com o mesmo período do ano anterior para eliminar variáveis como sazonalidade e flutuações na demanda.
Dito isso, a única maneira verdadeira de medir as diferenças nas taxas de conversão é fazer o teste de divisão dos designs, o que eu não fiz por questão de tempo.
Em primeiro lugar, o aumento na taxa de conversão de desktop realmente me chocou, pois eu não esperava um salto tão grande. Eu sabia que meu antigo site precisava de melhorias, mas não tanto!
( Atualização: depois de alguns meses de mais dados, o aumento da taxa de conversão para desktop é de 46%)
Para clientes de tablet, o aumento da taxa de conversão foi na verdade superior a 15% porque encontrei um grande bug na implementação do tablet, algumas semanas após o lançamento, que foi misturado aos resultados.
( Atualização: após alguns meses de mais dados, o aumento da taxa de conversão para tablet é de 25%.)
E para celular, eu já tinha implementado um site para celular bastante decente em 2013, então não esperava grandes saltos, mas 12% ainda é muito bom.
( Atualização: depois de alguns meses de mais dados, o aumento da taxa de conversão para celular é de 21%.)
Em qualquer caso, apesar do aumento na taxa de conversão, nem todos os dados eram otimistas. Por algum motivo, minhas métricas locais, como taxa de rejeição, aumentaram cerca de 10% em todas as áreas.
Nota do Editor: No momento, suspeito que seja porque removi a navegação à esquerda do site, mas vou precisar examinar os dados para descobrir exatamente por que isso está acontecendo. Atualizar! Eu parei o suporte para várias versões do navegador neste redesenho, o que contribuiu para este problema.
Qual carrinho de compras estou usando?
A pergunta mais comum que sempre me perguntam a cada reformulação é ...
Steve, que carrinho de compras é esse? É o Shopify? Ou é Bigcommerce?
E quando digo a todos que ainda estou usando meu carrinho de compras de código aberto da velha escola, fortemente modificado , eles geralmente ficam chocados.
Aqui está a coisa…
O carrinho de compras que você escolhe não tem nada a ver com a aparência do seu carrinho de compras ou com a aparência do seu site. O objetivo principal do seu carrinho de compras é manipular e processar transações.
Se o seu carrinho de compras tiver todos os recursos de back-end de que você precisa, não será necessário fazer a troca . A estética do seu site tem muito pouco a ver com o motor do carrinho de compras.
Portanto, mesmo se você tiver um carrinho de compras antigo como o meu, contanto que tenha todos os recursos de que você precisa, você não deve julgá-lo pela aparência, porque você sempre pode mudar a aparência.
A melhor parte é que, se você estiver em uma plataforma de código aberto, poderá adicionar seus próprios recursos sempre que desejar, pois tem controle total.
Por exemplo, para este redesenho do site, implementei esse pequeno recurso de prova social bacana para minha loja. Basicamente, a cada 5-15 segundos, uma pequena janela aparece no canto esquerdo inferior que exibe uma compra anterior feita no site.
No Shopify, você pode comprar um plugin para fazer exatamente a mesma coisa e pagar $ 15 / mês. Mas me levou cerca de 5 horas (realmente deveria ter levado 2 horas, mas meu código estava enferrujado) para produzir a mesma coisa sem taxas recorrentes .
De qualquer forma, essas são apenas algumas das vantagens de possuir o código-fonte. Se você tiver inclinação técnica, recomendo dar uma chance ao código aberto.
Mas se você não tem noção sobre web design e não quer ter que lidar com nada técnico, vá com um Shopify ou um BigCommerce.
Mudando o esquema de cores
Uma das maiores reclamações sobre o meu site do ponto de vista estético era o esquema de cores. O site antigo era roxo e amarelo e a paleta de cores que escolhi fazia com que o site parecesse antiquado .
Nota do Editor: Aqui está um link para meu novo site e você pode usar a máquina de retorno para ver a versão antiga.
O irônico é que em meu curso Criar uma loja on-line lucrativa, na verdade, dou aulas sobre teoria das cores, mas não tinha esse conhecimento em 2013, então nunca tive a chance de colocá-lo em prática .
Enfim, em poucas palavras, usei um site chamado color.adobe.com para escolher cores complementares para meu novo design. E para refrescar o visual, escolhi azul-petróleo, rosa choque e amarelo.
Por que 3 cores? É porque eu queria uma cor específica associada a “ação”. Queria uma cor específica para “chamar a atenção”. E, finalmente, eu queria uma cor geral brilhante para fazer o site parecer “jovem e moderno”.
Azul - petróleo é a minha cor de fundo. Amarelo é a minha cor de “atenção” se eu tiver alguma oferta especial, e rosa choque é usado para cada botão de ação no site porque ele se destaca e se destaca.
Cada página do meu site é projetada para ter um objetivo único.
Para a página inicial, quero que as pessoas naveguem em nossa coleção personalizada porque é a seção com as margens mais altas. Nas páginas de categorias, quero que as pessoas cliquem em um produto. E na página de um produto, quero que as pessoas cliquem em “Adicionar ao carrinho”.
Os 3 Pilares da Conversão
Um grande erro que vejo as pessoas cometerem ao projetar seus próprios sites é tentar copiar a Amazon.com . A Amazon é a maior plataforma de comércio eletrônico do planeta, então por que não modelaria meu site conforme o deles?
Em primeiro lugar, o design do site da Amazon é feio, genérico e não adequado para a maioria das lojas online de nicho . A razão pela qual a Amazon pode se sair bem com um site feio é porque todo mundo sabe quem eles são, estão acostumados com a interface e já confiam na Amazon.
Mas quando você tem seu próprio site, precisa estabelecer essa confiança do zero, porque ninguém sabe quem você é.
No geral, existem três coisas principais que são cruciais para qualquer pessoa que acesse seu site pela primeira vez.
Primeiro, você precisa informar às pessoas que oferece frete grátis. Algum tipo de oferta de frete grátis agora é parte do curso, graças à Amazon e às outras grandes lojas de comércio eletrônico.
Segundo, porque você é uma entidade desconhecida, você deseja garantir aos clientes que eles podem devolver suas mercadorias se não ficarem satisfeitos.
E, finalmente, a terceira coisa que você deve estabelecer com um novo cliente é a confiança, que talvez seja o fator mais importante de todos eles.
Se um cliente acessa seu site e não confia em sua loja porque nunca ouviu falar de você, ele simplesmente vai pegar e ir embora.
Para o meu redesenho, reforço a confiança de muitas maneiras diferentes.
No cabeçalho de cada página, enfatizo o frete grátis, devoluções sem complicações e meu número de telefone. Ter um número de telefone à vista é MUITO IMPORTANTE!
Sempre que faço compras online em uma nova butique, a primeira coisa que faço é clicar na página de contato e procurar um número de telefone e um endereço . E se nenhum desses itens for exibido ou se apenas um dos dois estiver presente, não vou comprar lá.
Os clientes desejam entrar em contato com uma loja caso algo dê errado com sua compra. E, como resultado, você deseja que essas informações sejam o mais visíveis possível em todas as páginas, incluindo o horário de funcionamento da loja.
Ter “horário de funcionamento oficial” também faz com que sua loja pareça mais profissional, porque você parece uma empresa estabelecida com horário de expediente “real”.
Prova social e confiança
No final de cada página, tenho uma seção dedicada à prova social, o que confere credibilidade ao meu site.
Afinal, nós aparecemos em um monte de revistas diferentes e estivemos no programa Today, então de que adianta se não nos gabarmos disso?
Nossa seção de prova social / menções à imprensa está em todas as páginas do site, então, mesmo que você não a veja na primeira vez, você notará.
Também pedi uma foto e um depoimento a um grupo de nossos clientes, que está exposto logo abaixo da seção de imprensa.
Esses são clientes reais que compraram em nosso site, ficaram muito felizes com sua compra e estavam dispostos a deixar um depoimento muito bom para nós.
Uma determinada cliente, Sherri, comprou cento e cinquenta vezes em nosso site porque ela realmente gosta de nossos lenços.
E, por fim, incluí alguns palavrões que garantem ao cliente que sua satisfação é nossa principal preocupação. Nunca deixamos um cliente sair insatisfeito. E se algo der errado, oferecemos reembolso total.
Mudando a Navegação
Redesenhar a navegação do meu novo site foi uma área em que tive dificuldades. Em primeiro lugar, sou um grande fã da navegação do lado esquerdo . Meu design antigo tinha e meus clientes adoraram porque o menu estava sempre visível e acessível.
O lado esquerdo de uma página da web também é para onde seus olhos gravitam naturalmente e é o lugar mais óbvio para começar a comprar.
Mas aqui estava meu dilema ...
Se eu fosse incluir uma coluna dedicada à esquerda para navegação, todo o resto no site teria que ser reduzido.
Por exemplo, todas as imagens de meu produto precisariam ser reduzidas significativamente, o que afetaria negativamente as conversões .
As imagens da minha categoria seriam menores, o que diminuiria o CTR .
A verborragia em cada página ocuparia mais espaço na tela, o que empurraria os produtos ainda mais para baixo na página .
Então, no final das contas, optei por um menu suspenso de nível superior, estilo pairar . A beleza de uma barra de navegação de nível superior é que ela se comporta de forma semelhante a uma barra de navegação à esquerda, mas não ocupa a mesma quantidade de espaço na tela.
E ao mover a navegação para o topo, fui capaz de aumentar minha categoria e imagens de produtos em 300%, o que as tornou realmente populares.
A outra vantagem de usar a navegação de nível superior era a capacidade de separar categorias distintas de uma maneira muito limpa.
Por exemplo, agora tenho uma categoria distinta “Comprar por ocasião” suspensa, enquanto no meu design antigo, esta seção estava misturada com o resto do menu à esquerda, então não se destacou.
Também adicionei uma seção especial dedicada a produtos personalizados, best-sellers, novidades, uma página de FAQ, uma página de contato, a página sobre, ver carrinho e finalizar a compra.
Basicamente, todos os itens de navegação mais importantes agora estão na barra principal para que todos possam ver.
Enfatizando minha proposta de valor exclusivo
Um princípio importante que ensino em meu curso de comércio eletrônico é que cada página de destino em seu site deve ter uma proposta de valor forte e exclusiva .
Por que alguém deveria comprar em sua loja? Por que devo comprar aqui e não em um concorrente? A resposta deve ser clara imediatamente.
Portanto, para este design, optei por enfatizar nossos pontos fortes frontal e central em todas as páginas de nosso site.
Por exemplo, na página inicial, nossa proposta de valor está bem perto da imagem inicial.
Em nossas páginas de categoria, implementei uma caixa de texto especial para transmitir por que nossa loja é especial.
O objetivo final é convencer um cliente nos primeiros 5 segundos porque ele deve comprar de você e não de um concorrente.
Embelezando as páginas do produto
Uma das maiores conclusões da crítica do meu site era que as páginas de meus produtos não eram adequadas .
Aqui está uma página de produto do design antigo.
Aqui está a mesma página do meu novo site.
Você percebe alguma diferença? Em primeiro lugar, como removi a barra lateral esquerda, consegui aumentar o tamanho da imagem do produto em 266% .
Não apenas a imagem principal é muito maior, mas também reorganizei os elementos da página do produto para incentivar mais cliques em “Adicionar ao carrinho”.
Por exemplo, ao lado do botão “Adicionar ao carrinho”, há caixas de texto que garantem ao cliente o frete grátis e devoluções sem complicações.
Há também um link no topo que informa dinamicamente ao cliente quando ele receberá seu pedido, dependendo de escolher o padrão ou expresso, e todas as despesas de envio relacionadas.
Eu também sobrepus os botões do Pinterest e do Facebook diretamente na própria imagem para encorajar o compartilhamento depois de perceber que a maioria dos visitantes nem mesmo olhava para os botões de compartilhamento dedicados em meu antigo site.
Uma coisa que é interessante notar é que originalmente eu tinha dois enormes botões azul e vermelho para compartilhar no Facebook e no Pinterest logo abaixo da imagem, conforme mostrado abaixo.
Mas, no final das contas, decidi removê-los porque eles se destacaram mais do que o botão rosa choque “Adicionar ao carrinho”. No final, eu valorizo uma ação “Adicionar ao carrinho” muito mais do que um compartilhamento de mídia social.
Por fim, também aumentei o tamanho da seção de venda cruzada para atrair o cliente a comprar itens semelhantes.
Melhorando o Check-out
Melhorar o processo de checkout não era uma grande prioridade para mim, porque não havia problemas grosseiros com o site antigo. Mas como eu já tinha o capô aberto, decidi consertar alguns problemas pendentes que estavam persistindo em meu site por um bom tempo.
Primeiro, de vez em quando recebíamos ligações de pessoas que estavam confusas e se perguntavam se precisavam de uma conta para fazer compras em nosso site. Esta é a aparência da primeira página de checkout em nosso antigo site.
A solução para esse problema foi ocultar o login por padrão e exibir apenas dois botões rosa choque para check-out.
Também tornei os logotipos de confiança mais proeminentes para tranquilizar o cliente de que o checkout é seguro e que sua satisfação é garantida.
A outra grande mudança foi que tornei o checkout totalmente responsivo .
Observação: se você estiver no Shopify, provavelmente já viu como é um processo de checkout responsivo e atraente.
Então, em vez de reinventar a roda, basicamente emulei o design de caixa do Shopify porque é incrível.
Resumindo, aqui está a aparência do meu checkout agora em diferentes tamanhos de tela.
Para desktop…
Para tablet e celular
Algumas palavras sobre celular
Durante meu último redesenho do site em 2013, implementei um site para celular completamente separado, além do site para desktop, que vivia em um subdomínio diferente.
E embora eu ainda acredite que foi a decisão certa na época, definitivamente não é o caso hoje. Hoje, existem muitos frameworks como o BootStrap que tornam o design responsivo muito mais fácil.
Nos últimos anos, tem sido uma grande dor de cabeça manter meus sites para celular e desktop sincronizados, então estou feliz por agora ter um único site unificado em todas as plataformas.
A principal desvantagem de ser responsivo foi que tive que testar exaustivamente o site em 3 plataformas completamente diferentes : desktop, tablet e celular. E dentro de cada plataforma havia várias versões de navegador e resoluções de tela para lidar.
Por exemplo, tive que testar o IE 8, 9, 10 e 11 para máquinas Windows. Tive que testar o Safari 6,7 e 8 para Macs.
No final, usei minha conta do Google Analytics para realizar testes de usabilidade para cada navegador que foi usado em meu site no ano passado, usando uma ferramenta chamada Browser Stack.
Não é preciso dizer que esse processo foi uma droga e foi minha parte menos favorita do redesenho :(
De qualquer forma, aqui estão alguns destaques em relação ao novo design do celular. A maioria desses itens de linha é bastante padrão, por isso não vou aborrecê-lo com muitos detalhes.
No tablet e no celular, mudei o menu para recolhê-lo em um único menu suspenso.
Com base em meu site anterior para celular, descobri que todo mundo tende a ir direto para a barra de pesquisa, então me certifiquei de incluir a barra de pesquisa na frente e no centro de cada página do site para celular.
Como o espaço da tela é muito menor em um telefone, removi certos elementos “não essenciais” da página para telas menores.
Alterações no Pinterest
A alteração final que fiz foi completamente renovar minhas páginas de conteúdo. Como mencionei muitas vezes no passado, eu uso nossas páginas de artes e artesanato para direcionar as pessoas para nossa loja online. E o Pinterest é uma grande fonte de tráfego para essas páginas.
Como resultado, refiz completamente a maioria das imagens de artesanato e fiz versões especiais altas e baixas apenas para o Pinterest . Eu também fiz novas imagens para as fotos de nossos produtos.
Por exemplo, em vez de usar uma imagem retangular para Pinterest quando você clica no botão “pin”, agora você obtém uma versão alta e magra de alta resolução.
Conclusão
Ao todo, 7 semanas e $ 1.840 é um bom investimento para os ganhos que estou experimentando agora. Meu principal problema agora é que tenho muitos projetos acontecendo simultaneamente e não há tempo suficiente para trabalhar em cada um.
Mas aqui está a coisa ...
Embora minha taxa de conversão fosse boa antes, o aumento líquido nas vendas devido a uma taxa de conversão ainda melhor provavelmente superará os outros esforços de construção de tráfego que planejei implementar este ano.
E se há uma lição a ser aprendida aqui, é que aumentar a taxa de conversão de seu site aumentará as vendas em todas as suas outras origens de tráfego .
A base para o seu negócio de comércio eletrônico começa com sua plataforma e é importante ter todos os seus patos no lugar ANTES de se concentrar em aumentar o tráfego.