Voltar

Facilitando a venda de produtos e agendamento de serviços em pet shops.

Facilitando a venda de produtos e agendamento de serviços em pet shops.

Contexto.

Foram identificados pelos donos do negócio que soluções genéricas como iFood e Anota Aí não atendiam às necessidades operacionais de pet shops. A falta de funcionalidades específicas para o setor e a dificuldade de comunicação com clientes tornavam todos os processos mais cansativos. Por conta disso, quiseram criar a Wuby.

Foram identificados pelos donos do negócio que soluções genéricas como iFood e Anota Aí não atendiam às necessidades operacionais de pet shops. A falta de funcionalidades específicas para o setor e a dificuldade de comunicação com clientes tornavam todos os processos mais cansativos. Por conta disso, quiseram criar a Wuby.

Desafios.

→ Criar uma solução que fizesse parte das atividades do dia a dia dos agentes dos negócios (Dono, gerente e recepcionista).

→ Criar uma solução que fizesse parte das atividades do dia a dia dos agentes dos negócios (Dono, gerente e recepcionista).

→ Construir componentes e interfaces que funcionassem independente da marca de cada cliente (Solução White Label).

→ Construir componentes e interfaces que funcionassem independente da marca de cada cliente (Solução White Label).

→ Trazer consistência para todas as ferramentas da solução (Loja e Back Office).

→ Trazer consistência para todas as ferramentas da solução (Loja e Back Office).

Meta de alto nível.

Projetar um sistema de gestão para petshops e clínicas veterinárias centrado no usuário, com foco em delivery de produtos e agendamento de serviços, por meio de uma plataforma white label moderna, acessível e integrada.

Resumo da processo.

Começamos com uma auditoria de UX para revisar o que já tinha sido feito antes da minha participação. Os donos do negócio me apresentaram uma possível versão de UI, bem simples, e queriam melhorá-la. Foi revisado todos os userflows existentes, analisando navegação, arquitetura da informação e estrutura visual.

Em seguida, recriamos os userflows e continuamos com os novos. Depois fizemos os wireframes e protótipos de alta fidelidade no Figma. Desenvolvi um UI Kit com foco em white label, incluindo componentes e seções dinâmicas, além de 10 paletas de cores adaptáveis para se comportar bem em cada marca cliente.

Durante todo o processo, foi realizado algumas pesquisas, principalmente pesquisas de campo e benchmarking, mas também algumas conversas com steakholders, para definir a solução e estruturar um roadmap.

Cliente.

Wuby

Período.

12 meses

Tipo do projeto.

SaaS

Setor.

Animal (Pet)

Colaborações de destaque.

UI UX Design

UI Kit

Color system pallete

Jornada do usuário

Principais objetivos da Wuby.

Reduzir o tempo de atendimento.

Reduzir o tempo de atendimento.

Aumentar as vendas online.

Aumentar as vendas online.

Permitir customização entre loja.

Permitir customização entre loja.

Reduzir o tempo de atendimento foi uma das primeiras prioridades desde o início do projeto. Durante o processo de desk research, identificamos que grande parte do tempo dos agentes era investidos em tarefas repetitivas, como confirmação de pedidos via conversas no WhatsApp e agendamentos manuais. Para resolver isso, desenhamos uma interface fluida que permite:


→ Agendamento automático de serviços direto na loja online.

→ Acompanhamento em tempo real da esteira de pedidos.

→ Notificações automáticas para o cliente final em cada etapa.

Reduzir o tempo de atendimento foi uma das primeiras prioridades desde o início do projeto. Durante o processo de desk research, identificamos que grande parte do tempo dos agentes era investidos em tarefas repetitivas, como confirmação de pedidos via conversas no WhatsApp e agendamentos manuais. Para resolver isso, desenhamos uma interface fluida que permite:


→ Agendamento automático de serviços direto na loja online.

→ Acompanhamento em tempo real da esteira de pedidos.

→ Notificações automáticas para o cliente final em cada etapa.

Esteira de pedidos

Pesquisar

Status

Pendente

Arley Gomes

Feito às 12:37

Rua Luiza de Pinho…

R$ 56,99

Pendente

Carlos Sousa

Feito às 12:02

Rua Franca Viera…

R$ 49,99

Concluído

Junior Lima

Feito às 12:00

Rua Joaquim de…

R$ 7,69

Concluído

João Victor

Feito às 11:49

Avenida Luiza de Pinho, nº 99, Centro

R$ 124,00

Concluído

Antônio Ricardo

Feito às 11:22

Rua Frederico Borges, nº 202, Centro

R$ 20,00

Rejeitado

Antônio Ricardo

Feito às 11:22

Rua Frederico Borges, nº 202, Centro

R$ 20,00

Esteira de pedidos

Pesquisar

Status

Pendente

Arley Gomes

Feito às 12:37

Rua Luiza de Pinho…

R$ 56,99

Pendente

Carlos Sousa

Feito às 12:02

Rua Franca Viera…

R$ 49,99

Concluído

Junior Lima

Feito às 12:00

Rua Joaquim de…

R$ 7,69

Concluído

João Victor

Feito às 11:49

Avenida Luiza de Pinho, nº 99, Centro

R$ 124,00

Concluído

Antônio Ricardo

Feito às 11:22

Rua Frederico Borges, nº 202, Centro

R$ 20,00

Rejeitado

Antônio Ricardo

Feito às 11:22

Rua Frederico Borges, nº 202, Centro

R$ 20,00

Início

Carrinho

Pedidos

Início

Carrinho

Pedidos

ESCALA DA PRIMARY COLOR[

ESCALA DE CINZA

Aa

Aa

FONTE

Instrument Sans

Instrument Sans

Uma tipografia sem serifa desenvolvida para transmitir clareza, modernidade e versatilidade. Seu desenho limpo, com proporções equilibradas e formas geométricas suaves, a torna adequada para interfaces.

Uma tipografia sem serifa desenvolvida para transmitir clareza, modernidade e versatilidade. Seu desenho limpo, com proporções equilibradas e formas geométricas suaves, a torna adequada para interfaces.

Aumentar as vendas online guiou muitas das minhas decisões visuais e estratégicas durante todo o projeto. Na loja, priorizei o design orientado à conversão, com promoções e cabeçalhos embutidos no layout, categorias em destaque e serviços logo no início.


Também me certifiquei de criar componentes grandes, como grandes botões, grandes títulos, grandes cards e grandes fotografias dos produtos. Tudo isso pensando em facilitar os cliques e interações.

Aumentar as vendas online guiou muitas das minhas decisões visuais e estratégicas durante todo o projeto. Na loja, priorizei o design orientado à conversão, com promoções e cabeçalhos embutidos no layout, categorias em destaque e serviços logo no início.


Também me certifiquei de criar componentes grandes, como grandes botões, grandes títulos, grandes cards e grandes fotografias dos produtos. Tudo isso pensando em facilitar os cliques e interações.

A solução não pode ser White Label se não houver o principal, customização.


Por conta disso me preocupei em criar várias seções customizáveis para que o dono do pet shop pudesse montar campanhas e destacar serviços com liberdade. Essa autonomia reduz a dependência de suporte técnico e permite ações mais rápidas no dia a dia, aumentando as chances de conversão.


Permitir um grau de customização exigiu uma arquitetura de informação muito bem planejada, passando horas testando componentes e seções que funcionassem independente das cores primárias.


No final criei um robusto color system para a Wuby que conta com 10 paletas de cores distintas e 11 tonalidades por paleta, garantindo contraste, acessibilidade e harmonia visual.

A solução não pode ser White Label se não houver o principal, customização.


Por conta disso me preocupei em criar várias seções customizáveis para que o dono do pet shop pudesse montar campanhas e destacar serviços com liberdade. Essa autonomia reduz a dependência de suporte técnico e permite ações mais rápidas no dia a dia, aumentando as chances de conversão.


Permitir um grau de customização exigiu uma arquitetura de informação muito bem planejada, passando horas testando componentes e seções que funcionassem independente das cores primárias.


No final criei um robusto color system para a Wuby que conta com 10 paletas de cores distintas e 11 tonalidades por paleta, garantindo contraste, acessibilidade e harmonia visual.

Temas

Temas

Sobre nós

Pesquise na Estima PET

Headers

Sobre nós

Pesquise na Estima PET

Headers

Tudo pela metade do preço!

Qualquer produto da ZeeDog pela

metade do preço na sua primeira compra.

50% OFF

50% OFF

Tudo pela metade do preço!

Qualquer produto da ZeeDog pela

metade do preço na sua primeira compra.

50% OFF

50% OFF

Compre 1 e leve o 2º de GRAÇA! 😬😬

Compre qualquer sache do nosso estoque e leve outro. Válido até 12 de Abril.

Compre 1 e leve o 2º de GRAÇA! 😬😬

Compre qualquer sache do nosso estoque e leve outro. Válido até 12 de Abril.

Banners

Nota: Isso foi um baita desafio

para mim. 😅😅

Além de focar no design visual da vitrine, que é o que o usuário final de fato acessa, precisei desenvolver todo o fluxo do back office, que é onde o dono do pet shop opera o negócio no dia a dia.


Desde o início, a proposta era que esse painel não fosse apenas um centro de configurações, mas sim uma ferramenta de trabalho contínuo, com foco em autonomia e agilidade.


Para que a loja estivesse 100% funcional e personalizável sem depender do time de suporte, criei um user flow para definir um local onde o próprio pet shop consegue configurar nome da loja, paleta de cores, categorias, produtos e serviços, além de ver faturamento e insights sobre o negócio.


Essa flexibilidade permite que o negócio se adapte a sazonalidades e campanhas, e também assegura que cada vitrine tenha identidade própria.

Além de focar no design visual da vitrine, que é o que o usuário final de fato acessa, precisei desenvolver todo o fluxo do back office, que é onde o dono do pet shop opera o negócio no dia a dia.


Desde o início, a proposta era que esse painel não fosse apenas um centro de configurações, mas sim uma ferramenta de trabalho contínuo, com foco em autonomia e agilidade.


Para que a loja estivesse 100% funcional e personalizável sem depender do time de suporte, criei um user flow para definir um local onde o próprio pet shop consegue configurar nome da loja, paleta de cores, categorias, produtos e serviços, além de ver faturamento e insights sobre o negócio.


Essa flexibilidade permite que o negócio se adapte a sazonalidades e campanhas, e também assegura que cada vitrine tenha identidade própria.

Para alimentar a vitrine com produtos e serviços, desenhei fluxos simples e enxutos de cadastro. Os donos podem criar produtos com variantes, serviços com duração e preço, além de anexar tags, ícones e descrições detalhadas.


Além disso, para garantir que o dono tenha clareza do desempenho do seu negócio, o painel também inclui uma seção de faturamento com visão semanal e mensal, além de insights como ticket médio, top produtos vendidos e categorias com melhor performance. A proposta era tornar esse painel útil para decisões do dia a dia, como quais produtos reabastecer ou quais serviços promover mais.

Para alimentar a vitrine com produtos e serviços, desenhei fluxos simples e enxutos de cadastro. Os donos podem criar produtos com variantes, serviços com duração e preço, além de anexar tags, ícones e descrições detalhadas.


Além disso, para garantir que o dono tenha clareza do desempenho do seu negócio, o painel também inclui uma seção de faturamento com visão semanal e mensal, além de insights como ticket médio, top produtos vendidos e categorias com melhor performance. A proposta era tornar esse painel útil para decisões do dia a dia, como quais produtos reabastecer ou quais serviços promover mais.

Um pedaço do userflow

Aprendizados com esse projeto? Listando só alguns aqui! O desafio foi grande, mas valeu a pena. 😅

Dica: O livro Enviesados do Rian Dutra me ajudou muito nisso! Pesquise .

Tela inicial

Produtos

Configurações

Tela inicial

Produtos

Configurações

Desenvolver o projeto da Wuby foi uma experiência extremamente gratificante tanto do ponto de vista técnico quanto humano. Trabalhar em uma solução que impacta diretamente pequenos empreendedores e seus clientes trouxe um senso de propósito claro em cada decisão de design.


Aprendi muito sobre como criar sistemas que conversam entre si, como a loja (vitrine) e o painel de gestão (back office), e como atender diferentes perfis de usuários com o mesmo produto, desde o consumidor final até o atendente ou dono do pet shop. Essa dualidade me desafiou a manter consistência visual e usabilidade em contextos completamente distintos.


Além disso, aprofundei minha capacidade de projetar interfaces para ambientes white label, ao desenvolver um sistema de cores robusto, com 10 paletas e 9 tons cada, garantindo contraste, legibilidade e harmonia em qualquer variação de marca ou identidade.


Para finalizar, refinar o design da vitrine com foco em conversão de vendas me incentivou a estudar e entender com mais profundidade o comportamento de compra online e como o design visual pode guiar decisões de consumo, algo que levo comigo para outros projetos voltados ao e-commerce 🛒.

Desenvolver o projeto da Wuby foi uma experiência extremamente gratificante tanto do ponto de vista técnico quanto humano. Trabalhar em uma solução que impacta diretamente pequenos empreendedores e seus clientes trouxe um senso de propósito claro em cada decisão de design.


Aprendi muito sobre como criar sistemas que conversam entre si, como a loja (vitrine) e o painel de gestão (back office), e como atender diferentes perfis de usuários com o mesmo produto, desde o consumidor final até o atendente ou dono do pet shop. Essa dualidade me desafiou a manter consistência visual e usabilidade em contextos completamente distintos.


Além disso, aprofundei minha capacidade de projetar interfaces para ambientes white label, ao desenvolver um sistema de cores robusto, com 10 paletas e 9 tons cada, garantindo contraste, legibilidade e harmonia em qualquer variação de marca ou identidade.


Para finalizar, refinar o design da vitrine com foco em conversão de vendas me incentivou a estudar e entender com mais profundidade o comportamento de compra online e como o design visual pode guiar decisões de consumo, algo que levo comigo para outros projetos voltados ao e-commerce 🛒.

Feedback

Nome

Cargo na empresa

© 2025 Arley Gomes. Todos os direitos reservado.

Ops, espere!

A resolução da sua tela parece de celular, logo imagens e alguns textos podem ficar estranhos, recomendo fortemente ver pelo computador.

Ops, espere!

A resolução da sua tela parece de celular, logo imagens e alguns textos podem ficar estranhos, recomendo fortemente ver pelo computador.