top of page
JORNADA DE UX - ORGANICANINE
![organicanine app](https://static.wixstatic.com/media/3d1719_c1955d9e22644a53be65cd40a373e446~mv2.png/v1/fill/w_402,h_402,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/organicanine%20app.png)
![mockup (2)_edited.png](https://static.wixstatic.com/media/3d1719_3d4b516844934dab9af68e24927e3619~mv2.png/v1/fill/w_405,h_406,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/mockup%20(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
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.
![Google UX Design Certificate - User Journey Map [Template].png](https://static.wixstatic.com/media/3d1719_d02148ea23af4aa99696b589652069f9~mv2.png/v1/fill/w_60,h_34,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D.png)
![persona.png](https://static.wixstatic.com/media/3d1719_477c2b74aedf409c9c2bc5be060beef8~mv2.png/v1/fill/w_95,h_95,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/3d1719_2a78b8e99587490b957efce2ec711feb~mv2.png/v1/fill/w_75,h_42,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20flow%20%5Btemplate%5D.png)
A seguir, foram criados dois storyboards: do usuário e um de close-up:
![storyboard de usuário](https://static.wixstatic.com/media/3d1719_02394d5dea164af78949211f0795f052~mv2.jpg/v1/fill/w_122,h_79,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/storyboard%20de%20usu%C3%A1rio.jpg)
![storyboard de close-up](https://static.wixstatic.com/media/3d1719_802baa6d9686441ea74cbe40c9aafae6~mv2.jpg/v1/fill/w_117,h_79,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/storyboard%20de%20close-up.jpg)
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](https://static.wixstatic.com/media/3d1719_667695fff1084849be66d22d4af8c448~mv2.jpg/v1/fill/w_57,h_91,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe.jpg)
![](https://static.wixstatic.com/media/3d1719_383426ac3892444ba7f4b56b515f6032~mv2.jpg/v1/fill/w_56,h_88,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/3d1719_383426ac3892444ba7f4b56b515f6032~mv2.jpg)
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.
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:
![](https://static.wixstatic.com/media/3d1719_1a560758f99d4a0e8fd1ec3122621797f000.jpg/v1/fill/w_89,h_124,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/3d1719_1a560758f99d4a0e8fd1ec3122621797f000.jpg)
bottom of page