Documento para ter referências de como desenvolver produtos digitais. Dentro do LAB nunca houve um processo igual do início ao fim, esse fluxo se aplica dependendo do caso, mas serve como referência geral.
Etapa para definir bem qual é o produto e como ele irá atender em linhas gerais as expectativas do público. Em parceria com secretarias é bom ter um documento.
- Identificar problema/necessidade (o que está acontecendo? quais as necessidades?)
- Definir objetivo geral da plataforma (missão, propósito, legado)
- Definir público alvo (ou públicos)
- Pesquisar referências
- Definir objetivos específicos (o que se espera alcançar)
- Testar com usuário/cliente, aprovar
O que acontece se seguirmos sem isso? Pode acontecer de termos a ideia, mas se não estiver documentada não gera legado e podemos perder informações. Definir o público facilita articulação e os objetivos específicos a definição de funcionalidades.
Etapa para definir o que a plataforma vai entregar para o cliente/usuário. Nesta etapa cada objetivo específico é detalhado em outros. Nos colocamos no lugar da pessoa que vai acessar a plataforma e perguntamos que ações ela poderá fazer (ex: receber informação, buscar no texto).
- Fazer workshop de requisitos (com clientes ou interno) - card sorting (imagem a seguir)
- Consolidar em um mapa mental/documento
- Testar com usuário/cliente, aprovar
O que acontece se seguirmos sem isso? Podemos ter retrabalho se começarmos a detalhar a plataforma demais em termos de design e perder a informação do todo também do ponto de vista do dev.
- Fazer wireframes (como são as telas?) - Exemplo Ágora e Visão 500
- Fazer fluxo de navegação (como o usuário vai navegar entre as páginas?)
- Aprovar com clientes internos/externos
- Fazer telas com marcações e disposição de informação - Exemplo Visão 500
- Fazer telas com aplicação da identidade visual do projeto (protótipo finalizado) - Exemplo Plano Diretor e Visão 500
Os wireframes foram separados em 4 níveis: -Croqui rápido - Exemplo Ágora e Visão 500
- Marcação do site sem identidade visual - Exemplo Visão 500
- Protótipo final com identidade visual - Plano Diretor e Visão 500
- Protótipo navegável (nunca fizemos)
O que acontece se seguirmos sem isso? Nada :). Usabilidade pobre e provavelmente muito retrabalho devido a desalinhamentos.
O desenvolvedor coloca um grau de dificuldade para cada requisito/funcionalidade definida no Item 2 Marcar as funcionalidades essenciais para um primeiro teste/entrega Priorizar as funcionalidades e planejar datas de entregas / sprints e roadmaps (pode ser feito com clientes ou não)
*Mínimo produto viável: aquele produto que com o mínimo de funcionalidades ou com as funcionalidades “analógicas” atendem ao requerido. (Ex.: um formulário em um site pode ser substituído por um typeform e entregue mais rápido).
- Tecnologia de código aberto (open source) no GitHub
- Sites responsivos com foco em mobile
- Acessibilidade e certificação w3c
- Replicabilidade (que qualquer um possa reutilizar), precisa de boa documentação