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!