Da pesquisa ao protótipo
O redesenho do site de comércio eletrônico Poezenparadijs.
O mercado de produtos para animais de estimação fornecidos on-line é enorme e crescente e, como resultado da epidemia de COVID, ainda mais donos de animais de estimação estão recorrendo à Internet para atender às necessidades de seus animais de estimação.
Com essa expansão em mente, nossa equipe decidiu redesenhar o Poezenparadijs , um site de comércio eletrônico holandês que vende suprimentos para gatos de alta qualidade .
Pode ser desafiador redesenhar um site, mas com pensamento e execução cuidadosos , é possível criar um que seja amigável e esteticamente agradável. Este estudo de caso abordará as etapas envolvidas na reformulação de um site de comércio eletrônico.
Da identificação do problema à análise competitiva, seguida da criação do estilo do bloco e, finalmente , do wireframing do protótipo hi-fi .
Deixe-me guiá-lo através do nosso processo de design.
- Pesquisa Secundária
Começamos com uma pesquisa secundária e descobrimos que o mercado de suprimentos online para animais de estimação provavelmente mais do que dobrará nos próximos cinco anos. Com um valor de mercado esperado de $ 358 bilhões até 2027. Esta pesquisa ajudou a equipe a entender o tamanho do mercado e as possibilidades para Poezenparadijs. - Entrevista com as partes interessadas
Conduzimos uma entrevista com as partes interessadas com o fundador da Poezenparadijs, Henk . Por meio da entrevista, obtivemos informações sobre a paixão de Henk por gatos e os desafios que ele enfrenta ao administrar a empresa.
3. Análise competitiva
Nossa análise competitiva foi baseada nos resultados das entrevistas com as partes interessadas.
Usamos uma variedade de ferramentas, incluindo análise de comparação de marcas , análise de recursos e um mapa de posicionamento de mercado em nossa abordagem.
A análise SWOT nos ajudou a documentar nossas descobertas. Percebemos que o posicionamento atual no mapa de posicionamento de mercado não estava tão longe do posicionamento ideal . Identificamos os pontos fortes e fracos existentes no site. E descobrimos que o site atual era difícil de navegar e tinha categorias pouco claras. Para resolver esses problemas, optamos por destacar os produtos especialmente selecionados e de alta qualidade, além de simplificar a navegação do usuário .
4. Entrevistas
Para garantir que o redesenho atenda às necessidades do usuário, realizamos entrevistas com cinco donos de animais de estimação. Por meio dessas entrevistas, ficamos sabendo o que os entrevistados compravam para seus animais de estimação e os motivos de suas escolhas. Na compra de alimentos, três em cada cinco entrevistados geralmente seguem as recomendações de seus veterinários.
Um dono de animal de estimação com quem conversamos tinha um gato com excesso de peso , o que influenciou sua decisão.
5. Diagrama de Afinidades
O mapa de afinidades que fizemos com os dados que recebemos das entrevistas nos ajudou na coleta de informações e no desenvolvimento de cinco supergrupos.
Os dois insights mais votados foram : “Eu escolho comprar online porque consome menos tempo” e “Eu recebo informações sobre o que é melhor para o meu gato, do meu veterinário”.
Com base nessas anotações e no comportamento dos entrevistados , nossa equipe percebeu que o principal problema por trás de cada uma era tempo e confiança .
6. User-persona
Em seguida, criamos nossa user-persona, Lisa. Lisa é enfermeira em tempo integral e mãe solteira de Luna e Belle. Apesar de trabalhar em um hospital, ela tem pouco tempo livre e quer dar aos seus gatos os melhores produtos. Ela, portanto, prefere comprar seus suprimentos para gatos online. Nossa persona de usuário reflete o pai de estimação médio que entrevistamos.
Ela ocasionalmente precisa de ajuda para fazer escolhas inteligentes devido à grande variedade de produtos disponíveis.
7. Mapa da jornada do usuário
Em seguida, descrevemos o “ dia na vida ” de Lisa e as dificuldades que ela encontrou ao tentar comprar comida para animais de estimação online. Ela realiza uma busca rápida por “comida saudável para gatos” porque um de seus gatos está acima do peso .
Ela se sente perdida enquanto procura. O que piora quando ela escolhe um produto e descobre que não há explicação para o fato de ser considerado adequado para um gato com excesso de peso. Ela se sente insegura com isso e gostaria que essa tarefa fosse mais simples.
8. Enunciado do problema
Nosso enunciado final do problema é assim criado:
“Um dono de gato preocupado e amoroso precisa encontrar uma maneira de comprar e receber sem esforço alimentos e produtos de alta nutrição de um site confiável, porque ela quer dar a eles uma boa qualidade de vida, mas tem tempo limitado para fazer pesquisas”
9.HMW
Encontrar os problemas com o site atual é o primeiro passo para redesenhá-lo. Nesse caso, focamos em maneiras de ajudar os usuários a encontrar os produtos certos e tomar decisões rápidas e informadas. Para resolver esse problema, criamos três declarações “como podemos” para debater ideias.
10. Método Moscou / MVP
Aplicamos o método Moscou para priorizar as funcionalidades que seriam incluídas no redesenho. Determinamos que o layout da página inicial deveria ser simplificado , as avaliações dos usuários deveriam ser melhor exibidas e os filtros deveriam ser incluídos. O objetivo do site é fornecer aos usuários que se preocupam em dar aos seus gatos uma vida saudável com alta nutrição, brinquedos e acessórios auto-testados, bem como ajudar os donos de gatos a filtrar, selecionar e tomar decisões informadas de maneira eficaz. Esses recursos estão de acordo com o produto mínimo viável do site .
11. Mapa do site / Fluxo do usuário
Trabalhando em um fluxo de usuário em que um usuário está procurando especificamente comida de baixa caloria para seu gato, criamos um mapa do site. Para tornar o site mais fácil de usar , consideramos que menos cliques significam menos tempo.
12. Low / Mid-wireframe
Após o fluxo do usuário, criamos um wireframe de baixa fidelidade e testamos sua eficácia pedindo às pessoas que “comprassem comida de baixa caloria para seu gato com excesso de peso”. Fizemos mais alterações com base em testes de usuários antes de criar um wireframe mid-fi.
13. Análise visual / mood board / style tile
Após uma análise visual da concorrência, determinamos o posicionamento da marca e criamos um mood board. Para despertar a confiança do público, realizamos um teste de conveniência e determinamos nosso estilo.
Escolhemos “DM sans”, que é uma sem serifa com desenho geométrico de baixo contraste. “DM sans” destina-se à legibilidade em tamanhos de texto menores e, como o conteúdo do site tem muito texto, seria o ajuste perfeito.
Escolhemos o azul como a cor principal por causa de seus efeitos confiáveis e calmantes que refletiam os atributos da marca Poezenparadijs que eram: Amigável, Confiável, Delicado, Carinhoso e Pessoal. Para transmitir um sentimento de gentileza e carinho, também selecionamos tons de rosa e neutros, que trazem um ar clean e contemporâneo.
14. Protótipo Hi-Fi
Por fim, criamos um protótipo hi-fi e focamos no design responsivo. O protótipo hi-fi será testado e aprimorado; os acessórios e as páginas sobre nós do site serão pesquisados e os produtos de alta qualidade do site serão enfatizados ; Vídeos e fotos do Instagram serão incluídos para aumentar a confiança e a personalidade da marca.
Nosso protótipo de alta fidelidade e design responsivo.
Para ir em uma aventura por si mesmo. Clique aqui
Ao redesenhar um site, é importante ter um plano . Este plano deve incluir descobrir quais problemas você deseja resolver, olhar para os concorrentes, criar um layout básico e decidir sobre o estilo certo.
Seguindo esse procedimento, conseguimos projetar um site amigável , visualmente atraente e adequado às necessidades de seu público-alvo .
Só posso dizer que estou imensamente grato e animado para ver as coisas maravilhosas que meus companheiros de equipe criarão no futuro.
Um agradecimento especial a
Salomé Mesquita Ivy van Regteren Altena Estefania Mariño Ezquerro Anaelle Ubaldino
Por favor, deixe um comentário e siga para mais projetos ou conecte-se comigo no LinkedIn .





































![O que é uma lista vinculada, afinal? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)