A AGÊNCIA NUVE &
O PROCESSO DE PROJETOS

Texto
A AGÊNCIA NUVE &
O PROCESSO DE
PROJETOS

A AGÊNCIA NUVE E O
PROCESSO DE PROJETOS
Essa apresentação está dividida em 2 partes:
1. A SOLUÇÃO CERTA
Qual o problema do cliente?
2. O PROCESSO DE PROJETOS
Passo a passo de um site bem sucedido (case Tivoli Ecoresidences)

Texto
1. A SOLUÇÃO
CERTA
Antes de partirmos para o desenvolvimento de um projeto, devemos
avaliar: um site irá atender as expectativas do cliente?

A SOLUÇÃO CERTA
Qual o problema do cliente?
Inicialmente a primeira questão quando um cliente nos procura é:
Qual o problema dele e qual produto o solucionará melhor?
A Nuve questiona isso para atender de forma efetiva às expectativas do cliente por
resultados.
Também nos apoiamos no processo de gestão da inovação “Design Thinking”.

DESIGN
THINKING( )

(DESIGN THINKING)

(DESIGN THINKING)
http://livrodesignthinking.com.br/

Texto
2. O PROCESSO
DE PROJETOS
Construído, mantido e constantemente atualizado pela
equipe de Projetos da Agência Nuve

O PROCESSO DE PROJETOS
PASSO A PASSO DE UM SITE BEM SUCEDIDO
(case website responsivo Tivoli Ecoresidences*)
1) Prospecção e Planejamento
2) Execução: Conteúdo, Design e Programação
. Andamento
. Ferramentas de Apoio
*http://tivoliecoresidencespraiadoforte.com/

A) Briefing
B) Proposta orçamentária
Após aprovação...
C) Definição de tarefas e cronograma detalhado
D) Cadastro de tarefas no gerenciador de pauta
E) Escopo do projeto
F) Checklist de material do cliente
OBS: As informaçõesdetalhadas de cada etapa são exemplos reais do case de sucesso: web site Tivoli Ecoresidences
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento
Sumário

A) Briefing
O atendimento reúne as informações importantes do cliente para a solução de seu
problema. Ex:
•
Problema: razões do cliente para querer um novo site
•
Objetivos
•
Informações sobre produtos e serviços
•
Público-alvo
•
Diferenciais enfatizados em relação aos concorrentes
•
Ferramentas de marketing usadas atualmente
•
Conteúdo do site
•
Referências
•
Sistema de gerenciamento de conteúdo
•
Expectativas sobre prazos
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

B) Proposta orçamentária
A partir do briefing, a equipe realiza uma pesquisa e discussão inicial, para então
produzir um documento que descreve a natureza do produto que será proposto ao
cliente. Ex:
•
1. Objetivo
•
2. Os diferenciais do empreendimento
•
3. Público-alvo
•
4. Estratégias
•
5. Pesquisa de similares
•
6. Conteúdo
•
7. Etapas do Projeto
•
7.1. Planejamento
•
7.2. Criação e Design
•
7.3. Programação
•
7.4. Homologação
•
8. Prazos
•
9. Investimento e condições de pagamento
•
10. Ressalvas
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

C) Definição de tarefas e cronograma detalhado
Com a aprovação do orçamento, destrinchamos o projeto em tarefas interdependentes e
associamos aos respectivos responsáveis, considerando seu tempo de execução e visando
terminar o projeto no prazo previsto, usando auxílio GanttProject.
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

D) Cadastro de tarefas no gerenciador de pauta
O cronograma final sendo aprovado pelo cliente, cadastramos as tarefas no gerenciador
de projetos/de pauta usado na agência: O Groupcamp.
Fazendo isso, o sistema alerta automaticamente aos responsáveis de cada tarefa quando
os prazos estão chegando. Em geral, podemos acompanhar o andamento do projeto em
relação aos prazos.
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

E) Escopo do projeto
Após aprovação do orçamento, pesquisamos em um nível mais profundo e técnico e
descrevemos em um documento mais específico as características finais do projeto. Ex:
•
Especificações do site
•
1. Tecnologias utilizadas
•
2. Design gráfico
•
3. Usabilidade
•
4. Comunicação textual
•
5. Conteúdo
•
5.1 Organograma/Mapa do site
•
5.2 Seções
•
5.2.1. HOME
•
5.2.2. AS CASAS
•
5.2.3. A ESTRUTURA
•
5.2.4. REALIZAÇÃO
•
5.2.5. CONTATO
•
Glossário
Obs: O briefing serve de referência para
esse detalhamento.
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

F) Checklist de material do cliente
Com conhecimento do que precisamos para o projeto, para não termos que interromper o
projeto ou deixá-lo por incompleto por falta de uma informação, aplicamos um checklist
para coletar material que necessitaremos do cliente.
O PROCESSO DE PROJETOS
1. Prospecção e Planejamento

O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação
Sumário
OBS: Os exemplos detalhados de cada etapa são registros reais do case de sucesso web site Tivoli Ecoresidences
A) Checklist para criação de web sites
B) Definição de textos e imagens
C) Wireframe e prototipação
D) Layout e prototipação
E) Documentação das funcionalidades técnicas
F) Programação
G) Homologação

A) Checklist para criação de web sites
Criamos um documento para ajudar a lembrar de todos os itens que normalmente são
comuns em todos os web sites. Ex:
• Prever layout de página não encontrada (erro 404)
• Prever layout de resultados de busca (caso o site tenha sistema de busca interna)
• Prever layout de modelo de e-mail que será enviado ao cliente quando um usuário entrar
em contato pelo site
• Verificar meta tags definitivos (título, descrição e tags do site que aparecerão nos
mecanismos de busca, como Google)
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação

B) Definição de textos e imagens
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação
Reunimos em um documento o conteúdo que todas as páginas deverão ter.
Caso o texto não seja fornecido pelo cliente, nele o redator deverá produzir o texto no
documento, seguindo o escopo do site.
As imagens podem ser coletadas neste momento para casar com o texto, ou mais tarde
pelo designer.

C) Wireframe e Prototipação
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação
Seguindo o escopo do projeto, é iniciado o wireframe, que é a planta-baixa do site.
A importância dele é o foco na estrutura e conteúdo, ao invés de ser na arte.
Em projetos com o uso de grids, a partir desta etapa já é possível iniciar o
desenvolvimento front-end em paralelo.
Com todas as telas de wireframe, já é possível também realizar prototipação para testar a
navegação entre telas.
Embora seja indicado o “mobile first”, como para o cliente o lançamento do site desktop
era mais emergencial, iniciamos pelo desktop.

D) Layout e Prototipação
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação
Ao terminar os wireframes (validando com o cliente sempre que possível), os usamos
como base para a criação, seguindo o grid estabelecido.
Rotineiramente fazemos a home inicialmente para aprovar o conceito com o cliente e,
apenas após isso, fazemos o desdobramento em todas as outras páginas.
Uma forma eficiente de apresentar todos os layouts ao cliente é através de protótipos
online. Dessa forma, além de visualizar as terlas, ele terá uma experiência de navegação
próxima da definitiva.

E) Documentação das Funcionalidades Técnicas
Na hora de programar, nem todo funcionamento é óbvio apenas pelo layout.
Principalmente quando dependemos de um fornecedor externo, é importante a descrição
das funcionalidaes que pensamos.
Também usamos isso para facilitar o trabalho interno de programação, listando coisas
como:
•Tipografia,
•Tamanhos padrões das fontes
•Paleta de cores...
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação

E) Programação
Quando o projeto é feito por mais de um programador, usamos versionamento com
GitHub e Bitbucket.
Para agilizar o front-end, começamos já a programação a partir do grid do wireframe (e
atualmente usando o LESS CSS para agilizar ainda mais).
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação

E) Homologação
Secionamos a homologação: ao terminarmos a home desktop, por exemplo, podemos já
demandar sua revisão e anotação de erros, usando uma planilha compartilhada.
O PROCESSO DE PROJETOS
2. Execução: Conteúdo, Design e Programação

A)Diretrizes
B) Project Model Canvas
C) Scrum adaptado
O PROCESSO DE PROJETOS
Andamento
Sumário

O PROCESSO DE PROJETOS
Andamento
Durante o projeto, devemos:
•
Monitorar o desempenho do projeto com respeito à qualidade, ao andamento e ao
custo, em contraste com as especificações, o cronograma e o orçamento,
respectivamente.
•
Identificar possíveis problemas e tomar medidas corretivas, segundo a necessidade
•
Atualizar o cronograma sempre que necessário.
•
Divulgar claramente e regularmente o andamento do projeto a todos os
interessados.
•
Criar relatório interno para análise de resultados do projeto com pontos positivos e
pontos negativos, gráfico ou tabela com tempo estimado e tempo empregado para
conclusão de cada tarefa, além de sugestões de melhorias para outros projetos
A) Diretrizes

O PROCESSO DE PROJETOS
Andamento
Ao recebermos o briefing, devemos discutí-lo com todos os membros que
participarão do projeto de modo que todos entendam qual o seu
propósito/objetivo.
Tentamos atualment utilizar nessa e em todas reuniões da equipe do projeto, o
Project Model Canvas.
B) Project Model Canvas

POR
QUE?
O
QUÊ?
QUEM? COMO?
QUANDO
E
QUANTO?

O PROCESSO DE PROJETOS
Andamento
Como forma de manter todos atualizados a respeito do projeto, usamos um Scrum
board adaptado do método Scrum em um cartaz e post its separados pelas
colunas:
•A Fazer
•Fazendo
•Interrompido
•Pronto
C) Scrum adaptado

O PROCESSO DE PROJETOS
Andamento
E fazemos reuniões periódicas baseadas no "Daily Scrum Meeting“ respondendo às
perguntas:
•O que você tem feito desde ontem?
•O que você está planejando fazer hoje?
•Você tem algum problema impedindo você de realizar seu objetivo?
C) Scrum adaptado

Ao longo de cerca de um ano, foram descobertas várias ferramentas facilitadoras do
Processo de Projetos na Agência Nuve.
Segue lista das que são essenciais ou destaques para o desenvolvimento ágil
atualmente usado (ordenado por momento de uso)...
O PROCESSO DE PROJETOS
Ferramentas de Apoio e Referências
Introdução

•
Design Thinking: Inovação em negócios: Livro explicando métodos para inovar
(http://livrodesignthinking.com.br/)
•
Project Model Canvas: metodologia de gerenciamento de projetos, sem o
preenchimento de inúmeros documentos. (http://www.pmcanvas.com.br/)
•
Google Drive: Construção colaborativa de documentos, planilhas etc.
(http://drive.google.com)
•
GanttProject: Definir cronogramas e interdependências de tarefas
(http://www.ganttproject.biz/)
•
Groupcamp: Gerir projetos e pautas, denominado responsáveis e prazos às tarefas
(http://www.groupcamp.com.br/)
•
InVision: Prototipagem colaborativa online (http://www.invisionapp.com/)
•
Concept.ly: Prototipagem colaborativa online gratuita (http://concept.ly)
O PROCESSO DE PROJETOS
Ferramentas de Apoio e Referências

•
CSS Hat: Plugin de Photoshop que gera CSS a partir das camadas do programa
(http://csshat.com/)
•
Cut&Slice Me: Plugin de Photoshop que gera imagens recortadas de forma
automatizada (http://www.cutandslice.me/)
•
PNGGauntlet: Ferramenta gratuita que comprime imagens de extensão PNG,
diminuindo o tempo de carregamento das imagens PNG na web
(http://pnggauntlet.com/)
•
GitHub: Interface gratuita e amigável para versionamento, possibilitando
desenvolvimento em paralelo no mesmo projeto (https://github.com/)
•
Bitbucket: repositório de códigos de versionamento gratuito, mesmo para projetos
com código privado (https://bitbucket.org)
O PROCESSO DE PROJETOS
Ferramentas de Apoio e Referências

•
Twitter Bootstrap: Popular framework de front-end com grid responsivo para web sites
que agiliza o desenvolvimento (contanto que o layout tenha seguido o grid)
(http://getbootstrap.com/)
•
LESS CSS: Pré-processador de CSS que automatiza a criação de CSS, usando variáveis,
por exemplo (http://lesscss.org/)
•
Wordpress: CMS (gestor de conteúdo) open source online popular e fácil para usuários
comuns alimentarem sites, além de possuir grande gama de plugins e suporte pela
comunidade (https://br.wordpress.org/)
•
Wordpress Plugin ACF (Advanced Custom Fields): Plugin gratuito com certas
funcionalidades pagas, que otimiza a programação de campos personalizados no
Wordpress. (http://www.advancedcustomfields.com/)
O PROCESSO DE PROJETOS
Ferramentas de Apoio e Referências