Petz | e-commerce app

Design do e-commerce do aplicativo da loja petz pela empresa como consultor da empresa Hanzo mobile

Origem

Devido a uma crescente demanda de clientes comprando através do e-commerce da empresa e seus concorrente crescendo através de plataformas digitais, percebemos que era hora de oferecer ao clientes da Petz uma nova solução de compra que gerasse mais engajamento e facilidade, deixando eles mais próximos da marca e criando uma experiência mais agradável.

Após um benckmark realizado com seus principais concorrentes, entre eles Petlove e cobasi, precisávamos entender qual era o nível de engajamento dos clientes da Petz, para isso criamos um MVP.  Inicialmente o aplicativo foi lançado com um serviço de gestão de passeios para que nossos usuários pudessem acompanhar e medir os passeios dos seus pets, o app media rotinas, grava um mapa com o percurso e a distância percorrida, usa notificações de lojas próximas para sugerir petiscos e produtos da rede.

Após o sucesso da primeira features do aplicativo, chegou a hora de integrar o e-commerce a ele e oferecer uma experiências 360 aos usuários com todos os produtos da loja, adicionamos agendamento de entregas, compra recorrente e promoções específicas para cada tipo de usuário. O desafio era incluir uma loja sem atrapalhar o fluxo  já existente do aplicativo, partimos então para o fluxo das telas.

 

Lene Studio - App Petz

 

Mapa do site

Vale um destaque para o momento de desenhar o mapa do site, aqui tinha nosso objetivo era incluir um e-commerce completo causando o menos impacto possível para os usuários que já estavam usando o aplicativo em suas rotinas de passeios.

Passamos por algumas possibilidade de mudança na navbar (barra de navegação), mas pela quantidade de features que uma loja necessita, seria muito difícil fazer polcas alterações no app, a partir dai criamos um mapa do site para entender onde teriam as conecções entre as funcionalidade do app com as nova do e-commerce, a ideia então foi criar um menu hamburger para organizar estas features.

 

 

Wireframe e protótipo navegável de baixa

Com as features definidas e o mapa do site montado, parti para a criação dos wireframes onde organizei as informações que ficariam em cada tela, trabalhei arquitetura de informação onde foquei na linha de comunicação, linguagem e tom.

Mesmo que o projeto não apresentasse grandes problemas na arquitetura da informação, tivemos uma certa dificuldade em apresentar alguns comportamentos em comunicações que precisavam ser feitas por fazer no processo de utilização dos usuários, para isso montamos um protótipo navegável de baixa fidelidade, com o objetivo de deixar claro para os stakeholders como as informações e interações seriam entregues pelo app e não perder tempo se apegando com detalhes de design de interface neste momento.

 

 

Design de interface

Se na faze anterior não existia uma preocupação com design de interface, neste momento era tudo que precisava ser feito. O objetivo aqui era integrar a identidade visual da marca no projeto que estávamos desenvolvendo, acabamento, paleta de cores da marca, fontes e iconografia são de extrema importância nesta fase.

Com a aplicação da identidade da marca, podemos validar leiturabilidade, contraste e hamonia do trabalho garantindo que ao ter contato com o produto o cliente saberá que estamos falando da marca que ele conheçe e confia.

 

 

Protótipo de alta fidelidade

Design aprovado, agora é hora de documentar tudo que foi proposto para o projeto, isso garante que a entrega será feita da forma que foi prevista nas interações, cenários de uso, tamanho do componentes e cores definidas.

A entrega foi feita em Sketch, com as telas organizadas por fluxos e cenários, de forma que ficasse fácil entender qual era a proposta sugerida. Além disso um protótipo navegável de alta fidelidade que simulava todas as principais interações proposta no projeto, que serve para ajudar os desenvolvedores e também para validar funcionalidade através de testes de usabilidade com os usuários do aplicativo. 

 

 

Teste  de usabilidade e relatório

Desenvolvimento do aplicativo de uma das maiores redes de petshop do brasil, foram desenvolvidos wireframes, protótipos, design, arquitetura de informação, jornada do usuário entre outras ferramentas para a realização deste projeto.

Desenvolvimento do aplicativo de uma das maiores redes de petshop do brasil, foram desenvolvidos wireframes, protótipos, design, arquitetura de informação, jornada do usuário entre outras ferramentas para a realização deste projeto.

Desenvolvimento do aplicativo de uma das maiores redes de petshop do brasil, foram desenvolvidos wireframes, protótipos, design, arquitetura de informação, jornada do usuário entre outras ferramentas para a realização deste projeto.

 

Open chat
1
Olá,
Posso Ajudar?