Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
Projeto dígito-virtual sob o tema PETs
Web Pet
Equipe
Lucas Wurlitzer Daniel, Marcos Roberto Shiomi Ceratti
Orientador(es)
Heli Meurer, manoela trava dutra, Gabriel Carpenedo
14 de Março de 2017
Web Pet

Contextualização

Infografico

Infográfico do desenvolvimento do web aplicativo para disciplina de projeto IV, com tema principal PETS.

Definição e escolha do tema

Propostas de projeto digital

Campanha digital de adoação

Proposta de criação de uma "aplicação web" interativo, com conteudo social focado na adoação de animais carentes, utilizando metodos de UX, (experiencia do usuario) Sera possivel projetar um produto inovador de baixo custo e dentro do prazo estipulado, o objetivo é chamar a atenção do publico alvo atravez de uma experiência interativa e divulgar a campanha de uma maneira inovadora, 

Refêrencia de experiencia: Google - Além do Mapa

 ----------------------------------------------------------------------------

dogON

Aplicação web onde será possivel criar um perfil do seu pet, com fotos, idade informações de tosa, data de vacinas dentre outros. A ideia do projeto é utilizar conceitos de gamefication para desenvolver o planejamento do produto visando maior interatividade do dono com seu animal de estimação. Informações em cards com graficos e barras de progresso de evolucao, dicas.

Por exemplo, o cachorro possui estatísticas como: fome, diversão, descanço, banho. Quando você passeia com seu cachorro e brinca com ele, a fome aumenta e a diversão também, a barra de descanço e banho diminuiem. Digamos que tu dê um banho a cada 2 semanas no seu cachorro, no dia que você der banho nele, a barra de banho vai para o máximo. Depois de uma semana, a barra estará pela metade. O app pode notificar dizendo que daqui a tantos dias você precisa dar banho no seu cachorro.

A ideia é que o dono vá alimentando o app com informações e ações.

No cadastro, você pode inserir o número do seu veterinário. Assim, no seu perfil, possuirá um botão "Emergência". Caso aconteça algo com seu cachorro basta apertar esse botão e ele ligará automaticamente com seu veterinário.

Refêrencia de experiencia: 

----------------------------------------------------------------------------------------------------

 

Aplicativo "Bom pra cachorro"

Aplicativo mobile, onde é possivel monitorar seu Pet durante suas férias, o usuario recebe um acesso ao deixar seu pet no estabelecimento e assim pode acompanhar remotamente os horarios de lazer, sono e alimentação a partir da visualizacao por cameras atravez de um sistema de transmissao streming, ao vivo.

Refêrencia: Camerite

 

Mapemanto de pets perdidos / EncontreMeuAmigo / CadeMeuPet?

API google maps onde usuarios podem cadastrar bairro ou regiao pet para outros usuarios do aplicativo recebem alertas de pets perdidos perto de sua localizacao, construindo uma ancora digital, juntando fatos e informações contribuindo para identificar e localizar seu animal perdido.

Refêrencia: petts.me

 

 

Web Pet

Desconstrução e Verificação

Similares e Referências

Foi desenvolvida uma atividade durante em sala de aula, com o objetivo realizar um mapeamento de analise de quatros aplicativos, sendo dois deles referencias e dois similares.

Utilizando uma cartolina foi desenhado uma grade com tamanho exato do post-it para em seguida, desenvolver uma rápida analise dos concorrente no mercado destacando pontos positivos e negativos de cada aplicação escolhida, com os post-its "verdes" foi observado diversos pontos positivos, que podem ser relevantes durante o desenvolvimento do projeto e com os post-its "vermelhos" foi destacado pontos negativos, melhorias ou erros observados durante a fase de desconstrução. Além disso, cada seção da analise recebeu uma nota de "1 - 5" classificando os aplicativos.

Resultado da atividade de analise de referencias e similares.

Trello

Usabilidade: Nota (4)

Pontos Positivos

  • Aplicativo fácil de usar,
  • sistema de grind facilita visualização das tarefas
  • Aplicativo responsivo, funciona bem tanto no desktop quanto no mobile

Pontos Negativos

  • Não apresenta Hierarquia da informação clara,
  • Sistema de pode confundir o usuario novo

 

Funcionalidade: Nota (4)

Pontos Positivos

  • Grade de funções completa, oferece diversas ferramentas para ajudar do desenvolvimento de projetos
  • É possivel convidar novos integrantes para compor a equipe
  • Possui sistema de check list para facilitar tarefas concluidas

Pontos Negativos

  • Apesar do aplicativo oferecer diversas ferramentas,não é possivel anexar "cards" de um projeto por e-mail
  • Grande numero de informações na tela principal pode dificultar a usabilidade

 

Identidade: Nota (5)

Pontos Positivos

  • Identidade descontraida
  • Utiliza personagem descontraido, que ajuda a realizar as tarefas e orienta como utilizar o aplicativo
  • Sistema de grind 

Pontos Negativos

  • Falta personalização pessoal
  • Falta configurações pessoais para cada tarefa, para distinguir entre elas

Asana

Usabilidade: Nota (3)

Pontos Positivos

  • Procedimento para criar tarefas e novas atividades são faceis de executar

Pontos Negativos

  • O app é um pouco confuso
  • Possui bastante ferramentas mas leva tempo para compreender ae aprender a utilizar todas as ferramentas disponiveis

 

Funcionalidade: Nota (4)

Pontos Positivos

  • Possui um grande numero de funções e ferramentas 
  • Todas as ferramentas funcionam muito bem, sem apresentar erros.
  • É possivel tamabem marcar usuarios em pontos especificos do projeto, 
  • Possivel anexar qualquer tipo de arquivo em qualquer comentario ou etapa do desenvolvimento do projeto.

Pontos Negativos

  • Devido grande numero de funções e configurações acaba sendo bastante complexo de aprender
  • O aplicativo é responsivo, mas para melhor experiencia do usuario é necessario baixar o aplicativo no celular, na versão mobile.

 

Identidade: Nota (3)

Pontos Positivos

  • A paleta de cores é bem resolvida
  • É possivel personalizar qualquer tarefa, com cores e marcações

Pontos Negativos

  • O layout é bastante confuso
  • Não apresenta hierarquia clara, dificultando a visualização das tarefas

 

Google Now

 

Usabilidade: Nota (5)

Pontos Positivos

  • O aplicativo tem boa usabilidade
  • Aplicativo intuitivo
  • Configurações simples de executar
  • Funicona muito bem tanto no desktop quanto na versãono mobile

Pontos Negativos

  • Não foi possivel identificar 

Funcionalidade: Nota (5)

Pontos Positivos

  • Mapas
  • Rotas
  • Noticias
  • Temperatura
  • Tempo de deslocamento
  • Configurações de contas
  • Perfil

Pontos Negativos

  • Falta configurações para Feeds com "tags" personalizadas

Identidade: Nota (5)

Pontos Positivos

  • Identidade bem resolvida
  • Design Clean
  • Cores claras e contraste forte 
  • Sistemas de cards facilita navegação de informações que o aplicativo apresenta 

Pontos Negativos

  • Marca mutavel, identidade pode ser confusa para usuarios que não são familiarizados com sistema

TV Show Time

Usabilidade: Nota (5)

Pontos Positivos

  • Aplicação bastante intuitiva
  • Resposivo
  • Possui um icone de "olho" que é possivel marcar seriados ou episodios já assistidos
  • Ações podem ser revertidas com um clique

Pontos Negativos

  • Não possui tradução para PT-BR
  • Dificuldade na navegação devido restição de linguagem

Funcionalidade: Nota (5)

Pontos Positivos

  • Aplicação informa qua
  • Notificação de lançamento de novas séries e episodios
  • Possivel adicionar amigos para saber o que estão assistindo
  • Permite comentarios em cada episodio, apos marcar como "visto"

Pontos Negativos

  • Não é possivel assistir os seriados na plataforma do aplicativo
  • Não existe notificação por e-mail, feed ou RSS

Identidade: Nota (4)

Pontos Positivos

  • Elegante
  • Aplicativo em tons de preto e cinza
  • Cor complementar é Amarela, produzindo bom contraste com a marca
  • Logotipo simples,
  • Capas das séries com imagens bem destacadas

Pontos Negativos

  • Não possui configuração de linguagem, disponivel somente em inglês

Conclusão das Análises

Essa foi a lista que desenvolvemos com os pontos positivos avaliados nos similares e referências.

• Sistema de grid facilita visualização das tarefas

• Aplicativo responsivo, funciona bem tanto no desktop quanto no mobile

• Possui sistema de check list para facilitar tarefas concluídas

• A paleta de cores é bem resolvida

• É possível personalizar qualquer tarefa, com cores e marcações

• Aplicativo intuitivo

• Configurações simples de executar

• Mapas

• Rotas

• Notícias

• Temperatura

• Tempo de deslocamento

• Configurações de contas

• Perfil

• Identidade bem resolvida

• Design Clean

• Ações podem ser revertidas com um clique

• Notificação de lançamento de novas séries e episódios

• Elegante

 

• Logotipo simples

Verificação

Web Pet

Reconstrução

Storytelling

Ronaldo e Bob

Ronaldo tem um cachorro chamado Bob. Ronaldo é muito esquecido, adora seu pet, mas tem problemas em lembrar os dias das vacinas, banhos e tosas, devido ao seu grande número de atividades diárias. Através de um amigo, Ronaldo conheceu o app chamado DogOn. Imediatamente, ele baixou o aplicativo e preencheu o formulário de cadastro com os dados do Bob. Esse formulário pedia datas das últimas vacinas, o peso do cachorro, quantos banhos ele toma por mês, quantas vezes ele é alimentado por dia, dentre outros. Após preencher esses dados, Ronaldo viu que ele acaba de criar um perfil para seu pet. Não demorou muito para que ele fosse notificado que o dia do banho estava chegando.

Atrapalhado como de costume, ele não lembrava qual pet era mais próxima de sua casa. Logo ele abriu o DogOn e pesquisou onde ficavam as petshops mais próximas, criou uma rota e levou o Bob para seu banho. Ao caminhar até a petshop junto com seu cachorro, Ronaldo recebeu uma notificação do aplicativo, de que tinha ganho uma medalha e evoluído para o nível dois. O motivo dessa conquista, foi devido a ele ter passeado com o Bob por 1km. Assim, Ronaldo percebeu que ao passear, brincar, alimentar o seu pet, ele receberia recompensas na plataforma, tornando assim essa rotina de cuidar do seu bichinho, muito mais divertida. Depois de receber sua primeira conquista, Ronaldo ficou empolgado com o game app, começou a passear e brincar muito mais com seu cachorro, destacando-se no ranking entre seus amigos. Hoje, Ronaldo usa bastante o aplicativos para lembrar de seus afazeres com seu amiguinho e compartilhar suas conquistas com seus amigos.

 

Wireflows com Caso de Uso

Web Pet

Identidade, Diferenciação e Protótipo

Fator Uau! ou fator AU AU - no nosso caso...

Essa etapa do projeto permitiu espremer toda inspiração e criatividade desenvolvida durante a metodologia de desenvolvimento de projeto, abordado durante a aula do professor Heli, após as análises de semelhantes e referências ficou explícito a falta de "resposta de interação" imediata por parte dos aplicativos observados.

A principal ideia do dogon é notificar o usuário sempre que realiza alguma ação na plataforma, através de cards, barra de experiência e notificações em pop-up. Para isso foi desenvolvido um componente, a "barra de necessidade", com três linguagens web, HTML 5 que define a estrutura do componente, CSS3 que personaliza as cores e define tamanhos volumes, dentre outros, o Bootstrap framework que permite responsividade nos dispositivos mobile e o JavaScript para adicionar animações e scripts de interação que funciona tanto no desktop quanto no mobile.  

Definição do diagrama de construção

O grid têm a proposta de ser uma ferramenta de ordem e arranjo de elementos visuais, uma forma estudada de se resolver visualmente uma composição e obter coesão no layout.

Optamos por utilizar como resolução padrão, a resolução do iPhone 4. Pois ela é a menor resolução dentre os smartphones mais utilizados hoje em dia. Assim, mesmo as pessoas que possuem smartphones pequenos, poderiam usufruir da melhor maneira do nosso app.

 iphone4.jpg

 

As medidas do grid que adotamos, foi para facilitar o uso de textos caso necessário. Com um grid de quatro colunas, conseguimos desenvolver textos de 2 ou 4 colunas, dependendo do tamanho de texto e sem grandes problemas com alinhamento.

 iphone42.jpg

 

Lembrando que nosso aplicativo tem o intuito de ser de fácil leitura, assim normalmente utilizaremos as 4 colunas como padrão de texto. O app é centralizado, com sua base em "cards" com grandes imagens. Portanto novamente o padrão utilizado será de 4 colunas.

 

iphone43.jpg

Assinatura Visual

Dogon Logo.jpg

Cores

A cor depende da luz e a forma como é absorvida e refletida em uma determinada superfície. Os olhos vão captar as ondas eletromagnéticas que são refletidas e dependendo dos seus comprimentos de onda, vemos cores diferentes. No nosso cérebro, as cores podem despertar certas sensações e por isso as cores têm significados diferentes.

O este tom de laranja, significa alegria, descontração e vitalidade, que possui bastante ligação com os sentimentos dos nossos pets perante seu dono.

E o marrom, além de significar seriedade e integridade, também lembra a pelagem dos animais de estimação.

O tom de laranja faz bastante contraste com o marrom, obtendo uma boa legibilidade dos elementos.

O branco é usado para a neutralizar e clarear os elementos.

 

Cores.jpg

Tipografia

roboto.jpg

Ícones e Pictogramas

fonts.jpg

Telas do sistema

telas.jpg

Protótipo

Versão Mobile

 

 

Versão Desktop

Diferenciação

Após apresentar o protótipo do DogOn para 20 pessoas, homens e mulheres com a faixa etária de 15 à 55 anos, foi solicitado que essas pessoas apontassem onde melhor se encaixava o aplicativo conforme suas experiências com o mesmo.

A maioria dos usuários optou por marcar entre descontraído e moderno. A ideia do nosso app era para ser Descontraído e Moderno. Após a pesquisa, concluímos que o objetivo foi alcançado.diferenciação.jpg

Considerações finais

Enfim, após muitas semanas de pesquisas e trabalho duro, conseguimos finalizar o aplicativo. Tivemos diversas complicações com o número de elementos para um espaço tão pequeno, e também para fixar bem os conceitos tomados desde o início do projeto.

Em paralelo às atividades de aula propostas, mantivemos em ativo a produção do aplicativo em códigos. Tudo isso para melhorar a experiência do protótipo e também para criarmos para nós mesmos um desafio bastante difícil.

A parte em que tivemos mais facilidade, foi na de trabalho em grupo. Com as diferentes habilidades que ambos da dupla possuem, foi mais simples de executar as tarefas mais práticas.

Uma das grandes dificuldades foi a de criar ele completamente responsivo, para ser usado tanto em navegadores de desktop quanto no mobile. Também as pesquisas de como posicionar os elementos de forma ergonômica, para que ficasse fácil de usar em qualquer smartphone.

Foi de grande aprendizado o trabalho em equipe, pois tivemos que trabalhar das duas formas, juntos na mesma sala, e separados através da internet. Eram duas cabeças tentando entender conceitos e projetar de forma sincronizada, seguindo a metodologia solicitada em aula.

 

 

Web Pet

Referências Bibliográficas

Recomendadas e Aceitas

Gerais