Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
Projeto Integrado 2017 2
Flashing Trance
Equipe
Gabriel Guerguen
Orientador(es)
Heli Meurer, Jaire Passos
11 de Abril de 2018
Flashing Trance

Contextualização

Introdução

Este projeto deve contemplar a produção de um aplicativo que interaja com uma roupa desenvolvida especialmente para pessoas que frequentam festas, mais especificamente festas rave.

A roupa será produzida pela Kanandra, e deve conter com uma série de luzes LED acopladas no corpo inteiro. A ideia é que o aplicativo deva interagir com essas luzes, podendo modificar cor e padrões de animação delas.

Os colegas fizeram as seguintes sugestões com os post-its:

Introdução---Post-its.jpg

A maior parte das sugestões tange sobre o aspecto da interação da música ambiente com a roupa, que desde princípio era a ideia principal. Outras pessoas tiveram a ideia de aumentar o aspecto social do aplicativo, o que é uma ideia interessante, mas que pode ser resolvida com parcerias com outros aplicativos, como Shazam, Musixmatch, Spotify, Deezer, Tastebuds, Choosic, entre outros.

Questões Projetuais

A metodologia utilizada para criar o projeto parte do princípio do Design Thinking Canvas, porém parte para um desenvolvimento de forma mais rápida, evitando a parte de Canvas de Valor, que, na minha opinião, trata-se de uma repetição um tanto exaustiva do primeiro canvas criado.

O canvas criado foi o seguinte:

canvas_cenarioepersona.jpg

O canvas foi mais direcionado para a produção da própria roupa do que para o aplicativo em si. Sendo um projeto casado, o público do app é o mesmo que comprará a roupa. O consumidor, não utilizará o app sem ter a roupa, mas o contrário pode acontecer.

A persona criada, Lucas, segue padrões específicos de pessoas que têm como um dos hobbies principais a participação em raves. É uma pessoa extrovertida, educada, que ganha seu próprio dinheiro, porém é possível que ainda não seja totalmente independente dos pais. É uma pessoa que vai em rave e usa drogas como ecstasy e LSD, e está inserida nesta cultura de forma que conhece e pesquisa sobre como potencializar suas experiências e de seus amigos.

canvas_oportunidadeconcorentes.jpg

Lucas tem problemas com os acessórios e roupas luminosas que comprou. Tentando gerar estímulos e ser um centro das atenções (de uma forma interessante, não de jeito prepotente ou carente), Lucas percebeu que os produtos existentes ainda não continham a quantidade de tecnologia e flexibilidade que gostaria.

Infográfico do Projeto

Nessa seção, são lançadas as expectativas e um planejamento inicial de como será o projeto, de forma sucinta e gráfica.

infografico.jpg

Flashing Trance

Desconstrução e Verificação

Pesquisa Abrangente sobre o Assunto

A pesquisa aprofundada sobre o assunto ajuda o designer a absorver o conteúdo relevante relacionado ao projeto. Essa etapa ajuda o profissional a entrar em contato com o universo com o qual está lidando e entendê-lo, além de melhorar o seu vocabulário específico através do entendimento direto e figurativo desses termos.

Raves

Rave é um tipo de festa de grandes proporções (no Brasil, frequentemente com mais de 4 mil pessoas) que ocorre em lugares afastados dos centros urbanos, com música eletrônica. É um evento de longa duração, geralmente durando mais de 12 horas, mas muitas vezes chegando a 24 horas e até muito mais. Nessas festas, DJs e artistas plásticos, visuais e performáticos, apresentam seus trabalhos, interagindo com o público.

2014-1.jpg

Tomorrowland, 2014.

O termo "rave" é originário do final dos anos 50, em Londres, e era utilizado para descrever grandes e boêmias festas beatnik de Soho. Em 1958, Buddy Holly lançou o hit Rave On, que fala sobre a loucura que ocorria nessas festas. O termo, entretanto, caiu em desuso antes do final da década de 60.

Na década de 80, com o movimento musical Acid House de Chicago, as raves como são conhecidas hoje em dia começaram a surgir. No início nos anos 90, com o crescimento da cena, diversos gêneros de música eletrônica (também chamada de EDM) surgiram, como House, Trance, Acid Trance, Breakbeat, Hardcore, Post-Industrial, entre outros. As festas, de agora em diante, chegava a ter até 25 mil pessoas.

edc028_small.jpg

Grupo de ravers do início dos anos 90.

Dança

A maior parte do público - inclusive do público frequente de raves - não pratica nenhuma dança específica, preferindo curtir a festa dançando aleatoriamente. Há um público, entretanto, que desenvolveu técnicas de dança específicas para músicas de rave - músicas que normalmente tem uma quantidade de batidas por minutos bastante alta. Essas danças, que eram específicas de cada região, se popularizaram pelo mundo inteiro quando começaram a ser gravadas e compartilhadas no YouTube. A partir disso, pessoas do mundo inteiro começaram a praticar os passos, removendo o aspecto puramente cultural e geográfico dos estilos de dança.

15234619_1280x720.jpg

Algumas das técnicas mais conhecidas de dança de EDM são o Melbourne Shuffle e o Jumpstyle.

Um tipo de performance art que utiliza acessórios que é muito praticado em raves é o Poi. Provindo de uma tradição Maori, o Poi envolve o balanço de dois pesos a partir de uma variedade de padrões rítmicos e geométricos. Poi é, na verdade, o nome do equipamento, do qual pode ser construído de diversas formas - até com meias velhas e bolinhas de tênis. Neste vídeo, percebe-se um tipo de Poi que utiliza luzes de LED que podem ser customizados - parecido com a ideia do projeto.

Roupas e Acessórios

Em geral, roupas utilizadas em raves são soltas e casuais, pois conta do conforto e da facilidade de dançar. Há uma quantidade muito grande de acessórios que são levados para festas rave, como Vick Vaporub, bicos (de bebê, para combater o bruxismo por conta do MDMA), Poi, etc.

O campo aberto de raves frequentemente causa queimaduras solares nas pessoas, o que fez o público se adaptar e começar a levar protetor solar e chapéus e/ou bonés. O longo tempo de duração da festa fez as pessoas começarem a levar frutas e barras de cereal para se manter alimentado sem grandes problemas.

Roupas-para-rave-1-615x406.jpg

Mulheres na rave.

CCV39jXWAAApQtP.jpg

Homens na rave.

Uso de Drogas

A partir do surgimento das raves de Acid House, estas festas começaram a se tornar antros de uso de drogas como o MDMA (ecstasy), 2C-B, Speed, Morfina, GHB, DMT, e LSD.

images-teen-mdma-example.jpg

Balas de ecstasy

Todo ano ocorrem casos de pessoas morrendo por overdose em raves. O fato de as drogas serem ilegais tornam a sua produção bastante variada, e a qualidade e procedência de cada uma determina a segurança da usuário. O uso de drogas gerou a demanda de diversos equipamentos e objetos que ajudam o usuário a utilizá-las com maior segurança e com menos efeitos colaterais. Para usuários de MDMA, por exemplo, Vitamínicos, Cloreto de Magnésio e Omeprazol são suplementações comuns entre usuários frequentes. Para o momento da festa, é normal que os usuários levem grandes quantidades de chicletes e pirulitos, de forma a combater o bruxismo causado pelo uso do ecstasy.

Em uma reportagem em Curitiba, em 2015, foi constatado pela polícia militar que até 90% dos usuários de uma rave estavam sobre efeito de drogas.

Roupas com LEDs

Nenhuma roupa com LED com funções complexas de controle de luz existe no mercado, atualmente. Algumas lojas que cumprem parte do nicho são:

LED Clothing

A LED Clothing é uma loja sul-coreana, localizada em Seoul, que existe há 7 anos, e que desenvolve roupas com LEDs. Algumas das roupas utiliza até fibra ótica. A empresa tem parceria com empresas como a Samsung, Hyundai, Audi, Mercedes Benz, atores de Hollywood, astros de K-POP, entre outros.

Proforma Audiovisual

A Proforma Audiovisual conta com uma tecnologia de mapeamente cinético 3D, feito com projeção. O efeito visual é bastante parecido, e até potencialmente mais impressionante, porém, como é feito a partir de projeção, não é exatamente parecido, tecnologicamente falando.

Termos Pertinentes ao Projeto

Após a pesquisa, foram definidos alguns dos termos específicos mais importantes para que sejam explicados. Com a clarificação, poucas dúvidas sobre o assunto devem restar. Estas palavras foram escolhidas por serem um resumo da experiência de raves e dos aspectos mais importantes do assunto.

termos-pertinentes.jpg

Definição das Funcionalidades e Conteúdos

Normalmente, a etapa de análises dos concorrentes e similares aconteceria antes da definição das funcionalidades. Este projeto, entretanto, tem uma particularidade: a sua demanda é requisitada somente a partir da criação e oferta da roupa de luz. Ou seja, é necessário entender o que o usuário precisara em relação à sua roupa luminosa, definir as funções que o aplicativo oferecerá, e depois buscar quais aplicativos têm soluções que podem ser aplicadas nesse contexto.

As funções definidas foram as seguintes:

funções.jpg

Explicações mais aprofundadas e wireflows de experiência de usuário serão apresentados na etapa de reconstrução.

Análise de Experiência de Referências

A análise de experiência será feita para entender alguns tipos de interações já existentes na indústria. Por conta da natureza do app que está sendo desenvolvido, não serão analisados apps similares ou concorrentes, mas sim referências externas que possam ajudar na composição do design, com base nas funcionalidades definidas na etapa anterior.

Abaixo, uma análise detalhada do SoundCloud, app de música com funcionalidades relevantes para o projeto.

analise.jpg

Algumas decisões de user experience devem ser tomadas em etapas mais iniciais para que o desenvolvimento do app ocorre sem grandes refações. Abaixo, foram feitas algumas análises e comentários sobre alguns recursos apresentados por outros apps.upload171123082651.jpg

playful-palette.jpg

vsco.jpg

Análise Estética das Referências

Nesta seção, será analisada a estética de aplicativos, tanto já existentes quanto conceituais. Serão avaliadas questões como Identidade Visual, Tipografia, Pictogramas, estrutura de User Interface, etc.

Sendo um aplicativo cuja demanda é inexistente, já que ela só existirá a partir da oferta da roupa com LEDs, não há nenhuma referência de concorrentes ou similares. Foram analisados identidades visuais que possam ter relação com raves, EDM, e afins - não necessariamente de aplicativos.

analise.jpgAbaixo, algumas referências de aplicativos encontrados através de pesquisas que têm referências interessantes para o UI design do aplicativo.identify.jpg

smart-home.jpg

art.jpg

variados.jpg

Lista de Orientação

Como as funções já foram definidas anteriormente, esta lista existe para orientar o desenvolvimento posterior do app. A partir das análises feitas, o seguinte caminho será tomado:

  • Haverá utilização de degradês, fazendo alusão às cores das luzes nas roupas;
  • O estado da arte será o app do SoundCloud, pois ele tem diversas soluções que podem ser reutilizadas na construção deste;
  • A identidade deverá ser fluida e inconstante, assim como as roupas;
  • O público-alvo será formado por ravers, porém deve-se levar em consideração outros públicos da mesma forma;
  • Nenhum app encontrado tem as mesmas funções deste, porém, apps de música apresentam as maiores similaridades;
  • Cores quentes, que denotam criatividade e singularidade, devem ser exploradas;
  • O app deve oferecer funções para usuários muito engajados, mas ser fácil de usar por usuários mais casuais.

Nas próximas seções, essas características deverão ser exploradas de diversas formas, tanto em experiência quanto em identidade visual e imagética.

Flashing Trance

Reconstrução

Storytelling

O storytelling é uma ferramenta utilizada para simular as ações durante os momentos relacionados à interação de uma ou mais pessoas com o aplicativo. Com essa ferramenta, o designer pode ter novas perspectivas sobre e contexto em relação ao uso do app pelo público-alvo.

Lucas

lucas.pngLucas, homem de 26 anos formado em direito, adora raves. Ao sair do banho, abre o app, conecta-o com a roupa via bluetooth, e checa a bateria. Está marcando em 100%, com 196 horas utilizadas. "É hoje que eu passo de 200!", Lucas exclama. Ele prepara a sua fila de fluxos - cada um por uma hora cada, começando a 01h e indo até as 08h, totalizando pelo menos 7 fluxos distintos.

Os primeiros fluxos são mais piscantes e coloridos, com transições mais crassas, pois foram criados para acompanhar Psytrance noturno - um estilo com alto BPM, sem muito tempo para transições e degradês mais complexos. A cada hora os fluxos trocam, juntamente com cada novo DJ - cada um toca um setlist de uma hora. Às 6h, entra um DJ do estilo Progressive Psytrance, caracterizado por ter BPM rápido, mas não tanto quanto os noturnos. Os fluxos desse horários começam a ter transições mais fluidas, que acompanham um estilo de dança levemente mais complexo, ainda que aleatório.

Lucas chega na rave às 1h40 com seus amigos, encontra um lugar para ficar, posiciona sua mochila junto às cadeiras na posição marcada, e fica conversando com seus amigos até todos se prepararem. Às 2h00, eles resolvem tomar uma bala de ecstasy cada um. Às 2h30, os efeitos começam a aparecer. Lucas pega seu celular, entra no aplicativo, liga seu traje, aperta em Play, bloqueia o celular e começa a dançar. O fluxo das 2h inicia, utilizando o BPM da música que está tocando atualmente. Nesse momento, Lucas ainda está longe do palco; ele não sabe, pois está noite, mas todos ao redor estão prestando atenção nele, enquanto ele dança, fritando. Às 3h, o fluxo muda levemente para o próximo da fila, enquanto trocam-se os DJs. Ele já está entrando no ápice do efeito da droga, e resolve ir até a frente do palco. Enquanto está sem música, o traje não brilha. Quando começa o set do próximo DJ, o traje sincroniza com a batida e liga subitamente, já com o fluxo das 3h. Todos ao redor - visivelmente alterados - começam a gritar e admirar as cores. Lucas se sente bem - ele adora dançar, fritar e conversar com pessoas como ele. Ele se relaciona com bastante gente, troca dicas com outras pessoas que se interessam no traje, mostra o app, mas rapidamente volta a aproveitar a festa.

Horas depois, pouco antes das 6h, é avisado que o DJ que iniciaria o set de Progressive Psytrance, DJ1 teria se acidentado, e que o próximo DJ, DJ2, iniciaria mais cedo. Para cobrir o horário vago, às 7h, DJ2 e DJ3 farão uma parceria nesse horário, e DJ3 seguiria normalmente no seu horário das 8h. O fluxo de Lucas estava configurado para o DJ1, e ele acredita que a experiência do amanhecer do sol será diferente com DJ2. Ele não quer reaproveitar o fluxo das 7h às 6h, pois gosta de luzes de temperatura diferentes nesse horário. Ele, então, já um pouco mais sóbrio, rapidamente modifica seu fluxo das 6h através do seu app, mudando a temperatura das cores, e adicionando mais uma cor no degradê. Agora, a experiência dele continuará perfeita.

Às 8h, já totalmente dia, Lucas desliga seu traje pelo app, pois as luzes já não fazem o mesmo efeito quando o Sol está lá em cima e o céu azul. Ele segue fritando na festa - agora com a roupa desligada. Agora, o app marca 203h utilizadas, e Lucas tem um novo fluxo para compartilhar no app. Depois da rave, ele abre seu aplicativo, relaciona o seu fluxo ao DJ2 durante o amanhecer, e compartilha na loja gratuitamente.

 

Karen

karen.pngKaren adora raves, mas dispensa o grande tempo de preparação que a maior parte das pessoas põe antes delas. Ela comprou uma camiseta com LEDs - não a roupa inteira - e adquiriu alguns flows no app, mas não teve muita paciência para aprender as configurações mais avançadas. Resolveu baixar uma fila completa de Progressive House, um gênero de música eletrônica, para utilizar na próxima rave.

Durante a rave, notou que o ritmo não estava exatamente o que gostaria que estivesse. Resolveu colocar no automático. Gostou muito do resultado, e manteve a configuração até o amanhecer. Para Karen, o resultado foi ótimo, e ela apareceu em diversas fotos divulgadas pelo evento no dia seguinte.

--

Lucas, sendo um heavy user, utilizou o aplicativo extensamente antes, durante e depois da rave. Ele foi bastante perfeccionista, pois é uma pessoa extremamente conectada à música eletrônica. Já Karen é uma usuária mais casual - resolveu colocar no automático após se debater um pouco com o app, e para ela, foi ótimo da mesma forma.

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

O wireflow é o esqueleto de uma interface. É com ele que fazemos as primeiras decisões relacionadas à experiência do usuário - ou seja, é o primeiro momento em que decidimos onde cada função do aplicativo se encontrará, e como o usuário a acessará.

Abaixo, o primeiro wireflow completo criado.

IMG-0180_b.jpg

Ao começar a implementação esse wireflow, entretanto, diversos problemas foram encontrados, e algumas decisões de user experience foram modificadas. A maior delas tem relação com a presença de uma navbar - ou seja, elimina-se o menu "hamburguer", muito encontrado em aplicativos nativos de Android, como o Gmail, e começa-se a utilizar uma barra de botões fixa que leva o usuário às seções mais importantes do site - assim como no Instagram e no Spotify.

A navbar foi escolhida pois, invariavelmente, exige menos cliques para acessar as diferentes telas. Considerando que uma grande parte da utilização do aplicativo pode acontecer em momentos de festa e sob efeito de alcool e drogas, é necessário que o usuário consiga navegar de forma rápida pela interface e consiga realizar o que pretende com o menor esforço o possível.

Outras muitas telas do wireflow foram suprimidas e/ou unidas a outras. Abaixo, o wireflow final do aplicativo:

wireflow.jpg

A partir disto, foram criados wireframes. Abaixo, está o mockup da User Experience com os wireframes desenvolvidos para o projeto. Nele, é possível visualizar o fluxo de experiência do usuário e visualizar a hierarquia das informações presentes na interface.

 

Flashing Trance

Identidade e Diferenciação

Desenvolvimento da Assinatura Visual

Para o desenvolvimento da assinatura visual, foram consideradas as referências apresentadas na seção de Desconstrução de forma a construir uma estética que faça sentido com a proposta do aplicativo. Nesta etapa, serão apresentados o Nome, Logotipo, Símbolo e Padrão Cromático do logo - não necessariamente da interface do app.

identidade.jpg

Este, entretanto, não é o logo do aplicativo em si. Este é o logo da marca geral, que compõe a criação das roupas luminosas como um todo. Para a futura referência ao APP, foi decidido que este teria o nome Befract App. Abaixo, o logotipo.

befract-app.jpg

 

Escolha Tipográfica

Na seção de Escolha Tipográfica, será abordada a utilização de tipografia no app. Essa decisão deve ser tomada a partir das necessidades mostradas durante a criação do app e na identidade visual apresentada na seção anterior.

Considerando o protótipo de User Experience apresentado na seção de Reconstrução, na necessidade de apresentar uma família tipográfica que tenha uma identidade mas que não "roube a cena", e na presença de um logotipo com características geométricas, foram consideradas diversas famílias tipográficas, como a Montserrat, Nexa, Gotham, Frutiger, Museo Sans, Avenir, entre outras. Abaixo, uma comparação feita com diversas fontes, entre pesos relativamente similares, juntamente com o logotipo.

fontes.jpg

Ao testar nos textos do protótipo UX, que devem ser a base para tamanhos de fontes e pesos utilizados, foi constatado que a Raleway demonstrou o melhor desempenho geral para este app, sendo a família escolhida para se tornar a padrão do app.

raleway.jpg

Escolha do Padrão Cromático

Para a escolha do padrão cromático, que é basicamente a seleção da paleta de cores utilizada durante a construção do aplicativo, foi considerado o impacto que cada cor tem sobre a percepção do usuário, o peso das cores apresentadas pelas referências, e a quantidade de conteúdo fornecida pelo app.

cores.jpg

Definição Imagética

Nesta seção, fala-se sobre os elementos gráficos que serão utilizados para compor o app. Elementos como ícones e imagens são abordados aqui. Abaixo, os ícones que serão utilizados:

icones.jpg

Para mostrar o estilo dos flows, imagens com degradês correspondentes a eles serão criados e expostos como "capas". Abaixo, alguns exemplos que poderiam existir.

gradients.jpg

 

Desenho das telas da interface

Nesta seção, são mostradas algumas das telas principais que foram desenhadas para a prototipagem do projeto. Essas telas guiam o desenvolvimentos de subtelas e elementos de interface, e podem ser consideradas como parte do produto final. No entanto, elas, aqui, são mostradas sem interação - servindo apenas como amostra gráfica.

01.00 - User@3x_.png 02.01 - Gallery Flows@3x_.png
03.01 - Flow@3x_.png 00.01 - Queue@3x_.png
03.00 - Store@3x_.png 00.00 - Playing@3x_.png

Protótipo Interativo

O protótipo é uma simulação do produto final - uma forma de visualizar a combinação da UI com a UX. Abaixo, o resultado final protótipo.


Caso o protótipo não funcione, é possível acessá-lo através deste link.

Diferenciação

Na seção de diferenciação, serão avaliadas as reações e relações de usuários com o app, levando em consideração a personalidade e visual definido e desenvolvido para o app.

Serão feitas duas avaliações: quantidade de informações(do clean ao cluterred) e estética (do feio ao bonito). As respostas são dadas diretamente em um gráfico, onde o usuário aponta a posição que o app deveria ficar. A expectativa é que o app fique com posicionamento bonito e no meio termo entre clean e cluttered.

10 pessoas foram consultadas, e as respostas foram as seguintes:

graphics.png

Apesar de algumas respostas que acham a estética neutra e a quantidade de informações mais cluttered, do que gostaria, é possível afirmar que o layout cumpriu o papel que lhe foi designado.

Considerações Finais

Esse foi um projeto árduo e complexo, principalmente se for considerar o curto tempo de desenvolvimento. Iniciou-se sua produção, de fato, apenas no início de novembro. Anterior a isso, eu tinha apenas uma vaga ideia de como ele seria.

Não fico desapontado com esse projeto. Aliás, muito pelo contrário. Esse é, provavelmente, o projeto do qual eu mais me orgulho na faculdade, até agora. Mesmo perdendo uma semana valiosa em pleno final de semestre por causa de uma viagem, e mais o último dia da entrega por causa de um procedimento médico, consegui entregá-lo de forma completa e sem realizar nenhum crunch extenso. Crunches foram feitos - estou escrevendo isso às 2h10 da manhã - mas nada de virar a noite, ou projetar até o sol nascer. Por incrível que pareça, a partir de um planejamento decente e guidelines eficientes, consegui me organizar e evitar problemas.

Além disso, sinto que o projeto é sólido, consistente, e até bonito. A metodologia me ajudou demais. Ao segui-la por completo, me deparei com soluções que não teria pensado antes. O uso do Projeto E foi valiosíssimo, e com certeza o aprendizado que tive com com a metodologia foi tão importante quanto o resultado final do projeto - que certamente irá para o portfólio, após umas polidas aqui e ali.

Por mais desesperador que tenha sido o final desse semestre, fazer esse projeto foi ótimo. Quem sabe eu finalmente consigo tirar o meu primeiro e único 10 em cadeiras de projeto, não é mesmo? hahaha!

Flashing Trance

Referências Bibliográficas

Recomendadas e Aceitas

Gerais