[1] O documento descreve uma proposta de reestruturação da arquitetura de informação e redesign do site de uma loja virtual de presentes criativos chamada Imaginarium, incluindo objetivos, público-alvo, benchmarking, card sorting e wireframes propostos. [2] Foi realizada análise do site atual, identificando problemas como taxonomia confusa, além de aplicação de card sorting para entender a percepção dos usuários sobre a organização dos produtos. [3] O trabalho resultou em nova taxonomia e protótipos de wireframes para

1. Pós-Graduação em Ergodesign de Interfaces - PUC/RJ
Professores: Luiz Agner e Cínthia Ruiz
Disciplina: Arquitetura de Informação
Outubro/2015
Alunos:
Eveline, Gabriel, Nina e Veronica

3. OBJETIVOS
➔ Reestruturar a arquitetura de informação do site,
levando em consideração:
➔ a taxonomia de navegação global das categorias
principais, a fim de torná-la mais consistente e
lógica para o usuário.
➔ a disposição dos elementos da interface,
redesenhando algumas telas e suas interações.

4. Baseando-se no conceito de produtos divertidos, o trabalho
atual propõe a reestruturação e redesign da arquitetura de
informação na loja virtual Imaginarium, através das
metodologias de card sorting e benchmarking.
TEMA
Site atual: http://loja.imaginarium.com.br/

5. Perfil Demográfico:
➔ Todos os gêneros;
➔ Jovens e adultos;
➔ Classes A, B e C.
PÚBLICO-ALVO
Perfil Psicográfico:
➔ Pessoas com acesso à internet;
➔ Pessoas com conhecimento médio ou avançado de internet;
➔ Pessoas que se sentem confortáveis em comprar pela web;
➔ Pessoas antenadas e que buscam novidades;
➔ Pessoas que procuram presentear a si mesmo ou o outro
com emoção e originalidade.

6. Ramo de atuação: Lojas (físicas e virtuais) de presentes criativos e itens para decoração.
Tempo no mercado: Atua ao todo há 24 anos no mercado de presentes criativos. E desde 2005,
10 anos, com a loja virtual.
Serviços / Produtos oferecidos: Presentes criativos e irreverentes, de itens de uso pessoal a
objetos para decoração e eletrônicos.
Concorrentes diretos: Uatt, Wish House, Penselar Fun, Loo Day, Hmmm, Trekos e Cacarekos.
Vantagens sobre os concorrentes: É a marca mais conhecida e uma das mais bem-sucedidas
do país no ramo de fun design.
Desvantagens sobre os concorrentes: Possui a média de preço mais alta comparando-se aos
concorrentes.
BRIEFING - SOBRE A EMPRESA

7. Principais problemas no site atual: arquitetura de informação confusa,
principalmente a taxonomia
Proposta: nova arquitetura de informação do site
Público alvo: homens e mulheres, jovens e adultos, das classes A, B e C
Regiões geográficas a serem cobertas: todo o território nacional
Imagem a ser transmitida: moderno, descolado, divertido
Quantas e quais páginas internas: 5 telas: home, categoria, busca,
produto e carrinho
Referências (concorrentes, similares, etc): Uatt, Wish House, Penselar
Fun, Loo Day, Hmmm, Trekos e Cacarekos.
BRIEFING - SOBRE O PROJETO

9. site atual
Site atual:
http://loja.imaginarium.com.br/

10. header + menu expandido

11. vitrine + navegação de contexto

12. rodapé

13. categorias/busca

14. produto

15. carrinho de compras

16. principais problemas encontrados
➔ Arquitetura de informação confusa;
➔ Taxonomia inconsistente e ambígua;
➔ Poucos filtros nas páginas de categorias, dificultando
a busca por produtos
➔ Interfaces com excesso de elementos, podendo
confundir e até mesmo desviar a atenção do usuário.

17. BENCHMARKING

18. ➔ Análise de estruturas de organização e apresentação de websites de
lojas de comércio eletrônico que possuem venda de produtos para
presentes, móveis, decoração, vestuário a acessórios;
➔ Análise de elementos de página como header e footer, menus, filtros,
disposição das vitrines, além de páginas de categorias, páginas de
produtos e páginas de carrinho;
➔ Destaque de pontos positivos e/ou negativos observados;
objetivos do benchmarking

19. ➔ Oppa http://www.oppa.com.br/
➔ Enjoei http://www.enjoei.com.br/
➔ Think Geek http://www.thinkgeek.com/
➔ Furbish Studio http://furbishstudio.com/
➔ Urban Outfitters http://www.urbanoutfitters.com/
sites analisados

20. Header “clean”.
Informações objetivas e úteis.
Menu principal (navegação
global) com poucas categorias
principais.
Menu dropdown apresenta as
subcategorias em ordem
alfabética por tipo de produto.
header + menu expandido

21. Exemplo de
apresentação de
categorias de menu
no formato mais
visual, tipo de
banner estático. No
caso do redesign, a
ideia seria destacar
campanhas da
Imaginarium através
desse tipo de
elemento, na página
inicial.
destaque para categorias/campanhas

22. Footer clean. Melhor
organizado e mais intuitivo.
footer clean

23. Página de categoria com destaque
visual “apresentando” o tipo de item.
página de categoria

24. Página de subcategoria apresenta
hierarquia dos níveis de navegação.
Filtros de atributos também são
apresentados de forma clara e objetiva.
página de categoria - filtros

25. Exemplo de página de
produto mais “clean”,
disposição dos elementos
mais organizados.
Imagens em e informações
objetivas. Descrição e
informações técnicas de
forma direta e clara.
Apenas no final da página
temos recomendações de
produtos sugeridos e/ou
recomendados.
produto

26. Informações básicas para ação de compra.
Box com total de compras efetuadas ao lado
da lista de itens selecionados. Isso facilita a
visualização como um todo da página.
Apresenta sugestões e/ou recomendaçãoes de
outros produtos apenas no final da página.
carrinho

28. Tipo:
Card sorting aberto
Objetivo:
Investigar os modelos mentais dos usuários em relação ao agrupamento e
classificação dos produtos.
Processo:
➔ Após selecionadas amostras variadas de produtos existentes no site atual, os
rótulos foram anotados em cartões coloridos.
➔ A técnica foi aplicada em um grupo de 3 pessoas e individualmente com 16
participantes, onde todos receberam os cartões embaralhados, sem nenhum
agrupamento pré-estabelecido;
➔ Foi solicitado que reunissem os produtos em grupos, nomeando-os e
anotando em cartões coloridos;
➔ Foi pedido que todos os produtos fossem categorizados.
METODOLOGIA

29. Ao final, foram feitas ainda as seguintes perguntas:
➔ Qual critério de organização você(s) escolheu(ram)?
➔ Qual categoria foi mais fácil de estabelecer? Por quê?
➔ Qual foi a mais difícil? Por quê?
Para fins de registro, o card sorting aplicado em grupo foi filmado, e
alguns card sorting individuais tiveram os debriefings gravados em áudio,
para posterior análise e registro dos dados.
DEBRIEFING

30. INVENTÁRIO
Foi escolhido o menu principal, já que poucas
categorias apresentavam subcategorias.
Foram selecionados os itens mais representativos
de cada categoria para a amostra.

31. 1- abridor de latas
2- tulipa de chopp
3- bolsa a tiracolo
4- fone de ouvido
5- pulseira
6- almofada de pescoço
7- abridor de garrafas
8- estojo escolar
9- almofada decorativa
10- vela decorativa
11- avental de cozinha
12- sombra
13- câmera fotográfica
14- brilho labial
15- álbum de fotografia
16- porta anel
17- pantufa
18- porta pijamas
AMOSTRA
19- caneta esferográfica
20- camiseta
21- hidratante para as mãos
22- caixa porta maquiagem
23- coqueleteira
24- garrafa
25- fronha de travesseiro
26- caneca
27- moringa
28- despertador
29- porta bijouteria
30- caixa porta-remédios
31- ímã de geladeira
32- mini geladeira
33- castiçal (suporte para velas)
34- porta retrato
35- bandeja para notebook
36- copo térmico
37- almofada massageadora
38- kit completo de maquiagem
39- colar
40- bandeja
41- cofre
42- mochila
43- luminária
44- cartão comemorativo
45- vitrola
46- brinco
47- amplificador de som
48- calendário de computador
49- sabonete líquido

32. CARD SORTING EM GRUPO
RESULTADOS
• O grupo começou a dividir os cartões de acordo com a
função principal dos produtos (objetos para decoração,
utensílios para cozinha, roupa, etc.);
• Não se sentiram confortáveis em agrupar a maioria dos
itens pela diferença nos tipos de produtos. Exemplo,
avental de cozinha é um item de vestuário mas que se usa
na cozinha, optando no final pela categoria vestuário.
• Sentiram-se mais confortáveis em agrupar os itens da
categoria decoração.
• Na imagem ao lado o grupo ordenou dentro de cada
categoria os itens partindo dos mais fáceis de categorizar
para os mais difíceis (de cima para baixo).
•No fim revelaram-se satisfeitos com o resultado,
atribuindo nota 7.5 ao resultado final.
Categorias Criadas:
Saúde, Material Escolar, Cama, Tecnologia,
Decoração, Cozinha, Vestuário e Beleza.

33. RESULTADOS
16 9 7
Participante: Mulher (62 anos)
Categorias Criadas: Bijouterias e acessórios, Eletrônicos,
Material escolar, Beleza, Artigos para cozinha, Artigos para
decoração, Diversos.
Participante: Homem (30 anos)
Categorias Criadas: Bebidas, Decoração, Quarto, Cozinha,
Escolar, Maquiagem, Feminino, Tecnologia.
Participante: Mulher (21 anos)
Categorias Criadas: Fofurinhas, Guarda-objetos, Mesa
de jantar, Cozinha, Zona da dúvida, Fotografia, Sonoro,
Seção feminina, Acessórios.
CARD SORTINGS INDIVIDUAIS

34. DEBRIEFING
Participante: Mulher (28 anos)
Não sentiu dificuldades em agrupar. Achou lógicas as categorias.
Categoria mais difícil: Tecnologia.
Categorias mais fáceis: Bolsas e Cozinha.
Participante: Homem (27 anos)
Não se sentiu segura em agrupar as categorias. Achou a tarefa difícil.
Categorias mais difíceis: Diversos e Eletrônicos.
Categorias mais fáceis: Cozinha e Beleza.
Participante: Mulher (62 anos)
Não se sentiu segura em agrupar as categorias. Achou a tarefa difícil.
Categoria mais difíceis: Diversos e Eletrônicos.
Categorias mais fáceis: Cozinha e Beleza.
Nos debriefings foi possível observar que
boa parte achou a tarefa difícil,
principalmente pela variedade de itens
aleatórios, apesar de terem ficados
satisfeitos com o resultado final.
Praticamente todos os card sortings
apresentaram a categoria “cozinha”, sendo
a mais fácil de organizar.
Os itens mais difíceis foram moringa,
porta-pijama e caixa porta-remédios

35. ANÁLISE DOS DADOS
ABA CATS RAW

36. ANÁLISE DOS DADOS ABA SUMMARY

37. ANÁLISE DOS DADOS
ABA CORRELATION

38. TAXONOMIA
LANÇAMENTOS
DICAS DE
PRESENTES
CASA E
DECORAÇÃO PESSOAL ELETRÔNICOS BOLSAS MOCHILAS PROMOÇÕES
CASA E
DECORAÇÃO
ÁUDIO E
ELETRÔNICOSBELEZA
MODA E
ACESSÓRIOS
PAPELARIA E
ESCRITÓRIO
TAXONOMIA ANTIGA
TAXONOMIA ADOTADA

39. WIREFRAMES

40. SKETCHES
Após a análise dos dados e
desenvolvimento da
taxonomia, o processo
envolveu a elaboração de
sketches, a fim de unir o
estudo do bechmarking às
novas propostas de
arquitetura e
funcionalidades.
Posteriormente, estes
foram traduzidos em
wireframes.

41. WIREFRAMES
Home (página inicial)

42. WIREFRAMES
Página da Categoria

43. WIREFRAMES
Página do Produto

44. Dropdown de busca e
página de resultados
WIREFRAMES

45. WIREFRAMES
Página de carrinho

46. DESCRIÇÃO FUNCIONAL
1. Login: Login de cadastro e
identificação de usuário. Quando
logado, apresenta uma
mensagem de saudação.
2. Busca: Ferramenta de busca do
site, os resultados aparecem em
um página específica.
3. Sacola: Aqui o usuário consegue
visualizar a quantidade de
produtos comprados depois de
logado. A sacola fica feliz. Não
logado a sacola aparece zerada e
“triste”.
4. Menu: Menu com 5 botões que
representam as categorias
principais de produtos. Ao clicar
em uma delas o usuário é levado
para uma página da categoria.

47. DESCRIÇÃO FUNCIONAL
5. Destaque “slide show”: Área
para destaque de produtos novos e
/ou campanhas da marca. Aqui por
default será exibido 1 slide a cada 4
segundos, automaticamente, sendo
um total de 4 slides. O usuário tem
opção de escolher setando para
direita ou esquerda. A partir do
momento que o usuário clica em uma
das setas ele passa a ter controle dos
destaques.
6. Vitrines de categorias: Para
cada seção de vitrine, serão exibidos
4 produtos para exibição. Área
destinada para o marketing e
comercial da marca. Nessa área, o
usuário ao clicar no produto
escolhido será redirecionado para a
página do produto.

48. 7. Área “rodapé”: mapa do
site, links para redes sociais, área
para cadastro na lista de emails,
formas de pagamento, selos de
confiança/ segurança, e endereço.
DESCRIÇÃO FUNCIONAL

49. CONCLUSÃO

50. CONCLUSÃO
➔ Com o inventário e análise de parte do conteúdo do site identificou-se a grande variedade de
produtos vendidos.
➔ O briefing nos ajudou a conhecer melhor a proposta da loja, a fim de que pudessemos realizar o
benchmarking e descobrir como concorrentes e similares solucionaram os problemas encontrados.
➔ O Card Sorting nos ajudou a amenizar a questão da taxonomia de menu adotada. Percebemos a
variabilidade do modelo mental dos usuários voluntários, na organização e classificação de uma
amostragem dos produtos vendidos no site;
➔ Já com o brainstorm surgiram os primeiros esboços da nova estrutura do site (sketches). e com os
wireframes (além da descrição funcional) essa estrutura já pôde ser melhor visualizada e testada.
➔ Assim idealizamos o que seria um site melhor organizado, com uma taxonomia mais “leve” e objetiva
para o usuário.

51. LIÇÕES APRENDIDAS
➔ Foram notadas algumas dificuldades dos usuários durante o card sorting,
devido ao número pequeno de itens e de sua grande variabilidade;
➔ Uma amostragem maior poderia ter amenizado a confusão e a
dificuldade no momento de rotular as categorias;
➔ Muitos não se sentiram confortáveis em deixar um cartão apenas em
uma categoria, mesmo sendo dito que não haveria problema;
➔ A falta de imagens no card sorting também causou uma confusão como,
por exemplo, a moringa e calendário de computador.

52. DESDOBRAMENTOS
➔ Um possível desdobramento seria a realização de um novo card
sorting considerando mais itens no inventário de conteúdo,
ampliando assim a reestruturação da taxonomia como um todo e
não apenas da navegação global das categorias.
➔ Outra possibilidade levantada seria a realização de um teste de
usabilidade com a nova proposta da arquitetura de informação.

53. Obrigado ;)