O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
PROJETO DE
SITE DE MODA
Disciplina de Arquitetura da Informação
PUC Rio – Ergodesign de Interfaces

Adolfo Sabino
Augusto ...
PÚBLICO-ALVO
PÚBLICO-ALVO




• sexo feminino        • costumam buscar
• classe A e B           informações sobre moda
• entre 16 e 50 ...
BENCHMARKS
BENCHMARKS

PETISCOS – WWW.JULIAPETIT.COM.BR

Blog sobre moda, com muitos
tutorias, e ótimo relacionamento com
leitoras.

...
BENCHMARKS

GAROTAS ESTÚPIDAS - WWW.GAROTASESTUPIDAS.COM

Blog brasileiro de moda mais
influente no mundo em 2009,
segundo...
BENCHMARKS

2BEAUTY - WWW.2BEAUTY.COM.BR

Comunidade virtual voltada para
produtos de moda.

Características:
• Conteúdo c...
BENCHMARKS

SEPHORA - WWW.SEPHORA.COM

E-commerce de rede de cosméticos
com mais de 750 lojas em 17 países
representando c...
BENCHMARKS

SEPHORA - WWW.SEPHORA.COM

Características:
• Conteúdo relacionado (você pode
  gostar também de...)
• Canal p...
CONCEITUAÇÃO
Comunidade de consumo crítico
CONCEITUAÇÃO




COMUNIDADE DE CONSUMO CRÍTICO
Site focado em produção de conteúdo de moda        Na primeira fase o site ...
CONCEITUAÇÃO




ABORDAGEM INOVADORA
A abordagem do site traria uma nova forma de        O site não se apresentará como um...
LISTA DE
FUNCIONALIDADES
LISTA DE FUNCIONALIDADES

HOME                                              TELA DE CADASTRO
• Área para login e cadastro ...
LISTA DE FUNCIONALIDADES

ARTIGO                                               DETALHADES DO PRODUTO
• Título, autor, data...
DIAGRAMA
DE NAVEGAÇÃO
DIAGRAMA DE NAVEGAÇÃO

VISÃO GERAL
DIAGRAMA DE NAVEGAÇÃO

LOGIN
DIAGRAMA DE NAVEGAÇÃO

CATEGORIAS
DIAGRAMA DE NAVEGAÇÃO

ARTIGO
CARD SORTING
Conclusões e lições aprendidas
CARD SORTING

RESULTADO DO CARD SORTING APLICADO
CARD SORTING

CONCLUSÕES E LIÇÕES APRENDIDAS

                         O card sorting foi aplicado para avaliar as
       ...
CARD SORTING

CONCLUSÕES E LIÇÕES APRENDIDAS

                         A usuária se mostrou bastante
                     ...
WIREFRAMES
WIREFRAMES

HOME
WIREFRAMES

CATEGORIA
WIREFRAMES

ARTIGO
DESCRIÇÃO FUNCIONAL
DESCRIÇÃO FUNCIONAL
                                                     a

                                              ...
DESCRIÇÃO FUNCIONAL
                                                         a

CATEGORIA                                 ...
DESCRIÇÃO FUNCIONAL
                                                      a

ARTIGO
a. Logo com link para página inicial. ...
SEO
SEO

HOME
URL - www.[domínio do site].com.br
Tag title - [nome do site] - Tudo sobre moda, maquiagem, roupas e acessórios ...
SEO

ARTIGO
[titulo do artigo] = "A nova coleção de cosméticos "Extreme" da MAC deixará você
ainda mais linda."

URL - www...
WIREFRAME DE
ALTA FIDELIDADE
WIREFRAME

GRID BLUEPRINT
OBRIGADO!
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
FASHION TRENDS - VERÃO 2015
Avançar
Próximos SlideShares
FASHION TRENDS - VERÃO 2015
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

AI - Comunidade de Consumo Crítico

Baixar para ler offline

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.

AI - Comunidade de Consumo Crítico

  1. 1. PROJETO DE SITE DE MODA Disciplina de Arquitetura da Informação PUC Rio – Ergodesign de Interfaces Adolfo Sabino Augusto Barbosa Carlos 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. BENCHMARKS PETISCOS – WWW.JULIAPETIT.COM.BR Blog sobre moda, com muitos tutorias, e ótimo relacionamento com leitoras. 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. BENCHMARKS GAROTAS ESTÚPIDAS - WWW.GAROTASESTUPIDAS.COM Blog brasileiro de moda mais influente 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. BENCHMARKS 2BEAUTY - WWW.2BEAUTY.COM.BR Comunidade virtual voltada para produtos 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. BENCHMARKS SEPHORA - WWW.SEPHORA.COM E-commerce de rede de cosméticos com mais de 750 lojas em 17 países representando 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. BENCHMARKS SEPHORA - WWW.SEPHORA.COM Caracterí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ÇÃO Comunidade de consumo crítico
  11. 11. CONCEITUAÇÃO COMUNIDADE DE CONSUMO CRÍTICO Site focado em produção de conteúdo de moda Na primeira fase o site seria alimentado por por consultores e usuários. matérias produzidas por consultores, especialistas e pessoas reconhecidas na área Associados ao conteúdo, estariam produtos de moda, em especial pessoas que já produzem disponíveis para compra através do próprio site, conteúdo para internet focado no mesmo que 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 de Após a compra, o consumidor poderia retornar, comentários, rankings de artigos, indicação e avaliar o produto comprado e avaliar a dica ou compartilhamento de artigo. Num segundo resenha de quem recomendou o produto, momento, poderíamos abrir para artigos de indicando, 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ÇÃO ABORDAGEM INOVADORA A 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 um entrevistas, e análise do comportamento de produto e vê-lo sem nenhuma relação com um algumas consumidoras dentro do nosso público conteúdo. A navegação será feita através do alvo, percebemos que o consumo conteúdo conteúdo, e o conteúdo dará acesso aos sobre 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 de possibilidade de compra dos produtos. conteúdo, que traz infomrações úteis sobre produtos de moda, dicas valiosas sobre como Nosso diferencial é permitir que o consumo do usar esses produtos, e ao mesmo tempo facilita conteúdo seja acompanhado do consumo do o acesso aos produtos aos quais o conteúdo faz produto, facilitando a compra através do próprio referência, para que a leitora possa testar por si site. mesma e por em prática os tutoriais.
  13. 13. LISTA DE FUNCIONALIDADES
  14. 14. LISTA DE FUNCIONALIDADES HOME 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 FUNCIONALIDADES ARTIGO 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. DIAGRAMA DE NAVEGAÇÃO
  17. 17. DIAGRAMA DE NAVEGAÇÃO VISÃO GERAL
  18. 18. DIAGRAMA DE NAVEGAÇÃO LOGIN
  19. 19. DIAGRAMA DE NAVEGAÇÃO CATEGORIAS
  20. 20. DIAGRAMA DE NAVEGAÇÃO ARTIGO
  21. 21. CARD SORTING Conclusões e lições aprendidas
  22. 22. CARD SORTING RESULTADO DO CARD SORTING APLICADO
  23. 23. CARD SORTING CONCLUSÕ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 SORTING CONCLUSÕ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. WIREFRAMES HOME
  27. 27. WIREFRAMES CATEGORIA
  28. 28. WIREFRAMES ARTIGO
  29. 29. DESCRIÇÃO FUNCIONAL
  30. 30. DESCRIÇÃO FUNCIONAL a b c HOME a. Logo sem link para página inicial. d1 b. Menu principal exibe submenu vertical quando o mouse é posicionado em cima. d c. Busca com auto complementação. d. Três destaques que mudam sozinhos de 8 em 8 segundos ou com o clique do usuário. Quando usuário clica ele só volta a contagem pra mudar e g depois que o mouse sai dos destaques. Não usar tecnologia 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êm imagens do mesmo tamanho, e ao passar o mouse na 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ção horizontal, ao clicar nas setas o usuário move os produtos de um lado para o outro. As setas podem f ser habilitadas e desabilitadas, se os produtos estiverem no início, desabilitar a esquerda, se estiverem no final, a dadireita. g. As áreas de novidade e mais comentados exibem os 5 últimos updates.
  31. 31. DESCRIÇÃO FUNCIONAL a CATEGORIA c b a. Logo com link para página inicial. d b. Título da página pega o nome da categoria. c. Ordenação por mais recentes, mais lidos e e f melhor rankeados.Quando ativado o link deve virar texto, ou seja, não clicável e com formatação diferente do link. d. Possibilidade do usuário poder ver somente artigos, somente reviews,somente tutoriais ou a combinação que desejar desses 3, através das checkboxes. e. Os artigos, reviews ou tutorias sempre se apresentam com uma imagem, título, data que foi criada, autor, uma breve descrição (máximo 2 linhas), seu tipo (artigo, reviews ou tutorial), rankeamento e comentários com número de quantidade na frente. Ao clicar no tipo, ex. Artigo, o usuário é levado para a seção de artigos. Os coraçõezinhos de rankeamento ficam coloridos a medida que o usuário passa o mouse em cima e marcados quando o usuário clica. Ao clicar em comentário, abre-se um popup com todos os comentários. f. Estaáreaexibesempreos 5 últimosupdates dos maiscomentadosdacategoriaqueousuário se encontra.
  32. 32. DESCRIÇÃO FUNCIONAL a ARTIGO a. Logo com link para página inicial. b b. Área de venda onde devem aparecer produtos relacionados ao artigo. O usuário pode ver a imagem do produto, nome, pequena descrição, preço e a opção de colocá-lo direto no carrinho. Se clicar no produto, o usuário é levado para a página do produto com maiores detalhes. c. A galeria de imagens só aparece quando algum usuário já postou uma imagem relacionada ao produto. Sua navegação se comporta como lista horizontal, ao clicar nas setas o usuário move os produtos de um lado para o outro. As setas podem ser habilitadas e desabilitadas, se os produtos estiverem no início, desabilitar a esquerda, se estiverem no final, a da direita. c
  33. 33. SEO
  34. 34. SEO HOME URL - www.[domínio do site].com.br Tag title - [nome do site] - Tudo sobre moda, maquiagem, roupas e acessórios femininos meta 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, Corpo Tag 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çados meta tag description - Tudo sobre calçados: sapatos, sapatilhas, sandálias e botas. meta tag keywords - Moda, Calçados, Sapatos, Sapatilhas, Sandálias, Botas, Beleza Tag h1 - Calçados
  35. 35. SEO ARTIGO [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-linda Tag title - [nome do site] - [titulo do artigo] - [categoria] - [subcategoria] meta tag description - "Na nova coleção "Extreme" de cosméticos da MAC destacamos as melhores combinações e maneiras de usar os produtos para deixá-la mais linda do que 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 DE ALTA FIDELIDADE
  37. 37. WIREFRAME GRID BLUEPRINT
  38. 38. OBRIGADO!
  • salisayolanda

    Dec. 13, 2014

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.

Vistos

Vistos totais

1.909

No Slideshare

0

De incorporações

0

Número de incorporações

1.198

Ações

Baixados

8

Compartilhados

0

Comentários

0

Curtir

1

×