Planejamento de produtos digitais - 2

1,175 views

Published on

Material de aula do dia 9 de maio, produzido pela profa. Marta Gleich.

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Recebido e compreendido o briefing, passa-se à definição de escopo.
  • Definido e acordado o que o produto terá, passa-se ao detalhamento de como será o produto.
  • Ao lado vocês veem o índice do documento de detalhamento do site clicEsportes lançado no ano passado.
  • Fechada a previsão do tempo que se levará para desenvolver as atividades em cada equipe, o gerente de projeto organiza o cronograma.
  • Uma equipe de desenvolvimento nunca está parada à espera do próximo projeto. Pelo contrário. Encaixar as atividades e tarefas na realidade de cada equipe é um cálculo complexo que exige organização e capacidade de priorização. Manter as informações sobre o andamento do processo atualizadas no cronograma é fundamental para o acompanhamento dos riscos e a execução de eventuais ajustes de escopo ou prazo. Normalmente é feito usando-se o Project, da Microsoft. Na RBS, hoje, usamos um programa específico de gerenciamento de projetos chamado Trace GP.
  • Fazer o controle do cronograma e acompanhar a execução de todas as atividades é tarefa do gerente de projeto.
  • Decidido o que se quer e o que se vai desenvolver, assim como na construção de uma casa, por exemplo, é preciso fazer o desenho do produto. É a fase chamada de arquitetura de informação ou design de interação.
  • Ao lado, o documento que reflete a arquitetura de informação do clicEsportes.
  • Ao lado, o documento que reflete a arquitetura de informação do clicEsportes.
  • A complexidade dos wireframes também está relacionada à complexidade do projeto.
  • A complexidade dos wireframes também está relacionada à complexidade do projeto.
  • Existem várias ferramentas que podem ser usadas para fazer wireframes. Desde o Axure, que permite a execução de projetos navegáveis, até a boa e velha parceria papel e caneta...
  • A primeira etapa do trabalho de TI é a codificação do desenho seguindo o padrão W3C, a linguagem compreendida pelos navegadores. Quanto mais correto o código, melhor o desempenho das páginas nos diferentes navegadores.
  •  
  • Planejamento de produtos digitais - 2

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

    ×