como
UX Design
Design de interação
UI Design
quando
2023
onde
proline range hoods
criando um totem interativo para
uma experiência omnichannel de um cliente internacional.
A Proline Range Hoods é um e-commerce especializado em eletrodomésticos, focado em coifas (range hoods) e fogões. Alguns clientes locais vão presencialmente na sede e gostariam de ver informações, fotos e especificações de forma fácil.
Um totem interativo foi a solução encontrada para isso, visto que facilitaria a manutenção e troca de informação. Também seria mais adequado do que um catálogo impresso, pois permitiria que os clientes encontrassem mais opções de forma rápida.
definição do problema
e expectativa de solução
O primeiro passo foi definir os requisitos e o tipo de interação necessária no totem.
O totem precisaria ter todos os produtos da empresa, e a principal parte da interação seria a encontrabilidade.
Normalmente, a experiência do cliente seria guiada junto a um vendedor, pois já é o que acontece hoje em dia. Então, a solução encontrada foi inserir interações e funcionalidades focadas em cada um dos usuários:
-
Cliente: a principal forma de encontrabilidade se daria pela navegação através da categorização e filtros. Cada tipo de cozinha, por exemplo, necessita de um tipo de Range Hood específico. Com isso, partiríamos do momento da jornada em que o cliente já saiba qual seria o tipo de Range Hood necessário. Já é algo que sabemos que ocorre, mas se o cliente tivesse dúvida, sempre teríamos um vendedor disponível nessa jornada.
-
Vendedor: Além de poder utilizar a mesma navegação do usuário, foi inserida a funcionalidade busca por SKU, onde o vendedor já conhece todos. Essa funcionalidade faz mais sentido para esse usuário, pois a busca seria utilizada após o vendedor entender a dor do cliente e já ter uma possível solução em mente.
aprofundando
levantamento de requisitos
Com a interação definida, antes de iniciar o processo de criação, meu papel foi direcionar para o levantamento alguns requisitos de hardware para entender o design de interação.
Antes de projetar, seria importante saber qual o tipo de aparelho seria utilizado e qual seria o posicionamento do mesmo na loja. Pois, existem modelos diferentes de totem e cada um possui requisitos diferentes para a interação.
O levantamento resultou no seguinte:
-
Será uma TV touchscreen
-
42 polegadas
-
Ficará na horizontal
-
Será fixada na parede
Com essas informações, já conseguiria visualizar como o usuário iria interagir com o artefato e pensar na melhor interação possível para o mesmo.
user flow
visualizando o fluxo
Na primeira etapa, utilizamos a técnica "Como Podemos". Como facilitador do Design Sprint, expliquei para os participantes como o processo funcionaria.
Nessa etapa, todos os participantes ouviram uma entrevista com stakeholders e usuários do aplicativo e fizeram anotações. Essas anotações deveriam seguir uma sequência lógica de perguntas, utilizando a estrutura inicial de "Como Podemos?".
Fazer perguntas estruturadas é essencial para desenvolver um bom problema. Como designer, sei que reconhecer e descobrir o problema real é uma das tarefas mais importantes para começar um projeto.
wireframe
arquitetando o fluxo
Utilizei a ferramenta Balsamiq para a criação do wireframe. Ela me permite focar no quê importa e não pensar visualmente.
Normalmente gosto de utilizar papel e caneta, mas a ferramenta é mais fácil de implementar em uma dinâmica remota.
home:
Para resolver a questão do hardware (TV fixada na parede de 42 polegadas), utilizei prioritariamente a área do centro para baixo da tela.
Dessa forma, diferentes pessoas com alturas diferentes teriam uma melhor experiência com o artefato.
Ao mesmo tempo, dividi a utilização da categoria e busca de forma horizontal.
Assim, caso o vendedor estivesse junto do cliente, ele poderia ficar posicionado no canto direito, enquanto utiliza o totem ao mesmo tempo que o cliente.
categoria:
Na página de categoria, priorizei a quantidade de itens na tela, sem exagerar para não atrapalhar o momento de escolha.
No canto esquerdo, foram pensados filtros para auxiliar na escolha.
Como eu já tenho conhecimento do segmento e já havia trabalhado com o cliente anteriormente, sabia que os principais filtros seriam:
-
Tamanho
-
Acabamento
-
CFM
-
Se é possível utilizar sem duto
Essas opções foram inseridas no lado esquerdo, acompanhando a página na rolagem. Permitindo que o usuário filtre de diversas formas possíveis, sem precisar sair para outro lugar.
modal de produto:
Um dos requisitos do cliente foi que na página de produto tivesse um “mosaico” com fotos. Assim, o vendedor conseguiria conversar sobre vários aspectos do produto com o cliente e mostrar as diferentes formas de aplicação.
Para essa página, defini a utilização de um modal, em vez de uma página, para que a navegação fosse mais “fluida” com a página de categoria. Assim, seria mais fácil para o usuário ver vários produtos diferentes.
A priorização seriam as fotos, enquanto o detalhamento técnico traria os aspectos de forma legível, mas em segundo plano. As informações técnicas também foram planejadas para ficar no lado direito, facilitando para o vendedor conseguir visualizar de forma rápida.
Além do nome e CFM, 2 informações seriam priorizadas na hierarquia:
-
O tamanho ideal do fogão (necessário para saber o tamanho do range hood)
-
O acabamento do Range Hood
resultado final
a etapa de UI design
Com base nas informações acima, comecei a projetar visualmente o totem.
Nesse momento, a "página inicial" definiria alguns aspectos visuais. Também utilizei um guia de marca existente, com cores, tipografia e outros aspectos visuais.
Antes de tudo:
A etapa de UI foi totalmente projetada utilizando um dispositivo similar ao que estaria no mundo real.
Isso foi necessário para que a "área de toque" e a ergonomia fossem postas em prática no protótipo.
Página inicial
Foi decidido utilizar fotos dos produtos aplicados para que o cliente pudesse ter um entendimento melhor de cada categoria.
Algo que foi inserido foi um vídeo no fundo do totem, em uma área de não interação.
Ele foi utilizado para trazer movimento e poder chamar a atenção dos clientes que poderiam passar despercebidos pelo artefato.
Categoria
O ponto principal da página de categoria foi tornar claro quais elementos eram clicáveis e quais opções de filtros estariam ativadas.
A utilização de cartões para os produtos e a diferenciação visual dos filtros cumpriram esse papel.
Modal
No modal, o mosaico continuou sendo priorizado. O que foi pensado aqui foi o tamanho das bordas para que o usuário tivesse a opção de utilizar o botão "fechar" ou simplesmente tocar fora da área do modal.
conclusão
pensar em como será a utilização no dia a dia é importante. Um totem tem um uso muito diferente de um app ou computador e a interação precisa ser pensada para isso.
Além disso, foi uma ótima experiência projetar para algo um pouco diferente do que estou acostumado. Foi muito interessante ver o protótipo se comportar na minha TV e tentar verificar se a altura e interações ofereceriam uma boa ergonomia para o usuário.
o totem foi um projeto onde consegui aplicar a ergonomia ao design. Que tal ler um pouco sobre acessibilidade ou sobre a construção de uma ferramenta de gestão?