retorne ao projeto: tattooz
Estilos e Tags

O problema
Na Tattooz, o feed permite que usuários visualizem imagens de tatuagens, e seleciona-las como referências em um orçamento. Essas imagens são publicadas pelos próprios artistas e estúdios cadastrados, que buscam expor seu trabalho e atrair novos clientes.
Nesse momento do desenvolvimento, já possuíamos um número significante de tatuadores cadastrados, e longo feed de imagens. Porém nossos usuário seguiam reportando não encontrar as referências desejadas. Ao realizarem uma busca, quase sempre, o feed não retornava nenhum resultado.
Em um mundo utópico, utilizaríamos Machine Learning para identificar o conteúdo dessas imagens, e filtra-las de acordo com a busca. Já na realidade, não tínhamos muita escolha, precisávamos coletar metadados, para identificar e organizar essas imagens. E a única forma de conseguir essas informações seria permitindo, e incentivando, que nossos tatuadores e estúdios (quem publica as imagens) fizessem essa identificação.
Os estilos
No cadastro do perfil tatuador, até esse momento, havia uma etapa para escolher seus estilos de tatuagens. Como esses estilos eram atrelados ao tatuador ou estúdio, e automaticamente a todas suas fotos adicionadas, elas apareciam como resultado quando um usuário realizassem uma busca por um desses estilos. O resultado, observado através da plataforma Hotjar, era um feed de resultados com fotos que nem sempre correspondiam com a busca feita, principalmente quando tratavam-se de perfis com grande diversidade de estilos.
Os ‘estilos’ precisariam de uma reestruturação. Para trata-los como metadados das imagens, seria necessário repensar os fluxos adição e edição desses estilos. Precisaríamos transforma-lo para uma ação atrelada a imagem.
As tags
Observamos, através da plataforma Hotjar, que as buscas realizadas pelos nossos usuários muitas vezes envolviam o conteúdo da arte. Por exemplo, se a ideia estivesse relacionada a algum animal, as buscas se resumiriam a: “pássaros”, “elefante”, “borboleta”, etc. Indicando que precisaríamos captar essa informação, como uma nova modalidade de metadado, complementar aos estilos.
Esse metadado recebeu o nome de tag, por ser um termo que já foi disseminado dentro do universo de redes sociais, trazendo familiaridade para os usuários sobre sua funcionalidade. Neste caso, era importante que a tags e os estilos se assemelhassem, afinal ambos possuem a mesma função. Entretanto, cada um representa informações diferentes, e essa diferença também precisaria ser representada visualmente.
A solução
Com os problemas estabelecidos e um direcionamento para a solução, começamos a elaborar os novos fluxos, e aqueles que precisariam ser ajustados.
Editar estilos
Como já existia essa funcionalidade, já havia um componente de estilo, e uma tela destinada para edição, que não precisariam mudar. Porém, como esse dado passou a estar vinculado a imagem, os cards na tela de estilos precisariam a ser clicáveis, para possibilitar acesso a uma nova tela para edição das fotos atreladas ao estilo.
No fluxo demonstrado abaixo, na tela do estilo ‘aquarela’, o usuário visualiza sua galeria de fotos, e acaba atrelando 13 fotos ao estilo.


Adicionar e editar tags
Por se tratarem de funcionalidades similares, decidimos que o componente de tag seria igual ao de estilo, se diferenciando apenas pela cor. Assim como o o card, que dá acesso a tela dos estilos do perfil, na home do tatuador. Porém, a tendência era que um perfil utilizasse uma quantidade muito maior de tags do que estilos.
Optamos por criar uma nova tela para as tags do perfil, onde a busca foi priorizada, e as tags, foram dispostas em uma lista. Quando clicadas, o fluxo volta ao padrão estabelecido, acessando a tela de edição das fotos.


Adicionar fotos
Se o objetivo era coletar o máximo de informações sobre as fotos, o momento chave para incentivar essa ação, era logo após a adição das fotos na galeria. Assim, criamos um fluxo específico para esse momento, permitindo o usuário visualizar, tanto os estilos, como as tags do perfil, e escolher uma opção para adicionar às fotos. Ao concluir, o usuário é incentivado a reiniciar o fluxo, adicionando mais estilos ou tags.


Visualizar foto e editar seus estilos e tags
O visualizador de fotos e a galeria do artista precisariam ser repensados, para abranger as alterações aplicadas aos estilos e tag. Como o card da imagem não comportaria as 5 tags e 5 estilos que cada foto poderia ter, optamos por informar a quantidade de tags e estilos atreladas a foto. Assim o tatuador pode identificar quais fotos precisam de informação, e quais já atingiram o limite. Já no visualizador, o usuário tem a visão completa de todos os dados vinculados a foto, podendo edita-los. Por este fluxo, clicando em adicionar um estilo ou tag, o tatuador pode escolher mais de uma opção, para vincular a foto




Conheça o projeto da Live. Ou avance para pedidos, o próximo artigo da tattooz

live da americanas
Uma nova experiência de compra para os e-commerces da B2W Digital

pedidos
Haviam pontos soltos no módulo de pedidos, questões que poderiam significar um prejuízo financeiro, se não endereçadas.