Mini-Projecto · Kit digital completo para uma marca real
Contexto
A "Raiz Urbana" é um estúdio de yoga e pilates que abriu há quatro meses num bairro residencial. Tem duas salas, cinco professores e aulas das 7h às 21h. O problema é conhecido: as aulas da manhã e do fim da tarde estão cheias, mas as das 11h às 16h têm 30% de ocupação — e são as que pagam a renda.
Até agora, a comunicação resume-se a um perfil de Instagram com fotografias tiradas ao calhas, sem identidade nenhuma, e a um "site" que é apenas uma página do Linktree. Quem quer marcar uma aula tem de enviar mensagem privada e esperar por resposta.
A gerência contratou-te para conceber e produzir o kit de comunicação digital do estúdio, com um objetivo claro: encher as aulas do meio do dia. Trabalhas individualmente ou a pares, com uma ferramenta de UI (Figma ou Penpot), edição de imagem (GIMP, Photopea ou Photoshop) e vetorial (Inkscape ou Illustrator). Entregas um protótipo clicável testado com utilizadores reais, um conjunto de peças sociais, o sistema visual que as sustenta, e um dossiê com briefing, decisões, verificação de acessibilidade e plano de medição.
Alternativa: podes substituir a Raiz Urbana por uma micro-empresa real da tua zona, desde que o briefing seja igualmente completo e aprovado pelo formador.
Requisitos
Funcionais
- Briefing digital com as 10 perguntas (empresa, objetivo de negócio, público, mensagem, ação, suportes, restrições, orçamento, prazo e métrica de sucesso), mais uma persona desenvolvida com dispositivo, contexto e momento de consumo.
- Auditoria dos suportes existentes: tabela com família (próprio/pago/ganho), estado, problema e prioridade de intervenção.
- Sistema visual digital, documentado num mini-guia de 4 a 6 páginas:
- paleta com primária, acento, escala de 5 neutros e 4 cores de estado, em HEX, com o rácio de contraste de cada combinação de texto usada;
- escala tipográfica para telemóvel e monitor (corpo, títulos, entrelinhas, larguras máximas);
- grelha e espaçamento (12 colunas, múltiplos de 8);
- logótipo em SVG, nas versões positiva, negativa e a uma cor;
- regras de utilização e usos incorretos ilustrados.
- Arquitetura de informação: inventário de conteúdos, mapa do site com menu de 5 a 7 entradas e fluxo de utilizador completo do anúncio até à aula frequentada.
- Protótipo clicável de, no mínimo, 4 ecrãs (entrada, horários, marcação, confirmação), desenhado mobile first e com a versão desktop de pelo menos um deles.
- Teste de usabilidade com 5 pessoas, com guião, registo de observações e problemas classificados por gravidade — e as correções aplicadas ao protótipo.
- Conjunto social: 3 a 5 modelos reutilizáveis e, a partir deles, 6 posts 4:5 (1080 × 1350), 4 stories 9:16 (1080 × 1920, com zonas seguras respeitadas) e 1 banner 300 × 250.
- 1 email de campanha (600 px, uma coluna) com assunto, pré-cabeçalho e chamada à ação.
- Verificação de acessibilidade documentada: tabela de contrastes, textos alternativos escritos para todas as imagens, e verificação de navegação por teclado no protótipo.
- Plano de medição: métrica por peça, instrumento de recolha, valor-alvo e critério de desvio; mais o desenho de um teste A/B com hipótese e variável isolada.
Não-funcionais
- Todas as exportações em sRGB; imagens em WebP (com JPG de recurso), dimensionadas a 2× do tamanho de exibição.
- Pesos-alvo cumpridos e verificados: imagem de conteúdo < 200 KB, imagem principal < 300 KB, banner < 150 KB, logótipo SVG < 10 KB.
- Contraste de 4,5:1 em todo o texto corrente e 3:1 em texto grande e elementos de interface — sem exceções não justificadas.
- Nenhuma informação codificada apenas por cor.
- Alvos de toque de 44 × 44 px no mínimo em todos os elementos interativos.
- Corpo de texto a 16 px ou mais; larguras de linha entre 45 e 75 caracteres.
- Imagens com licença verificada e registada (fotografia própria, banco gratuito com licença anotada, ou banco pago com comprovativo); autorização de uso de imagem para pessoas identificáveis.
- Ficheiros organizados por pastas e versionados (
v01,v02,final), com camadas e componentes nomeados. - Coerência total entre protótipo, peças sociais e email: mesma paleta, mesma tipografia, mesma linguagem visual.
Fases
Fase 1 · Briefing, auditoria e estratégia (2h) Preencher o briefing das 10 perguntas e construir a persona. Escrever a cascata estratégia de negócio → estratégia de comunicação → objetivo do suporte → peças. Auditar o que o estúdio já tem. Definir a métrica de sucesso antes de desenhar seja o que for.
Fase 2 · Pesquisa e direção visual (2h) Analisar 5 a 8 referências (estúdios de yoga, ginásios, marcas de bem-estar): o que funciona, o que não funciona, o que é cliché. Montar um moodboard com direção cromática, tipográfica e fotográfica. Justificar as escolhas com base na persona, não no gosto pessoal.
Fase 3 · Sistema visual (3h) Construir a paleta a partir da cor de marca usando HSL, com neutros e estados. Verificar todos os contrastes e registá-los numa tabela. Definir a escala tipográfica para os dois tamanhos de ecrã. Fixar grelha e espaçamento. Desenhar ou vetorizar o logótipo em SVG, nas três versões.
Fase 4 · Arquitetura e fluxo (2h) Inventário de conteúdos, mapa do site e fluxo de utilizador do anúncio à aula frequentada. Em cada passo do fluxo, escrever o motivo mais provável de desistência e a decisão de design que o combate.
Fase 5 · Wireframes e protótipo (4h) Esboçar em papel várias hipóteses para cada ecrã. Passar a wireframe (cinzentos, sem cor final). Só depois aplicar o sistema visual e ligar os ecrãs num protótipo clicável, mobile first. Um dos ecrãs também em versão desktop, mostrando a reorganização da grelha.
Fase 6 · Teste de usabilidade (2h) Escrever o guião com 3 tarefas. Testar com 5 pessoas do público-alvo, no telemóvel delas. Registar hesitações, cliques errados, desistências e frases ditas. Classificar os problemas por gravidade (crítico / sério / menor / cosmético) e aplicar as correções dos críticos e sérios ao protótipo. Documentar o antes e o depois.
Fase 7 · Produção das peças (3h) Construir os 3 a 5 modelos reutilizáveis e produzir a partir deles os 6 posts, os 4 stories, o banner e o email. Otimizar todas as imagens e verificar os pesos. Escrever os textos alternativos e as legendas completas — a mensagem nunca vive só dentro da imagem.
Fase 8 · Acessibilidade, medição e entrega (2h) Correr a verificação final de acessibilidade sobre todas as peças. Escrever o plano de medição com métricas, alvos e critérios de desvio, e desenhar o teste A/B. Montar o dossiê e apresentar em 8 minutos: problema, decisões, protótipo, o que o teste revelou, e como se vai saber se resultou.
Critérios de avaliação
| Critério | O que se avalia | Ponderação |
|---|---|---|
| Briefing, persona e estratégia | Cascata coerente, métrica definida à partida, auditoria fundamentada | 10% |
| Sistema visual | Paleta com neutros e estados, escala tipográfica, grelha, logótipo vetorial, guia documentado | 15% |
| Arquitetura e fluxo | Menu de 5–7 entradas com linguagem do utilizador, fluxo completo com pontos de desistência | 10% |
| Protótipo | Mobile first, hierarquia clara, uma ação principal por ecrã, adaptação desktop correta | 20% |
| Teste de usabilidade | Guião com tarefas (não instruções), 5 participantes, problemas classificados e corrigidos | 15% |
| Peças sociais e email | Modelos reutilizáveis, formatos e zonas seguras corretos, coerência com o sistema | 15% |
| Acessibilidade e produção técnica | Contrastes verificados, alt escritos, pesos e formatos cumpridos, licenças registadas |
10% |
| Medição e apresentação | Plano com alvos e critérios de desvio, teste A/B bem desenhado, defesa clara em 8 minutos | 5% |
| Total | 100% |
Erros comuns
- Começar a desenhar ecrãs antes de fechar o briefing, a persona e a métrica.
- Saltar o wireframe e ir direto ao mockup a cores — depois discute-se a cor do botão quando o problema é o fluxo.
- Menu com 12 entradas, organizado como o organigrama da empresa e não como a cabeça do cliente.
- Formulário de marcação com oito campos "porque a ficha do cliente pede".
- Testar o protótipo só no monitor grande e descobrir na apresentação que no telemóvel não se lê nada.
- Fazer o teste de usabilidade e não corrigir nada — o teste vira decoração do dossiê.
- Ajudar o participante durante o teste, e assim apagar o problema que se queria encontrar.
- Paleta com seis cores fortes e nenhum cinzento: interface aos gritos onde nada se destaca.
- Escolher a cor de acento sem verificar o contraste e descobrir tarde que o botão principal é ilegível.
- Toda a mensagem dentro da imagem do post, com legenda a dizer só "✨".
- Ignorar as zonas seguras dos stories e ver a interface a tapar a chamada à ação.
- Exportar imagens de 4 MB "porque assim fica com qualidade".
- Logótipo entregue só em PNG.
- Usar fotografias de banco de imagens genéricas — o estúdio fica indistinguível de qualquer outro.
- Definir a métrica depois da campanha, quando já não há como medir.
- Entregar o kit sem o guia de utilização, e ver a marca desfazer-se em três semanas de posts feitos à pressa.
Bónus (opcional)
- Produzir uma versão em modo escuro do sistema visual, com a saturação ajustada e os contrastes reverificados.
- Desenhar o ecrã de estado de erro e de estado vazio ("ainda não tens marcações") — os ecrãs que ninguém desenha e toda a gente encontra.
- Criar um Reel 9:16 de 15 segundos com legendas, respeitando as zonas seguras.
- Fazer o card sorting com 6 pessoas antes de fixar o mapa do site, e comparar o resultado com a tua proposta inicial.
- Calcular a pegada da página (peso total transferido) e propor uma versão mais leve, comparando os dois valores.
- Escrever a política de privacidade e o texto do banner de cookies do site, em linguagem clara.
- Preparar os modelos no Canva e escrever o guia de 1 página para a rececionista publicar sem estragar a identidade.
Reflexão
No final, responde por escrito: o que muda no teu processo de trabalho pelo facto de a peça ser digital e não física? Identifica a decisão do projeto que o teste de usabilidade provou estar errada — e explica porque é que tu, sozinho ao computador, não a tinhas visto. Por fim: se a campanha correr mal, que número vais olhar primeiro, e porquê?