planejamento de produtos digitais - 2
DESCRIPTION
Material de aula do dia 9 de maio, produzido pela profa. Marta Gleich.TRANSCRIPT
![Page 1: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/1.jpg)
PLANEJAMENTO DE PRODUTOS DIGITAIS
MARTA GLEICH8 de maio de 2010
![Page 2: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/2.jpg)
Do briefing ao lançamentoHá diferenças dependendo da empresa, mas o processo é semelhanteAprender este processo pode ser útil para desenvolver qualquer projeto, inclusive os não digitais!
Processo de desenvolvimento
![Page 3: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/3.jpg)
Processo de desenvolvimentoQuanto maior e mais complexo, mais importante é obedecer o processo
GRANDES
Portal
Site de jornal
MÉDIOS
Aplicativo iPhone
Site mobile
PEQUENOS
Funcionalidade MANUTENÇÃO
Correções
Melhorias
(Processo constante)
![Page 4: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/4.jpg)
Processo de desenvolvimento
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
![Page 5: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/5.jpg)
Equipe de que falamos ontem
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Cliente
• Própria equipe
• Briefing
• Atendimento
• Analista de negócio/produto – benchmarking/defi-nição do produo
• Gerente de projeto
• Arquiteto de informação/distri-buição das informações
• Designer
• Programador/có-digo e entrega das ferramentas e do produto
• Redator
• Editor
•Colocam o produto no ar
As etapas não são lineares, se desenrolam simultaneamente (métodos ágeis)
![Page 6: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/6.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento (todo o processo)
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
• Inserção, atualização e manutenção do conteúdo
![Page 7: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/7.jpg)
Atendimento
Interface entre o cliente e a equipe de desenvolvimento
Comunicação do andamento do projeto e apresentação e aprovação dos documentos do processo
Recebimento e elaboração do briefing Negociação de alteração de prazo ou escopo
![Page 8: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/8.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 9: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/9.jpg)
Definição de escopo
Enumeração do que o produto terá (e não terá) Quanto mais detalhado o escopo, menor a
margem para mal entendidos entre o planejado e o realizado
Tão importante quanto o escopo de um projeto é o não-escopo
Representa o “contrato” entre cliente e equipe de desenvolvimento
![Page 10: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/10.jpg)
Definição de escopo
Enumeração do que o produto terá (e não terá) Quanto mais detalhado o escopo, menor a
margem para mal entendidos entre o planejado e o realizado
Tão importante quanto o escopo de um projeto é o não-escopo
Representa o “contrato” entre cliente e equipe de desenvolvimento
É o que será feito
![Page 11: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/11.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 12: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/12.jpg)
Detalhamento
Define a lógica de navegação
Lista ferramentas a serem utilizadas
Define novas funcionalidades
Estabelece regras de negócio
Serve de documento de consulta até depois do encerramento do projeto
![Page 13: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/13.jpg)
Detalhamento
Define a lógica de navegação
Lista ferramentas a serem utilizadas
Define novas funcionalidades
Estabelece regras de negócio
Serve de documento de consulta até depois do encerramento do projeto
É o “como” será feito
![Page 14: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/14.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 15: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/15.jpg)
Horas/homem e a gravidez
Cálculo de quanto tempo demandará cada atividade considerando a equipe e o tempo que se tem à disposição
Leva em consideração diferentes cenários de desenvolvimento e deve ser apresentado para aprovação do cliente antes de se dar prosseguimento ao trabalho
Prevê quais atividades podem ser realizadas em paralelo e quais exigem trabalho isolado de apenas um profissional
![Page 16: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/16.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 17: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/17.jpg)
Processo – Cronograma
Ajuda a organizar o trabalho das diferentes equipes
Permite enxergar o tempo real de desenvolvimento e a prever riscos e atrasos
![Page 18: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/18.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 19: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/19.jpg)
Gerenciamento de projeto
Acompanha todas as atividades do projeto, do início ao fim
Faz o meio de campo entre as diferentes equipes envolvidas, negociando e providenciando a alocação dos profissionais
Mantém sempre atualizado o cronograma do projeto
Identifica quando é necessário propor eventuais alterações de escopo e de prazo
![Page 20: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/20.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 21: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/21.jpg)
Executa os wireframes, que são a “planta baixa”, definindo como será a navegação do produto
Reflete todas as definições do documento de detalhamento
Orienta as atividades seguintes: de Design gráfico, Web Standards e TI
Pode ou não ser feito em paralelo com o trabalho de detalhamento
Etapa na qual são realizados testes de usabilidade Possibilita a identificação de inconsistências no
produto, evitando retrabalho no design gráfico
Arquitetura de informação
![Page 22: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/22.jpg)
Wireframes
Arquitetura de informação
![Page 23: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/23.jpg)
Wireframes
![Page 24: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/24.jpg)
Wireframes
![Page 25: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/25.jpg)
Wireframes
![Page 26: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/26.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 27: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/27.jpg)
Design gráfico É a parte mais
esperada desde o começo do projeto
Acrescenta emoção e personalidade ao trabalho do arquiteto de informação
Demanda estudo cuidadoso da mensagem que se pretende passar visualmente
![Page 28: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/28.jpg)
Design gráfico – Case BBC
Há dois anos, a BBC imprimiu todo seu site e colou na parede que passou a ser conhecida como “Wall of Shame” (parede da vergonha) e deu início ao projeto “Global Visual Language 2.0”, para unificar os designs de interação e gráfico de seus produtos digitais
![Page 29: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/29.jpg)
Design gráfico – Case BBC
A equipe trabalhou para racionalizar as centenas de diferentes estilos existentes no portal da BBC num novo sistema visual e de navegação
![Page 30: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/30.jpg)
Design gráfico – Case BBC
O estudo incluiu a escolha cuidadosa de todos os elementos dos novos produtos, como as fontes a serem usadas em todas as páginas
![Page 31: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/31.jpg)
Design gráfico – Case BBC
Também foi elaborada uma paleta de cores completa, para dar unidade aos produtos
![Page 32: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/32.jpg)
Design gráfico – Case BBC
Para finalizar, toda a iconografia foi refeita
![Page 33: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/33.jpg)
Design gráfico – Case BBC
A lógica foi estendida inclusive para os sites mobile
![Page 34: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/34.jpg)
Design gráfico – Case BBC
Este case está descrito em detalhes no post “A new global visual language for the BBC's digital services”, de fevereiro deste ano
![Page 35: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/35.jpg)
Design gráfico
Exemplos BBC CNN El País iG Globo.com MSNBC The Guardian The New York Times
![Page 36: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/36.jpg)
Atividades – metade do caminho!
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
• Inserção, atualização e manutenção do conteúdo
![Page 37: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/37.jpg)
Web Standards
Traduz o trabalho de arquitetura de informação e de design gráfico para os navegadores
Segue padrão internacional
É o código que o Google lê para indexar as páginas
![Page 38: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/38.jpg)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
![Page 39: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/39.jpg)
Programação
Integra o código do novo produto às ferramentas existentes
Cria novas ferramentas Adapta ferramentas de mercado à nossa realidade Organiza a infra-estrutura Zela pelo desempenho e disponibilidade dos sites
![Page 40: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/40.jpg)
Programação
Códigos Constroem as
ferramentas
![Page 41: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/41.jpg)
Softwares e sites de uso livre e código abertoUso de ferramentas de mercado, algumas gratuitas
Ferramentas
![Page 42: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/42.jpg)
Ferramentas – podem inspirar o trabalho
• Blogs/Sites (CMS)– WordPress– Blogspot– Drupal
• Vídeos– YouTube– Qik– Vimeo
• Fotos– Flickr– Picasa
• Áudios– Gengibre
• Feeds– Google Reader
• Slideshows– Slideshare
• Busca– Google Custom Search
• Chats– CoverItlive
• Bookmarks– Delicious
• Redes sociais– Twitter– Facebook
• Comunidades– Ning– Google Friend Connect
• Controle de audiência– Google Analytics
• Monetização– Google Adsense
![Page 43: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/43.jpg)
Parte 3
Atividade
![Page 44: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/44.jpg)
Atividade
Revisar o briefing anterior com base no que foi visto hoje
Fazer benchmarking Detalhar escopo e não-escopo
Deve ser trazido pronto na próxima aula, quando será executado/finalizado o documento de definição do produto
![Page 45: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/45.jpg)
Referências
![Page 46: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/46.jpg)
Referências
Brainstorm 9 Creative Commons Designing and planning
webpages editorsweblog.org eHub Ferramentas digitais par
a jornalistas Google Labs Internet Legal
Jornalistas da Web Knight Center for
Journalism Mashable.com NCSA News University Online Journalism Blog Standards e Guidelines
da BBC Techcrunch Tiago Dória
![Page 47: Planejamento de produtos digitais - 2](https://reader033.vdocuments.pub/reader033/viewer/2022061304/5496643db479593d4d8b4f68/html5/thumbnails/47.jpg)
Até a próxima aula...
7 de maio 8 de maio 22 de maio
Apresentação Processo de desenvolvimento Atividade prática (Conclusão)
Conceito Atividade prática (Parte 2)
Inovação
Equipe
Atividade prática (Parte 1)