Projeto de reestruturação de arquitetura da informaçãoProfessores: Luiz Agner e Cinthia Ruiz | PUC-RIO 2015.2

Casa Cruzcasacruz.com.br

Grupo:Eduardo Linhares | eduardo@eduardolinhares.com Lívia Fernandes | liffs85@gmail.comRenata Barbalat | renatabg@gmail.com Samara Mattos | samara.mattos@gmail.com

Briefing

Briefing Redesign Casa Cruz= Sobre a empresa Nome da empresa: Casa CruzRamo de atuação: Papelaria e Material de EscritórioTempo no mercado: desde 1893Serviços / Produtos oferecidos: Venda de produtos de papelaria e material de escritórioConcorrentes diretos: Kalunga, Papelex, Caçula e outros e-commerces com áreas de papelaria e material de escritórioVantagens sobre os concorrentes: tempo de mercadoDesvantagens 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.

Briefing Redesign Casa Cruz= Principais concorrentes

Briefing Redesign Casa Cruz

Público alvoAmbos 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 cobertasPrincipalmente residentes do Rio de Janeiro;

Imagem a ser transmitida Moderno, Simples, Acessível

ObjeçõesNão há restrições iniciais ao projeto

ObrigatoriedadeUtilizar 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

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 especiaisPara a fase inicial do projeto não contaremos com nenhuma página diferenciada

Limite de verbaSem restrição

ReferênciasO bechmarking levantado para este projeto se encontra nos próximos slides desta apresentação

Briefing Redesign Casa Cruz

Benchmarking

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.

enjoeihttps://www.enjoei.com.br/

Site: https://www.enjoei.com.br/

1 - Breadcrumb NavigationEm 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

submarino http://www.submarino.com.br/

Site: http://www.submarino.com.br

1 - BuscaMaior peso para a input de busca.

1 - Formas de pagamentoFormas de pagamento e certificados de segurança no rodapé do site.

1

2

walmarthttps://www.walmart.com.br/

1 - DepartamentosDeixar os departamentos já visíveis no topo

Site: https://www.walmart.com.br

1

2

1 - Categorias na esquerdaListar as categorias e subcategorias na esquerda

Site: https://www.walmart.com.br

1

amazonhttp://www.amazon.com/

1 - Banner sazonalChamada para itens sazonais na homepage

Site: http://www.amazon.com

1

americanashttp://www.americanas.com.br/

Site: http://www.americanas.com.br

1 - Quem viu este produto...Funcionalidade “Quem viu este produto acabou comprando”1

1 - Oferta do diaOferta do dia aparente na homepage do site

1 - MarcasNavegação por marcas

Site: http://www.americanas.com.br

1

2

netshoeshttp://www.netshoes.com.br/

Site: http://www.netshoes.com.br

1

2

1 - AjudaAjuda 24h disponível no cabeçalho do site

2 - BuscaBuscar com auto sugestão apresentando imagens e detalhes de produtos

Site: http://www.netshoes.com.br

1 - BuscaCampo de busca como primeira opção da Central de Relacionamento

2 - Auto AtendimentoAções que podem ser realizadas pelo próprio cliente, sem intervenção da loja, estão facilmente acessíveis

3 - FrequentesOs tópicos mais procurados na Central de Relacionamento ficam agrupados e facilmente acessíveis ao usuário

4 - Outros canaisAlé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

Card Sorting

MetodologiaSistema 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.

MetodologiaO 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.

Taxonomia Existente1.0 Departamentos

1.1 Artesanato1.2 Brinquedos1.3 Canetas Especiais1.4 Desenho1.5 Escritório1.6 Festa1.7 Formulários1.8 Informática1.9 Livraria1.10 Natal1.11 Papelaria1.12 Pintura

Resultados

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.

Card Sorting individualAplicamos 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.

DebriefingObservamos 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.

Análise dos Dados

Planilha Donna SpencerAba CatsRaw

Planilha Donna SpencerAba CatsSummary

Planilha Donna SpencerAba Correlation

Taxonomia adotada

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.

casa cruzSketches & Wireframes

SketchPágina interna Lista de produtos

SketchPágina interna Ajuda

SketchPágina interna Produtos

SketchPágina interna Carrinho

WireframesHome

WireframesCategoria de Produtos

WireframesInterna de Produtos

WireframesAjuda

WireframesCarrinho

Descrição Funcional

12 3

45

7 68 9

10

11

12

13

14

1

1. EntrarEste 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.

2

2. BuscaFerramenta 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”.

3

3. Banner SazonalEste 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.

4

5

4. Nome do ProdutoO 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 ProdutoO 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”.

6. Preço do ProdutoO 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 descontoO 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

8. Botão ComprarAo 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 carrinhoAo 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

10. Foto do ProdutoAs 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

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

12. Quem comprou este, também se interessou porEsta á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

13. Descrição Detalhada e Especificações TécnicasQuando 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

14. AvaliaçõesCaso 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

15. AvaliaçõesExemplo de visualização de lightbox/modal feita por um usuário logado no site.

15

Mapa do Site

Conclusão

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.