Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
Projeto Integrado
Projeto Nós
Equipe
Andrezza Mesquita Frozi, Carlo Bedin, Gabriela Nonnenmacher, Julia Sakakibara, Maysa Severo
Orientador(es)
Heli Meurer, Israel Henriques Tavares Berbigier
11 de Abril de 2018
Projeto Nós

Contextualização

Definição do Tema

Em função do Projeto Interdisciplinar queríamos um projeto de cunho social que abrangesse as 3 áreas do Design: Gráfico, Moda e Produto. 

Sendo assim focamos em melhorar as condições insalubres de trabalho de coletores e catadores de lixo. Pensamos na melhoria tanto do vestuário quanto das tecnologias de segurança, envolvendo nessa etapa alunos da Moda e do Produto.

Para que esse projeto pudesse ter a chance de se tornar real, seria importante ele ser divulgado para conseguir visibilidade, atingindo pessoas que queiram financiar essa ideia. Um bom jeito de fazer isso é através de uma plataforma digital em formato de financiamento coletivo/crowdfunding. Criar o projeto dessa plataforma será o objetivo dos alunos do Gráfico.

Questões Projetuais

O que desenvolver?

Site em formato de crowdfunding (financiamento coletivo) que visa projetos sociais maiores com objetivo de alcançar financiamento governamental e empresarial mas não excluindo pessoas físicas; 

Por que projetar?

Crowdfunding é o termo utilizado para financiamento coletivo, com o objetivo de arrecadar fundos para filantropia. Esses financiamentos podem ser realizados através de uma plataforma digital. Os mais conhecidos sites nesse estilo são: Catarse, Benfeitoria, Bicharia, Idea.me, Kickstarter entre outros. 

A maioria dos sites de financiamento colaborativo apresentam diversificados projetos, que englobam cultura, empreendedorismo, necessidades pessoais e outras áreas, sem focar exclusivamente em causas sociais. Nossa proposta visa justamente esse segmento, além de querer atingir mais do que somente pessoas físicas. Existem vários projetos, inclusive acadêmicos, de cunho social, que o governo/empresas não têm conhecimento, sendo assim, é importante ter uma plataforma que divulgue essas ideias. 

Nosso principal objetivo é conseguir visibilidade e apoio para colocar em prática projetos sociais que ajudem várias pessoas. Também, queremos proporcionar o acompanhamento dos projetos depois que a meta for concluída.

Como projetar?

Será um projeto interdisciplinar envolvendo Design Gráfico, de Produto e Moda.

Usaremos a metodologia do Projeto E, que contempla oito etapas projetuais, sendo elas: contextualização, desconstrução, verificação, reconstrução, identidade, diferenciação, desenvolvimento e validação.  

Na contextualização são definidos o tema, as questões projetuais, usuários/personas e o processo metodológico.

A desconstrução trata-se de uma ampla e profunda análise, para avaliar conteúdos, conceitos e contextos que possam servir de referência e influenciar o desenvolvimento do projeto. 

Na verificação define-se as restrições (limitações), requisitos (o que é necessário) e possibilidades (o que agrega valor) a serem consideradas no novo produto.

A reconstrução corresponde às etapas de escopo, estrutura e esqueleto do projeto

A identidade corresponde à etapa de estética do projeto. Ela abrange, principalmente, métodos e técnicas relativas à editoração e diagramação e da identidade visual.

Na diferenciação avalia-se a identidade visual criada anteriormente e os produtos analisados na etapa de desconstrução, através do mapeamento de expressões. Em cada extremidade dos eixos são atribuídos pares de palavras com diferentes valores, como por exemplo, divertido/funcional em X e culto/popular em Y.

O desenvolvimento é a programação da interface, feita pelos programadores depois que toda a arquitetura da informação estiver definida e quando o layout das principais telas do produto tiverem sido diagramadas e aprovadas.

Por fim, a validação diz respeito a avaliações e testes técnico-funcionais e com usuários. 

 Para quem projetar (da necessidade de se identificar os usuários do produto)?

1) Doador: pessoas que vão financiar os projetos/ideias. Podem ser pessoas físicas, empresas ou entidades governamentais.

2) Idealizador: pessoas que propõem os projetos sociais, podendo inclusive serem acadêmicos.

3) Beneficiados: pessoas beneficiadas pelos projetos sociais. Na nossa proposta, por exemplo, serão os catadores.

E qual será a tecnologia utilizada? 

 1º camada (interface): HTML/CSS3 ou JavaScript

2° camada (regras de negócios): Java

3° camada (banco de dados): Oracle

Referência

Infográfico

NOVO-INFO.jpg

O projeto seguirá algumas etapas:

1. A primeira etapa do projeto consiste na criação de uma roupa especial para garis, coletores e catadores, com intuito de proteger e melhorar as condições de trabalho dessa categoria. A roupa deve gerar proteção contra algumas necessidades básicas como, sol (calor), chuva, frio, e qualquer tipo de "insegurança" gerada por objetos como metais, vidros ou lixo hospitalar/alimentício que possa gerar algum prejuízo aos trabalhadores.

2. Na segunda etapa, ocorrerá um marketing seguido de campanha sobre o produto criado, a fim de criar visibilidade e gerar um conhecimento da importância do mesmo na população.

3 . A terceira etapa consiste no uso do site em formato de crowfunding, disponibilizando para interessados em contribuir para que o projeto se torne real. O site desenvolvido terá como conceito chave ser um "Crowfunding Social", tendo em vista divulgar e receber apenas projetos com teor social, que atendam necessidades e contribuam para a população/comunidade.

4. A etapa final, seria recolher os investimentos arrecadados a partir do site e realizar os projetos divulgados, tornando projetos e ideias de interesse público em coisas reais.

Projeto Nós

Desconstrução (Análises)

Termos Pertinentes ao Projeto

Crowdfunding/Financiamento coletivo

O Crowdfunding (ou financiamento pela multidão, em tradução literal) é uma modalidade de investimento onde várias pessoas podem investir pequenas quantias de dinheiro no seu negócio, geralmente via internet, a fim de dar vida à sua ideia.

Segundo Silva (2012) termo crowdfunding, que em português pode ser traduzido como financiamento coletivo ou financiamento colaborativo, é um novo conceito para uma antiga prática: unir pessoas em prol de um projeto para viabilizá-lo financeiramente.

Filantropia

1. profundo amor à humanidade.

2. desprendimento, generosidade para com outrem; caridade.

Segundo Nogueira & Schommer (2009), filantropia corresponde a um impulso interior das pessoas para doar tempo, dinheiro ou conhecimentos, acima de seus interesses pessoais ou institucionais, para melhorar a situação de outros ou para o bem comum.

Site

Local na Internet identificado por um nome de domínio, constituído por uma ou mais páginas de hipertexto, que podem conter textos, gráficos e informações em multimídia.

Segundo o Wikipedia (2017), Um website ou site, também aportuguesado para saite  ou sítio ("da Web" ou "da Internet"), é um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na internet. O conjunto de todos os sites públicos existentes compõe a World Wide Web. As páginas num site são organizadas a partir de um URL básico, ou sítio, onde fica a página principal, e geralmente residem no mesmo diretório de um servidor. As páginas são organizadas dentro do site numa hierarquia observável no URL, embora as hiperligações entre elas controlem o modo como o leitor se apercebe da estrutura global, modo esse que pode ter pouco a ver com a estrutura hierárquica dos arquivos do site.

Incentivo

Que ou aquilo que incende, estimula, incita, encoraja.

Eccheli (2008) define incentivo como: o estímulo exterior que visa despertar no indivíduo vontade ou interesse para algo.

Benefício

1. ato ou efeito de fazer o bem, de prestar um serviço a outrem; auxílio, favor.

2. graça, privilégio ou provento concedidos a alguém; proveito, vantagem, direito.

Segundo de Araújo (2006), os benefícios sociais são incentivos internos oferecidos com o objetivo de satisfazer às necessidades pessoais, proporcionando um ambiente mais harmonioso e produtivo;

Meta

Objetivo que se almeja.

Segundo Marcio (2013), meta é a expressão do objetivo que se deseja atingir. Existem as metas individuais (comum a todas as pessoas), sejam elas descritas ou não e as metas empresariais.

Campanha

Conjunto de peças que são criadas objetivando atingir um determinado público-alvo. É a forma como é exposta a mensagem e a abordagem do diferencial do produto e/ou o apelo central do produto, feito de forma criativa e diferenciada para chamar a atenção do observador e persuadi-lo a compra.

Segundo Brito (2008), campanhas são um conjunto de peças que são criadas objetivando atingir um determinado público-alvo. É a forma como é exposta a mensagem e a abordagem do diferencial do produto e/ou o apelo central do produto, feito de forma criativa e diferenciada para chamar a atenção do observador e persuadi-lo a compra.

Projeto digital

Um projeto consiste em esforço temporário empreendido com um objetivo pré-estabelecido, definido e claro, seja criar um novo produto, serviço, processo. Tem início, meio e fim definidos, duração e recursos limitados, em uma sequência de atividades relacionadas. Projetos de mídias digitais, de plataformas ou ambientes interativos de certa forma existem como serviços oferecidos ao público e necessitam de uma mentalidade holística centrada nestes serviços.

Segundo o Wikipedia (2017), um projeto é normalmente definido como um empreendimento colaborativo, frequentemente envolvendo pesquisa ou desenho, que é cuidadosamente planejado para alcançar um objetivo particular.

Social

O social é aquilo que pressupõe relações, sociabilidade, abarcando relacionamentos, sentimentos, modos de ser, de estar, de agir e de se manifestar. Aplica-se mais ás interações humanas significativas para os sujeitos.

Segundo o Wikipedia (2017), os seres vivos, incluindo os seres humanos, são sociais quando vivem coletivamente em populações interagindo, se estão cientes disso ou não, e se a interação é voluntária ou involuntária.

Mobilização

Mobilização é o ato de reunir e preparar tanto tropas como provisões, em geral para uma guerra. O termo "mobilização" (em alemão "Mobilmachung") foi primeiro usada, em um contexto militar, para descrever a preparação do exército prussiano durante os anos de 1850 e 1860.

Segundo Toro e Weneck (2004) a mobilizaçao ocorre quando um grupo de pessoas, uma comunidade ou uma sociedade decide e age com um objetivo comum, buscando, quotidiniamente, resultados decididos e desejados por todos. Mobilizar é convocar vontades para atuar nas busca de um propósito comum, sob uma interpretação e um sentido também compartilhados.

Análise de Referências e Similiares

SIMILARES

Kickstarter

Site em formato de crowdfunding que ajuda artistas, músicos, cineastas, designers e outros criadores a encontrar os recursos e o apoio que precisam para tornar suas idéias uma realidade.

É similar ao nosso projeto por ser um site de financiamento coletivo, além disso tornou-se uma referência pelas cores e pela estrutura do layout.

Benfeitoria

Site em formato de crowdfunding que busca recursos para financiar projetos de impacto cultural, social, econômico e ambiental.

Além de ser um similar (é um site de financiamento coletivo - que apresenta o mesmo modelo de negócio e elementos de interface) também é uma referência pelo layout clean.

Catarse

É o site em formato de crowdfunding mais famoso do Brasil, contando com diversas categorias de projetos, desde Artes, Ciências e Tecnologias até Pessoais, dedicada às famosas "vaquinhas", como despesas medicas, viagens, estudo e casamento.

É similar por ser um site de financiamento coletivo, com o mesmo modelo de negócio e por ter os mesmos elementos de interface.

Confira abaixo a análise dos 3 sites:1.png2.png3.png4.png5.png

REFERÊNCIAS

Spotify

Spotify é um serviço de música, podcasts e vídeo em streaming, que fornece conteúdo provido de restrição de gestão de direitos digitais de gravadoras e empresas de mídia, incluindo a Universal Music , a Sony Music e a Warner Music. As músicas podem ser navegadas ou pesquisadas por artista, álbum, gênero, lista de reprodução ou gravadora. As assinaturas pagas "Premium" removem anúncios, melhora a qualidade do áudio e permite aos usuários baixar músicas para ouvir offline.

 

Escolhemos o Spotify como referência pelas suas tendências de design atuais. Trabalha muito bem as cores, por vezes usando degradês. Apresenta seu site em formato de landing page, com um layout muito bonito, com boa navegabilidade.

 

Cabify

 
O Cabify é uma empresa que conta com a parceria de motoristas particulares para a prestação de serviço de transporte urbano de passageiros. O funcionamento do Cabify se dá por meio de um aplicativo. Através dele, os passageiros interessados na contratação de um “motorista particular”, fazem a solicitação e já efetuam o pagamento pelo serviço via cartão de crédito diretamente na plataforma. O site do Cabify serve como meio de cadastro para usuários, motoristas e empresas interessadas. 

Escolhemos o site do Cabify por ser minimalista, sucinto e ter um layout bem didático e moderno.

 

Co-motion

 

A Co-motion é um estúdio de design localizado em Indianápolis. A empresa colabora com empresários e diretores de marketing, para re-imaginar identidades de empresas e marcas que durem por muito tempo. E uma vez que essas marcas são criadas, os clientes precisarão de outros serviços como materiais, campanhas e ajuda na divulgação/propagação da marca.

 

Definimos o Co-motion como referência, por ser um site minimalista e saber como exibir seus projetos, tornando-os atrativos aos olhos de quem vê.

 

cabify análise-01.jpg

Análise Funcional e de Uso

SIMILARES

kickstarter_fluxo.jpg

1. Explorar

Ao clicar neste botão, abre um menu com diversas opções para navegação no site, entre as opções estão coleções, categoriais e “em nosso radar”, uma categoria que busca projetos próximos a localização do usuário.

2. Começar um Projeto

Essa opção irá direcionar o usuário para uma página específica, onde ele encontrará opções e informação de como criar o seu projeto.

3. Sobre Nós

Página institucional do Kickstarter, falando sobre a empresa, missão, valores e os projetos preferidos da empresa.

4. Pesquisar

Menu de pesquisa padrão, irá realizar buscas dentro do site.

5. Entrar

Menu para o usuário já cadastrado acessar o conteúdo do site. Quando logado o usuário tem acesso aos seus projetos criados (projetos financiados pelo usuário), e projetos já contribuídos (que o usuário tenha ajudado a financiar).

6. Inscreva-se

Opção para que o usuário realize o seu cadastro no site.

7. Banner Principal - Saiba Mais

Este banner é rotativo, cada banner se refere a algum conteúdo/projeto, e o botão Saiba Mais irá direcionar exclusivamente para o conteúdo referente ao seu banner.

8. Navegação de Banners

Estes botões irão alterar os banners principais, dando liberdade de visualização ao usuário.

9. Categoriais

Este menu mostra as categoriais dos projetos.

10. Projetos Destaque

Essa área mostra um projeto especial de cada categoria, esse projeto é selecionado a dedo pela empresa e geralmente são idéias brilhantes e/ou que terão algum impacto.

11. Localização do Projeto

Este botão informa a localização na qual o projeto está sendo criado. Ao clicar nele, direciona para uma página com projetos do mesmo local.

12. Categoria

Informa aqual categoria o projeto pertence. Ao clicar nele, direciona para uma página com projetos da mesma categoria.

13. Informações Gerais

Essa área informa o andamento do projeto. Entre as informações estão: qual o valor para a realização, quanto falta para completar o valor, valor arrecadado, data de término e quantos financiadores contribuíram.

14. Projetos Pré-Finalizados

Essa área mostra projetos que estão quase financiados, dando visibilidade para que consigam atingir o seu objetivo.

15. Projetos Que Amamos

Uma espécie de “Favoritos” da empresa, são projetos que recebem algum destaque para aumentar a sua visibilidade.

16. Ver Tudo

benfeitoria_fluxo.jpg

 

 

1. Explorar

Página institucional do Benfeitoria, falando sobre a empresa, missão, valores e algumas informações da empresa.

2. Como Funciona

Essa opção irá direcionar o usuário para uma página específica, onde ele encontrará informação sobre como iniciar os seus projetos.

3. Projetos

Esta página mostra os projetos no site, os projetos podem ser filtrados por duas categoriais principais, Coletivo (financiamento coletivo comum, onde diversas pessoas doam para que o projeto seja realizado) e Recorrente (financiamento contínuo, para projetos que necessitam de uma colaboração mensal para se manter). 

4. Envie o Seu

Botão para que o usuário inicie o seu projeto.

5. Entrar

Menu para o usuário já cadastrado acessar o conteúdo do site. Quando logado o usuário tem acesso aos seus projetos criados (projetos financiados pelo usuário), e projetos já contribuídos (que o usuário tenha ajudado a financiar).

6. Banner Principal

Botão para o usuário interagir com o banner principal que estiver sendo mostrado no momento.

7. Banner Principal - Saiba Mais

Este banner é rotativo, cada banner se refere a algum conteúdo/projeto, e o botão Saiba Mais irá direcionar exclusivamente para o conteúdo referente ao seu banner.

8. Navegação de Banners

Estes botões irão alterar os banners principais, dando liberdade de visualização ao usuário.

9. Financiamento Coletivo

Este botão inicia um projeto com financiamento coletivo comum, onde diversas pessoas doam para que o projeto seja realizado.

10. Financiamento Recorrente

Este botão inicia um projeto com financiamento contínuo, para projetos que necessitam de uma colaboração mensal para se manter.

11. Projetos Destaque

Essa área mostra um projeto especial de cada categoria, esse projeto é selecionado a dedo pela empresa e geralmente são idéias brilhantes e/ou que terão algum impacto.

12. Nome do Projeto

Ao clicar, direciona o usuário para uma página sobre o projeto.

13. Informações Gerais

Essa área informa o andamento do projeto. Entre as informações estão: qual o valor para a realização, quanto falta para completar o valor, valor arrecadado, data de término e quantos financiadores contribuíram.Botão para que o usuário veja todos os projetos relacionados.

catarse_fluxo.jpg

1. Começar um Projeto

Essa opção irá direcionar o usuário para uma página específica, onde ele encontrará opções e informação de como criar o seu projeto.

2. Explorar

Ao clicar neste botão, o usuário é direcionado para uma página com diversas opções de categoriais, na qual irá escolher entre elas para visualizar os projetos.

3. Pesquisar

Menu de pesquisa padrão, irá realizar buscas dentro do site.

4. Entrar

Menu para o usuário já cadastrado acessar o conteúdo do site. Quando logado o usuário tem acesso aos seus projetos criados (projetos financiados pelo usuário), e projetos já contribuídos (que o usuário tenha ajudado a financiar).

5. Banner Principal - Botão

Este banner é rotativo, cada banner se refere a algum conteúdo/projeto, e o botão Saiba Mais irá direcionar exclusivamente para o conteúdo referente ao seu banner.

6. Navegação de Banners

Estes botões irão alterar os banners principais, dando liberdade de visualização ao usuário.

7. Ajuda

Este botão acompanha o a navegação do usuário (barra de rolagem), e ao clicar, abre uma janela pequena para que o usuário pergunte algo caso tenha dúvidas.

8. Ver Tudo

Botão para que o usuário veja todos os projetos relacionados.

9. Nome do Projeto

Ao clicar, direciona o usuário para uma página sobre o projeto.

10. Informações Gerais

Essa área informa o andamento do projeto. Entre as informações estão: qual o valor para a realização, quanto falta para completar o valor, valor arrecadado, data de término e quantos financiadores contribuíram.

11. Conectar com o Facebook

Neste botão o usuário pode se conectar com o facebook ao site.

REFERÊNCIAS

spotify.png

1. Premium

Ao clicar neste botão, abre uma página com todas as infos sobre o Spotify Premium, que a pessoa pode inclusive testar de graça por 30 dias. Apresenta as vantagens do produto. 

2. Ajuda

Essa opção irá direcionar o usuário para uma página de ajuda, no qual ele pode tirar suas dúvidas de 3 formas: através de um botão “pesquisar”; através de perguntas com respostas já programadas; ou ainda, fazendo uma pergunta para o que eles chamam de “comunidade”. Nesta página também ensinam como usar alguns recursos pro programa.

3. Baixar

Página para baixar o software para o seu computador, contendo também links que direcionam para a Apple Store e Google Play.

4. Increver-se / Entrar

Botões para quem quer se cadastrar ou fazer login.

5. Banners Principais

Banners rotativos, cada banner se refere a alguma funcionalidade do software, contendo botões que vão levar a páginas específicas. Sendo elas: o plano familiar, desconto para estudantes e como usar o spotify no seu playstation. 

6. Aproveite o Spotify Free / Obter Spotify Premium

Ambos os botões do banner levam a páginas já citadas anteriormente, a 3 - Baixar e a 1 - Premium, respectivamente. 

7. Saiba mais sobre o Spotify

A partir dai, a página rola falando um pouco sobre o Spotify, sobre as funcionalidades e vantagens de usar o streaming de músicas. Mais abaixo aparecem novamente links para ir às páginas já citadas anteriormente, como o 3 - Baixar, 0 1 - Premium, o plano família e o de estudante. 

8. Botão de rolagem

Esse botão sempre vai centralizar a próxima seção do site na tela, sendo assim o usuário não precisa ficar se preocupando em rolar a página com o mouse. 

 fluxo cabify.png

 1. Home

Botão que retorna para a home page quando se estiver acessando outra página.

2. Business

Direciona para a página de serviços para empresas, suas vantagens, e campo de cadastramento.

3. Drivers

Leva à página de cadastro de motoristas, apresentando as vantagens do serviço.

4. Help

Acessa à página de dúvidas, que possui barra para busca e as questões mais frequentes já respondidas.

5. Fares

Direciona à página de tarifas, onde é possível calcular o valor de corridas, preenchendo os campos de endereço de partida e final da corrida. Mostra também as cidades atendidas.

6. Login

Acessa a página para efetuar o login, com email e senha.

7. Sign Up

Acessa a página com campos para preencher os dados de cadastro de novos clientes.

8. Let's Go

Ao clicar no botão, o usuário é direcionado para a página de cadastro de novos clientes.

9. Botão de rolagem

Rola a página para visualizar o box de informações.

10. More Information

O link direciona para a página de cadastro de motoristas, apresentando as vantagens do serviço.

11. Join Now

O link direciona para a página apenas de cadastro de motoristas.

12. A Service, Local Suport e Stay Safe

Mais detalhes sobre o serviço.

13. Cabify Cities

Informações sobre as localidades atendidas, com links que direcionam à página das tarifas, onde é possível calcular o valor de corridas, preenchendo os campos de endereço de partida e final da corrida. 

 Ainda ao rolar a página, temos mais informações sobre os tipos de serviços, benefícios e rodapé institucional, com links de acesso às páginas: Nova Marca, que explica o conceito e mudança do identidade visual; Blog, que possui postagens sobre temas que envolvem a empresa/serviço de transporte; Jobs, onde é possível ver as vagas de emprego da empresa; Drivers, que direciona página de cadastro de motoristas, apresentando as vantagens do serviço; Business, direcionando para a página de serviços para empresas, suas vantagens, e campo de cadastramento; Developers, página com informações direcionadas a desenvolvedores e programadores; Terms and Conditions, onde é possível ter acesso aos termos de serviço de cada localidade; Privacy Policy, com os termos de privacidade do aplicativo e site do serviço; e Help, que acessa à página de dúvidas, que possui barra para busca e as questões mais frequentes já respondidas.

 

comotion.jpg

 

1. About

Direciona para uma página institucional da empresa, com informações gerais da empresa, missão e valores.

2. Work

Página sobre trabalhos realizados pela empresa, uma espécie de portfólio.

3. Contact

Página padrão para contato, com campos para serem preenchidos, telefone, e-mail, endereço e demais dados.

4. Sandbox

É um playground da empresa, onde eles realizam trabalhos por diversão, para aprimorar suas habilidades ou simplesmente explorar idéias.

5. Redes Sociais

Ícones com as redes sociais da empresa, Instagram, Dribble e Twitter.

6. Títulos

O site possui títulos com muita presença, geralmente são formados por poucas palavras, com uma fonte clara e um design clean.

7. Imagens

As imagens são sempre usadas de forma com que se destaque o produto/trabalho, evidenciando a qualidade do mesmo.

8. Ícone/Botão

Ao clicar neste ícone o mesmo rolará a página para o texto à seguir.

9. Meet our Team (Conheça nosso time)

O link irá direcionar para uma página sobre os profissionais da empresa.

10. Take a look (Dê uma olhada)

Direciona para a página do "Sand Box", onde eles põe a criatividade em trabalhos.

Resultados

resultados2.png

Projeto Nós

Reconstrução (Geração de Alternativas A)

Definição das Funcionalidades e Conteúdos

Listamos as principais funcionalidades e conteúdos pertencentes as duas páginas mais importantes do nosso site: a home e a apresentação de um projeto.

funcionalidades2.png

 

Segue abaixo explicação das principais funcionalidades.

Na página inicial temos:

Sobre nós

Um pouco sobre a história da empresa, sobre seus valores, objetivo e diferenciais.

Como funciona

Breve explicação sobre como funciona o "Nós", como enviar seu projeto e como fazer uma doação. Possível uso de ícones para facilitar a visualização e entendimento.

Explorar

Botão para fazer uma busca personalizada, usando palavras-chaves. 

Comece seu projeto

Explicação de como enviar sua ideia de cunho social e botão para começar o envio.

Login/cadastrar

Para fazer o envio de projeto/doação deve-se fazer um cadastro no site. Alguns itens são indispensáveis, além dos tradicionais, como por exemplo o endereço da pessoa para que ela possa receber sua recompensa caso opte por esse tipo de doação. Para somente navegar no site não é necessário fazer cadastro/login.

Banner rotativo 

Vários banners com as funcionalidades do site, podendo inclusive serem apresentados projetos importantes nesta sessão.

Projetos em destaque

Espaço para os projetos em destaque.

Projetos quase finalizados

Espaço para os projetos que estão quase alcançando sua meta. 

Novidades

Espaço para os novos projetos que estão surgindo.

Área de parceiros

Espaço com projetos patrocinados pelos nossos parceiros, além de citar quais são eles.

Rodapé

Além de repetir os itens do menu principal, vamos trazer alguns novos, tais como ajuda, termos de uso, política de privacidade, suporte e denunciar um projeto.

Em cada projeto temos:

Projeto

Descrição do projeto de forma simples e objetiva, podendo usar texto, vídeos e abusar de imagens e infográficos.

Espaço para botões de compartilhar o projeto: no twitter, facebook e outras redes sociais.

Apoiadores

Quem já apoiou determinada projeto.

Novidades

Novidades sobre determinado projeto.

Comentários

Espaço para os apoiadores deixarem comentário sobre o projeto e afins.

Voltar ao topo

Botão no fim da página para voltar ao topo do site.

Valor arrecadado

Descrição do valor arrecadado e da meta de forma bem detalhada, com infos como total de apoiadores, porcentagem arrecadada e dias restantes para bater a meta.

Botão de apoiar

Quando clicado, rola para a parte de escrever um valor para doar ou optar por uma das recompensas.

Criador do projeto

Algumas infos sobre o criador do projeto, contendo inclusive seu contato.

Digitar valor/Escolher recompensa

Vamos dar duas opções de doações pros colaboradores dos projetos: digitar um valor qualquer pra doar (não receberá recompensa) ou escolher um valor pré-definido que dará direito a uma pequena lembrancinha como recompensa.

 

Storytelling

Segundo Szabluk, Linden e Bernardes (2015) no design, o storytelling é utilizado como método para elaboração de cenários de uso, para criação de personas e como parte de outras ferramentas utilizadas em projetos que envolvem a experiência do usuário.

Apresentamos abaixo as duas principais formas de interação do nosso site, a partir de narrativas compostas por personas definidas no começo desse projeto. Com isso, também, são mostradas várias funcionalidades citadas na etapa anterior.

Definimos como persona 1 a Manuela, que deseja fazer uma doação online para um projeto social. E como persona 2 a Rafaela, que tem uma ideia de cunho social com muito potencial, e precisa de um espaço para apresentá-la e conseguir financiamento para fazer com que ela vire realidade.

Persona 1

Manuela procura sempre colaborar com causas sociais em sua cidade. Em busca de novas iniciativas, pesquisou na internet outras formas de apoiar projetos de cunho social. Encontrou algumas propostas em meio a diversos segmentos, entre eles o “nós”, um site de financiamento coletivo que apoia exclusivamente projetos sociais, justamente o que ela procurava. Imediatamente fez seu cadastro no site e começou a navegar entre os projetos disponíveis. Por ser estudante de moda, a ideia que visava melhorar o vestuário de catadores/coletores de lixo chamou sua atenção. Fez sua doação e recebeu via e-mail todo o andamento do projeto, podendo ainda acompanhar o processo depois que a meta for concluída. Também, recebe regularmente newsletters informando sobre os novos projetos cadastrados no site, facilitando futuras doações.

Persona 2

Rafaela é designer de moda e costuma se envolver com causas beneficentes. Observando a situação atual de garis e catadores, pensou em maneiras de ajudá-los. Identificou que o vestuário era precário. Com seu conhecimento de materiais, modelagem e tecidos, resolveu pesquisar e desenvolver uma roupa que atendesse melhor as necessidades dos usuários ao realizar a coleta. Para que o projeto se torne realidade e vá além de um protótipo, ela precisa de investidores. Ficou sabendo através de amigos do "Nós" um site de financiamento coletivo focado em dar visibilidade a ideias voltadas a causas sociais. Através dele, ela poderia conseguir financiamento tanto de pessoas interessadas em ajudar quanto de empresas e órgãos governamentais. Fez o seu cadastro no site e enviou seu projeto, definindo a meta a ser alcançada, a data limite e as recompensas para quem doar. Agora basta Rafaela compartilhar sua ideia com todos, e aguardar a meta ser concluída para então dar segmento ao seu projeto. 

 

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

A partir das personas definidas na etapa anterior, descrevemos as duas principais interações do nosso site. 

Mostramos inicialmente a interação de alguém que quer doar para um dos projetos listados em nosso site. Ela já possui cadastro e está logada. Sendo assim, primeiro a pessoa escolhe o projeto de interesse, em seguida define o valor da doação por meio das opções pré estabelecidas como recompensas, depois decide a forma de pagamento e por fim preenche com os dados do cartão de crédito, finalizando sua contribuição.

Para visualizar o wireflow desta interação, acesse o link: marvelapp.com/5hc502h

Ainda, descrevemos a interação de uma pessoa que deseja publicar em nosso site seu projeto social. Ela já tem cadastro e preencheu todos os dados necessários. Clicando então no botão do menu principal de "envie seu projeto", ela acessa a página sobre como criar um projeto, quais os benefícios de utilizar o site e comentários de pessoas que já tiveram projetos finalizados. A partir disso ela pode prosseguir para criar um novo projeto, respondendo todas etapas com atenção, visualizando o preview de como ficará a página do projeto criado e então publicar para começar a divulgá-lo.

 Para visualizar o wireflow desta interação, acesse o link: marvelapp.com/28j36cd

Projeto Nós

Identidade e Diferenciação

Desenvolvimento da Assinatura Visual

Para a criação da nossa identidade visual seguimos alguns aspectos importantes indicados por Wheeler (2008): conceito, legalidade, personalidade, atemporalidade, pregnância, uso e aplicabilidade.

Montamos um moodboard de imagens para melhor visualizar o conceito que a identidade visual irá buscar. A ideia é propor uma identidade amigável e simples, que represente bem o que um financiamento coletivo social deve ser.

moodboard02.png

 A partir disso, foi feita a geração de alternativas, sketch e refino do caminho escolhido, até alcançar a identidade final. 

gif_editavel.gif

Propomos a versão com decodificador e a limpa, sem o decodificador, que melhor se adequa para aplicações com redução.

02_assinaturas.jpg

Também é possível aplicá-lo nas cores institucionais, e em negativo, para gerar contraste em fundos coloridos.

03_versoescromaticas.jpg

 

03_aplicacaofundos.jpg

Escolha Tipográfica

Circular

Conforme análise feita anteriormente, identificamos que nossas referências (2 das 3 analisadas) usavam em seu site a fonte Circular. Definimos, após pesquisar sobre a mesma, que ela seria ideal pro nosso projeto pelo seu conceito simples.

Circular é uma fonte geométrica sem-serifa criada pelo designer suíço Laurenz Brunner. Lançada em 2013 através do Lineto, o projeto se baseia principalmente em formas geométricas, porém possui detalhes que lhe dão muita personalidade.

Simples, atemporal e neutra, a fonte não rouba as atenções para si mesma, deixando em destaque os projetos sociais presentes no site. Tem uma forma agradável e uniforme, substancial mesmo em seu peso mais leve, se encaixando na nossa proposta de buscar simplicidade.

A fonte é bem completa, trazendo além de todos os glyphs tradicionais (maiúsculo, minúsculo, números, pontuação, acentos latinos, operações matemáticas), opções de ligaturas, símbolos, setas, números ordinais e até mesmo números romanos. Além disso, a fonte contém 4 estilos diferentes (todos tem também sua versão em itálico), o que é útil para identificarmos textos que são mais importantes em nosso site. 

 

tipografia.png

Escolha do Padrão cromático

Verificamos a partir das análises feitas anteriormente, na desconstrução, que roxo e verde são cores presentes tanto na identidade visual quanto nos sites, de similares e referências. 

Além disso, o roxo significa criatividade e sabedoria, remetendo a algo moderno. Enquanto isso, o verde transmite vitalidade e seriedade, remetendo a algo mais harmonioso e tranquilo, simbolizando bem o que queremos transmitir com nosso site. São cores tendência e que funcionam bem juntas, possibilitando também o uso em gradiente. 

 

 padrao_cromatico.png

Definição Imagética

Após as análises dos similares e referências foi possível definirmos nosso padrão de ícones e imagens. Utilizamos ícones em outline, muito presente nas referências buscadas, e que, de acordo com as recomendações de Meurer e Szabluk (2012), podem ser aplicados tanto em negativo quanto nas cores coerentes com a identidade visual. imagética.png

As imagens institucionais também podem ser aplicadas com filtro nas cores da identidade.imagética 3.pngimagetica.jpg

imagética 2.png

Diferenciação

Avaliamos a nossa identidade visual com o intuito de definir onde ela se posiciona frente aos similares, e se ela representa o conceito que propõe. Por meio de 4 quadrantes e 2 eixos, definimos as características que queríamos alcançar com a identidade visual e aplicamos um teste com usuários, que segundo Memória (2005), pode ser chamado de mapeamento de expressões. As características buscadas foram: simples e amigável.

Apresentamos nossa identidade visual para 15 usuários, para que pudessem posicioná-la no mapa conforme as características que lhe atribuíam. 

 

diferenciação_pessoas.png

Observamos que 4 pessoas apontaram a identidade como complexa/amigável, somente 2 pessoas como simples/sério, nenhuma como complexo/sério e 9 pessoas posicionaram ela como amigável/simples. Concluímos que atingimos as características buscadas e o conceito proposto.

A partir disso, posicionamos nossa identidade visual (conforme percepção dos usuários) e a dos similares (conforme nossa percepção) num mapa com os mesmos quadrantes e eixos, a fim de compará-los. O resultado segue abaixo. 

diferenciação.png

Desenho das telas da interface

A interface do Nós foi projetada pensando na melhor experiência de usuário possível. Incorporamos em nosso site várias funções que facilitam a navegação, além de trazer um layout clean, didático e moderno.

3.png

1.png

Inserimos páginas como "Sobre Nós" e "Como funciona" para que o usuário tenha acesso a todas as informações sobre Nós, trazendo segurança para que o mesmo faça doações e compartilhe suas idéias. 

4.png

5.png

A página de "Projeto" traz um layout bem intuitivo, com vídeos, imagens, gráficos e texto sobre a ideia apresentada, para que o usuário possa ter todas as informações necessárias antes de colaborar com a causa. 

2.png

 

8.png

No "Envie seu projeto" mostramos o passo à passo de enviar um projeto, comentários de quem o fez, como funciona e solucionamos o máximo de dúvidas possíveis, a fim de encorajar o colaborador a mandar sua ideia para Nós. Depois entram os formulários, que são bem didáticos e contém várias explicações sobre como proceder em cada etapa, auxiliando o colaborador a montar um projeto ideal que vá mobilizar muitos recursos. 

6.png

 

7.png

Abusamos de cores, ícones, estilos e tamanhos variados de fonte para trazer as informações aos usuários, conforme sua importância, facilitando a leitura.

Protótipo Interativo

Para acessar em tela cheia acesse: xd.adobe.com/view/d3fe49bd-7939-4489-aa06-2030b1c00f82/?fullscreen

Considerações finais

O objetivo inicial deste trabalho era de apresentar uma melhoria na qualidade de trabalho dos garis/coletores, com uma abordagem dos equipamentos atuais, identificando problemas presentes e buscando possíveis soluções para a situação.

Através de pesquisas e entrevistas com funcionários da área, conseguimos identificar algumas necessidades e/ou desejos que poderiam ser alcançados com o projeto. Um ponto relevante é a busca em uma qualidade de trabalho melhor, mais confortável e adequada, visando melhorias também na qualidade de vida do usuário.

Paralelamente, percebemos que dentre as necessidades e restrições, havia uma real necessidade de investimentos para que o projeto se concretizasse, o que resultou na criação da segunda etapa do projeto.

Esta etapa abrangeu um processo chamado "Nós", no qual pessoas são capazes de melhorar um ambiente com união e investimento conjunto. Nesta etapa desenvolvemos o site que serviu como plataforma para idealização dessas idéias.

Partimos de uma ideia fechada, que atingiria apenas um nicho de trabalhadores e, na medida em que o projeto avançou, criamos a possibilidade de ir além, alcançando necessidades que muitas vezes são deixadas de lado, ou pior, deixadas de lado por quem é responsável. O vestuário para garis é apenas um começo, o início de uma colaboração que pode atingir diversas outras áreas e melhorar muitos setores em situações precárias.

De forma geral, podemos investir em desejos em comum, adaptando idéias e realizando ações que melhorem a sociedade, sendo essas ações pequenas, grandes, diretas ou indiretas, o que importa é a vontade de colaborar.

Nós projetamos. Nós colaboramos. Nós realizamos.

Apresentação Final para a Disciplina

Fizemos duas apresentações finais, a primeira somente para a nossa turma - Design Gráfico, contendo todas as informações sobre o site de financiamento coletivo social desenvolvido ao longo do semestre, o Nós. 

 A segunda, para as 3 turmas de Design - Moda, Produto e Gráfico, contendo os 3 projetos realizados de forma integrada: vestuário para coletores de lixo (roupa e sapato) e o site que pretende mobilizar recursos pra tornar o vestuário realidade.

 As meninas da Moda (Andrezza Frozi) e do Produto (Júlia Sakakibara) desenvolveram 2 vídeos para a apresentação final sobre seus projetos, conforme orientação dos seus professores. 

 

Para seguir no Behance :)

Andrezza Frozi

Carlo Bedin

Gabriela Nonnenmacher

Maysa Severo

Projeto Nós

Referências Bibliográficas

Recomendadas e Aceitas

Gerais

  • SILVA, Bianca Caetano da. CROWDFUNDING UMA ALTERNATIVA PARA O FINANCIAMENTO DE PROJETOS CULTURAIS. 2012. 39 f. Monografia (Especialização) - Curso de Produção Cultural, Universidade Federal Fluminense, Niterói, 2012.

    NOGUEIRA, Fernando do A.; SCHOMMER, Paula Chies. Quinze anos de investimento social privado no Brasil: conceito e práticas em construção. Anais do XXXIII Encontro da Anpad, 2009.

    WIKIPEDIA. https://pt.wikipedia.org/wiki/Site. Acesso em: 25 abr. 2017.

    ECCHELI, Simone Deperon. A motivação como prevenção da indisciplina Motivation as indiscipline prevention. 2008.

    DE ARAUJO, Luis César G.; GARCIA, Adriana Amadeu. Gestão de pessoas. Atlas, 2006.

    MARCIO, Paulo (Ed.). Qual é o significado de Meta? 2013. Disponível em: http://sistemasdegestaointegrada.blogspot.com.br/2011/05/qual-e-o-significado-de-meta-para-que.html. Acesso em: 15 abr. 2017.

    BRITO, Breno. Os tipos de campanha: Desenvolvimento de Campanha. Piauí: Apostila 4, 2008. 6 p. Disponível em: http://brenobrito.com/files/Des_Campanha-APOSTILA05-Tipos_de_Campanhas.pdf. Acesso em: 15 abr. 2017.

    WIKIPEDIA. https://pt.wikipedia.org/wiki/Projeto. Acesso em: 25 abr. 2017.

    WIKIPEDIA. https://en.wikipedia.org/wiki/Social. Acesso em: 25 abr. 2017.

    TORO, José Bernardo; WERNECK, Nisia Maria Duarte. Mobilização Social: Um modo de construir a democracia e a participação. Belo Horizonte: Editora Autênctica, 2004. 104 p.

  • SZABLUK, Daniela; LINDEN, Júlio Carlos de Souza van der; BERNARDES, Mauricio Moreira e Silva. A narrativa da marca: o storytelling como face da autenticidade. Ano 2015 - V.19 - N. 02. 14 f. Artigo de periódico. Disponível em: http://hdl.handle.net/10183/148989. Acesso em: 27 jun. 2017.
  • WHEELER, Alina. Design de identidade da marca: um guia completo para a criação, construção e manutenção de marcas fortes. 2. ed. Porto Alegre: Bookman, 2008.
  • https://lineto.com/The Fonts/Font Categories/Text Fonts/Circular/Book/About this Font/ https://fontsinuse.com/typefaces/31411/ll-circular
  • MEURER, Heli; SZABLUK, Daniela. PROJETO E: Metodologia Projetual para Desenho de Ambientes Dígito-Virtuais. In: VAN DER LINDEN, Júlio C. S.; MARTINS, Rosane F. F (Org). Pelos Caminhos do Design. Rio de Janeiro: Editora Rio Books, 2012.
  • MEMÓRIA, Felipe. Design para a Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.