• Add to Collection
  • About

    About

    O Beerclue é um produto web focado em cervejas premium e que será estendível para multiplataformas, com previsão de lançamento para meados de 201… Read More
    O Beerclue é um produto web focado em cervejas premium e que será estendível para multiplataformas, com previsão de lançamento para meados de 2013. O Beerclue é um projeto pessoal feito em parceria com a UX Designer Helena Rodrigues. Read Less
    Published:
O Beerclue é um projeto desenvolvido em parceria com a UX Designer Helena Rodrigues e teve início como Projeto de Graduação de Design, na ESPM-RJ, e segue em desenvolvimento, mesmo após o termino da faculdade.
 
O Beerclue é um produto web focado em cervejas premium e que será estendível para multiplataformas. A escolha de trabalhar com essa categoria, foi dada pela observação de um crescimento significativo no consumo desse tipo de cerveja. Com isso, foi visto uma oportunidade de nicho, já que obter informação organizada sobre elas é difícil e não acompanha o crescimento da demanda, não só no Brasil, mas também ao redor do mundo.
A primeira etapa da criação da marca foi a definição do Naming. Para isso, ocorreu um grande brainstorming, onde foram sugeridos diversos nomes, seguindo três premissas: o nome teria que ser em inglês, teria que ter as URLs .com e .com.br livres e teria que ter a palavra "beer".
61 nomes foram sugeridos, e no final, Beerclue foi escolhido.
 
Com a escolha do nome do produto, o próximo passo era a criação do seu símbolo. Como algumas análises de similares e um benchmark já haviam sido feitos, foi decidido que ele seria totalmente tipográfico, utilizando uma fonte script. Um grande estudo com diversas variações feitas a mão foi feito, até chegar em uma que se encaixasse melhor no perfil do produto.
Escolhido o melhor sketch, ele foi vetorizado no computador, e após isso, houve um encontro com o professor Alexandre Salomon de Tipografia da ESPM-RJ para que ele pudesse ajudar na finalização do símbolo tipográfico que estava sendo desenhado.
A sugestão do professor Salomon foi então de transformar, no computador, o elemento em uma única linha, sem interrupções e quebras, com uma espessura uniforme, para depois fazer testes a mão com tintas e pincéis, já que o símbolo é uma fonte script desenhada a pincel. O objetivo era testar, várias vezes, até haver uma consistência na escrita, justamente para saber onde nas letras a espessura da linha aumentava e onde ficava mais fino.
Com o fim desse processo, o vetor foi adaptado com as espessuras corretas, deixando o desenhado mais leve, contínuo e sofisticado.
Antes da etapa de criação das Personas e Cenários, foi feito um mini Focus Group para testar novos conceitos, auxiliar na criação de novas ideias e auxiliar no brainstorming, além de fazer um alinhamento do que seria o posicionamento do nosso produto. Como resultado, conseguimos ter uma noção melhor do nosso público, além de descobrir alguns de seus desejos e necessidades.

Foram identificados 6 perfis: participador, curiosa, perdido, apreciador, entendido e antenado.
A partir desses perfis, construimos as Personas, com características de um usuário real, com um pequeno contexto, seus goals, marcas que gostam e frustrações.

Com essa definição, os Cenários puderam ser escritos. Descrições concisas das Personas utilizando o produto para alcançar um objetivo. Isso ajudou dando o contexto de onde capturar os requisitos para guiar as decisões de design em frente.

 
O modelo conceitual foi usado para representar uma visão macro de como um produto funciona do ponto de vista conceitual.
 
Uma das formas de obter uma interface de qualidade é gerando um bom modelo conceitual, considerando a experiência que o usuário terá ao fazer uso do produto. Entender o usuário é fundamental pois, ajuda a entender seu contexto, suas rotinas e suas manias.
O sitemap é um organograma que mostra todas as páginas que o site irá conter. Ele especifica as várias telas e mostra a relação hierárquica entre elas.
Com as definições do que cada página iria ter e com uma análise mais aprofundada do benchmark, já era possível começar a desenhar os wireframes. Primeiro foram feitos macrowireframes, onde a única premissa é organizar hierarquicamente os itens na tela, sem pensar nos elementos e nas suas interações, sendo assim, foram usadas caixas cinzas para representar cada area.
 
Considerando os wireframes parte de um processo de criação, o que for definido neles não é, necessariamente, definitivo, podendo haver alterações ao longo do projeto, caso haja necessidade.
Após o desenho dos macrowireframes, o próximo passo foi detalhar mais cada funcionalidade, transformando as “caixas cinzas” em elementos mais detalhados, simulando o layout real da página, já pensando no visual e nas interações que irão ocorrer.
 
Agora, o importante, além das hierarquias, é construir as páginas de forma que fique mais clara qual caminho será seguido no layout final do site, já tomando algumas decisões para que não hajam dúvidas e incertas posteriormente.
Como em todo processo de Design, antes do layout final, várias alternativas são geradas antes de chegar na definitiva. Isso serve para testar todas as possibilidades e analisar qual é a melhor e qual se encaixa mais no projeto. Para o Beerclue não foi diferente, diversos roughts foram feitos, começando pelos feitos a mão.
Depois de desenhados, os roughts eram passados para o Photoshop, gerando diversas outras alternativas, muitas delas definitivas e outras, só como teste. Alguns elementos que foram pensados nos microwireframes tiveram que ser alterados, já que não se encaixavam no projeto visual defi nido para o produto ou por terem sido pensadas em outras alternativas melhores.