Bonifácio Wines é um dos projectos mais recentes desenvolvidos pela WidgiLabs em parceria com o designer Pedro Garcia Marques.
Neste artigo pretendo fazer um pequeno case study sobre o projecto, para falar sobre vários aspectos, desde o nosso ponto de partida até aos possíveis desenvolvimentos futuros.
O principal desafio foi combinar a marca Bonifácio, um negócio de família com mais de 50 anos de história, com um look-and-feel moderno. A marca produz e distribui uma grande variedade de vinhos e queríamos que a actualização de conteúdos fosse disponibilizada para que no futuro ficasse a cargo do cliente.
Para mostrar como lidámos com estes aspectos vamos dividir este artigo em 3 secções: passado, presente e futuro.
O Passado
Quando falámos com a marca pela primeira vez e tivemos oportunidade de analisar o seu site, identificámos imediatamente alguns problemas:
-
O conteúdo ocupava um espaço muito estreito e reduzido do ecrã
-
O site não reflectia a imagem da marca actual em termos de cor e mensagem
-
O conceito inicial, de ter todo o conteúdo cingido ao que seria uma garrafa de vinho não era o mais adequado para não dizer o mais eficiente.
O Presente
Como já referido, a marca Bonifácio é um negócio de família e como tal pretendia que fosse muito simples a qualquer pessoa entrar em contacto. Para servir esse propósito incluímos um rodapé em todas as páginas com informação da localização da empresa, um formulário para determinar como chegar até lá e também um formulário de contacto.
Outro grande desafio foi descobrir como apresentar os produtos de uma forma intuitiva, fácil e que, para o utilizador final, fosse uma experiência agradável de navegação. A maior parte dos sites segue um esquema tradicional de top-down onde se escolhe uma marca, depois um tipo de entre uma lista de tipos dessa marca (regional, mesa, aguardentes) e finalmente escolhe a categoria (branco ou tinto). Ou seja precisa de 4 cliques antes de sequer ver um único produto.
Procurámos uma alternativa e inspirámos-nos no portfólio da IDEO’s. Ao seleccionarmos “Produtos”, é apresentada uma prateleira de vinhos seleccionados, em que para cada um deles, com um simples clique se acede directamente à sua ficha técnica. Para quem não está familiarizado com os vinhos da marca, tem aqui uma montra que lhe indica por onde começar a explorar. Na verdade esta página poderia mesmo ser a Home Page do site. Tivemos aqui oportunidade de fazer uma pequena experiência em HTML5 com a tag audio (façam hover nas garrafas para ver o que acontece).
O detalhe de cada produto lista as suas características, prémios ganhos e até mesmo press reviews, assim como uma imagem de alta resolução associada, o que permite uma visão privilegiada das garrafas e dos seus rótulos, muitas vezes subestimados noutros sites do mesmo mercado.
Para cada vinho é ainda criado automaticamente um QR code para que facilmente se aceda à URL do vinho em qualquer smart phone.
Para as restantes páginas, tais como Vinhas e História, adicionámos uma galeria de fotos que traz cor e movimento, para contrastar com o conteúdo estático. Na página de Contactos/Distribuidores existe um mapa do mundo com as várias localizações para onde a marca exporta.
Em termos de tecnologia, usamos obviamente o WordPress em conjunto com um Custom Post Type Vinho desenvolvido por nós e à medida da ficha técnica do produto. Desta forma a marca pode muito facilmente continuar a gerir os seus produtos, sem ter que recorrer a nós.
No que toca a plugins e focando-nos um pouco mais na tecnologia destacamos o uso de dois plugins, entre outros:
-
Multiple Post Thumbnails – permitiu-nos ter para cada vinho (post type) uma segunda featured thumbnail.
-
Easy Speak Widget Contact Form – o formulário de contacto é feito em ajax e não implica um reload da página quando o utilizador submete uma mensagem.
O Futuro
Ao finalizarmos o projecto novas ideias surgiram.
Agora que temos uma base de dados com todos os vinhos e características poderíamos facilmente montar outros interfaces para explorar essa informação noutros meios por exemplo mobile, ou até mesmo adicionar um carrinho de compras ao site. Com a integração de um plugin a marca passa a ter não só uma montra mas também uma loja. Enfim como é do vosso conhecimento as possibilidades com o WordPress são muitas.
Estamos incrivelmente satisfeitos com o resultado que além do mais funciona muito bem tanto no iPad como no iPhone.
Todo o feedback é bem vindo. Se tiverem alguma dúvida, por favor entrem em contacto. Esperamos que tenham gostado!
Boas,
Não sei se seria um dos requerimentos, mas cross browser tests são necessários.
Em Opera, o menu sobrepõem-se ao logo.
A utilização de 3 tipos de fontes diferentes (o texto normal parece-me Times New Roman, serifada (na minha opinião é uma fonte muito má para ser utilizada em web, mas pelos vistos é a fonte utilizada nos produtos), nos formulários (input boxes) já é utilizada outra fonte e na textarea é outra fonte..
Ao clicar no formulário de “Contacte-nos”, surge esta mensagem de erro:
Ao aceder a cada vinho, o url poderia ser mais SEO & User Friendly.
E pronto, fica aí os meus 50 cêntimos de opinião 😉
Bom trabalho!
Olá Alexandre,
Obrigado pelo feedback, todos os problemas foram entretanto resolvidos.
Até breve,
Nuno