Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
UX Design - Perfis de Atuação
Mapa de Curiosidades Sobrenaturais
Equipe
Carolina Silva da Silva, Fernanda Magnus, Júlia Nunes, Lucas Stimamilio de Barcellos
Orientador(es)
Heli Meurer, Andréa Capra, Luciana Hahn Menezes
11 de Setembro de 2018
Mapa de Curiosidades Sobrenaturais

Observação

Definição do Tema

Definição do tema: RESUMO DO APP

Se você gosta muito de história e lendas, especialmente as sobrenaturais, então esse aplicativo é para você. Nosso aplicativo terá um mapa que funcionará como uma espécie de guia destacando locais onde houveram relatos de aparições, assassinatos e/ou que possuem lendas urbanas ligadas a ele.

O mesmo também possui um tipo de enciclopédia, pois quando você tocar no local marcado no mapa, poderá ler mais sobre o ocorrido naquela área e também possibilitará a comunicação entre usuários para tirar dúvidas, relatar casos pessoais e conhecer pessoas com os mesmos interesses que o seu. 

Nosso objetivo em relação à criação desta ferramenta é de instigar a curiosidade, agregar conhecimento, conectar pessoas, incentivar a leitura e acima de tudo, divertir os seus usuários fornecendo-os um local fácil e seguro para exercerem o seu fascínio por assuntos mais inusitados.

Cenário

Cenário: QUEM, ONDE, QUANDO E PORQUE?

como22.png

 

*Google Trends é uma ferramenta do Google que mostra os mais populares termos buscados em um passado recente.

 

Este aplicativo seria focado não só para aventureiros, mas para aqueles que buscam novas relações e interatividade com outras pessoas, permitindo que seus interesses em comum fossem o ponto de partida para que surgissem novas amizades e, acima de tudo, troca de informações. 

Personas e Mapa de Empatia

Personas: 

Fizemos uma análise baseada no nosso público-alvo e a partir das personalidades distintas de Enzo, Valentina e Anira, criamos uma atividade para cada uma dessas personas e traçamos suas maiores necessidades. 

 

persona22.png

 

 

Mapa de Empatia:

Procuramos nos aprofundar a respeito de cada persona; no seu interior, sua personalidade, estilo, anseios e como a sociedade as enxerga. A individualidade de cada um fez com que pudéssemos pensar de forma mais ampla e objetiva, visando criar um aplicativo que sirva para todo nosso público. 

 

  • Nome: Enzo
  • Idade: 25 anos

mapa-empatia.png

 

  • Nome: Valentina
  • Idade: 20 anos

mapa-empatia2.png

 

  • Nome: Anira
  • Idade: 16 anos

mapa-empatia3.png

 

 

Proposta de Valor para o Usuário

Proposta de Valor:

Para fazer esta etapa, decidimos usar uma persona principal que representasse as três. Portanto, escolhemos o Enzo, pois achamos que se encaixa melhor para categorizar as informações dos usuários, abrangendo todas as necessidades. A proposta fez com que conseguíssemos traçar benefícios dos dois lados e satisfazer nossos clientes.

proposta-de-valores.png

Modelo de Negócios

Modelo de Negócios:

Depois de escolhermos a ferramenta que seria utilizada para a prototipagem de nossas ideias, nós começamos a pesquisar em sites de estratégias de marketing, venda, dicas de como estruturar uma empresa e especialmente como fazer um aplicativo gratuito ser lucrativo, pois acabamos percebendo que a mão de obra para tirar essa ideia do papel e mantê-la com um alto nível de excelência para os usuários seria impossível sem que o App produza, pelo menos, uma renda satisfatória para cobrir os gastos criados por ele.

 

negocios.png

Mapa de Curiosidades Sobrenaturais

Análises

Termos Pertinentes ao Projeto

Termos Pertinentes:

Selecionamos dez termos que acreditamos ter afinidade com o tema do nosso projeto, e a partir dele buscamos seus significados, acrescentando também uma análise com referências visuais e literárias de cada palavra.

 

referencias.pngreferencias22.png

Similares e Referências

Tabela de similares e referências:

Ao selecionarmos seis aplicativos que achamos essenciais para estudar e comparar, criamos uma tabela/infográfico com diversas informações sobre cada um deles, tais quais a avaliação, um resumo do APP e seus lados positivos e negativos em termos técnicos e visuais. Tudo isso nos possibilitou ter uma visão mais ampla sobre nossa funcionalidade e como defini-la melhor. 

 

tabela.png

 

Prints de tela dos similares e referências:

Realizamos um estudo com intuito de nos aprofundarmos mais, tanto no layout, quanto na organização das informações. Portanto, foi marcado em rosa as principais funções de cada aplicativo.

Para que essa tarefa fosse possível, decidimos faze-los em forma de gif para melhor compreensão, menos poluição e mais espaço. 

 

  • Creepypasta

Porque similar? O aplicativo é feito com viés de entretenimento, para que se leia e publique histórias sobrenaturais, podendo também anexar imagens e armazenar favoritos. Como nosso tema abrange histórias e lendas sobrenaturais, é importante mencioná-lo.

Principais funções:

- Publicar
- Ler histórias
- Loja com conteúdo da página 

creepy-pasta-2.gif

 

 

 

  • Waze

Porque similar? É um guia útil de GPS que facilita o percurso desejado, buscando as melhores opções de rotas e informações de trânsito. É semelhante no sentido de ser um mapa e ter a possibilidade de conectar-se com conhecidos.

Principais funções:

- Mapa de percurso
- Favoritos
- Placar
- Amigos

waze.gif

 

 

 

  • Google Maps

Porque similar? Outro sistema de mapeamento e GPS, o Google Maps oferece as melhores rotas de carro, transporte público e a pé. Ele também dá recomendações de estabelecimentos perto de sua localização atual e oferece oportunidade de compartilhar e adicionar lugares. O aplicativo é relevante para nós por inúmeros motivos, mas seus principais são por seu sistema de GPS, recomendações e registro de lugares, coisas que pretendemos colocar no nosso aplicativo.

Principais funções:

- Mapa
- Adicionar lugar
- Linha do tempo 
- Explorar estabelecimentos 

GOOGLE-MAPS.gif

 

 

 

  • Spotify

Porque referência? Spotify é uma plataforma para escutar músicas online e offline. O consideramos como uma referência pois o mesmo é prático e seu design é agradável e chamativo, mantendo-se sempre moderno e conseguindo transmitir o objetivo do aplicativo.

Principais funções:

- Recomendações
- Categorias por gênero
- Podcasts, playlists e vídeos 
- Biblioteca de músicas
- Perfil com seguidores 

SPOTIFY.gif

 

 

 

 

  • Culture Trip

Porque referência? O aplicativo tem objetivo de indicar os melhores eventos da semana através de qualquer localização do mundo. É uma referência pela organização de layouts e por se tratar de uma vasta lista de informações sobre todos os lugares disponíveis no sistema. Ele também é útil por permitir que usuários publiquem eventos, curtam artigos e salvem seus favoritos. 

Principais funções:

- Publicar artigos
- Curtidas
- Disponibiliza informações sobre qualquer lugar
- Categoriza tipos de eventos

culture.gif

 

 

 

  • Moovit

Porque referência? O Moovit é uma plataforma de mapeamento com informações sobre horários e localizações de transporte público e linhas de trem. Ele é fundamental em questão de organização de layouts e simplicidade, como também na precisão das informações e interface prática.

Principais funções:

- Mapa
- Planejamento de viagens
- Estações e respectivos horários

MOOVIT.gif

Análise Funcional e de Uso

Análise funcional e de uso:

Foi determinado que nossa análise iria conter wireflows e wireframes das  principais funções de cada um dos seis aplicativos, respectivamente separados por similares e referências. Para complementar o estudo, descrevemos os maiores problemas de usabilidade (também já citado na tabela do tópico *Similares e referências)

Wireflows dos similares:

creepypasta.png

creepy-usabilidade.png

 

 

waze.png

wazeee.png

 

 

aps.png

google-maps.png

 

 

Wireflows das referências:

spotify.png

spotifyyy.png

 

 

 

culture-trip.png

culture.png

 

 

moovit.png

moovittt.png

 

 

Wireframes dos similares:

*Para cada sistema, foram selecionados de cinco a sete telas mais importantes.

creepy-pasta.png

waze.png

google-maps.png

 

 

Wireflames das referências:

spotify-2.png

wireframe-culture-trip.png

wireframe-culture-trip.png

Análise da Identidade

Análise da identidade:

Este trabalho nos ajudou como um guia para gerar nossa própria identidade visual, dando dicas do que pode dar certo e o que é melhor deixar de fora. Construímos então uma tabela, que deixou a análise mais clara e organizada, de fácil compreensão.

Ao verificarmos todos os aplicativos, fomos possibilitados de indicar seus símbolos, quais significados os mesmos possuem e sua legibilidade. Mostramos como as cores são empregadas para cada um deles e que tons são predominantes, como também conseguimos achar metade das fontes usadas e, por fim, adicionamos algumas notas que tiramos da observação.  

 

tabela3.png

Verificação e Resultados (Infográfico)

Verificação e Resultados: 

Depois de realizar todas as etapas, muitas ideias úteis surgiram a respeito das funcionalidades do nosso aplicativo. A partir delas, conseguimos definir melhor quais seriam as finalidades que o sistema deveria ter e como isso será aplicado. 

verificação.png

 

Infográfico: 

INFOGRAFICO.png

Mapa de Curiosidades Sobrenaturais

Reconstrução

Organizando as Ideias

Organizando as ideias:

Após uma análise completa dos aplicativos anteriores e um pequeno resumo objetivo sobre as funcionalidades do nosso aplicativo, nos permitimos criar um “esboço” de como pretendemos ramificar cada uma de suas funções. O organograma abaixo mostra especificamente cada ferramenta que utilizaremos (deixando aberto a possibilidade de adicionar mais utilidades no futuro, se estas houverem).

 

organograma-01.png

 

User Stories:

Com a maioria das categorias já listadas, criamos as histórias de cada persona em cima de suas motivações, para que as ferramentas viessem a ser fundamentais para cada situação dos três usuários em determinado momento.

33311792_859641034243379_6874978155279417344_n.png

 

Storytelling

Storytelling:

Para elaborar o storytelling, voltamos a estudar nossas personas a fim de estabelecer uma cena da qual dois deles (Enzo e Valentina, perfis resumidos no tópico acima) estariam passando por uma situação onde nosso aplicativo pudesse ser útil. A partir da narração, fizemos com que eles utilizassem nossas principais ferramentas e funcionalidades a fim de resolver suas necessidades. 

storytelling2.png

 

storytelling.png

Wireflow com a Descrição da Interação

Wireframe: 

Para que a construção do wireflow fosse mais fácil, foi preciso realizar alguns exemplos wireframes, com telas das principais funções do nosso aplicativo, onde indicamos cada utilidade contida nas páginas apresentadas.

wireframe.png

Wireflow: 

Logo em seguida, marcamos a direção que cada funcionalidade deve tomar, com uma descrição mais precisa, de acordo com sua interação. Como mostrado pelos círculos mais escuros, os ícones são elementos muito importantes do nosso wireflow, pois eles permitem que a interação seja melhor executada e compreendida pelo usuário. 

wireflow.png

Mapa de Curiosidades Sobrenaturais

Identidade e Diferenciação (APS)

Desenvolvimento da Assinatura Visual

Naming:

Baseado em todo contexto sobrenatural, chegamos a três possibilidades de nome, sendo eles: Gato Preto, Umbra e Salem. Quando analisados mais cuidadosamente, o escolhido foi Salem, pois além de ser um local histórico, trata-se de uma cidade conhecida por seu fundo místico e sobrenatural de feitiçaria. O ponto de interrogação que acompanha o nome também foi necessário por transmitir sensação de busca pelo desconhecido ou desejado. 

naming.png

 

Assinatura Visual:

Para nossa assinatura visual, passamos por um processo de criação onde nos perguntávamos o que queríamos transmitir com nosso aplicativo, e as palavras foram: local, sobrenatural, comunicação, conexão, modernidade e jovem. Com base nesse objetivo, trouxemos elementos visuais que pudessem representar estas palavras e assim, juntá-los e gerar exemplos. O símbolo escolhido foi uma junção entre comunicação, sobrenatural e local. Usamos um objeto muito famoso do mundo sobrenatural, o tabuleiro Ouija, ou mais precisamente sua prancheta, pois combina com nosso conceito de guiar pessoas através de um mapa.

logo-3.png

Escolha Tipográfica

Tipografia:

Na escolha tipográfica utilizamos uma fonte sem serifa com estilo itálico, Cervo Neue, como a fonte principal, que pode ser encontrada no logotipo. Para a família de fonte auxiliar, foi escolhida a Muli, por transmitir um ar mais moderno, futurístico, sendo precisamente a intensão que procuramos passar com nosso app.

tipografia.png

Escolha do Padrão Cromático

Padrão Cromático:

Como já dito anteriormente no tópico Definição de Assinatura Visual*, um dos principais objetivos é a modernidade, por isso, queremos transmiti-la através das cores e suas combinações. Nossa paleta é uma junção do spooky*, do moderno e de um aspecto mais vibrante. Utilizamos cores que nos lembram fantasmas, como verdes e roxos, mas também não deixamos de adicionar um rosa pêssego e o azul para atingir um toque mais jovial e descontraído, quebrando o estereótipo de cores comuns encontradas em assuntos relacionados ao sobrenatural e crime.

 

padrao-cromatico.png

 

*Spooky: assustador, assombrado.

Definição Imagética

Definição Imagética: 

Para criarmos uma atmosfera mais descontraída e visualmente clean, optamos por ícones de estilo outline que seguissem o mesmo padrão de quebra de linha. Decidimos que assim como seu design, os ícones teriam um aspecto divertido que entretece quem os visse no aplicativo.

icones-app.png

Desenho das telas da interface

Telas de interface:

Como já foi anteriormente mencionado, optamos por usar um fundo roxo, indo além de sua representação no mundo sobrenatural e partindo para a preocupação com a visibilidade do usuário. Quanto as demais cores compostas nas páginas, foi utilizado o rosa, dois verdes claros e um azul escuro (podem ser encontrados no tópico de Padrão Cromático*), que juntas com transições gradientes, procuram passar a sensação de modernidade, diversão e tecnologia. 

Para páginas como as de filtragem de categorias, decidimos usar nosso símbolo como um elemento que pudesse complementar de forma ilustrada e visualmente agradável. O resultado acabou sendo muito satisfatório, trazendo vida ao fundo que antes pretendia ser chapado.

telas.png

 

 

Protótipo Interativo

Protótipo Interativo:

Depois de geradas as telas, foi o momento de criar o protótipo, que pode ser visto a seguir. É importante ressaltar que o aplicativo foi feito para Android. 

https://xd.adobe.com/view/bdb07849-4698-4db8-75d8-2afa6f2264c3-cb81/screen/25a5de2f-abe6-4bd3-8885-91aec6817011/Android-Mobile-2

 

Diferenciação

Diferenciação:

Como já era de se esperar, todos os participantes da pesquisa de opinião marcaram entre "descontraído" e "moderno". Queríamos dar uma cara nova para um conteúdo com pouca inovação em seu meio, e ao analisar as respostas, foi concluído que nosso objetivo foi atingido.

diferenciaçao.png

Considerações Finais

Criar este aplicativo desde o início foi uma tarefa desafiadora. O Salem? pode nos ajudar a evoluirmos como designers, como também crescermos no campo da interação com o usuário e na pesquisa extensa. 

Mapa de Curiosidades Sobrenaturais

Referências Bibliográficas

Recomendadas e Aceitas

Gerais

  • Michaelis, © 2018 Editora Melhoramentos Ltda, Dicionário.{online}. Disponível na Internet via http://michaelis.uol.com.br/moderno-portugues/ Arquivo capturado em 3 de abr, 2018. Aurélio Buarque de Holanda, Editora Positivo, Dicionário Aurélio.{online}. Disponível na Internet via https://dicionariodoaurelio.com/ Arquivo capturado em 3 de abr, 2018.