Arquitetura de Informação - Casa Cruz

426 visualizações

Publicada em

PROJETO DE REESTRUTURAÇÃO DE ARQUITETURA DA INFORMAÇÃO - CASA CRUZ
Pós Graduação: Especialização em Ergodesing de Interfaces: Usabilidade e Arquitetura da Informação
Disciplina: Arquitetura da Informação
Professores: Luiz Agner e Cinthia Ruiz

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Arquitetura de Informação - Casa Cruz

  1. 1. Projeto de reestruturação de arquitetura da informação Professores: Luiz Agner e Cinthia Ruiz | PUC-RIO 2015.2 Casa Cruz casacruz.com.br Grupo: Eduardo Linhares | eduardo@eduardolinhares.com Lívia Fernandes | liffs85@gmail.com Renata Barbalat | renatabg@gmail.com Samara Mattos | samara.mattos@gmail.com
  2. 2. Briefing
  3. 3. Briefing Redesign Casa Cruz = Sobre a empresa Nome da empresa: Casa Cruz Ramo de atuação: Papelaria e Material de Escritório Tempo no mercado: desde 1893 Serviços / Produtos oferecidos: Venda de produtos de papelaria e material de escritório Concorrentes diretos: Kalunga, Papelex, Caçula e outros e-commerces com áreas de papelaria e material de escritório Vantagens sobre os concorrentes: tempo de mercado Desvantagens sobre os concorrentes: oferta de produtos online é muito menor do que a dos concorrentes; volume de categorias no site é inferior comparada com a de seus concorrentes.
  4. 4. Briefing Redesign Casa Cruz = Principais concorrentes
  5. 5. Briefing Redesign Casa Cruz Público alvo Ambos os sexos; classes ABC; de 18 a 50 anos; estudantes de arte/design, pais de crianças em idade escolar, responsáveis pelo departamento de compras de empresas; Regiões geográficas a serem cobertas Principalmente residentes do Rio de Janeiro; Imagem a ser transmitida Moderno, Simples, Acessível Objeções Não há restrições iniciais ao projeto Obrigatoriedade Utilizar paleta de cor que leve em consideração o Laranja e o Azul presentes na marca da Casa Cruz = Sobre o projeto Site atual:www.casacruz.com.br Principais problemas no site atual: Categorização de produtos confusa, má qualidade das imagens dos produtos, pouco volume de produtos oferecidos, auto-sugestão da busca confusa e com termos cadastrados incorretamente (inclusive com erros de digitação). Peça a ser criada: Redesign de e- commerce e site institucional
  6. 6. Briefing Redesign Casa Cruz Quantas e quais páginas internas Cinco (05) páginas; Inicial, Página de Categorias, Interna de Produto, Atendimento, Carrinho Páginas especiais Para a fase inicial do projeto não contaremos com nenhuma página diferenciada Limite de verba Sem restrição Referências O bechmarking levantado para este projeto se encontra nos próximos slides desta apresentação
  7. 7. Briefing Redesign Casa Cruz
  8. 8. Benchmarking
  9. 9. Para o processo de Benchmark foram levados em consideração sites de e-commerce em geral que possuíssem bons exemplos de: ● Interação e estímulos para o usuário; ● Organização de conteúdo; ● Funcionalidades complementares; ● Layouts modernos e instigantes; ● Apresentação dos produtos e promoções.
  10. 10. enjoei https://www.enjoei.com.br/
  11. 11. Site: https://www.enjoei.com.br/ 1 - Breadcrumb Navigation Em destaque o site usa uma cor diferente para informar qual a sessão o usuário está visitando. A barra de navegação, vira um menu auxiliar que mostra as categorias que estão associadas dentro da sessão. 1
  12. 12. submarino http://www.submarino.com.br/
  13. 13. Site: http://www.submarino.com.br 1 - Busca Maior peso para a input de busca. 1 - Formas de pagamento Formas de pagamento e certificados de segurança no rodapé do site. 1 2
  14. 14. walmart https://www.walmart.com.br/
  15. 15. 1 - Departamentos Deixar os departamentos já visíveis no topo Site: https://www.walmart.com.br 1 2
  16. 16. 1 - Categorias na esquerda Listar as categorias e subcategorias na esquerda Site: https://www.walmart.com.br 1
  17. 17. amazon http://www.amazon.com/
  18. 18. 1 - Banner sazonal Chamada para itens sazonais na homepage Site: http://www.amazon.com 1
  19. 19. americanas http://www.americanas.com.br/
  20. 20. Site: http://www.americanas.com.br 1 - Quem viu este produto... Funcionalidade “Quem viu este produto acabou comprando”1
  21. 21. 1 - Oferta do dia Oferta do dia aparente na homepage do site 1 - Marcas Navegação por marcas Site: http://www.americanas.com.br 1 2
  22. 22. netshoes http://www.netshoes.com.br/
  23. 23. Site: http://www.netshoes.com.br 1 2 1 - Ajuda Ajuda 24h disponível no cabeçalho do site 2 - Busca Buscar com auto sugestão apresentando imagens e detalhes de produtos
  24. 24. Site: http://www.netshoes.com.br 1 - Busca Campo de busca como primeira opção da Central de Relacionamento 2 - Auto Atendimento Ações que podem ser realizadas pelo próprio cliente, sem intervenção da loja, estão facilmente acessíveis 3 - Frequentes Os tópicos mais procurados na Central de Relacionamento ficam agrupados e facilmente acessíveis ao usuário 4 - Outros canais Além das opções de busca e auto atendimento, o site também disponibiliza as opções de contato por telefone, chat e email, agrupadas e exibidas de forma clara 1 2 3 4
  25. 25. Card Sorting
  26. 26. Metodologia Sistema analisado: Casa Cruz - http://www.casacruz.com.br/ Card Sorting Aberto com o objetivo de analisar se as macro-categorias definidas para o site da Casa Cruz são de fácil entendimento e objetivas quanto aos produtos apresentados em cada uma. O processo foi realizado da seguinte maneira: Levantamento de um inventário de conteúdo de forma a exemplificar os principais produtos das categorias/departamentos utilizados no site selecionado. Chegamos a um universo de 96 cartões produzidos de forma padronizada, com o nome do produto utilizado no site e uma imagem para facilitar o entendimento e sua função.
  27. 27. Metodologia O Card Sorting foi aplicado em um grupo de quatro pessoas, e também de forma individual em um total de 16 participantes. Para todos os participantes seguimos o seguinte processo de aplicação da metodologia: Entregar dos cartões embaralhados de forma a não criar uma indicação de agrupamento; Solicitar que os cartões fossem reunidos em grupos que o participante considerasse adequados, sem limite de quantidade de cartões/produtos por grupo criado; Avisar que cartões que não fizessem sentido na lógica de agrupamento criado poderiam ser colocados à parte; Ao final, solicitar que o participantes nomeasse os grupos criados, com os rótulos adequados para cada um com o auxílio de cartões coloridos.
  28. 28. Taxonomia Existente 1.0 Departamentos 1.1 Artesanato 1.2 Brinquedos 1.3 Canetas Especiais 1.4 Desenho 1.5 Escritório 1.6 Festa 1.7 Formulários 1.8 Informática 1.9 Livraria 1.10 Natal 1.11 Papelaria 1.12 Pintura
  29. 29. Resultados
  30. 30. Card Sorting em grupo = Organização O grupo começou a divisão dos cards conforme a relação entre os produtos. Não ficaram confortáveis com a solução final, pois sentiram a necessidade no momento da categorização de subdividir algumas categorias. Categorias: Lápis/Lapiseras, Canetas, Colas, Borrachas, Livraria, Material escolar, Pintura, Papelaria, Escritório, Festas, Natal, Jogos, Outros.
  31. 31. Card Sorting individual Aplicamos o Card Sorting Aberto em 16 pessoas com o objetivo de investigar os principais modelos mentais dos usuários em relação à classificação dos produtos no e-commerce da papelaria Casa Cruz. As categorias ficaram distintas entre todos entrevistados. Temos destaque para 6 categorias: Natal, Festas, Escritório, Papelaria, Livros e Informática.
  32. 32. Debriefing Observamos que em geral as pessoas não tiveram dificuldade em definir as categorias, exceto pelos itens que eram um pouco distantes do contexto (ex: pregador de madeira e algodão). Os participantes, em sua maioria, ficaram satisfeitos com a distribuição das categorias. Porém, alguns sentiram a necessidade de criar também supra categorias e subcategorias. A categoria identificada com mais facilidade foi “Natal”. As imagens no Card Sorting ajudaram as pessoas a fazerem o agrupamento dos produtos por aproximação, sem precisar ler a descrição de cada tópico usando mais a intuição e o visual.
  33. 33. Análise dos Dados
  34. 34. Planilha Donna Spencer Aba CatsRaw
  35. 35. Planilha Donna Spencer Aba CatsSummary
  36. 36. Planilha Donna Spencer Aba Correlation
  37. 37. Taxonomia adotada
  38. 38. Taxonomia adotada Escritório Material Escolar Papelaria Pintura Informática Festas Jogos Livros Cadernos Canetas Papéis Lápis e Lapiseiras ● Mudamos de “Material de Escritório” para “Escritório”, para não repetir a palavra “Material” no Menu. ● Inserimos a Flauta Doce, que era o único instrumento musical, na categoria “Material Escolar”, já que é usada para aulas de música. ● Juntamos os submenus “Festas” e “Natal”, para que o usuário não precise dar 2 cliques. A ideia é que Natal continue como uma categoria, mas que não apareça no menu. Como é sazonal, pode ser acessada através da área que ficará ao lado direito da busca.
  39. 39. casa cruz Sketches & Wireframes
  40. 40. Sketch Página interna Lista de produtos
  41. 41. Sketch Página interna Ajuda
  42. 42. Sketch Página interna Produtos
  43. 43. Sketch Página interna Carrinho
  44. 44. Wireframes Home
  45. 45. Wireframes Categoria de Produtos
  46. 46. Wireframes Interna de Produtos
  47. 47. Wireframes Ajuda
  48. 48. Wireframes Carrinho
  49. 49. Descrição Funcional
  50. 50. 1 2 3 4 5 7 6 8 9 10 11 12 13 14
  51. 51. 1 1. Entrar Este dropdown list aparece quando o usuário não está logado no site. Ao clicar em Entrar, abre o dropdown list com as opções Login e Cadastro. Se o usuário já estiver logado, o dropdown list é substituído pela saudação “Olá, <nome>”, sendo <nome> o nome do cadastro.
  52. 52. 2 2. Busca Ferramenta de busca interna do site. A partir do 3⁰ caracter digitado, serão exibidos os itens que contenham esses 3 caracteres em um dropdown. O usuário poderá clicar em um dos itens do dropdown ou apertar enter ou clicar no botão da lupa. Se o usuário clicar em um dos itens do dropdown, será exibida a página do produto clicado. Se apertar enter ou clicar no botão da lupa, então o resultado deverá aparecer em uma página específica que terá opções avançadas como ordenação por preço e filtro por marca. Se o usuário digitar mais de uma palavra, o sistema retorna o resultado, considerando o funcionamento “ou”.
  53. 53. 3 3. Banner Sazonal Este banner deverá ser cadastrado, pelo administrador do site, no campo banner sazonal, na ferramenta de CMS. O formato deve ser fixo e a extensão poderá ser gif, png ou jpg. Se for feito o upload de uma imagem em tamanho diferente, o CMS mostra um preview de como a imagem ficará se for rescalada para o tamanho fixado e o administrador do site poderá optar por aceitar ou cancelar. Se cancelar, deverá fazer o upload de uma nova imagem. O preenchimento deste campo é opcional. Se o campo banner sazonal estiver vazio, então deverá ser exibido o banner que foi cadastrado no campo banner do blog, na ferramenta de CMS. Se o usuário clicar no banner do blog, será direcionado para a página do blog, que contém vídeos e dicas, informações sobre os produtos utilizados nos vídeos e mencionados nas dicas, além de calendário de cursos oferecidos nas lojas físicas.
  54. 54. 4 5 4. Nome do Produto O nome do produto deverá ser cadastrado pelo administrador do site na ferramenta de CMS. Este campo deverá ser alfanumérico com o limite de XX caracteres. O preenchimento deste campo no CMS é obrigatório. 5. Descrição do Produto O texto de descrição do produto deverá ser cadastrado pelo administrador do site na ferramenta de CMS. Este campo deverá ser alfanumérico com o limite de XX caracteres e aceita formatação especial. Serão exibidos até YY caracteres na área 5 e, ao lado, será exibido o texto “Descrição detalhada”, com link para abrir um lightbox com o texto completo (XX caracteres). Se o texto for menor do que YY, então “Descrição detalhada” não será exibido. O preenchimento deste campo no CMS é opcional. Se estiver vazio, deve-se exibir “Sem informação disponível”.
  55. 55. 6. Preço do Produto O preço do produto deverá ser cadastrado pelo administrador do site na ferramenta de CMS. Este campo deverá ser numérico com o limite de XX caracteres. O preenchimento deste campo no CMS é obrigatório. O tamanho da fonte deve ser maior que a fonte do campo 7. O sistema deve preencher R$ na frente do valor. 7. Preço com desconto O preço com desconto deverá ser cadastrado pelo administrador do site na ferramenta de CMS. Este campo deverá ser numérico com o limite de XX caracteres. O preenchimento deste campo no CMS é opcional. O tamanho da fonte deve ser menor que a fonte do campo 6 e o texto deve estar formatado com strikethrough. O sistema deve preencher R$ formatado com strikethrough na frente do valor preenchido. 67
  56. 56. 8. Botão Comprar Ao clicar no botão Comprar, o produto é adicionado ao carrinho e é exibida a página do carrinho. Se o usuário passar o mouse em cima, o botão muda de cor. 9. Adicionar ao carrinho Ao clicar em Adicionar ao carrinho, é exibido um lightbox com o texto “Produto adicionado ao carrinho”, além de 2 botões: Comprar mais (que fecha o lightbox e continua na página do produto) e Concluir compra (que fecha o lightbox e leva para a tela de login/cadastro, caso o usuário não esteja logado. Se já estiver logado, vai para a tela de pagamento). 8 9
  57. 57. 10. Foto do Produto As imagens do produto deverão ser cadastradas pelo administrador do site na ferramenta de CMS. O limite são 10 imagens. O formato de cadastro deve ser fixado em ??x?? e a extensão poderá ser gif, png ou jpg. Se for feito o upload de uma imagem em tamanho diferente, o CMS mostra um preview de como a imagem ficará se for rescalada para o tamanho fixado e o administrador do site poderá optar por aceitar ou cancelar. Se cancelar, deverá fazer o upload de uma nova imagem. O preenchimento destes campos é opcional. O campo que não tiver imagem cadastrada, exibirá um placeholder de produto. Quando a página é carregada, esta área exibe a imagem cadastrada no primeiro campo de foto do produto. 10
  58. 58. 11. Thumbnail das fotos do produto (Fotos 1 a 10) As imagens 1 a 10 são as imagens que foram cadastradas nos campos Foto do Produto 1 a Foto do Produto 10 (item 10), rescaladas para um tamanho fixo. A quantidade máxima de thumbnails é 10. O thumbnail 1 é a imagem cadastrada na Foto do Produto 1 (item 10). O thumbnail 2 é a imagem cadastrada na Foto do Produto 2, e assim por diante. Se não houver imagem cadastrada no campo Foto do Produto, então o thumbnail relacionado não é exibido. Se o usuário clicar no segundo thumbnail, então será exibida a Foto do Produto 2, na área de foto do produto (item 10). Se o usuário clicar no terceiro thumbnail, então será exibida a Foto do Produto 3, na área de foto do produto (item 10), e assim por diante. O clique na seta exibe os produtos de 2 em 2. Quando os itens 1 e 2 são exibidos, a seta de cima fica desabilitada. Quando os itens 9 e 10 são exibidos, a seta de baixo fica desabilitada. Caso não exista nenhum item relacionado, essa área não deverá ser exibida. 11
  59. 59. 12. Quem comprou este, também se interessou por Esta área exibe de 1 a 25 produtos que também tenham sido visitados e/ou colocados no carrinho e/ou comprados por usuários que compraram o item exibido na página. Os itens são apresentados de 5 em 5 deslizando automaticamente, a cada X segundos. A ordenação é por produtos mais vendidos. Se o usuário parar o mouse sobre um dos produtos ou clicar em uma das setas ou clicar em uma das bolinhas, então pára de deslizar automaticamente. Quando os itens 1 a 5 são exibidos, a seta da esquerda fica desabilitada. Quando os itens 21 a 25 são exibidos, a seta da direita fica desabilitada. Caso não exista nenhum item relacionado, essa área não deverá ser exibida. A imagem dos produtos devem ser exibidas no tamanho fixado. Caso não exista imagem cadastrada para o produto, então deverá ser exibido o placeholder de produto. Se o campo 7 (Preço com desconto) estiver preenchido no CMS, então o conteúdo é exibido em fonte tamanho XX com o texto formatado com strikethrough com R$ na frente e a tag de desconto (percentual) é exibida sobre a imagem do produto. Se o usuário clicar no botão com a imagem do carrinho, o produto é adicionado ao carrinho e a página do carrinho é exibida. Se o usuário passar o mouse sobre a imagem do carrinho, deve ser exibida a imagem de cor diferente. 12
  60. 60. 13. Descrição Detalhada e Especificações Técnicas Quando a página é carregada, o texto exibido no item 13 é o texto que foi cadastrado no campo Descrição Detalhada no CMS do site. Este campo deverá ser alfanumérico com o limite de XX caracteres. O preenchimento deste campo no CMS é opcional. Se este campo estiver vazio, então deverá ser exibido o texto “Sem informação disponível”. Se o usuário clicar em Especificações Técnicas, é exibida a imagem da aba selecionada Especificações Técnicas e é exibido o texto que foi cadastrado no campo Especificações Técnicas no CMS do site. Este campo deverá ser alfanumérico com o limite de XX caracteres. O preenchimento deste campo no CMS é opcional. Se este campo estiver vazio, então deverá ser exibido o texto “Sem informação disponível”. 13
  61. 61. 14. Avaliações Caso não exista nenhuma avaliação para esse produto, então será exibido o texto “Produto sem avaliação. Seja o primeiro a avaliar.”, com um link na palavra “avaliar”. Se o usuário clicar na palavra “avaliar”, então abrirá um lightbox para o preenchimento da avaliação. Caso exista pelo menos uma avaliação para o produto exibido na página, então serão exibidos o Nome do Avaliador (campo Nome do cadastro do usuário), a quantidade de estrelas preenchidas pelo avaliador (1 a 5), a data em que a avaliação foi escrita e o texto de avaliação. O texto de avaliação deve ser exibido em fonte tamanho XX. Somente usuários logados poderão escrever uma avaliação. Se o usuário não estiver logado, o lightbox exibirá os campos para login/cadastro antes da exibição dos campos de preenchimento da avaliação. O usuário clica em uma estrela e o sistema deve preencher automaticamente as estrelas anteriores. Exemplo: Se o usuário clicar sobre a terceira estrela, a primeira e a segunda são preenchidas automaticamente. Serão exibidas 5 avaliações por página ordenadas por recência. Deve ser exibido o total de avaliações. Caso existam mais de 5, então haverá paginação com o texto “Exibindo Y de Z avaliações”. Sendo Y múltiplo de 5 e Z o total de avaliações para este produto. 14
  62. 62. 15. Avaliações Exemplo de visualização de lightbox/modal feita por um usuário logado no site. 15
  63. 63. Mapa do Site
  64. 64. Conclusão
  65. 65. Conclusão ● Para fazermos a análise dos dados usamos a planilha Donna Spencer e as anotações das observações do card sorting; ● Durante o card sorting, algumas pessoas sentiram-se inseguras para fazer a organização das categorias dos produtos. Nosso grupo usou 96 cards e algumas pessoas ficaram cansadas e ansiosas para concluir a atividade; ● O card sorting revelou informações importantes para a construção da nova taxonomia do site Casa Cruz. Notamos que este processo contribuiu positivamente para a organização das sessões e novos insights; ● O grupo construiu o wireframe no software Axure o que nos possibilitou aprender uma nova ferramenta e entender melhor a arquitetura do website e sua navegação.

×