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