top of page

JORNADA DE UX  - ORGANICANINE

organicanine app
mockup (2)_edited.png

Desafio: tutores de cães muitas vezes ficam confusos sobre qual a melhor ração comprar. São muitas opções no mercado, várias muito parecidas; além disso, é difícil para o consumidor saber se determinada marca possui um processo de fabricação e desenvolvimento sustentável e responsável socialmente.

Solução: criar um app para uma marca de ração orgânica para cães que possibilite ao usuário ter maior transparência e controle sobre o que está comprando, fazendo uma decisão informada sobre os ingredientes e proveniência dos mesmos.

Proposta: criar uma marca de ração orgânica para cães, focada em ofertar somente alimentos naturais, de procedência nacional e sustentável

logo (3)_edited.jpg

O que foi feito: criação da marca, levantamento de dores e proposta de solução, mapeamento do cliente, ciclo de vida do produto e identidade visual.

Nutrição Natural, Saúde Sustentável para o Melhor Amigo do Homem.png
Google UX Design Certificate - User Journey Map [Template].png
persona.png

A parte da pesquisa foi feita como forma de aprendizado e para ganhar experiência.

No caso, como a empresa é fictícia, os clientes também são. Porém, as personas foram baseadas em usuários reais.

Foi feita uma auditoria competitiva, pesquisas informais e também entrevistas com tutores de cães para entender as dores em comum dos usuários.

Aqui, o projeto começou, literalmente, a ganhar forma. O primeiro passo foi criar o fluxo que o usuário seguiria no app:

Google UX Design Certificate - User flow [template].png

A seguir, foram criados dois storyboards: do usuário e um de close-up:

storyboard de usuário
storyboard de close-up

O primeiro desenho da estrutura do app foi feito no papel.

O intuito do app é ter um design simples e intuitivo, mas sem que falte nada ao usuário. 

Ao passar para o computador, usando o Figma, os wireframes foram montados conforme as ideias iniciais. 

wireframe.jpg
iPhone 14 & 15 Pro - 1.png

Continuando com o Figma, o primeiro protótipo de baixa fidelidade foi construído, para em seguida ser complementado com a identidade da marca, símbolos e cores finais.

wireframe low .png

Foi então feito o protótipo de alta fidelidade, já na identidade visual da marca e com as interações. 

As cores foram distribuídas visando à acessibilidade e conforto ópticos, com contrastes entre vermelho e verde e com o fundo evitando o branco absoluto, para não cansar a vista.

Após uma pesquisa de usabilidade, foram adicionados botões para retornar para a página anterior e alterada a cor deles, para melhor visualização. 

Acesse o protótipo abaixo:

 

Ou, se preferir, assista ao vídeo dele em funcionamento:
 

  • Instagram
  • LinkedIn
bottom of page