Adote.me by Anhembi Morumbi

Plano Executivo Projeto interdisciplinar: Design e ExperiĂŞncia 2016/ 1

Caio Paschoa Gustavo Almeida Lucas Santos Rafael Salles

3 3

Sumário 1. Introdução 2. Público Alvo 3. Conceito de Criação 4. Estratégia de Comunicação 5. Design de Navegação 6. Design de Informação 7. Design de Interface 7.1 Linguagem Visual 7.2 Paleta de Cores 7.3 Tipografia 7.4 Ilustração 7.5 Personagens/Avatares 7.6 Vídeo

8. Linguagem Sonora 9. Design de Interação 10. Conjunto de Tecnologias 5

7 9 15 19 23 27 31 39 43 45 49 51 55 59 61 67

1. 6 16 8

Introdução Atualmente estamos vivendo na era do ciberativismo, onde as pessoas, por meio da Internet e redes sociais, conseguem propor movimentos, protestos e incentivo para causas. Um grande exemplo atual é as revoltas do Oriente médio que ficou conhecido como Primavera Árabe. Como proposta ciberativista nós levamos o tema para algo mais próximo da realidade no Brasil, o abandono de animais. Estudos levantados apontam que existem mais de 30 milhões de animais abandonados entre cães e gatos por todo o país, e mesmo com esse número o número de adoções ainda é muito pequeno e o mercado de compra e venda de mascotes só aumenta. Nossa proposta é incentivar a adoção de animais, usando das novas tecnologias, como um aplicativo que serve de ponte entre as ONGs e os usuários que desejam adotar um animal ou simplesmente conhecer nosso trabalho, fora uma versão do mesmo aplicativo para internet usamos também das redes sócias para divulgação de informações sobre o projeto e sobre eventos de adoção feitos pelas ONGs companheiras do Adote.me.

2. 16 8 10

Público Alvo Nosso público alvo é bem diversificado variando desde uma criança até uma pessoa de idade, mas o perfil buscado primeiramente é daquela pessoa entre os 22 a 35 anos com uma estabilidade financeira que provavelmente já está na fase da vida onde se tem ou busca um lugar para morar sozinho. Esse é o público que na maioria das vezes procura uma mascote para lhe fazer companhia. Essa pessoa normalmente não possui muito conhecimento sobre os benefícios de uma adoção ou dos problemas atuais em que o país se encontra em relação ao abandono de animais, e mesmo quando tem pode não saber como ajudar. Como público alvo secundário pensamos naquelas famílias que buscam uma mascote para seus filhos, as crianças teriam acesso a nossa aplicação por meios dos pais ou por conta própria, acarretando na conscientização sobre a causa, tanto para os pais quanto para as crianças.

Um exemplo perfeito desse público é a Clara, 23, que está saindo pela primeira vez da casa dos pais e por não querer se sentir sozinha, procura um animal para lhe fazer companhia, já que não pretende dividir sua casa com outras pessoas. Ela, apesar de estar envolvida em movimentos sociais, ainda sabe muito pouco da causa animal, e ainda acredita que os animais vivendo em abrigos são doentes ou possuem alguma característica que os impeçam de encontrar um lar. Outro fator que colabora para a decisão dela em não adotar animais abandonados é acreditar no senso comum de que animais mais velhos já não são mais sociáveis e dificilmente se adequarão à nova família, pois ela não tem muito tempo livre e um filhote ou animal muito novo não seria possível para ela.

Clara 23 anos Mora em casa Procura por um amigo NĂŁo sabe como adotar

Para exemplificar o público alvo secundário, pensamos no Gustavo, 7. Para o Gustavo, viver em apartamento não é divertido, já que nunca lhe foi permitido ter um animal, pois seus pais acreditam que eles não servem para viver nesses tipos de espaço, enquanto que as leis a respeito de animais dentro do condomínio só diminuem ainda mais sua propensão a adotar algum cachorro (Gustavo prefere cachorros à gatos, aparentemente).

Gustavo 7 anos Mora em apartamento Procura por um amigo NĂŁo sabe como adotar

3. 14 16

Conceito de Criação Na área de design, a experiência, cujo qual foi definida como tema de projeto interdisciplinar deste semestre, pode ser facilmente ligada à movimentos ativistas e ao atual Ciberativismo. Por definição, ativismo é o ato de tomar medidas para efetuar a mudança social; isto pode ocorrer em uma infinidade de formas e numa variedade de formas. Muitas vezes, se preocupa como mudar o mundo através de mudança social, política, econômica ou ambiental. Isto pode ser conduzido por indivíduos, mas muitas vezes é feito coletivamente através de movimentos sociais. Sendo assim, o Ciberativismo é uma forma de ativismo pela internet, também chamada de ativismo online ou digital em alguns casos.

Por acreditar que este novo veículo pode alcançar pessoas até então distantes do ativismo tradicional, propusemos a adoção de animais abandonados, problema sistêmico e ainda bastante ignorado por um grande número de pessoas, com esse ciberativismo podendo vir a acrescentar sua ajuda à causa. Como muitas das informações sobre os órgãos públicos de adoção, veterinária e centro de zoonoses ainda são desconhecidas pela maioria, prezamos passar a informação junto a uma ajuda para com estes animais, desde um ato de adoção, doação para ONG ou até o apadrinhamento de animais, hoje possível graças ao serviço de instituições especializadas em recolher e ajuda-los.

4. 18

Estratégia de Comunicação Nosso objetivo é atrair o maior público possível, logo é necessário usar uma linguagem amigável, e, decorrente do público alvo definido, que soe como um pedido sincero e amistoso, para que a atenção necessária seja dada, sendo essa atenção muito importante num tema que vem sido deixado de lado conforme o passar dos últimos anos. Essa linguagem ficará clara nas peças, principalmente as auxiliares, como os cartazes com informações a respeito do projeto e do problema de adoção de animais atual do Brasil, além de uma página no Facebook. Como a divulgação pela página é algo que atinge diretamente nosso público alvo, conseguiremos manter uma comunicação direta ao mesmo tempo em que recebemos um feedback rápido para melhorar nosso trabalho. Já para os cartazes, o objetivo é divulgar o aplicativo e a causa, e planejamos colocá-los em lugares de bastante movimento, como os elevadores da faculdade, atraindo assim a atenção das pessoas.

Pรกgina do Facebook do Adote.me

5. 22 20

Design de Navegação O design de navegação tanto do aplicativo quanto site foi elaborado e pensado para ser de uma forma simples e intuitiva para o usuário. Uma navegação induzida de início, mas ao decorrer do uso o pode guiar-se e navegar pelo menu central dentro do aplicativo, já no site a navegação é linear desde o começo, exceto pela parte de adoção, parte adaptada do aplicativo para o site.

APLICATIVO

SITE

6. 20 24 26

Design de Informação O conteúdo de cada tela tanto do site quanto do aplicativo envolve as informações fornecidas pelo usuário na hora do cadastro e as informações sobre animais disponíveis para adoção fornecidos pelas ONGs. Dentro do site encontra-se desde textos informativos sobre a preocupação com animais abandonados e informações de como funciona o Adote.me. Por fim no aplicativo o conteúdo é voltado para os animais para adoção e as perguntas respondidas pelo usuário para filtrar o seu pet ideal e para definir um parâmetro de usuário disponibilizado para a ONG na hora da adoção.

7. 20 28 24 30

Design de Interface As interfaces do Adote.me foram baseadas nos padrões atuais de aplicativos de relacionamentos como o Tinder e Bumble, que são caracterizados pela lista de pessoas segundo seus interesses que serão exibidos um por um até que o usuário escolha alguém de seu interesse para interagir. Porém em nosso aplicativo os usuários serão apresentados a uma lista de animais onde no qual o mesmo escolherá para ver mais informações e adotar. O site, como uma adaptação para internet, seguirá o mesmo padrão, mas com suas limitações visuais e sua segunda função principal que é a divulgação e explicação de como funciona o aplicativo.

Assim como usamos de referência os aplicativos de relacionamentos, usamos como base a nova tendência de logos simplificados e minimalistas assim mantendo a mesma identidade visual para um aplicativo e uma marca. E por fim para as ilustrações que caracterizam o Adote.me usamos como referência o trabalhos e ilustrações do ilustrador brasileiro mundialmente conhecido, Henrique Lira, que utiliza cores vivas em desenhos característicos como de desenhos animados, mas com uma técnica de pintura que leva a uma seriedade e realismo a ilustração.

Interfaces do aplicativo Tinder

<Fonte: https://www.gotinder.com/>

Interfaces do aplicativo Bumble

<Fonte: https://bumble.com/pt/>

Ilustração The Girl and the Chickowl Henrique Lira.

<Fonte: https://www.behance.net/henriquepl>

Ícones de aplicativo. Twitter e Twitch TV.

Interfaces do Adote.Me

PrintScreen do aplicativo Adote.me

PrintScreen do Site do Adote.me

7.1 38

Linguagem Visual Como linguagem visual para o projeto usamos como base para as interações de interface e logo o design flat, design plano, com características simples e artes sem muitos detalhes e profundidade, mas ainda passando a mesma sensação e mensagem. Uma referência clara ao design flat foi em nossa logo na qual buscamos passar o sentimento de que ao se adotar um animal, este é o primeiro sinal de amor dado à ele, por isso a junção de um cão e gato formando um coração representa muito bem o Adote.me. As ilustrações feitas por nós remetem a histórias dentro da experiência do projeto, como durante os questionários e o vídeo de divulgação, tendo seus próprios propósitos que são diferentes do flat design utilizado, mas sem que haja um conflito entre eles.

Logo do Adote.me

7.2 20 42

Paleta de Cores Dentro da paleta estão as cores que predominam na ilustrações feitas por nós e nas interfaces do aplicativo e do site, cores chapadas e que dão ênfase e atenção para as ilustrações ao mesmo tempo em que situam o usuário dentro da interface. Para manter a identidade visual, essas cores serão utilizadas em outras peças do projeto, como os cartazes de divulgação e as publicações da página do Facebook.

7.3 20 24 44 38

Tipografia Escolhemos a Montserrat Light para textos corridos, por ser uma fonte leve, fina e que não cansa ao ser usada em blocos de texto, já a Pixel Master servirá para auxiliar a trazer a aparência de jogo nas partes em que isso se mostra necessário (os questionários que podem alterar o rumo do usuário dentro do aplicativo).

MontSerrat Light abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789(!@#$%&.,?:;)

PixelMaster abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789(!@#$%&.,?:;)

7.4 20 40 24 28 48

Ilustrações Decidimos por usar ilustrações próprias, com um traço mais simples e que cativam o público. Os animais desenhados, um cachorro e um gato, cumprirão alguns papéis, como serem: os guias dos usuários através da navegação pelo aplicativo, e as mascotes do projeto, aparecendo em todas as peças. Além disso, para o vídeo de divulgação, os cenários também serão desenhados por nós, mantendo a mesma identidade.

Ilustração própria, Cachorro e Gato, Mascotes do Adote.Me

7.5 42 50 38

Personagens/Avatares Ilustrações dos animais e de personagens em estilo pixel art que podem ser escolhidos pelo usuário, deixando a identidade visual mais parecida com a de um game, este é um dos recursos de gameficação utilizados no aplicativo. Essa função de personagem é uma recompensa pelo usuário estar utilizando o Adote.me, o mesmo personagem é acompanhado por uma mascote assim que o usuário realiza alguma função de adoção por meio do aplicativo, podendo compartilhar esta conquista no Facebook.

Personagem desenvolvido em Pixel Art

7.6 20 46 54

Vídeo O video de divulgação do projeto é uma pequena história em que mostra um cão abandonado tentando encontrar um lar e é adotado por um humano, seguido dessa introdução é apresentado o logo e nome do projeto. A intenção de fazer essa introdução com uma pequena historia é causar o sentimento de empatia em quem está assistindo.

Imagens do vĂdeo

8. 20 48 24 58

Linguagem Sonora Ao optarmos por não utilizar som dentro do aplicativo (e, consequentemente, no site), prezamos pela simplicidade da peça e a certeza de que a experiência do usuário acontecerá sem qualquer interrupção, algo que não aconteceria com sons, pois estes poderiam confundir ou tirar a atenção do que realmente importa. Já no vídeo, o som está presente em quase toda sua exibição, começando por sons diegéticos pertencentes à animação, como o de um animal arranhando uma porta, passos sobre a madeira, ou o latido de felicidade de um cachorro. Além destes sons, o vídeo também apresenta outros, na exibição do logo do projeto e algumas outras informações importantes, estes são os sons de transição dos objetos em cena, que criam um dinamismo e aumentam a sensação de imersão de quem assiste.

9. 20 40 50 24 28 60

Design de Interação Nosso projeto visa sustentar um nível de interação que seja acessível até mesmo aos usuários leigos, através da objetividade dos links, que se distribuem de forma arborescente. A interatividade do projeto ocorre de forma assíncrona distribuída, aonde a interação do usuário resulta num feedback que o redireciona às próprias ONGs. Fora a interação com as ONGs, existe a interação com gameficação, onde o usuário será recompensado com a mudança de um personagem básico recebido ao iniciar no aplicativo, essa mudança só ocorrerá quando o mesmo fizer uma adoção ou uma divulgação, esse novo personagem recebido terá uma tela de exibição própria e onde o usuário poderá compartilhar em sua conta do Facebook.

Menu Superior Permite que você navegue entre outras telas livremente

Conhece pet ideal Trás perguntas algumas perguntas que irão filtrar uma lista de animais compativeis com suas respostas

Ver Animais Estes botões permitem que você veja todos os cães e gatos disponíveis para adoção

Configurações do Perfil Permite que você faça alterações em seu perfil, como senha ou e-maill

Alterar Avatar Permite que você visualize seu avatar e também altere ele coforme seu gosto

Compartilhar Após o confirmação do envio uma tela será exibida com uma saudação do Adote.me e a possibilidade de compartilhar este momento com o facebook

10. 56 42 38 66

Conjunto de Tecnologias Utilizamos vários programas do pacote adobe que já estamos bastante acostumados, entre eles: Photoshop, para criação dos layouts do aplicativo e dos cartazes; Illustrator, para vetorizar imagens que foram inseridas no trabalho; InDesign para formatar e diagramar este Plano Executivo; Dreamweaver para programar e estilizar o site; e AfterEffects para produzir a vinheta de apresentação do projeto. Além disso, usamos o programa de desenvolvimento de aplicativos da Intel, o Intel XDK, para a criação do aplicativo, pois foi o que apresentou a linguagem mais amigável para nós.

E para armazenar as informações importantes, tanto dos usuários cadastrados quanto dos animais disponíveis, utilizaremos o banco de dados do MySQL, através da linguagem PHP. E por fim, para o sistema responsivo e desenvolvimento de versões mobile, o framework Bootstrap também foi utilizado, por já estarmos familiarizados com o mesmo, através das aulas dadas durante o semestre.

Produzido por: Caio Paschoa Gustavo Almeida Lucas Santos Design Digital Universidade Anhembi Morumbi 2016