Arquitetura de Informação - Casa Cruz

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

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.

= Principais concorrentes

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

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

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.

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

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

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

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

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

1 - Departamentos
Deixar os departamentos já visíveis
no topo
Site: https://www.walmart.com.br
1
2

1 - Categorias na esquerda
Listar as categorias e subcategorias
na esquerda
Site: https://www.walmart.com.br
1

1 - Banner sazonal
Chamada para itens sazonais na
homepage
Site: http://www.amazon.com
1

americanas
http://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 dia
Oferta do dia aparente na
homepage do site
1 - Marcas
Navegação por marcas
Site: http://www.americanas.com.br
1
2

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

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

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

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.

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.

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

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

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.

Planilha Donna Spencer
Aba CatsRaw

Aba CatsSummary

Aba Correlation

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 cruz
Sketches & Wireframes

Sketch
Página interna
Lista de produtos

Sketch
Página interna
Produtos

Sketch
Página interna
Carrinho

Wireframes
Categoria de Produtos

Wireframes
Interna de Produtos

1
2 3
4
5
7 6
8 9
10 11
12
13
14

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.

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

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.

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

6. Preço do Produto
O preço do produto deverá ser
cadastrado pelo administrador do site
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
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 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

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

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

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

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

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

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.

Arquitetura de Informação - Casa Cruz

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Arquitetura de Informação - Casa Cruz

Similar a Arquitetura de Informação - Casa Cruz (15)

Más de Luiz Agner

Más de Luiz Agner (20)

Arquitetura de Informação - Casa Cruz