O processo de criação do site Hayaam Bellydance: WordPress com e-commerce

Este post apresenta os detalhes do processo de criação do site da escola de dança Hayaam Bellydance. Foi desenvolvido com WordPress e possui recursos como agendamento de aulas online e a vendas de acessórios.

O novo site Hayaam Bellydance

Hayaam é dançarina e professora de dança do ventre em Londres e utiliza o site para divulgar seu trabalho, agendar aulas e vender produtos relacionados. Ela não estava satisfeita com o site antigo, pois não expressava o profissionalismo de seu trabalho e era de difícil atualização.

A versão anterior do site

Análise e planejamento

Depois de um briefing detalhado, definimos que a principal meta da nova versão era aumentar a taxa de conversão de pacotes de aulas pelo site, reduzindo a porcentagem de venda de aulas únicas (drop-in) na academia.

O próximo passo foi instalar uma ferramenta para análise de métricas (Google Analytics) para entender melhor a audiência e obter dados para comparação de desempenho com a nova versão.

Ilustração

A cliente utilizava o desenho de uma dançarina na sua comunicação, mas a ilustração era genérica e foi retirada de um banco de imagens gratuito.

Precisávamos de um novo desenho personalizado e para isso entrei em contato o ilustrador Egon Zakuska, que fez um excelente trabalho baseado em uma foto da Hayaam.

Foto de referência e ilustração do Egon Zakuska

Arquitetura de informação

Foi feito o mapeamento do site atual e uma nova proposta de sitemap (utilizando o mindmeister.com). Com esse material, elaborei alguns wireframes para dispor os elementos da nova interface.

Interface gráfica

Como o estilo da dança do ventre de Hayaam é o egípcio, utilizei imagens das pirâmides e do deserto como referência para ajudar na composição do layout. Então foram feitas diversas versões de layout da homepage até chegarmos a um resultado satisfatório.

Evolução do wireframe ao layout aprovado

Desenvolvimento web

Utilizei o WordPress como CMS para gerenciar o conteúdo do site. A versão 3 do software trouxe uma série de novidades, como edição “drag and drop” do menu de navegação. O WordPress mostrou-se mais uma vez ser um software flexível, prático e essencial para um web designer freelance.

Para as reservas de aulas e venda de acessórios escolhi o eShop, um plugin de e-commerce para WordPress de fácil instalação e uso, integrado ao Paypal.

Conclusão

A cliente ficou muito satisfeita com o trabalho final e os números iniciais já apontam um resultado acima do esperado.

Detectamos na primeira semana um aumento de mais de 35% de visitas através dos mecanismos de busca (Google e Bing) e uma diminuição de 29% no bounce rate.

Veja como ficou o resultado final.

  • http://rodrigoteixeira.posterous.com Rodrigo Teixeira

    Sensacional o resultado!

    Destaco um ponto importante: A definição clara do objetivo do projeto.

    É agradável trabalhar com um projeto assim e amplamente mais fácil voltar os esforços de design e navegação quando se tem um objetivo simples e direto.

    A escolha da relevância da informação nos destaques (box de imagens, menu de navegação e botões call-to-action) foram muito bem explorados.

    Parábens pelo projeto!

  • http://rafaeltosta.info Rafael

    classe A, parabéns.

  • http://www.ederprado.com Eder Prado

    Muito bom.

    Gostei do Mind Meister. Sempre aprendo com você cara.

    Abraço!

  • Adriano Ribeiro

    Olá Eder,

    O problema do Mindmeister é que depois do período de trial você fica limitado a somente 3 projetos.

    Agora estou usando o Mindnode (http://www.mindnode.com/) aplicativo desktop para Mac, bem similar ao Mindmeister.