Sitemap

Smartpet App (UX/UI) — Estudo de Caso

5 min readFeb 16, 2023

--

Smartpet — Petshop online com foco na automação e gerenciamento de compras e serviços para seu pet. Com descontos exclusivos no app, clube de assinatura, compras programadas e delivery.

Visão geral

Este é um estudo de caso sobre um processo de descoberta e criação de um aplicativo de petshop online. Este trabalho foi desenvolvido para participar de um processo seletivo para uma vaga de Product Designer em 2022.

Na ocasião, recebi da empresa um documento que explicava o desafio, objetivos de negócio e uma persona que foi criada por eles.

O cenário do desafio

Uma rede de produtos e serviços para animais de estimação deseja aumentar seu faturamento. Para isso, a empresa deseja fortalecer a presença da marca na vida dos clientes e facilitar o processo de compras online.

Então, pensaram em criar um aplicativo que estimule o uso constante através de ofertas e promoções. Logo, um dos desafios será compreender o que as pessoas precisam para cuidar melhor de seus pets em diferentes situações do dia a dia para criar uma boa solução para esta empresa.

Ajudando as pessoas a cuidarem melhor dos pets, aumenta o faturamento da empresa por consequência. Essa é a meta desse desafio.

Persona

Para padronizar a avaliação entre os entrevistados, a empresa elaborou esta persona fictícia.

Escopo e Restrições

O maior desafio para este projeto era o pouco tempo, 5 dias para executar todo o processo de descoberta até o protótipo de alta fidelidade.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Fase 1.1 (Descoberta)

A: Desk research

No meu processo de descoberta, gosto de começar por uma grande pesquisa acerca do problema geral, até encontrar uma quantidade relevante de dados que vão servir para me inspirar, e me dar certezas sobre o mercado em que o problema está inserido.

Gosto de pensar nesta primeira pesquisa como um “overall” onde estou atento a um pouco de tudo, entre business, design, user pain points e oportunidades de negócio.

B: Persona: Pain Points

Depois de estudar sobre a persona criada, criei um mapa de “Dores” e “Analgésicos”.

C: Persona: Rotina diária

Durante o processo de pesquisa sobre a persona, achei pertinente desenhar um fluxograma para detalhar cada passo/atividade e criar um padrão de Rotina Diária para encontrar os momentos que o usuário poderia estar mais suscetível a interagir com o app.

D: Matriz CSD

Para auxiliar o momento de descoberta, desenhei uma matriz csd e fui retro-alimentando ela durante o ciclo de pesquisa.

E: Benchmarking

Analisei então, 3 grandes e muito utilizados apps concorrentes diretos e indiretos, para entender melhor sobre os serviços prestados para os pets, além de nesse momento já começar a pesquisar também sobre o tom de voz das marcas, suas cores, usabilidade, pontos fortes, fracos e oportunidades.

Fase 1.2 (Definições)

F: Insights

Aqui comecei a filtrar todas as oportunidades e problemas encontrados e finalizei com alguns bons insights, que logo logo se transformarão em resoluções.

Fase 2.1 (Ideação)

G: Crazy 8's

Depois de definir bem um problema específico para resolver, gosto de expandir os horizontes com alguma técnica criativa de resoluções de problemas. Para este projeto fiz alguns crazy 8’s e obtive algumas ideias mais “fora da caixa” que não se encaixavam no core business do meu desafio, e outras que eram mais clichês, mas atenderiam bem a demanda de negócio que eu estava procurando.

H: Releitura do problema

Com muitas ideias provenientes da etapa do crazy 8, decidi fazer uma releitura do problema para definir qual ideia afinal seria analgésico para sanar pelo menos 1 dor do meu usuário/persona.

I: Wireframes / Sketches

Como sempre gosto de rabiscar muito, fiz alguns wireframes no papel pra começar a tirar as ideias da cabeça e passar para uma estrutura palpável, passando por branding, arquitetura da informação, layouts para o app e até fiz um desenho do meu cachorro pra inspirar 😀

J: Branding

Escolhi um nome fictício “Smartpet”, que representasse bem a principal característica do app, que é de ser inteligente, otimizando as agendas, automatizando processos para o usuário, etc.

Desenhei então, algumas versões com cores diferentes, até optar pelo vermelho como a principal cor.

A decisão da cor também foi baseada em estratégias de negócio, seguindo um pensamento de varejo, o vermelho é uma cor forte, chamativa e que tem o poder de criar iniciativa de compra no usuário. Muito usada nos brands de Supermercados e Fast Foods

K: Layouts

Com rabiscos no papel, um brand desenhado, parti para a fase do layout, criei alguns componentes e fui construindo a partir dos wireframes.

Fase 2.2 (Entrega)

L: Prototype

Depois de ter todo o layout pronto, prototipei algumas interações de botões, e navegações entre as páginas e está pronto!

Link para o protótipo no Figma: https://www.figma.com/proto/Lor55tT9T76gNOKhQDacR7/smartpet?page-id=0%3A1&node-id=56%3A5966&viewport=-709%2C299%2C0.25&scaling=scale-down&starting-point-node-id=2%3A142

--

--

No responses yet