Pular para o conteúdo
Development

A página de marketing que competia na categoria errada

Por Victor Da Luz
marketingastrodev-logsite

Reli a landing page do Deep Cut Atlas pela primeira vez em um tempo e ela não soava como o app que construí. O parágrafo de abertura dizia que ele “revela os álbuns, EPs e singles novos que você perdeu.” O primeiro destaque tinha o título “Lançamentos novos, filtrados para quem você realmente segue.” Isso é uma descrição precisa do que o app faz. É também, palavra por palavra, a proposta do MusicHarbor, um app que já faz rastreamento de lançamentos novos para Apple Music há anos e faz isso bem.

Competir no território de outra pessoa é uma jogada perdedora quando você não precisa fazer isso. Então abri a view model de verdade para checar para que o app foi construído.

O comentário de documentação tinha a proposta real

DiscoverViewModel tem um comentário de documentação descrevendo o que ele revela: “faixas escondidas” (“deep cuts”), lançamentos do catálogo dos artistas da biblioteca do usuário que ele ainda não tem. Não lançamentos “novos”. Qualquer lançamento, de qualquer ponto do catálogo de um artista, que nunca entrou na biblioteca do usuário. Lançamentos recentes são um subconjunto disso. O catálogo antigo é o resto, e geralmente é muito maior.

A landing page nunca fez essa distinção. Também nunca explicou o nome. “Deep Cut Atlas” é um bom nome para um app que mapeia o catálogo inteiro de um artista. É um nome estranho para um app que só te avisa sobre os singles desta semana.

Reescrevendo em torno da funcionalidade real

O fix foi só de texto: cinco pontos na página de marketing e no card de projeto da página inicial, nenhuma mudança de código. O gancho em que cheguei: “O algoritmo achou o artista. O Deep Cut Atlas acha os álbuns.” Ele traça a linha entre o que o próprio motor de recomendação da Apple Music já faz (mostrar artistas) e o que esse app adiciona (mostrar tudo desses artistas que você ainda não tem).

Também toquei em dois pontos que a issue não tinha citado explicitamente: um passo de “Como funciona” ainda com o título “Veja o que é novo,” e a meta description da página, ainda prometendo “lançamentos novos” para motores de busca e prévias em redes sociais. Deixar qualquer um dos dois de fora teria desfeito silenciosamente metade da reescrita, então trouxe os dois para o mesmo padrão.

Uma pegadinha de aspas em atributos do Astro

Uma edição quebrou o build de um jeito que levou um segundo para entender. A meta description da página é um atributo HTML puro num componente Astro: description='...'. Minha reescrita precisava de um apóstrofo em “you’re missing” dentro dessa string com aspas simples, então escapei com barra invertida: you\'re. Isso é válido dentro de um literal de string JS. Não é válido dentro de um atributo HTML puro, porque um atributo puro não é uma expressão JS de jeito nenhum, é só texto até a aspa correspondente. O Prettier tentou reparsear o arquivo, encontrou a barra invertida e a aspa perdidas e reescreveu o atributo inteiro numa bagunça multilinha de palavras soltas.

O fix foi parar de brigar com os dois tipos de aspas que a string precisava (um apóstrofo e um par de aspas duplas em volta de “To Check Out”) e trocar o atributo para uma expressão JS com template literal: description={}. Crases não precisam escapar nenhum dos dois tipos de aspas, então a frase inteira, apóstrofo e tudo, simplesmente funciona.

Resultado

npm run check, format:check e build passaram todos. Rodei um preview local e usei curl nas duas páginas para confirmar que “new release” não aparece mais em lugar nenhum do site, e que o novo enquadramento aparece onde deveria. Mudança pequena, mas ela move o app para uma categoria que ele consegue de fato vencer, em vez de uma onde o concorrente estabelecido sempre ganha a comparação.

Leitura relacionada

Você também pode achar útil

Proton

Proton VPN

VPN comercial com filtragem NetShield e interruptor de desligamento automático.

Como parceiro da Proton, ganho com compras qualificadas dos serviços de privacidade e segurança da Proton (Pass, Mail, VPN, Drive).

Saiba mais
Airalo

eSIM Airalo

eSIM de dados local para viagens - sem necessidade de trocar um SIM físico.

Este é meu link de indicação da Airalo. Você recebe um desconto no seu primeiro eSIM e eu ganho crédito da Airalo para o meu.

Saiba mais
NordPass

NordPass

Gerenciador de senhas da equipe por trás da NordVPN, com um plano gratuito.

Como afiliado da NordPass, ganho com compras qualificadas.

Saiba mais