Planejamento de produtos digitais - 2

PLANEJAMENTO DE PRODUTOS DIGITAIS

MARTA GLEICH8 de maio de 2010

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

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)

Processo de desenvolvimento

Ideia/Pedido

Produto Arte TI Conteúdo

SEO | Web Analytics | Marketing | Planejamento Comercial | Opec

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)

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

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

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

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

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

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

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

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

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

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

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

Processo – Cronograma

Ajuda a organizar o trabalho das diferentes equipes

Permite enxergar o tempo real de desenvolvimento e a prever riscos e atrasos

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

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

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

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

Wireframes

Arquitetura de informação

Wireframes

Wireframes

Wireframes

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

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

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

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

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

Design gráfico – Case BBC

Também foi elaborada uma paleta de cores completa, para dar unidade aos produtos

Design gráfico – Case BBC

Para finalizar, toda a iconografia foi refeita

Design gráfico – Case BBC

A lógica foi estendida inclusive para os sites mobile

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

Design gráfico

Exemplos BBC CNN El País iG Globo.com MSNBC The Guardian The New York Times

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

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

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

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

Programação

Códigos Constroem as

ferramentas

Softwares e sites de uso livre e código abertoUso de ferramentas de mercado, algumas gratuitas

Ferramentas

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

Parte 3

Atividade

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

Referências

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

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)