# Auditoria de Identidade, UX/UI e Conversão - Ship Supply Brazil Group

**Site auditado:** https://shipssupply.com.br/  
**Cliente:** SSBG - Ships Supply Brazil Group  
**Data da coleta inicial:** 17/06/2026  
**Atualização com novas capturas:** 17/06/2026  
**Escopo:** visão de identidade da marca, auditoria mobile-first de UX/UI, CRO, contraste, formulário, hierarquia, acessibilidade aparente e performance aparente.  

## 1. Resumo executivo

O site atual já transmite uma marca marítima robusta, internacional e operacional. A presença visual é forte: azul institucional dominante, acento laranja, imagens de porto, navios, equipamentos, certificações, logos de clientes e linguagem de “service provider” global. A marca parece confiável e experiente, mas ainda não organiza essa força em uma identidade digital clara e orientada à conversão.

A leitura principal é: **a identidade tem bons ativos, mas o site ainda comunica amplitude antes de comunicar precisão operacional**. Para o ICP internacional, o primeiro contato deveria responder rapidamente: “este fornecedor reduz risco de suprimento, prazo e documentação em portos brasileiros”. Hoje o site impressiona, mas demora a transformar reputação em decisão.

Recomendação: **otimizar o site atual**, não refazer do zero como primeira medida. A base visual é aproveitável; os maiores ganhos estão em hierarquia, consistência de identidade, CTA de RFQ, formulário, redução de duplicações, acessibilidade e validação de claims.

## 2. Visão da identidade da marca

### 2.1 Percepção geral

A marca percebida é de uma operação marítima com ambição global, vocabulário técnico e promessa de cobertura ampla. O site constrói confiança por associação com:

- universo portuário e naval;
- certificações e memberships;
- logos de clientes e parceiros;
- presença Brasil/USA;
- portfólio extenso de suprimentos e serviços;
- linguagem de eficiência, qualidade, compliance e suporte 24/7.

Essa identidade tem potencial para ocupar o território de **fornecedor marítimo confiável para operações internacionais no Brasil**. O ponto frágil é que a expressão visual ainda alterna entre três direções: institucional marítima, catálogo de produtos e template corporativo genérico. A marca parece forte, mas não totalmente lapidada.

### 2.2 Território visual atual

| Elemento | Leitura atual | Avaliação |
|---|---|---|
| Logotipo | Selo circular com linguagem náutica, navio, mar e arquitetura de grupo. | Forte para tradição e pertencimento marítimo, mas usado em excesso no hero e no rodapé. |
| Paleta | Azul escuro/institucional, azul vivo e laranja de ação. | Adequada ao setor; precisa de controle de contraste e menos dependência de azul em blocos repetidos. |
| Tipografia | Sans-serif geométrica, pesada em títulos e limpa no corpo. | Boa legibilidade em desktop; em mobile há competição entre títulos grandes, selos e imagens. |
| Imagens | Portos, navios, tripulação, produtos, alimentos e equipamentos. | Pertinentes, mas com linguagem desigual: algumas parecem operacionais, outras parecem banco de imagem. |
| Ícones | Linha azul e ícones laranja em cards de benefícios. | Funcionais, porém genéricos e repetidos. Podem ser mais específicos para risco, prazo, documentação e RFQ. |
| Certificações | Selos no hero e referências a IMPA/MESPAS/ProcureShip/TradeNet. | Bom ativo de confiança, mas precisa de explicação contextual para procurement internacional. |
| Tom verbal | “Excellence”, “Strategic”, “Global”, “Best”, “Quality”. | Profissional, mas genérico. Falta uma promessa mais concreta de redução de risco operacional. |

### 2.3 O que a identidade já comunica bem

1. **Setor correto:** em poucos segundos fica claro que é uma marca marítima, portuária e de suprimentos.
2. **Escala e experiência:** os blocos de “30+”, “35 years”, “50,000+ item catalog” e clientes reforçam maturidade, desde que validados.
3. **Alcance internacional:** contatos Brasil/USA, inglês predominante e logos globais ajudam o ICP estrangeiro.
4. **Energia operacional:** azul e laranja combinam autoridade e urgência; funcionam para um serviço em que prazo importa.
5. **Aparência de empresa estabelecida:** o site não parece improvisado, o que é relevante para procurement.

### 2.4 Fragilidades de identidade

1. **Promessa visual ampla demais:** a primeira dobra fala “Strategic Maritime Solutions” e “Excellence In Marine Service & Suppliers”, mas não explicita “ship supply no Brasil para navios estrangeiros”.
2. **Mistura de estilos de imagem:** porto noturno tecnológico, cards de produtos, alimentos em flat lay, equipe de banco de imagem e produtos isolados criam uma identidade menos coesa.
3. **Uso excessivo de selos e logos:** os selos ajudam, mas competem com a headline e o CTA quando aparecem todos juntos no hero.
4. **Claims sem camada explicativa:** “98% on-time”, “50,000+ item catalog”, “12 strategic bases” e “35 years” são bons, mas precisam de contexto, fonte e padronização.
5. **Marca de grupo pouco organizada:** aparecem variações como Brazil, CA USA e FL USA; isso pode ser positivo, mas precisa de arquitetura clara para não confundir o comprador.
6. **Tom genérico em pontos críticos:** “best services”, “one click away”, “global coverage” e “guaranteed quality” poderiam ser substituídos por linguagem de risco, prazo, documentação e disponibilidade.

### 2.5 Diagnóstico de identidade

**Direção recomendada:** posicionar a identidade digital como **operação marítima confiável, internacional e especializada em reduzir risco de suprimento em portos brasileiros**.

Para isso, o site deve tratar o visual como prova operacional, não apenas como decoração institucional. As imagens precisam mostrar atendimento real, produtos, portos e documentação com consistência. Os selos precisam virar argumentos claros. O azul deve continuar como cor de confiança, o laranja como cor de ação, mas com contraste corrigido.

**Frase-guia para design:** confiança operacional para navios estrangeiros no Brasil.

## 3. Contexto de acesso

| Métrica | Dado disponível | Implicação |
|---|---:|---|
| Percentual mobile | Não fornecido | A auditoria segue mobile-first por padrão de tráfego pago e por provável entrada de campanhas. |
| Percentual desktop | Não fornecido | Desktop segue importante para procurement, ship managers e compradores B2B em ambiente de trabalho. |
| Bounce rate | Não fornecido | Não foi possível relacionar atritos visuais com rejeição real. |
| Tempo médio na página | Não fornecido | Não foi possível medir engajamento real. |
| Plataforma | WordPress/Elementor, inferido pelo HTML | Estrutura editável, mas com risco de excesso de widgets, carrosséis e assets pesados. |

## 4. Análise do site

### 4.1 Tese de design para conversão

O ICP definido no projeto é B2B internacional: ship managers, procurement teams, operadores, armadores e influenciadores técnicos com embarcações estrangeiras escalando portos brasileiros. O critério de valor não é apenas “comprar suprimentos”, mas **evitar atraso, item errado, falta de documentação, fornecedor improvisado ou falha de compliance**.

Por isso, a página precisa responder mais cedo:

1. A SSBG atende navios estrangeiros em portos brasileiros?
2. Quais categorias resolve?
3. Como pedir uma cotação rapidamente?
4. Quais provas reduzem risco percebido?
5. O comprador está falando com uma operação confiável e pronta para urgência?

Hoje o site responde parte disso, mas tarde, com repetição e sem priorização suficiente.

### 4.2 Primeira dobra mobile

Na captura mobile, a primeira dobra mostra:

- logo grande no topo;
- menu hamburger;
- imagem de navio/porto como fundo;
- selo central grande;
- frase “Supply For Cruise, Tanker, Cargo, Research & Military Vessels” ou variações do slider;
- CTAs “CONTACT US” e “SEE SERVICES”;
- selos de credibilidade na base.

O impacto visual é forte, mas há competição entre logo, selo, headline, fundo, CTA e certificações. O usuário entende que é uma empresa marítima robusta, porém a proposta específica para ship supply internacional no Brasil ainda fica difusa.

**Score mobile:** 3/7

| Elemento | Status | Evidência | Recomendação |
|---|---|---|---|
| Tamanho mínimo de botões | Crítico | CTAs principais medidos com cerca de 39px de altura. Meta mínima: 44px. | Aumentar CTAs para pelo menos 44px, idealmente 48px. |
| Texto legível sem zoom | Atenção | Headline é grande, mas concorre com overlay, selo, imagem e slider. | Reduzir elementos simultâneos no hero. |
| CTA visível sem scroll | Bom | `CONTACT US` e `SEE SERVICES` aparecem na primeira dobra. | Transformar CTA primário em RFQ. |
| Imagens no mobile | Atenção | 121 recursos carregados no mobile; hero e backgrounds são pesados. | Otimizar imagens e reduzir slides. |
| Menu hamburger | Atenção | Área visual aproximada de 35 x 35px. | Ampliar área clicável para 44 x 44px. |
| Links próximos | Atenção | Selos, CTAs e navegação disputam atenção. | Separar prova visual de ação principal. |
| Formulário | Crítico | Formulário aparece por volta de 6.682px no mobile. | Inserir RFQ curto logo após o hero. |

**O que o ICP vê em 3 segundos no celular:** uma empresa marítima grande e visualmente confiável, mas sem uma promessa direta de “ship supply confiável no Brasil para navios estrangeiros que não podem esperar”.

### 4.3 Primeira dobra desktop

No desktop, o hero tem força cênica: porto noturno, rede de conexões, headline grande, botões e selos. O header superior mostra telefones, e-mails e redes sociais. A experiência passa presença internacional, mas sofre com excesso de elementos no mesmo plano.

**Score desktop:** 3/5

| Elemento | Status | Avaliação |
|---|---|---|
| Hierarquia visual | Atenção | Headline forte, mas genérica para a tese de risco operacional no Brasil. |
| CTA visível | Bom | CTAs aparecem na primeira dobra. |
| Densidade visual | Atenção | Hero tem fundo complexo, selo central, botões, setas de slider e selos. |
| Relevância das imagens | Bom | Imagem portuária reforça escala e operação. |
| Formulário | Crítico | Formulário aparece por volta de 5.580px no desktop. |

### 4.4 Produtos e serviços

A seção `Products & Services` apresenta boa variedade visual e categorias relevantes. O problema é que o carrossel e a quantidade de cards passam sensação de catálogo extenso antes de guiar o comprador para uma ação.

Achados:

- categorias aparecem repetidas, como `Maintenance & Preservation`;
- os cards misturam produto, serviço e agência em uma mesma lógica visual;
- a seção informa amplitude, mas não prioriza as demandas mais comuns do ICP;
- o CTA `ABOUT SERVICES` é pouco direto para conversão.

Recomendação: agrupar em 5 a 7 categorias comerciais claras, por exemplo: provisions, bonded stores, deck/engine/cabin, spare parts, technical services, safety, port/agency support. Cada categoria deve ter CTA ou caminho para RFQ.

### 4.5 Catálogo digital

A seção `All Your Supplies, One Click Away` é relevante porque sugere eficiência, busca e catálogo. Porém, para tráfego frio, aparece como solução antes de consolidar confiança e processo.

Problema central: “ver produtos” é uma ação de navegação, não necessariamente de conversão. Para procurement, o melhor caminho pode ser “enviar lista/solicitação” em vez de explorar catálogo manualmente.

Recomendação: manter a seção, mas reposicioná-la como ferramenta para quem já tem demanda clara. O CTA deveria complementar a RFQ, não competir com ela.

### 4.6 About e prova operacional

A seção `Providing the Best Maritime Services` reforça experiência e lista muitas categorias. A composição visual com porto e profissional em EPI ajuda, mas a imagem de pessoa parece mais genérica do que documental.

Achados:

- “30+ Years Working Experience” entra como prova forte, mas há inconsistência com “35 years” em outros trechos;
- a lista de serviços é longa e tende a virar ruído;
- o texto usa “Brasil & Belém”, mas a estratégia do projeto pede foco em comprador internacional e cobertura em portos brasileiros, não em mercado brasileiro como comprador final.

Recomendação: converter a seção em prova operacional: cobertura, processo, categorias, prazos, documentação e suporte. Padronizar o claim temporal após validação.

### 4.7 Bloco de provisions

A captura com alimentos e caixa azul comunica uma oferta específica: dry, frozen and fresh provisions. O visual é claro e fácil de entender, mas a imagem se distancia da linguagem marítima e pode parecer genérica de alimentação.

Recomendação: se a categoria for prioritária, manter a clareza do bloco, mas trocar ou complementar a imagem por contexto marítimo: estoque, embalagem, entrega no cais, checklist ou operação de embarque. Isso conecta produto a risco operacional.

### 4.8 Benefícios e vantagens operacionais

As seções `Benefits Of Our Services` e `Operational Advantages` têm a intenção correta: traduzir confiança em argumentos. Ainda assim, há dois problemas:

- repetição de ideias como cobertura, qualidade, legado e suporte;
- claims fortes sem fonte, período ou método.

Claims encontrados:

- `98% on-time delivery`;
- `50,000+ item catalog`;
- `35 years`;
- `30+ years`;
- `12 strategic bases`;
- `IMPA Membership`;
- `24/7 Support`.

Recomendação: reduzir para 4 provas verificáveis e explicar cada uma em termos de risco reduzido. Exemplo de lógica: cobertura reduz atraso, documentação reduz retrabalho, catálogo reduz falta de item, suporte 24/7 reduz interrupção.

### 4.9 Clientes e parceiros

A seção de clientes é um ativo de confiança importante. Logos como Hapag-Lloyd, Maersk, APL, Cosco e outros ajudam a sinalizar que a SSBG conversa com empresas globais.

Fragilidade: os logos aparecem sem contexto. Para procurement internacional, seria mais forte indicar tipo de operação, categoria atendida ou recorte aprovado, sem expor dados sensíveis.

Recomendação: manter logos se houver autorização de uso e adicionar uma camada discreta de contexto: “served vessel operators, cargo lines, cruise operations and offshore teams”, ou equivalente aprovado.

### 4.10 CTA intermediário e certificações

O bloco `360° Maritime Solutions with Speed & Compliance` é uma das seções mais alinhadas à tese do projeto. Fala de velocidade, qualidade, compliance, suporte marítimo e certificações.

Problema: aparece tarde e direciona para `See Certifications`, quando poderia funcionar como ponte para RFQ.

Recomendação: subir essa lógica para logo após o hero, com CTA primário de cotação e CTA secundário de certificações.

### 4.11 Contato e formulário

O formulário atual coleta:

- Your Name;
- Your Phone;
- Email Address;
- Subject;
- Message.

Ele é limpo visualmente, mas genérico e tardio. Para ship supply, falta qualificação operacional mínima:

- company name;
- vessel name ou IMO, se disponível;
- Brazilian port;
- ETA ou delivery window;
- request category;
- urgency;
- e-mail corporativo;
- upload de lista IMPA/ISSA, se viável.

**Score formulário:** 2/5

Recomendação: manter o formulário completo no final, mas adicionar um RFQ curto após o hero ou após o bloco de prova operacional. A página precisa capturar demanda antes de pedir que o usuário percorra o site inteiro.

## 5. Contraste e CTAs

| Elemento | Fundo | Texto | Contraste | Status WCAG AA |
|---|---:|---:|---:|---|
| `CONTACT US` | `rgb(0, 69, 178)` | branco | 8.42:1 | Passa |
| `SEE SERVICES` | `rgb(255, 131, 2)` | branco | 2.47:1 | Falha para texto normal |
| `Send` | `rgb(1, 86, 221)` | branco | 6.22:1 | Passa |

O laranja funciona como acento de energia e urgência, mas com texto branco não atinge contraste suficiente. A correção pode ser feita com laranja mais escuro, texto escuro ou uso do laranja apenas como ícone/realce, mantendo o azul como CTA primário.

## 6. Estrutura, acessibilidade e SEO aparente

Coleta Playwright:

- Mobile: 137 headings no DOM, 104 visíveis.
- Desktop: 155 headings no DOM, 103 visíveis.
- Mobile: 60 imagens visíveis, 30 sem `alt`.
- Desktop: 24 imagens visíveis sem `alt`.

Headings repetidos relevantes:

| Heading | Repetições mobile |
|---|---:|
| Technical Services | 7 |
| Maintenance & Preservation | 6 |
| Supplies & Logistics | 6 |
| Proven Legacy | 5 |
| Global Coverage | 5 |
| Safety | 4 |
| Inspections | 4 |
| Guaranteed Quality | 4 |

Impacto:

- piora a leitura por leitores de tela;
- cria ruído semântico para SEO;
- dificulta manutenção no Elementor;
- reforça sensação de página longa e repetitiva.

## 7. Performance aparente

Esta não é uma auditoria Lighthouse formal. Foi feita leitura aparente via navegador.

### Mobile

- DOMContentLoaded: aproximadamente 2,12s.
- Load event: aproximadamente 3,47s.
- Recursos carregados: 121.
- Scripts: 30.
- Imagens: 34.
- CSS/background/fontes agrupados como `css`: aproximadamente 7,54 MB transferidos.

### Desktop

- DOMContentLoaded: aproximadamente 2,02s.
- Load event: aproximadamente 3,40s.
- Recursos carregados: 123.
- Scripts: 30.
- Imagens: 36.

Maiores recursos detectados:

- `Captura-de-tela-2025-10-10-093038-1-scaled.png`: aproximadamente 4,24 MB.
- `banner-home-1-1.png`: aproximadamente 1,13 MB.
- `banner-home-3.png`: aproximadamente 1,05 MB.
- `logistics-means-transport...scaled.jpg`: aproximadamente 489 KB.
- `WhatsApp-Image-2025-10-13...jpeg`: aproximadamente 453 KB.

Risco: o hero usa imagens grandes e múltiplos slides/backgrounds. Mesmo com tempos aceitáveis na coleta, a experiência real em mobile, rede fraca ou acesso internacional pode sofrer.

## 8. Matriz de prioridade

| # | Melhoria | Impacto | Esforço | Prazo sugerido | Prioridade |
|---:|---|---|---|---|---|
| 1 | Definir sistema de identidade digital: azul primário, laranja de ação, padrões de imagem, uso de selos e hierarquia de prova. | Alto | Baixo | 1 a 2 dias | P1 |
| 2 | Trocar headline do hero para promessa específica: ship supply confiável no Brasil para navios estrangeiros. | Alto | Baixo | 1 dia | P1 |
| 3 | Trocar CTA primário para `Request RFQ` ou equivalente aprovado. | Alto | Baixo | 1 dia | P1 |
| 4 | Aumentar CTAs para mínimo de 44px e corrigir contraste do botão laranja. | Médio | Baixo | 1 dia | P1 |
| 5 | Subir bloco de prova operacional, velocidade/compliance e certificações para perto do hero. | Alto | Médio | 3 a 5 dias | P1 |
| 6 | Inserir RFQ curto logo após hero ou após prova operacional. | Alto | Médio | 3 a 5 dias | P1 |
| 7 | Reduzir duplicação de seções, headings e cards de serviços. | Alto | Médio | 1 semana | P1 |
| 8 | Reorganizar serviços por categorias comerciais prioritárias. | Alto | Médio | 1 semana | P1 |
| 9 | Padronizar imagens para parecerem mais operacionais e menos genéricas. | Médio | Médio | 1 semana | P2 |
| 10 | Adicionar `alt` descritivo nas imagens relevantes. | Médio | Baixo | 1 a 2 dias | P2 |
| 11 | Otimizar imagens grandes do hero e remover slides não essenciais. | Médio | Médio | 3 a 5 dias | P2 |
| 12 | Validar claims antes de ampliar uso em hero, anúncios e criativos. | Alto | Médio | Depende do cliente | P1 |
| 13 | Criar landing específica para `Ship Supplier in Brazil` ligada ao Google Ads. | Alto | Alto | 2 a 3 semanas | P3 |

## 9. Decisão: otimizar ou criar nova LP?

**Decisão:** otimizar o site atual e planejar landings específicas para mídia.

Justificativa: o site tem identidade visual útil, imagens pertinentes, CTAs existentes e estrutura editável em WordPress/Elementor. O problema não é ausência de presença digital, mas desalinhamento entre identidade, mensagem, prova, formulário e conversão.

Para tráfego pago internacional:

- site institucional: otimizar;
- campanhas de Google Search: criar LP focada em `Ship Supplier in Brazil`;
- campanhas de parceria: criar LP separada para parceiros/revendedores.

## 10. Score geral

| Dimensão | Score | Status |
|---|---:|---|
| Identidade de marca | 6/10 | Boa base, consistência média |
| Experiência mobile | 3/7 | Atenção alta |
| Experiência desktop | 3/5 | Atenção |
| Contraste CTAs | 2/3 | Atenção |
| Formulário de conversão | 2/5 | Crítico |
| Hierarquia visual | 14/25 | Atenção alta |
| **Total UX/CRO** | **24/45** | **Otimização necessária antes de mídia forte** |

## 11. Top problemas que mais custam conversão

1. **Hero genérico para o ICP internacional.** A primeira dobra vende excelência ampla, não redução de risco em portos brasileiros para navios estrangeiros.
2. **Identidade visual forte, mas pouco disciplinada.** Selos, imagens, claims e estilos diferentes competem entre si em vez de construir uma narrativa única.
3. **Formulário tardio e genérico.** O usuário precisa rolar milhares de pixels para encontrar um formulário que ainda não qualifica porto, ETA, navio, categoria ou urgência.
4. **Excesso de repetição e baixa priorização.** Muitos headings, serviços duplicados e benefícios repetidos tornam o site mais pesado cognitivamente do que deveria.
5. **Claims fortes sem validação aparente.** Provas são úteis, mas precisam ser sustentadas antes de virar argumento central de mídia e landing pages.