Este documento apresenta um projeto para um site de moda, descrevendo: 1) Público-alvo como mulheres entre 16 e 50 anos das classes A e B interessadas em moda; 2) Análises de benchmarks como blogs e sites de moda; 3) Conceito de uma comunidade para consumo crítico de moda com conteúdo de consultores e usuários associado a produtos para compra.

1. PROJETO DE
SITE DE MODA
Disciplina de Arquitetura da Informação
PUC Rio – Ergodesign de Interfaces
Adolfo Sabino
Augusto Barbosa
Carlos Kramer

2. PÚBLICO-ALVO

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

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. 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. 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. 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. 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. CONCEITUAÇÃO
Comunidade de consumo crítico

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. 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. LISTA DE
FUNCIONALIDADES

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. 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. DIAGRAMA
DE NAVEGAÇÃO

17. DIAGRAMA DE NAVEGAÇÃO
VISÃO GERAL

18. DIAGRAMA DE NAVEGAÇÃO
LOGIN

19. DIAGRAMA DE NAVEGAÇÃO
CATEGORIAS

20. DIAGRAMA DE NAVEGAÇÃO
ARTIGO

21. CARD SORTING
Conclusões e lições aprendidas

22. CARD SORTING
RESULTADO DO CARD SORTING APLICADO

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

26. WIREFRAMES
HOME

27. WIREFRAMES
CATEGORIA

28. WIREFRAMES
ARTIGO

29. DESCRIÇÃO FUNCIONAL

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

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. 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. WIREFRAME DE
ALTA FIDELIDADE

37. WIREFRAME
GRID BLUEPRINT

38. OBRIGADO!