Desktop
Mobile
Social
UI
UX
Style Guide
Patinhas Felizes
Patinhas Felizes
Patinhas Felizes
Facilitando a adoção de animais
Facilitando a adoção de animais
Facilitando a adoção de animais
Contexto
Contexto
Contexto
Projeto desenvolvido inicialmente para a Jornada UX Design da EBAC. Em seguida, me desafiei a refazer o projeto aplicando novas técnicas que aprendi.
Projeto desenvolvido inicialmente para a Jornada UX Design da EBAC. Em seguida, me desafiei a refazer o projeto aplicando novas técnicas que aprendi.
Projeto desenvolvido inicialmente para a Jornada UX Design da EBAC. Em seguida, me desafiei a refazer o projeto aplicando novas técnicas que aprendi.
Objetivo
Objetivo
Objetivo
Uma ONG que resgata animais de rua está desenvolvendo um site que conecta cães e gatos sem lar com pessoas que querem adotar.
Uma ONG que resgata animais de rua está desenvolvendo um site que conecta cães e gatos sem lar com pessoas que querem adotar.
Uma ONG que resgata animais de rua está desenvolvendo um site que conecta cães e gatos sem lar com pessoas que querem adotar.
Resultados
Resultados
Resultados
Design de telas para desktop e mobile. Criação de guia de estilos. Uso de resultados de teste de usabilidade para uma segunda iteração, aplicando as melhorias identificadas
Design de telas para desktop e mobile. Criação de guia de estilos. Uso de resultados de teste de usabilidade para uma segunda iteração, aplicando as melhorias identificadas
Design de telas para desktop e mobile. Criação de guia de estilos. Uso de resultados de teste de usabilidade para uma segunda iteração, aplicando as melhorias identificadas
Desafios
Desafios
Desafios
Poucos dias para finalizar o projeto
Criação do guia de estilos pela primeira vez
Poucos dias para finalizar o projeto
Criação do guia de estilos pela primeira vez
Poucos dias para finalizar o projeto
Criação do guia de estilos pela primeira vez
Aprendizados
Aprendizados
Aprendizados
Primeiro uso da ferramenta Moodboard. Incluir essa técnica possibilitou o desenvolvimento de uma UI mais agradável
Utilizar resultados de teste de usabilidade já feito anteriormente teve impacto positivo, mitigando a repetição de erros
Nem sempre é possível aplicar todas as técnicas em um projeto. Gostaria de ter aplicado testes, como Card Sorting junto a usuários
Perguntas ao final do teste de usabilidade poderiam ser melhor elaboradas para trazer mais insights significativos
Primeiro uso da ferramenta Moodboard. Incluir essa técnica possibilitou o desenvolvimento de uma UI mais agradável
Utilizar resultados de teste de usabilidade já feito anteriormente teve impacto positivo, mitigando a repetição de erros
Nem sempre é possível aplicar todas as técnicas em um projeto. Gostaria de ter aplicado testes, como Card Sorting junto a usuários
Perguntas ao final do teste de usabilidade poderiam ser melhor elaboradas para trazer mais insights significativos
Primeiro uso da ferramenta Moodboard. Incluir essa técnica possibilitou o desenvolvimento de uma UI mais agradável
Utilizar resultados de teste de usabilidade já feito anteriormente teve impacto positivo, mitigando a repetição de erros
Nem sempre é possível aplicar todas as técnicas em um projeto. Gostaria de ter aplicado testes, como Card Sorting junto a usuários
Perguntas ao final do teste de usabilidade poderiam ser melhor elaboradas para trazer mais insights significativos
Meu papel
Meu papel
Meu papel
UX/UI designer
UX/UI designer
UX/UI designer
Feito em
Feito em
Feito em
2024
2024
2024
Primeira iteração
Primeira iteração
Processo
Pesquisa
Pesquisa
Pesquisa
Definição
Definição
Definição
Arquitetura da Informação
Arquitetura da Informação
Arquitetura da Informação
Guia de Estilos
Guia de Estilos
Guia de Estilos
Prototipação
Prototipação
Prototipação
Validação
Validação
Validação
Pesquisa e Definição
Na primeira parte apliquei Matriz CSD e Desk Research, em seguida elaborei um Service Blueprint.
Com a Matriz CSD identifiquei as principais dúvidas e suposições que busquei responder na Desk Research.
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
Principais insights da Desk Research:
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
ONGs fazem parcerias e divulgam campanhas de adoção em notícias e redes sociais, sendo noticiadas também fora desses períodos.
ONGs fazem parcerias e divulgam campanhas de adoção em notícias e redes sociais, sendo noticiadas também fora desses períodos.
ONGs fazem parcerias e divulgam campanhas de adoção em notícias e redes sociais, sendo noticiadas também fora desses períodos.
Para adotar, é necessário ser maior de idade, apresentar documentos, assinar termo de responsabilidade e, em alguns casos, pagar taxa.
Para adotar, é necessário ser maior de idade, apresentar documentos, assinar termo de responsabilidade e, em alguns casos, pagar taxa.
Para adotar, é necessário ser maior de idade, apresentar documentos, assinar termo de responsabilidade e, em alguns casos, pagar taxa.
Adoção de animais idosos é rara; filhotes são preferidos por serem mais saudáveis e viverem mais tempo com a família.
Adoção de animais idosos é rara; filhotes são preferidos por serem mais saudáveis e viverem mais tempo com a família.
Adoção de animais idosos é rara; filhotes são preferidos por serem mais saudáveis e viverem mais tempo com a família.
ONGs promovem adoções em seus sites, redes sociais e apps como Cãobinado e Hyppet..
ONGs promovem adoções em seus sites, redes sociais e apps como Cãobinado e Hyppet..
ONGs promovem adoções em seus sites, redes sociais e apps como Cãobinado e Hyppet..
O Service Blueprint permitiu que eu identificasse os pontos de contato entre ONG e futuro tutor.
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
Arquitetura da Informação
Entendi a jornada do cliente e criei um fluxo do usuário simplificado. Com isso, desenvolvi wireframes para um site mobile, com interações representando a jornada completa, focando em navegação, organização e hierarquia visual.
Entendi a jornada do cliente e criei um fluxo do usuário simplificado. Com isso, desenvolvi wireframes para um site mobile, com interações representando a jornada completa, focando em navegação, organização e hierarquia visual.
Entendi a jornada do cliente e criei um fluxo do usuário simplificado. Com isso, desenvolvi wireframes para um site mobile, com interações representando a jornada completa, focando em navegação, organização e hierarquia visual.
Guia de Estilos
Com o wireframe foi possível saber quais são os elementos mais frequentes e que precisam de um padrão definido para que o resultado final tenha consistência entre todas as telas.
Identificados os elementos, documentei em um guia de estilos com padrões para uso de cores, botões, tipografia e formulários.
Com o wireframe foi possível saber quais são os elementos mais frequentes e que precisam de um padrão definido para que o resultado final tenha consistência entre todas as telas.
Identificados os elementos, documentei em um guia de estilos com padrões para uso de cores, botões, tipografia e formulários.
Com o wireframe foi possível saber quais são os elementos mais frequentes e que precisam de um padrão definido para que o resultado final tenha consistência entre todas as telas.
Identificados os elementos, documentei em um guia de estilos com padrões para uso de cores, botões, tipografia e formulários.
Teste de Usabilidade
Testei a primeira versão do protótipo navegável com 5 pessoas que navegaram pelo protótipo e responderam perguntas relacionadas às funcionalidades da solução.
Pontos que foram satisfatórios para os usuários:
Destaque do botão para adotar o pet
Destaque do botão para adotar o pet
Destaque do botão para adotar o pet
Aplicativo simples e objetivo
Aplicativo simples e objetivo
Aplicativo simples e objetivo
As fotos e informações sobre os pets
As fotos e informações sobre os pets
As fotos e informações sobre os pets
Pontos de melhorias identificados:
IInformar sobre a situação das vacinas
IInformar sobre a situação das vacinas
IInformar sobre a situação das vacinas
Destacar se o pet é castrado ou não
Destacar se o pet é castrado ou não
Destacar se o pet é castrado ou não
Botão para fazer pergunta sobre o animal
Botão para fazer pergunta sobre o animal
Botão para fazer pergunta sobre o animal
Dizer onde fica a ONG e como será a entrega do pet para o novo tutor
Dizer onde fica a ONG e como será a entrega do pet para o novo tutor
Dizer onde fica a ONG e como será a entrega do pet para o novo tutor
Fornecer informações sobre o estado de saúde do animalzinho
Fornecer informações sobre o estado de saúde do animalzinho
Fornecer informações sobre o estado de saúde do animalzinho
Segunda iteração
Segunda iteração
Processo
Pesquisa e
Descoberta
Pesquisa e Descoberta
Resultados de Testes
Resultados de Testes
Resultados de Testes
Desk Research
Desk Research
Desk Research
Análise de Competidores
Análise de Competidores
Análise de Competidores
Ideação e
Conceituação
Ideação e Conceituação
Fluxo de Usuários
Fluxo de Usuários
Fluxo de Usuários
Wireframes
Wireframes
Wireframes
Prototipação
Prototipação
Moodboard
Moodboard
Moodboard
Guia de Estilos
Guia de Estilos
Guia de Estilos
Protótipos de Alta Fidelidade
Protótipos de Alta Fidelidade
Protótipos de Alta Fidelidade
Testes
Testes
Testes de Usabilidade
Testes de Usabilidade
Testes de Usabilidade
Desk Research e Análise de Competidores
Executei novamente uma Desk Research, porém desta vez o objetivo era entender melhor as pessoas que buscam animais para adoção, enquanto a primeira teve como foco o funcionamento das ONGs.
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
Apesar de o número de adoções ser alto, a taxa de adoção através de ONGs é muito baixa
Apesar de o número de adoções ser alto, a taxa de adoção através de ONGs é muito baixa
Apesar de o número de adoções ser alto, a taxa de adoção através de ONGs é muito baixa
Público feminino tem mais interesse em morar com pets
Público feminino tem mais interesse em morar com pets
Público feminino tem mais interesse em morar com pets
74% do público que consome produtos ou serviços para pets não tem filhos.
74% do público que consome produtos ou serviços para pets não tem filhos.
74% do público que consome produtos ou serviços para pets não tem filhos.
Donos de animais domésticos tem entre 30 e 45 anos
Donos de animais domésticos tem entre 30 e 45 anos
Donos de animais domésticos tem entre 30 e 45 anos
75% dos donos de pets são mulheres, pós-graduadas, casadas
75% dos donos de pets são mulheres, pós-graduadas, casadas
75% dos donos de pets são mulheres, pós-graduadas, casadas
E busquei por concorrentes, identificando o que as outras ONGs oferecem em suas plataformas digitais e o que seus usuários dizem sobre os serviços.
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
Os filtros existentes não são suficientes para encontrar o futuro pet com facilidade
Os filtros existentes não são suficientes para encontrar o futuro pet com facilidade
Os filtros existentes não são suficientes para encontrar o futuro pet com facilidade
A inscrição para adoção de um pet deveria ser mais fácil
A inscrição para adoção de um pet deveria ser mais fácil
A inscrição para adoção de um pet deveria ser mais fácil
Nem todos os sites/apps tem informações suficientes sobre os animais
Nem todos os sites/apps tem informações suficientes sobre os animais
Nem todos os sites/apps tem informações suficientes sobre os animais
Nem todos os sites/apps tem formulário de interesse em adoção
Nem todos os sites/apps tem formulário de interesse em adoção
Nem todos os sites/apps tem formulário de interesse em adoção
De todas as adoções de animais, apenas uma taxa baixa foi feita por ONGs
De todas as adoções de animais, apenas uma taxa baixa foi feita por ONGs
De todas as adoções de animais, apenas uma taxa baixa foi feita por ONGs
Wireframes
Guia de Estilos
Ao analisar os concorrentes e construir um moodboard, percebi que era possível implementar melhorias na interface do site mobile, assim como aplicar os mesmos padrões no protótipo do site para desktop, que ainda não havia sido construído.
Então, para iniciar a construção dos protótipos com mudanças de UI Design, elaborei um guia de estilos.
Ao analisar os concorrentes e construir um moodboard, percebi que era possível implementar melhorias na interface do site mobile, assim como aplicar os mesmos padrões no protótipo do site para desktop, que ainda não havia sido construído.
Então, para iniciar a construção dos protótipos com mudanças de UI Design, elaborei um guia de estilos.
Ao analisar os concorrentes e construir um moodboard, percebi que era possível implementar melhorias na interface do site mobile, assim como aplicar os mesmos padrões no protótipo do site para desktop, que ainda não havia sido construído.
Então, para iniciar a construção dos protótipos com mudanças de UI Design, elaborei um guia de estilos.
Teste de Usabilidade
Executei testes de usabilidade em que os participantes executaram tarefas no portfólio em alta fidelidade navegável. No total, 10 pessoas participaram do teste.
Os principais insighs foram:
Pontos positivos identificados:
Facilidade de uso
Facilidade de uso
Facilidade de uso
Filtros importantes listados
Filtros importantes listados
Filtros importantes listados
Informações do sobre o pet bem explicadas, favorecendo a tomada de decisão
Informações do sobre o pet bem explicadas, favorecendo a tomada de decisão
Informações do sobre o pet bem explicadas, favorecendo a tomada de decisão
Layout clean e objetivo
Layout clean e objetivo
Layout clean e objetivo
Pontos de melhorias identificados:
Faltou informações sobre microchip
Faltou informações sobre microchip
Faltou informações sobre microchip
Faltou espaço para enviar donativos
Faltou espaço para enviar donativos
Faltou espaço para enviar donativos
Muitos detalhes em roxo
Muitos detalhes em roxo
Muitos detalhes em roxo
Obrigada por ler!
Obrigada por ler!
Obrigada por ler!
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Outros projetos
Neotrust
2024
Fluxo de pagamento de boletos
Mobile
Style Guide
UI
Finanças
Wireframe
Fluxo de usuário
Neotrust
2024
Fluxo de pagamento de boletos
Mobile
Style Guide
UI
Wireframes
Fluxo de usuário
Fluxo de usuário
Neotrust
2024
Fluxo de pagamento de boletos
Mobile
Style Guide
UI
Finanças
Wireframe
Fluxo de usuário
TraduCapes
2024
Fluxo de pagamento de boletos
Redesign
Deskop
UI
Hackathon
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
