AI - Comunidade de Consumo Crítico

1.851 visualizações

Publicada em

Trabalho para a disciplina de Arquitetura de Informação da Pós-graduação em Ergodesign da PUC-Rio.

Desenvolvido em grupo com Carlos Kramer e Adolfo Sabino.

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.851
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.198
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

AI - Comunidade de Consumo Crítico

  1. 1. PROJETO DESITE DE MODADisciplina de Arquitetura da InformaçãoPUC Rio – Ergodesign de InterfacesAdolfo SabinoAugusto BarbosaCarlos Kramer
  2. 2. PÚBLICO-ALVO
  3. 3. PÚBLICO-ALVO• sexo feminino • costumam buscar• classe A e B informações sobre moda• entre 16 e 50 anos • fazem compras online com frequência
  4. 4. BENCHMARKS
  5. 5. BENCHMARKSPETISCOS – WWW.JULIAPETIT.COM.BRBlog sobre moda, com muitostutorias, e ótimo relacionamento comleitoras.Características:• Inclui a publicidade de uma maneira divertida e diluída no site• Vários posts por dia, em média mais de 3 todos os dias Focado em artigos sobre moda e tutoriais• Linguagem informal
  6. 6. BENCHMARKSGAROTAS ESTÚPIDAS - WWW.GAROTASESTUPIDAS.COMBlog brasileiro de moda maisinfluente no mundo em 2009,segundo o site Signature9.Características:• Conteúdo com opiniões pessoais• Foco em produtos e consumo• Patrocinadores e parceiros ($)• Divulgação de eventos e produtos• 3+ posts semanais• Linguagem informal - público jovem• Lista de posts mais lidos
  7. 7. BENCHMARKS2BEAUTY - WWW.2BEAUTY.COM.BRComunidade virtual voltada paraprodutos de moda.Características:• Conteúdo com opiniões pessoais• Foco em testes e utilização de produtos• Patrocinadores e parceiros ($)• Três seções: Blog, Tutoriais e Fórum• Tutoriais estão disponíveis no blog e em PDF• Conteúdo no Flickr, Youtube, Twitter, Twitpic• Sorteio de produtos e enquetes para visitantes• Newsletter de atualizações
  8. 8. BENCHMARKSSEPHORA - WWW.SEPHORA.COME-commerce de rede de cosméticoscom mais de 750 lojas em 17 paísesrepresentando cerca de 250 marcas.Características:• Produto com descrições formais• Conteúdo colaborativo • Rating de produtos (1-5) • Avaliação de produtos pelos clientes • Avaliação da avaliação (útil/não-útil) • Perguntas e respostas de produtos• Navegação por tipo de produto, marca, gênero
  9. 9. BENCHMARKSSEPHORA - WWW.SEPHORA.COMCaracterísticas:• Conteúdo relacionado (você pode gostar também de...)• Canal personalizado no Youtube, conteúdo no Twitter e Facebook• Brindes (amostras grátis) para compradores• Recursos de e-commerce (cadastro de cliente, carrinho de compras, pagamento online)• Newsletter de ofertas• Blog com recomendações de produtos, linkando para página de compra
  10. 10. CONCEITUAÇÃOComunidade de consumo crítico
  11. 11. CONCEITUAÇÃOCOMUNIDADE DE CONSUMO CRÍTICOSite focado em produção de conteúdo de moda Na primeira fase o site seria alimentado porpor consultores e usuários. matérias produzidas por consultores, especialistas e pessoas reconhecidas na áreaAssociados ao conteúdo, estariam produtos de moda, em especial pessoas que já produzemdisponíveis para compra através do próprio site, conteúdo para internet focado no mesmoque poderiam ser adquiridos por clientes e público-alvo (Ex: Julia Petit, Marcos Costa,fornecidos por lojas parceiras. Fernanda Yamamoto, Lilian Pacce e outros). A interação dos usuários acontecerá por meio deApós a compra, o consumidor poderia retornar, comentários, rankings de artigos, indicação eavaliar o produto comprado e avaliar a dica ou compartilhamento de artigo. Num segundoresenha de quem recomendou o produto, momento, poderíamos abrir para artigos deindicando, nesse momento, mais produtos. usuários mais ativos. A primeira fase do site será direcionada ao público feminino. A segunda poderá incluir o público masculino, provavelmente numa interface um pouco diferente, sob uma outra marca, vendida com site “irmão”, da mesma rede, mas voltado para o público masculino.
  12. 12. CONCEITUAÇÃOABORDAGEM INOVADORAA abordagem do site traria uma nova forma de O site não se apresentará como um e-consumir produtos de moda. Com algumas commerce, não será possível buscar por umentrevistas, e análise do comportamento de produto e vê-lo sem nenhuma relação com umalgumas consumidoras dentro do nosso público conteúdo. A navegação será feita através doalvo, percebemos que o consumo conteúdo conteúdo, e o conteúdo dará acesso aossobre moda (artigos, reviews, tutorias, vídeos) é produtos. Nosso objetivo é que que o público-muito grande, mas em geral é dissociado da alvo do site o perceba como um site depossibilidade de compra dos produtos. conteúdo, que traz infomrações úteis sobre produtos de moda, dicas valiosas sobre comoNosso diferencial é permitir que o consumo do usar esses produtos, e ao mesmo tempo facilitaconteúdo seja acompanhado do consumo do o acesso aos produtos aos quais o conteúdo fazproduto, facilitando a compra através do próprio referência, para que a leitora possa testar por sisite. mesma e por em prática os tutoriais.
  13. 13. LISTA DEFUNCIONALIDADES
  14. 14. LISTA DE FUNCIONALIDADESHOME TELA DE CADASTRO• Área para login e cadastro (permanente em Box para quem já é cadastrado efetuar login: todo o site); • E-mail ou username;• Menu de categorias e looks (em todo o site, • Senha; exceto fechamento de compra); • Link “esqueci minha senha”.• Destaques editorias;• Melhor rankeados; Cadastro• Mais comentados; • Espaço para nome e sobrenome• Artigos mais recentes; • Espaço para username;• Tutoriais em destaque; • Email;• Rodapé estilo sitemap (em todo o site). • Confirme email; • Senha; • Confirme senha.ARQUIVO POR CATEGORIA• Lista de artigos e tutoriais numa categoria Deseja fornecer dados para agilizar suas compras? • Ordenar por: • Em caso positivo: • Mais recentes • Endereço; • Mais lidos • CEP; • Melhor rankeados • CPF.• Ccada item com thumbnail, autor, data e leading.
  15. 15. LISTA DE FUNCIONALIDADESARTIGO DETALHADES DO PRODUTO• Título, autor, data, leading e imagem principal; • Título• Tags; • Imagem do produto;• Conteúdo relacionado; • Informação detalhada (tamanho, peso, cor,• Ranking (estrelas ou corações); toda informação necessária para a compra);• Botões de share (facebook, g+, twitter, enviar • Preço; por email); • Mais conteúdo relacionado ao produto;• Comentários anteriores e espaço para • Botão para adicionar ao carrinho. comentar;• Produtos citados no conteúdo e/ou similares com respectivas informações (gatilho para CARRINHO comprar), foto, nome, informação resumida, • Lista de produtos adicionados, com preço. informação resumida, preço e seletor de • Link para informação detalhada. quantidade e opção de excluir; • Informação detalhada do produto aparece • Valor total da compra; em janela modal, mantendo o contexto do • Espaço para incluir CEP; conteúdo, para não dar ao site um aspecto • Espaço para código promocional; de e-commerce. Botão para adicionar ao carrinho. • Botão “calcular”; • Valor total com frete e eventuais descontos; • Botão “avançar” para ir ao fechamento de compra.
  16. 16. DIAGRAMADE NAVEGAÇÃO
  17. 17. DIAGRAMA DE NAVEGAÇÃOVISÃO GERAL
  18. 18. DIAGRAMA DE NAVEGAÇÃOLOGIN
  19. 19. DIAGRAMA DE NAVEGAÇÃOCATEGORIAS
  20. 20. DIAGRAMA DE NAVEGAÇÃOARTIGO
  21. 21. CARD SORTINGConclusões e lições aprendidas
  22. 22. CARD SORTINGRESULTADO DO CARD SORTING APLICADO
  23. 23. CARD SORTINGCONCLUSÕES E LIÇÕES APRENDIDAS O card sorting foi aplicado para avaliar as categorias de artigos escolhidos para o site. Para isto, selecionamos uma usuária que se encaixasse no perfil do público- alvo. Alguns cartões foram removidos por o usuário achar que eram desnecessários ou por não conhecer o tipo de produto especificado. Apenas um cartão teve o rótulo alterado para ficar menos formal e outro foi movido para fora de uma categoria. Vários cartões foram adicionados, sendo a categoria "acessórios" a única que não teve modificações. Entre os novos cartões, surgiu a categoria "looks completos", com cinco novas subcategorias.
  24. 24. CARD SORTINGCONCLUSÕES E LIÇÕES APRENDIDAS A usuária se mostrou bastante conhecedor do assunto, portanto todas as alterações sugeridas tiveram grande importância na definição da estrutura das categorias. O grande destaque nas mudanças foi o surgimento da categoria "looks completos", onde seriam publicados artigos com combinações de produtos que se completam dentro de um determinado tema (estação, urbano, romântico, etc).
  25. 25. WIREFRAMES
  26. 26. WIREFRAMESHOME
  27. 27. WIREFRAMESCATEGORIA
  28. 28. WIREFRAMESARTIGO
  29. 29. DESCRIÇÃO FUNCIONAL
  30. 30. DESCRIÇÃO FUNCIONAL a b cHOMEa. Logo sem link para página inicial. d1b. Menu principal exibe submenu vertical quando omouse é posicionado em cima. dc. Busca com auto complementação.d. Três destaques que mudam sozinhos de 8 em 8segundos ou com o clique do usuário. Quandousuário clica ele só volta a contagem pra mudar e gdepois que o mouse sai dos destaques. Não usartecnologia Flash. d1. Destaque com imagem menor, título, descrição com no máximo 2 linhas e imagem maior de chamada quando ativada.e. As áreas Tutorias e Artigos e Reviews têmimagens do mesmo tamanho, e ao passar o mousena imagem, a mesma se destaca. O título éseguido de no máximo 3 linhas de descrição.Textos e imagens devem ser link.f. A lista com os produtos favoritos tem navegaçãohorizontal, ao clicar nas setas o usuário move osprodutos de um lado para o outro. As setas podem fser habilitadas e desabilitadas, se os produtosestiverem no início, desabilitar a esquerda, seestiverem no final, a dadireita.g. As áreas de novidade e mais comentadosexibem os 5 últimos updates.
  31. 31. DESCRIÇÃO FUNCIONAL aCATEGORIA c ba. Logo com link para página inicial. db. Título da página pega o nome da categoria.c. Ordenação por mais recentes, mais lidos e e fmelhor rankeados.Quando ativado o link deve virartexto, ou seja, não clicável e com formataçãodiferente do link.d. Possibilidade do usuário poder ver somenteartigos, somente reviews,somente tutoriais ou acombinação que desejar desses 3, através dascheckboxes.e. Os artigos, reviews ou tutorias sempre seapresentam com uma imagem, título, data que foicriada, autor, uma breve descrição (máximo 2linhas), seu tipo (artigo, reviews ou tutorial),rankeamento e comentários com número dequantidade na frente. Ao clicar no tipo, ex. Artigo, ousuário é levado para a seção de artigos. Oscoraçõezinhos de rankeamento ficam coloridos amedida que o usuário passa o mouse em cima emarcados quando o usuário clica. Ao clicar emcomentário, abre-se um popup com todos oscomentários.f. Estaáreaexibesempreos 5 últimosupdates dosmaiscomentadosdacategoriaqueousuário seencontra.
  32. 32. DESCRIÇÃO FUNCIONAL aARTIGOa. Logo com link para página inicial. bb. Área de venda onde devem aparecer produtosrelacionados ao artigo. O usuário pode ver aimagem do produto, nome, pequena descrição,preço e a opção de colocá-lo direto no carrinho. Seclicar no produto, o usuário é levado para a páginado produto com maiores detalhes.c. A galeria de imagens só aparece quando algumusuário já postou uma imagem relacionada aoproduto. Sua navegação se comporta como listahorizontal, ao clicar nas setas o usuário move osprodutos de um lado para o outro. As setas podemser habilitadas e desabilitadas, se os produtosestiverem no início, desabilitar a esquerda, seestiverem no final, a da direita. c
  33. 33. SEO
  34. 34. SEOHOMEURL - www.[domínio do site].com.brTag title - [nome do site] - Tudo sobre moda, maquiagem, roupas e acessórios femininosmeta tag description - Tudo sobre moda, maquiagem, roupas e acessórios femininos.meta tag keywords - Moda, Roupas, Calçados, Maquiagem, Cosméticos, Acessórios,Lingerie, Looks, Matérias, Tutoriais, Análises, Resenhas, Reviews, Beleza, Saúde, Pele,CorpoTag h1 - [nome do site]Tag h2 - [meta tag description]CATEGORIA “CALÇADOS”URL - www.[domínio do site].com.br/calcados/Tag title - [nome do site] - Calçadosmeta tag description - Tudo sobre calçados: sapatos, sapatilhas, sandálias e botas.meta tag keywords - Moda, Calçados, Sapatos, Sapatilhas, Sandálias, Botas, BelezaTag h1 - Calçados
  35. 35. SEOARTIGO[titulo do artigo] = "A nova coleção de cosméticos "Extreme" da MAC deixará vocêainda mais linda."URL - www.[domínio do site].com.br/categoria/subcategoria/nova-colecao-extreme-mac-deixara-voce-mais-lindaTag title - [nome do site] - [titulo do artigo] - [categoria] - [subcategoria]meta tag description - "Na nova coleção "Extreme" de cosméticos da MAC destacamosas melhores combinações e maneiras de usar os produtos para deixá-la mais linda doque nunca"meta tag keywords - "Dicas, MAC, Cosméticos, Maquiagem, Beleza, Coleção, Extreme,Rosto, Pele, Lançamento"Tag h1 - [titulo do artigo]Tag h2 - "Lançada na última semana de julho, a coleção tem novidades arrasadoras"Tag h3 - "Combinando dois, três ou todos os produtos"Atributo alt da imagem - "Os produtos do lançamento da coleção "Extreme" da MAC,com destaque para o batom, que pode ser combinado com todos os outros produtos"Nome do arquivo da imagem - colecao-extreme-mac-cosmeticos-batom.jpg
  36. 36. WIREFRAME DEALTA FIDELIDADE
  37. 37. WIREFRAMEGRID BLUEPRINT
  38. 38. OBRIGADO!

×