como
design thinking
facilitação
UI Design
Photoshop
quando
vários
onde
vários
utilizando stylescapes como
processo de co-criação no design de interfaces
O uso dos Stylescapes é uma ótima ferramenta que eu normalmente utilizo no início de um projeto, pois com essa ferramenta é possível criar uma representação visual clara e coesa do produto final antes mesmo de começar o layout, o que ajuda a evitar retrabalho, aumentar a eficiência do processo de design e melhorar a satisfação do usuário.
Explicarei o que são os Stylescapes e como eu os utilizo no design de interface, incluindo os benefícios de alinhar os stakeholders e clientes em um processo de co-criação.
Além disso, mostrarei diversos exemplos de quando eu os utilizei, por isso não detalharei completamente o resultado final.
Mostrarei diversos exemplos de quando eu os utilizei, por isso não detalharei completamente o resultado final.
gestão de expectativa e
porque utilizo stylescapes
Quando inicio um novo projeto em que não existe um design system ou sou responsável por uma nova abordagem visual de um sistema, app ou site, há uma lacuna que surge no início do projeto: as expectativas.
Não é uma tarefa fácil transformar um pensamento imagético em palavras. Geralmente, é nesse ponto que inicio uma conversa com um cliente ou stakeholder após a etapa de UX estar definida. Existe uma certa expectativa quanto ao resultado final, mesmo que ela ainda não esteja clara.
Nessa fase dos meus projetos, começo a implementar uma metodologia chamada Stylescapes, que pretende tornar essa "transformação do pensamento imagético" mais fácil para meu interlocutor.
A ferramenta visual é simples: mostrar um moodboard contendo cores, tipografias, ícones, imagens, padrões de texturas, entre outros elementos, antes do início do processo de design visual.
Mas onde a ferramenta "brilha" mesmo é na hora da facilitação. Geralmente, divido em dois dias:
-
1º dia: Encontro com o cliente ou stakeholder para definir um "estado desejado de futuro". Por meio do processo de co-criação e design thinking, conseguimos imaginar o produto lançado e atingindo todos os seus objetivos.
Isso nos ajuda a encontrar as melhores palavras e, principalmente, adjetivos que possam descrever qual é a "sensação" que aquele produto transmite.
-
2º dia: após o primeiro encontro, eu passo algum tempo reunindo material visual que servirá para exemplificar a conversa anterior.
Encaro isso como se fosse um processo de "tradução" de uma língua estrangeira, pois estou traduzindo visualmente os significados trazidos na última reunião.
Aqui, crio algumas variações dessa representação, pois algo pode ter um significado diferente para mim. Com as versões prontas, encontro meu interlocutor para uma segunda rodada, onde apresento as variações. Procuro verificar se alguma atingiu o objetivo ou se precisaria de alterações.
Observe que o objetivo não é apenas a criação de um moodboard que me ajude na construção visual do artefato, mas sim fazer com que a pessoa que solicitou possa vê-lo antes mesmo do processo de layout começar. Isso cria um processo de validação muito cedo e me coloca na "mesma página" que a pessoa.
Mesmo se nenhuma versão agradar, o objetivo é alcançado, pois consigo ter insumos e um feedback tangível para trabalhar e iterar.
Abaixo irei exemplificar com alguns cases:
conclusão
alinhar a expectativa com o desejo futuro faz com que o processo seja mais prazeiroso tanto para o designer, quanto para o cliente.
Uma metodologia que consegue salvar tempo e dinheiro é sempre bem vinda. Mas, como designer, acho que o ponto principal é a confiança que os clientes/stakeholders depositam a mais em mim após ver o resultado do stylescapes em um produto final.
Essa confiança facilita diversas outras etapas do desenvolvimento e, até mesmo, a abertura para novos projetos.
passo a passo
facilitação:
O primeiro passo foi ajudar os stakeholders a encontrarem um lugar comum para o futuro desejado da identidade visual da empresa. Como facilitador, utilizei uma metodologia que lhes permitiu imaginar um “futuro desejado” e traduzi-lo em palavras. Após uma boa discussão, chegamos a: movimentada, humanizada e simples.
Criação dos modboards:
Após a facilitação acima, foi mais fácil reconhecer alguns caminhos que a nova comunicação e interface do site institucional poderiam seguir. A questão do “movimento” e “humanização” foi tratada principalmente como um aspecto visual, e o “simples” como uma questão de “tom de voz”.
Escolha:
Após a apresentação de algumas versões, houve um embate entre os dois modelos abaixo. Perceba que, apesar de “estático”, busquei trazer a questão da movimentação com os elementos gráficos, a humanização com a utilização de fotos e a simplicidade no tom de voz. Os dois conceitos são bem diferentes, mas poderiam representar muito bem as palavras escolhidas. Após nova discussão, foi decidido seguir pelo caminho da segunda imagem (azul).
Resultado final:
Vale lembrar que o modboard utiliza referências criadas para outros projetos, portanto, não se deve utilizar o que foi copiado totalmente pronto. Mas, mesmo no modboard, alguns elementos foram criados do zero para exemplificar melhor a ideia.
Quando apresentei o resultado final do site, pude ver o quanto o Stylescapes é útil: foi aprovado de primeira. Conseguir alinhar previamente com os stakeholders o “futuro desejado” e não focar somente em um processo exploratório, kickoff ou mesmo um briefing, foi essencial para que o objetivo fosse cumprido. E mais do que isso, eles seguiram por um caminho que provavelmente nem cogitariam sem essa facilitação.
como
facilitação
UI Design
quando
2018
onde
agencia santa fé
1 case - utilizando o stylescapes para
um rebrading do site
de uma agência
Esta foi a primeira vez que apliquei o Stylescapes. Surgiu em boa hora, já que a agência em que eu trabalhava estava buscando um novo posicionamento visual, mas encontrava certa dificuldade para defini-lo.
passo a passo
facilitação:
Novamente, comecei agregando informações. Neste caso, estabeleci contato direto com o gerente de marketing, de onde consegui identificar as aspirações e desejos futuros do cliente.
Criação dos modboards:
Para os modboards, desenvolvi três versões bastante distintas, porém todas em consonância com o que o cliente desejava. Foi interessante ver como três opções tão diferentes poderiam resolver as necessidades do cliente.
Escolha:
Oferecer três conceitos diferentes fez com que o momento da escolha gerasse uma discussão muito produtiva. Ter três opções permitiu que uma fosse eliminada logo de cara, deixando a discussão centrada em duas opções bem distintas. A escolha de apresentar três opções foi proposital, o que facilitou a tomada de decisão. A opção com fundo mais escuro (terceira opção) foi escolhida, com apenas alguns ajustes.
Resultado final:
Após a escolha, parti para o design de UI do novo e-commerce e da página institucional. O Stylescapes foi uma ferramenta poderosa para auxiliar o cliente a escolher o futuro desejado para a interface, mas, ao mesmo tempo, também me auxiliou muito no processo de decisão das cores, tipografia e tom de voz.
como
facilitação
UI Design
quando
2020
onde
proline range hoods
2 case - utilizando o stylescapes para
um cliente internacional
Essa foi a minha primeira experiência em aplicar a metodologia de Stylescapes para um cliente internacional. O cliente estava buscando uma nova forma de apresentar algumas mudanças na empresa e queria que isso estivesse em sintonia com a identidade do e-commerce. Este projeto não está disponível para todos, mas fez parte de uma estratégia sazonal da empresa.
passo a passo
facilitação:
Como facilitador, você utilizei a metodologia de futuro desejado, buscando entender a aspiração do cliente para o visual da marca no e-commerce. Realizei uma reunião com o cliente e juntos acessamos sites de referência, a fim de categorizá-los em conjunto.
Criação dos modboards:
O modboard acabou ficando separado em pastas no Google Drive, a fim de garantir que todos os envolvidos tivessem acesso e pudessem fazer considerações.
Escolha:
O processo de escolha foi realizado com base em três pastas distintas que abordavam de forma diferente o aspecto visual. Foram separados alguns detalhes e focaram em questões como tipografia, espaçamento, fotos, espaço em branco e elementos de navegação. A seleção de referências principais foi organizada em uma quarta pasta.
Resultado final:
Com as imagens de referência selecionadas, utilizei na concepção do redesign, criando uma versão clean e moderna, com foco na navegação.
como
facilitação
UI Design
quando
2021
onde
shoestation
3 case - utilizando o stylescapes para
um e-commerce
Esse foi um projeto de redesign para a loja online Shoestation, com foco em artigos esportivos, especialmente em tênis. Devido ao pouco tempo disponível, foi feita uma versão express do stylescapes.
Além de uma ótima ferramenta, acho o stylescapes muito divertido de aplicar e facilitar. Tenho a mesma sensação com design sprint, que tal ler sobre? Ou que tal ver como participei da estruturação de um setor de design?