# Plano de ação de design - SSBG

**Cliente:** SSBG - Ships Supply Brazil Group  
**Data:** 17/06/2026  
**Escopo:** identidade digital, UX/UI, conversão do site atual, camada visual de prova e preparação para páginas de aquisição.  

## 1. Objetivo

Transformar o site atual da SSBG em uma presença digital mais clara, confiável e orientada à conversão para compradores internacionais de ship supply em portos brasileiros.

O plano parte de uma decisão central: **otimizar o site atual antes de refazer do zero**. A base visual já tem força marítima, presença internacional e ativos úteis. O ganho principal está em disciplinar identidade, hierarquia, prova operacional, formulário de RFQ e organização das categorias.

## 2. Direção de marca para guiar o design

### 2.1 Território recomendado

**Confiança operacional para navios estrangeiros no Brasil.**

A SSBG não deve parecer apenas uma empresa ampla de serviços marítimos. O site precisa mostrar, de forma rápida, que a empresa reduz risco de suprimento, atraso, item errado, documentação incompleta e fornecedor improvisado em portos brasileiros.

### 2.2 Princípios visuais

1. **Operação antes de decoração:** imagens, ícones e blocos visuais devem provar processo, entrega, porto, documentação, produto e equipe.
2. **Internacional sem perder lastro local:** o visual precisa falar com procurement global, mas reforçar conhecimento prático de portos brasileiros.
3. **Técnico sem virar catálogo frio:** a camada de produto deve ser concreta, inspirada na Eurosul, mas conectada à entrega a bordo.
4. **Urgência com sobriedade:** o laranja deve indicar ação e prioridade, sem comprometer contraste ou parecer promocional.
5. **Prova acima de superlativo:** dar mais peso visual a evidências verificáveis, processo e categorias objetivas.
6. **Mobile-first real:** botões, formulários e leitura devem funcionar em telas pequenas sem depender de rolagem longa.

## 3. Prioridades de execução

| Prioridade | Frente | Resultado esperado |
|---|---|---|
| P1 | Hero e primeira dobra | Primeira dobra mostra território marítimo, operação no Brasil, prova e caminho para RFQ. |
| P1 | Ações e formulário | A ação principal passa a ser cotação ou envio de lista, com campos mínimos de qualificação. |
| P1 | Estrutura de serviços | Categorias ficam claras, menos repetidas e orientadas à decisão de compra. |
| P1 | Prova operacional | Certificações, cobertura, clientes, processo e experiência ficam mais próximos do topo. |
| P1 | Sistema visual | Cores, botões, selos, ícones e imagens ganham padrão consistente. |
| P2 | Catálogo técnico | Produtos e categorias ganham camada visual mais concreta, sem virar e-commerce genérico. |
| P2 | Acessibilidade e performance visual | Botões, contraste, imagens e hierarquia de títulos deixam de criar atrito. |
| P3 | Landing pages de aquisição | Páginas específicas para Google Search e campanhas por intenção. |

## 4. Plano por fase

### Fase 1 - Fundamento visual e primeira dobra

**Objetivo:** alinhar identidade e primeira impressão antes de mexer no restante da página.

**Ações**

1. Redesenhar a hierarquia visual do hero.
   - Área de título mais limpa.
   - Área de apoio curta, sem competir com selos e imagem de fundo.
   - Ação principal de RFQ em posição dominante.
2. Criar composição mobile-first para primeira dobra.
   - Logo com presença controlada.
   - Imagem marítima com leitura limpa.
   - Botões com altura adequada para toque.
   - Selos e provas fora do centro de atenção principal.
3. Definir uma ação visual primária para RFQ.
   - Botão principal em azul.
   - Botão secundário com hierarquia mais discreta.
   - Espaçamento suficiente entre ações.
4. Reduzir competição visual no hero.
   - Menos selos simultâneos.
   - Menos logo repetido.
   - Menos dependência de slider.
   - Fundo marítimo com leitura limpa.
5. Prever flexibilidade para conteúdo final.
   - O layout deve resolver espaços, estados e hierarquias sem depender de conteúdo definitivo.

**Critério de aceite**

Em 3 segundos, no mobile, o usuário deve perceber: marca marítima, operação confiável, contexto de porto brasileiro e caminho de cotação.

### Fase 2 - Sistema visual do site

**Objetivo:** criar consistência para que a marca pareça premium, técnica e confiável em todas as seções.

**Ações**

1. Padronizar paleta.
   - Azul como cor principal de confiança.
   - Laranja como cor de ação e destaque, corrigindo contraste.
   - Branco e cinzas técnicos para áreas de leitura e tabelas.
2. Ajustar botões.
   - Altura mínima de 44px no mobile.
   - Primário azul com tipografia branca.
   - Secundário em contorno ou fundo claro.
   - Evitar laranja claro com tipografia branca.
3. Padronizar uso de selos.
   - Menos selos no hero.
   - Selos com área de apoio visual e contexto documental.
   - Uso apenas quando a validação documental estiver resolvida.
4. Definir linguagem de ícones.
   - Ícones devem representar risco, prazo, documentação, porto, RFQ, categoria e suporte.
   - Evitar ícones genéricos repetidos sem função.
5. Definir padrão de imagem.
   - Priorizar operação real, porto, entrega, equipe, embalagem, conferência, documentação e produto em contexto marítimo.
   - Evitar banco de imagem corporativo genérico.
   - Evitar produto isolado sem relação com bordo ou porto, exceto na camada de catálogo.

**Critério de aceite**

O site deve parecer uma única marca, não a soma de template institucional, catálogo e blocos promocionais desconectados.

### Fase 3 - Arquitetura da página e redução de ruído

**Objetivo:** encurtar o caminho entre intenção, confiança e contato.

**Ações**

1. Reorganizar a página inicial nesta ordem recomendada:
   - Hero com território claro e RFQ.
   - Bloco curto de prova operacional.
   - Categorias comerciais prioritárias.
   - Processo de cotação e entrega.
   - RFQ curto.
   - Catálogo e produtos.
   - Certificações, diretórios e clientes.
   - Cobertura e portos.
   - Conteúdo institucional reduzido.
   - Formulário completo e contatos.
2. Reduzir seções duplicadas.
   - Consolidar repetições de `Technical Services`, `Maintenance & Preservation`, `Supplies & Logistics`, `Proven Legacy` e `Global Coverage`.
3. Revisar hierarquia de títulos.
   - Uma hierarquia clara de H1, H2 e H3.
   - Estrutura útil para leitura humana, acessibilidade e SEO.
4. Reorganizar categorias.
   - Provisions.
   - Bonded stores.
   - Deck, engine and cabin stores.
   - Spare parts and technical supplies.
   - Safety and certified items.
   - Marine and port support services.
   - Special requests and long tail items.

**Critério de aceite**

A página deve ficar mais curta, mais escaneável e mais fácil de manter no WordPress/Elementor.

### Fase 4 - RFQ e conversão

**Objetivo:** transformar interesse em pedido qualificado sem forçar o usuário a rolar até o fim.

**Ações**

1. Criar RFQ curto próximo ao topo.
   - Company name.
   - Corporate e-mail.
   - Vessel name or IMO, if available.
   - Brazilian port.
   - ETA or delivery window.
   - Request category.
   - Message or supply list.
2. Manter formulário completo no final.
   - Usar para contato geral, parceria e dúvidas institucionais.
3. Criar área de ação para envio de lista.
   - Padrão inspirado na Eurosul, mas adaptado ao contexto operacional da SSBG.
   - Espaço preparado para lista IMPA/ISSA ou pedido especial.
4. Integrar WhatsApp como apoio, não como único caminho.
   - WhatsApp pode servir urgência.
   - RFQ estruturado precisa capturar dados mínimos para CRM e operação.

**Critério de aceite**

O comprador com demanda real deve conseguir iniciar cotação antes de conhecer todas as seções institucionais.

### Fase 5 - Prova operacional e conteúdo visual

**Objetivo:** substituir aparência genérica por evidência visual e argumentos verificáveis.

**Ações**

1. Criar um bloco de prova operacional perto do hero.
   - Coverage.
   - Documentation.
   - Port-ready delivery.
   - 24/7 coordination.
2. Padronizar claims.
   - `30+ years` ou `35 years`: escolher um após validação.
   - `98% on-time delivery`: usar somente com método e período.
   - `50,000+ items`: usar somente com origem do catálogo.
   - `12 strategic bases`: explicar bases próprias, parceiras ou cobertura.
3. Melhorar logos de clientes e parceiros.
   - Usar somente com autorização.
   - Adicionar camada visual discreta sem expor dado sensível.
4. Criar shot list para assets reais.
   - Entrega no cais.
   - Equipe conferindo material.
   - Embalagem e identificação.
   - Provisions em contexto de operação.
   - Safety items e itens técnicos em contexto marítimo.
   - Documento/checklist sem dados sensíveis.
   - Atendimento junto ao navio.

**Critério de aceite**

Cada prova visual deve responder a uma dúvida do comprador: prazo, qualidade, documentação, cobertura, capacidade ou confiança.

### Fase 6 - Camada de catálogo técnico

**Objetivo:** aproveitar o aprendizado da Eurosul sem transformar a SSBG em loja de produtos.

**Ações**

1. Criar cards de categoria com exemplos concretos.
   - Usar nomes técnicos quando fizer sentido.
   - Mostrar exemplos de itens sem prometer estoque absoluto.
2. Criar páginas ou blocos por categoria prioritária.
   - Provisions.
   - Bonded stores.
   - Safety.
   - Deck/engine/cabin.
   - Spare parts.
3. Adicionar ações por categoria.
   - Botão de solicitação por categoria.
   - Botão para envio de lista.
   - Caminho para disponibilidade técnica.
4. Usar certificações junto de categorias reguladas.
   - Apenas se houver validação.

**Critério de aceite**

O catálogo deve aumentar confiança técnica e reduzir ambiguidade, sem estimular navegação longa quando o usuário já quer cotar.

### Fase 7 - Preparação para mídia e landing pages

**Objetivo:** separar site institucional otimizado de páginas de aquisição com intenção comercial mais direta.

**Ações**

1. Criar landing `Ship Supplier in Brazil`.
   - Foco em Google Search internacional.
   - Hero direto, RFQ acima da dobra e prova operacional curta.
2. Criar páginas por porto ou região, se houver validação operacional.
   - Portos prioritários devem ser definidos com time comercial.
3. Criar página para parceiros e port agents.
   - Estrutura específica para rede, coordenação e responsabilidade.
4. Criar variações de criativos para tráfego.
   - Risco operacional.
   - Provisions e fresh supply.
   - Technical supplies.
   - Port window urgency.

**Critério de aceite**

Cada página deve ter uma intenção de busca ou campanha clara, sem tentar resolver todo o posicionamento da empresa em uma única dobra.

## 5. Matriz de ações

| # | Ação | Prioridade | Responsável principal | Dependência |
|---:|---|---|---|---|
| 1 | Aprovar direção visual da primeira dobra e campos de RFQ. | P1 | Designer + Comercial | Validação estratégica |
| 2 | Redesenhar hero mobile e desktop. | P1 | Designer | Direção visual aprovada |
| 3 | Corrigir contraste e tamanho dos botões. | P1 | Designer/Frontend | Acesso ao site |
| 4 | Criar RFQ curto e campos mínimos. | P1 | Designer + Comercial | Campos de CRM |
| 5 | Reorganizar categorias comerciais. | P1 | Designer + Comercial | Lista de serviços prioritários |
| 6 | Subir prova operacional para perto do hero. | P1 | Designer | Claims validados |
| 7 | Reduzir seções duplicadas e títulos repetidos. | P1 | Frontend/WordPress | Acesso ao Elementor |
| 8 | Padronizar paleta, botões, selos, cards e ícones. | P1 | Designer | Identidade aprovada |
| 9 | Selecionar ou produzir imagens operacionais reais. | P2 | Designer + Cliente | Banco de imagens do cliente |
| 10 | Otimizar imagens pesadas do hero. | P2 | Frontend/WordPress | Acesso aos assets |
| 11 | Preparar inventário de imagens para acessibilidade. | P2 | Designer/Frontend | Inventário de imagens |
| 12 | Criar camada de catálogo técnico por categoria. | P2 | Designer + Comercial | Categorias e exemplos |
| 13 | Planejar landing `Ship Supplier in Brazil`. | P3 | Designer + Tráfego | Campanhas e palavras-chave |

## 6. O que não fazer

1. Não competir visualmente por preço ou desconto.
2. Não copiar a Eurosul como e-commerce ou loja de produtos.
3. Não parecer uma Wrist menor.
4. Não usar “global coverage” sem explicar cobertura real.
5. Não transformar o hero em vitrine de selos.
6. Não depender apenas de WhatsApp para conversão.
7. Não usar claims fortes antes de validação.
8. Não usar imagens genéricas quando a confiança depende de operação real.
9. Não criar landing de mídia antes de corrigir estrutura visual, hierarquia e RFQ.