Palestra ministrada no 10ºWordPress Meetup Rio de Janeiro, onde Guga passou alguns conceitos de planejamento e interagiu com o público para definir os itens que seriam necessários para desenvolver um site sobre Cinema. O site será desenvolvido durante as edições seguintes do WordPress Meetup RJ, passando pelas etapas de concepção, design e desenvolvimento.

2. • Sócio-Diretor da Agência Wattz
• Mais de 8 anos de experiência com Marketing
Digital e Gerência de Projetos Web;
• Atuou em projetos para clientes como:
Hostnet, Canal Futura, Hi-Midia, Corpo Perfeito,
Ezlearn, Lance, entre outros.
• Analista de Sistemas Pós Graduado em Gestão
Estratégica de Marketing Digital
• Vencedor do 1° #DesafioSEO da MestreSeo
2009/2010
• Fundador do tudoparawp.com.br
Guga Alves

3. ISO
Organização Internacional para
Padronização, em português. A
ISO é uma entidade de
padronização e normatização, e
foi criada em Genebra, na Suiça,
em 1947.

4. Design Centrado no Usuário
Norma ISO 9241-210:2010
Ergonomics of human-system interaction -- Part 210: Human-centred design for
interactive systems
“ISO 9241-210: 2010 apresenta os requisitos e recomendações para princípios
de design centrada no homem e atividades durante todo o ciclo de vida de
sistemas interativos baseados em computador. Destina-se a ser utilizado por
aqueles que gerenciam os processos de projeto, e está preocupado com as
maneiras em que ambos os componentes dos sistemas interativos de hardware
e software pode melhorar a interação humano-sistema.”
http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075

5. Norma ISO 9241-210
A norma descreve 6 princípios-chave que irão garantir o seu projeto está
centrado no usuário:
• O projeto é baseado em um entendimento explícito de usuários, tarefas e
ambientes.
• Usuários estão envolvidos em toda a concepção e desenvolvimento.
• O projeto é conduzido e refinada por avaliação centrado no usuário.
• O processo é iterativo.
• O projeto aborda toda a experiência do usuário (UX).
• A equipe de projeto inclui habilidades e perspectivas multidisciplinares.

6. A premissa central do Design centrado no usuário é que o melhor design de um
produto ou serviço é resultado da compreensão das necessidades das pessoas que irão
o utilizar.
NECESSIDADE !!!
As necessidades humanas são o ponto de partida do marketing
Design Centrado no Usuário

7. Design Centrado
no Usuário
http://paznow.com/ucd/

8. Arquitetura de Informação

9. Arquitetura de Informação
UX/UI / Design
Arquitetura de Informação
Marketing

10. MARKETING

11. Planejamento de marketing

12. Planejamento de marketing

13. Planejamento de marketing

14. Planejamento de marketing

15. LIVE PLANNING

16. ANÁLISE E PLANEJAMENTO

17. Contratante envia email
“Boa tarde Guga,
Trabalho na empresa XPTO, e gostariamos de fazer um
site sobre cinema, onde os visitantes possam ler
conteúdo sobre filmes.
Não sei passar muitos detalhes. Quanto custa, quando
fica pronto?”

18. Site não é pastel, miojo, cup noodles
não fica pronto em alguns minutos..

19. Contratada solicita briefing
“Olá XPTO, tudo bem?
Para uma estimativa mais precisa
de prazo e custo, precisamos
levantar maiores detalhes, podem
nos enviar este briefing inicial
preenchido? Obrigado”

20. Contratante responde briefing
Nome: Empresa XPTO.
Segmento: Entretenimento.
Público-Alvo: Cinéfilos.
Necessidade: Site para postar conteúdo sobre cinema,
como filmes de terror, ação.. Os que vão pro cinema.
Principais Concorrentes: Adoro Cinema, Cinema com
Rapadura, IMDB, Omelete.

21. Funcionalidades desejadas:
todo filme deve ter texto, galeria de fotos, trailers,
atores do filme.
Conversões:
Visitante dá nota para os filmes
Visitante deixa seu Depoimento sobre o filme
Visitante se cadastra em newsletter.
Contratante responde briefing

22. Desejos e Necessidades do Usuário
• Encontrar detalhes sobre o filme
• Descobrir horário e local que está passando o filme
• Qual o elenco do filme, quais outros filmes fizeram
• Storytelling (no caso de filmes com continuações)
• Classificação
• Companhia para ver o filme (sim, tem gente carente).

23. Concorrência
Adoro Cinema
• Estréias da Semana
• Trailers
• Matérias
• Filmes (em cartaz, estreias, melhores filmes, para crianças)
• Bilheteria (onde comprar ingressos)
• Meu Adoro Cinema (Favoritos, amigos, promoções)

24. Concorrência
Cinema com Rapadura
• PodCast
• Críticas
• Colunistas

25. Concorrência
IMDB
• Top films (de todos os tempos)
• Aniversários de hoje (atores, atrizes,
diretores, etc)
• Filmes Relacionados (quem gostou desse
filme também gostou de)
• Watchlist

26. Concorrência
Omelete
• Também fala de Games,
quadrinhos e música
• Organizador do Comic Con BR

27. Contratada levanta itens a serem
desenvolvidos
Em um documento de texto, costumo listar
páginas e itens que uma página deve conter,
para ficar claro tanto para cliente quanto para
fornecedor o quanto de trabalho será
demandado:

28. Contratada levanta itens a serem
desenvolvidos
Itens de um filme
• Título
• Descrição / Crítica do filme
• Atores/ Diretores / Dubladores que participaram
• Fotos, posters, trailers
• Ano de lançamento do filme
• Filmes Relacionados
• Rating (nota de 1 a 5 estrelas)

29. Contratada levanta itens a serem
desenvolvidos
Páginas
• Home
• Taxonomias: de filmes, de atores, de diretores, de
filmes do ano X
• Página de um filme, um ator, de um diretor, de
filme do ano X
• Resultado de busca

30. CONCEPÇÃO

31. Arquitetura

32. Wireframes
• Pingendo
• Axure
• Illustrator

33. Wireframes
• Pingendo
• Axure
• Illustrator

34. Wireframes

35. DESIGN

36. DESIGN
• Definição de tipografia, cores, etc.
• Design não é forma, é função!
Ferramentas
• Illustrator
• Photoshop

37. DESENVOLVIMENTO

38. Desenvolvimento
• Servidor local / Homologação / Produção
• Versionamento (GIT)
• HTML / CSS/ JS
• SASS / LESS
• GRUNT / GULP
• WordPress
– Plugins e funções
– Hierarquia do template

39. Obrigado!