Upload
augusto-barbosa
View
1.666
Download
1
Embed Size (px)
DESCRIPTION
Trabalho para a disciplina de Arquitetura de Informação da Pós-graduação em Ergodesign da PUC-Rio.Desenvolvido em grupo com Carlos Kramer e Adolfo Sabino.
Citation preview
PROJETO DESITE DE MODADisciplina de Arquitetura da InformaçãoPUC Rio – Ergodesign de Interfaces
Adolfo SabinoAugusto BarbosaCarlos Kramer
PÚBLICO-ALVO
PÚBLICO-ALVO
• sexo feminino• classe A e B• entre 16 e 50 anos
• costumam buscar informações sobre moda
• fazem compras online com frequência
BENCHMARKS
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 diasFocado em artigos sobre moda e tutoriais
• Linguagem informal
BENCHMARKS
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
GAROTAS ESTÚPIDAS - WWW.GAROTASESTUPIDAS.COM
BENCHMARKS
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
2BEAUTY - WWW.2BEAUTY.COM.BR
BENCHMARKS
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
SEPHORA - WWW.SEPHORA.COM
BENCHMARKS
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
SEPHORA - WWW.SEPHORA.COM
CONCEITUAÇÃOComunidade de consumo crítico
CONCEITUAÇÃO
COMUNIDADE DE CONSUMO CRÍTICOSite focado em produção de conteúdo de moda por consultores e usuários.
Associados ao conteúdo, estariam produtos disponíveis para compra através do próprio site, que poderiam ser adquiridos por clientes e fornecidos por lojas parceiras.
Após a compra, o consumidor poderia retornar, avaliar o produto comprado e avaliar a dica ou resenha de quem recomendou o produto, indicando, nesse momento, mais produtos.
Na primeira fase o site seria alimentado por matérias produzidas por consultores, especialistas e pessoas reconhecidas na área de moda, em especial pessoas que já produzem conteúdo para internet focado no mesmo público-alvo (Ex: Julia Petit, Marcos Costa, Fernanda Yamamoto, Lilian Pacce e outros). A interação dos usuários acontecerá por meio de comentários, rankings de artigos, indicação e compartilhamento de artigo. Num segundo momento, poderíamos abrir para artigos de 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.
CONCEITUAÇÃO
ABORDAGEM INOVADORAA abordagem do site traria uma nova forma de consumir produtos de moda. Com algumas entrevistas, e análise do comportamento de algumas consumidoras dentro do nosso público alvo, percebemos que o consumo conteúdo sobre moda (artigos, reviews, tutorias, vídeos) é muito grande, mas em geral é dissociado da possibilidade de compra dos produtos.
Nosso diferencial é permitir que o consumo do conteúdo seja acompanhado do consumo do produto, facilitando a compra através do próprio site.
O site não se apresentará como um e-commerce, não será possível buscar por um produto e vê-lo sem nenhuma relação com um conteúdo. A navegação será feita através do conteúdo, e o conteúdo dará acesso aos produtos. Nosso objetivo é que que o público-alvo do site o perceba como um site de conteúdo, que traz infomrações úteis sobre produtos de moda, dicas valiosas sobre como usar esses produtos, e ao mesmo tempo facilita o acesso aos produtos aos quais o conteúdo faz referência, para que a leitora possa testar por si mesma e por em prática os tutoriais.
LISTA DE FUNCIONALIDADES
LISTADE FUNCIONALIDADES
• Área para login e cadastro (permanente em todo o site);
• Menu de categorias e looks (em todo o site, exceto fechamento de compra);
• Destaques editorias;• Melhor rankeados;• Mais comentados;• Artigos mais recentes;• Tutoriais em destaque;• Rodapé estilo sitemap (em todo o site).
• Lista de artigos e tutoriais numa categoria• Ordenar por:
• Mais recentes• Mais lidos• Melhor rankeados
• Ccada item com thumbnail, autor, data e leading.
HOME
ARQUIVO POR CATEGORIA
Box para quem já é cadastrado efetuar login:• E-mail ou username;• Senha;• Link “esqueci minha senha”.
Cadastro• Espaço para nome e sobrenome• Espaço para username;• Email;• Confirme email;• Senha;• Confirme senha.
Deseja fornecer dados para agilizar suas compras?• Em caso positivo:
• Endereço; • CEP;• CPF.
TELA DE CADASTRO
LISTADE FUNCIONALIDADES
• Título, autor, data, leading e imagem principal;• Tags;• Conteúdo relacionado;• Ranking (estrelas ou corações);• Botões de share (facebook, g+, twitter, enviar
por email);• Comentários anteriores e espaço para
comentar;• Produtos citados no conteúdo e/ou similares
com respectivas informações (gatilho para comprar), foto, nome, informação resumida, preço.
• Link para informação detalhada. • Informação detalhada do produto aparece
em janela modal, mantendo o contexto do conteúdo, para não dar ao site um aspecto de e-commerce. Botão para adicionar ao carrinho.
• Título• Imagem do produto;• Informação detalhada (tamanho, peso, cor,
toda informação necessária para a compra);• Preço;• Mais conteúdo relacionado ao produto;• Botão para adicionar ao carrinho.
ARTIGO DETALHADES DO PRODUTO
• Lista de produtos adicionados, com informação resumida, preço e seletor de quantidade e opção de excluir;
• Valor total da compra;• Espaço para incluir CEP;• Espaço para código promocional;• Botão “calcular”;• Valor total com frete e eventuais descontos;• Botão “avançar” para ir ao fechamento de
compra.
CARRINHO
DIAGRAMADE NAVEGAÇÃO
DIAGRAMADE NAVEGAÇÃO
VISÃO GERAL
DIAGRAMADE NAVEGAÇÃO
LOGIN
DIAGRAMADE NAVEGAÇÃO
CATEGORIAS
DIAGRAMADE NAVEGAÇÃO
ARTIGO
CARD SORTINGConclusões e lições aprendidas
CARD SORTING
RESULTADO DO CARD SORTING APLICADO
CARD SORTING
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.
CONCLUSÕES E LIÇÕES APRENDIDAS
CARD SORTING
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).
CONCLUSÕES E LIÇÕES APRENDIDAS
WIREFRAMES
WIREFRAMES
HOME
WIREFRAMES
CATEGORIA
WIREFRAMES
ARTIGO
DESCRIÇÃO FUNCIONAL
DESCRIÇÃO FUNCIONAL
HOME
a
a. Logo sem link para página inicial.
b. Menu principal exibe submenu vertical quando o mouse é posicionado em cima.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. Quandousuário clica ele só volta a contagem pra mudardepois que o mouse sai dos destaques. Não usartecnologia Flash.
d1. Destaque com imagem menor, título, descrição com no máximo 2 linhas e imagemmaior de chamada quando ativada.
e. As áreas Tutorias e Artigos e Reviews têmimagens 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çãohorizontal, ao clicar nas setas o usuário move osprodutos de um lado para o outro. As setas podemser habilitadas e desabilitadas, se os produtosestiverem no início, desabilitar a esquerda, se estiverem no final, a dadireita.g. As áreas de novidade e mais comentadosexibem os 5 últimos updates.
b c
d
d1
e
f
g
DESCRIÇÃO FUNCIONAL
CATEGORIAa. Logo com link para página inicial.
b. Título da página pega o nome da categoria.
c. Ordenação por mais recentes, mais lidos e melhor rankeados.Quando ativado o link deve virartexto, ou seja, não clicável e com formataçãodiferente do link. d. Possibilidade do usuário poder ver somenteartigos, 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 foicriada, 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 emcomentário, abre-se um popup com todos oscomentários.f. Estaáreaexibesempreos 5 últimosupdates dos maiscomentadosdacategoriaqueousuário se encontra.
a
b c
e
d
f
DESCRIÇÃO FUNCIONAL
ARTIGOa. Logo com link para página inicial.
b. Área de venda onde devem aparecer produtosrelacionados 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áginado produto com maiores detalhes.c. A galeria de imagens só aparece quando algumusuário já postou uma imagem relacionada aoproduto. Sua navegação se comporta como listahorizontal, ao clicar nas setas o usuário move osprodutos de um lado para o outro. As setas podemser habilitadas e desabilitadas, se os produtosestiverem no início, desabilitar a esquerda, se estiverem no final, a da direita.
a
b
c
SEO
SEO
URL - www.[domínio do site].com.brTag title - [nome do site] - Tudo sobre moda, maquiagem, roupas e acessórios femininosmeta 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, CorpoTag h1 - [nome do site]Tag h2 - [meta tag description]
HOME
URL - www.[domínio do site].com.br/calcados/Tag title - [nome do site] - Calçadosmeta tag description - Tudo sobre calçados: sapatos, sapatilhas, sandálias e botas.meta tag keywords - Moda, Calçados, Sapatos, Sapatilhas, Sandálias, Botas, BelezaTag h1 - Calçados
CATEGORIA “CALÇADOS”
SEO
[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-lindaTag 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
ARTIGO
WIREFRAME DEALTA FIDELIDADE
WIREFRAME
GRID BLUEPRINT
OBRIGADO!