Problema

Devido ao número de usuários no grupo ele estava se tornando insustentável, era complexo para administrar e tomava muito tempo, mas os clientes viram essa ideia como uma oportunidade de negócio. Eles queriam criar um MVP para transformar a ideia inicial do grupo em um website, onde todas as trocas e vendas aconteceriam, sendo um intermediário nesse processo.
‍
Uma das maiores dificuldades do projeto era o prazo, o website deveria estar funcionando em apenas 3 meses, então eu tive que correr para que tudo saísse no tempo certo. Justamente por esse prazo curto, o cliente pediu para que o website fosse construído em cima de um template pronto do WordPress, além deles já terem certa familiaridade com a área administrativa, então tive que aprender sobre como funcionava e até onde eu poderia ir no desenvolvimento.
‍
Eu era o único designer no projeto, sendo responsável por tudo, o que significa user experience, user interface, prototipagem, testes de usabilidade, copywriting e testes de qualidade, também lidei com os clientes durante todo o projeto.

Pesquisa

O cliente veio até nós com algumas pesquisas já feitas, eles fizeram uma com os usuários do grupo do Facebook e qual os problemas que eles tinham ali dentro, isso nos salvou um tempo importante. Dessa forma eu sabia que os usuários eram pais de 17 a 40 anos, com crianças pequenas de até 13 anos, a maioria eram mães, que trabalhavam e tomavam conta de seus filhos e casa.
‍
Também tivemos alguns pontos destacados como os mais irritantes no grupo, como: dificuldade em encontrar o produto certo, eles não conseguiam filtrar a localização e o tipo do produto, toda postagem tinha um formato diferente, então não conseguiam encontrar as informações necessárias (Isso foi antes do Facebook começar a criar o seu Marketplace).
‍
Com todas essas informações criei 4 personas que representavam os 4 tipos de usuários que identifiquei, também fizemos uma análise dos site e apps concorrentes, aprendi muito coisa só vendo o que as outras empresas havia feito, dessa forma nós definimos alguns padrões e o que estava certo ou errado.

Desenvolvimento

Depois de toda essa pesquisa comecei a criar o design, o primeiro wireframe que fiz não foi mostrado ao cliente, entendi que poderia ser complicado para eles entenderem, então usei apenas para criar a estrutura das páginas chaves para aprovação interna, assim que fiquei feliz com o resultado fui para um design mais próximo do final.
‍
O tempo todo estive em contato com o cliente e vi como eles reagiam ao trabalho, já que estavam envolvidos e também faziam parte do público-alvo, diversas vezes eles trouxeram problemas que não havíamos conseguido identificar.
‍
Nesse momento tinha que definir uma linguagem visual, como eles já tinham uma marca utilizamos o máximo dela, também recorri à análise de concorrentes e ao Material Design do Google para desenvolver uma interface visual que fosse familiar, confiável e que destaca-se os aspectos mais eficazes da marca.

Algumas das minhas decisões foram:

Categorias

O produto e a identidade visual devem estar sempre alinhadas para que os usuários tenham uma experiência completa da marca, como eles já tinham um brandbook, usei as cores existentes nele nas categorias de produtos, dessa forma os usuários tinham algo para distinguir rapidamente as categorias de produto, além do ícone e nome.

Cartões de produto

Os cartões devem ter muitas informações, diferente de um cartão de produto comum de e-commerce, que geralmente tem o nome do produto, categoria e preço, aqui deveria ter também o nome do produto pelo qual o usuário quer trocar, mas algumas vezes o cartão não tem o preço, então tinha que criar algo que funcionasse das 2 maneiras. A solução foi que no processo de adicionar um novo produto para troca, o usuário teria 2 campos para colocar o que ele queria na troca, um onde ele deveria descrever o produto de forma mais ampla e outro para a descrição exata, assim no cartão iríamos mostrar apenas a forma mais ampla.

Páginas de produto

Aqui tive o mesmo problema, porém a solução foi ter o termo mais abrangente e uma seta ao lado, para que o usuário clicasse o mostrasse a descrição completa do que ele queria trocar. As cores da página alteram conforme a categoria, usei nos ícones, botões e outras partes, assim seria mais fácil o usuário identificar a categoria.

Adicionar produtos para venda e troca

As pessoas usam os grupos do Facebook por ser fácil e prático adicionar os produtos, então quis criar algo que fossem tão fácil quanto mas que tivesse uma estrutura, seguindo do ponto que adicionar um produto seria nada mais do que um formulário, pesquisei formas de como fazer os usuários completarem formulários complexos sem saírem do site. Esse “formulário" foi separado em etapas, para que os usuários não vissem tudo, fazendo com que ele parecesse mais simples, isso foi especialmente bom no mobile, onde queria que as pessoas apenas tirassem seu celulares do bolso e conseguissem facilmente tirar as fotos do produto e terminar de adicionar.

Páginas em branco

Queria manter a diversão que já existia na marca, então usei páginas em branco e 404 para fazer um copywriting mais divertido e explorar outros elementos da marca, deixando o usuário mais próximo do produto.

Teste de usabilidade

Fazer testes de usabilidade era um problema, não tinha o tempo ou budget para fazer esses testes, foi então que encontrei uma ferramenta chamada Maze, que foi criada para fazer testes de usabilidade remotos sem nenhum tipo de orientação, e eles funcionavam com o Marvel, a ferramenta em que estava fazendo os protótipos então foi perfeito.

Essa ferramenta me permitiu criar testes mais rápidos e compartilhar com nosso público de verdade que já estava no grupo do Facebook, então não precisei encontrar ninguém disposto a testar, era só compartilhar no grupo e as pessoas faziam no seu tempo.
‍
Eu fiz um caminho simples para o teste, que cobre todas as principais funcionalidades do produto:

Mas foi assim que o user flow do protótipo usado nos testes ficou:

Os testes foram feitos com 10 usuários, e consegui bons insights, principalmente sobre a navegação, estava usando as tabbars, mas vi que era confuso para os usuários, principalmente porque eles estavam acostumados com a navegação tradicional de sites, que era no topo, mesmo que fosse mais perto dos dedos, aqui um exemplo da mudança:

O que aprendi

Trabalhar nesse projeto foi minha primeira oportunidade de trabalhar em um produto totalmente funcional e que estava no mercado. Durante esse processo, uma das minhas maiores preocupações era manter a consistência em todo o produto, ter certeza de que cada peça estava no lugar certo e pensar na interface como parte de um grande sistema. 
‍
O escopo do projeto necessitava que eu acreditasse em suposições, na minha intuição, e testes de usabilidade mais simples, porém se tivesse mais tempo e recursos teria ido mais a fundo nas necessidades e comportamento desses usuários através de entrevistas e testes de usabilidade mais complexos.
‍
Ao passar do tempo e conforme os usuários vão utilizando o produto, vamos reconhecendo alguns erros, como por exemplo, a forma que incluímos os produtos a serem trocados nos Cartões de Produto e nas Páginas de Produtos, o que era extremamente confuso e teve que ser alterado, e também como todos os CTAs do site eram vermelhos, o que os usuários identificavam não como algo positivo, mas sim algo que iria deletar o progresso deles ali.
‍
Eu pude trabalhar com o time de desenvolvimento mas não consegui colaborar o tanto quanto queria, então algumas coisas não ficaram exatamente como havia criado, principalmente algumas animações e interações, mas estou muito orgulhoso desse projeto, de ver que nós fomos capazes de criar um produto legal e funcional em pouco tempo.
‍
Hoje, o website está sendo gerenciado pelo próprio cliente, então existem algumas mudanças do design e desenvolvimento original.