Estratègia Freemium — Presentació de funcionalitats premium

Context

LDP segueix un model freemium: accés bàsic gratuït per a tothom, funcionalitats avançades per a subscriptors. La manera com es presenten les funcionalitats premium al frontend és una decisió de producte que afecta la conversió i l'experiència d'usuari.

Decisió (març 2026): Les funcionalitats premium es mostren sempre a tots els usuaris, mai s'amaguen. L'objectiu és crear desig i mostrar el valor del producte, amb un to positiu que convidi a subscriure's.

Principis de disseny

1. Visibilitat total

La funcionalitat premium es mostra a tothom — tant a usuaris registrats com a visitants anònims. Mai s'amaga darrera d'un login o una paret de pagament opaca.

Per què: Si l'usuari no sap que existeix, no la valorarà ni pagarà per ella.

2. To positiu i convidant

El missatge mai és restrictiu ni punitiu. No diem "No pots fer això" ni "Funcionalitat bloquejada". Diem coses com:

Evitar	Preferir
"Funcionalitat bloquejada"	"Disponible amb el pla Premium"
"No tens permís"	"Descobreix aquesta funcionalitat"
"Compra Premium"	"Descobreix-ho"
"Accés denegat"	"Sona una cançó? Descobreix quin ball li correspon"

Referents: Spotify (features Premium amb etiqueta subtil), Canva (plantilles Pro amb corona), YouTube Music (escoltes sense anuncis).

3. Presentació visual diferenciada

El teaser premium ha de transmetre qualitat i exclusivitat, no bloqueig:

• Gradient subtil de fons (violet → cyan al tema LDP)
• Badge "Premium" petit amb icona sparkles
• Icona representativa del feature (ex: micròfon per identificació musical)
• Disseny net, no recarregat

4. CTA (Call to Action) suau

El botó d'acció:

• Usa text positiu: "Descobreix-ho", "Prova-ho", "Veure plans"
• Forma arrodonida (radius="xl") per transmetre amabilitat
• Porta al registre (si anònim) o a la pàgina de plans (si ja registrat)
• Mai diu "Compra", "Paga" ni "Actualitza"

5. Transició suau

Quan l'usuari passa de free a premium:

• El teaser es substitueix pel component funcional real
• No hi ha pàgina intermèdia ni celebració excessiva
• El canvi és natural i immediat

Implementació tècnica

Patró al frontend

// Hook que encapsula la lògica de permisos per feature
function useCanIdentify() {
  const { me } = useAuth();
  // TODO: Canviar quan s'implementi subscripció
  // return me?.subscriptionTier === 'PREMIUM';
  return me != null;
}

// Ús al component
{canIdentify ? (
  <IdentifySongButton />     // Component real
) : (
  <PremiumTeaser ... />       // Teaser convidant
)}

Estructura del teaser

<Card withBorder style={{ background: "gradient subtil", borderColor: "violet-2" }}>
  <Group>
    <ThemeIcon gradient={{ from: "violet", to: "cyan" }}>
      <IconFeature />           {/* Icona del feature */}
    </ThemeIcon>
    <Stack>
      <Group>
        <Text fw={600}>Títol del feature</Text>
        <Badge gradient="violet→cyan">Premium</Badge>
      </Group>
      <Text size="xs" c="dimmed">
        Descripció breu i atractiva del que fa el feature.
      </Text>
    </Stack>
    <Button variant="gradient" radius="xl" size="xs">
      Descobreix-ho
    </Button>
  </Group>
</Card>

Evolució futura

Fase	Condició d'accés	Implementació
Actual (MVP)	me != null (qualsevol usuari logat)	Hook useCanIdentify()
Subscripció bàsica	me?.subscriptionTier === 'PREMIUM'	Hook genèric useHasFeature(feature)
Permisos granulars	Verificació per feature al backend	Endpoint /api/users/me/features

Funcionalitats premium (actual i previstes)

Feature	Estat	Ubicació
Identificació musical per micròfon	Implementat (teaser + funcional)	SearchPage (/balls)
Perfil destacat per coreògrafs	Previst	Perfil coreògraf
Analytics per professionals	Previst	Dashboard professional
Mode DJ / setlist planner	Idea	Events

Decisions relacionades

• Model de monetització: freemium + subscripció → project_business_vision (memòria Claude)
• Sistema de verificació multi-nivell → llista-feines.md secció 8
• Rols d'usuari: evolució de USER/ADMIN binari → rols intermedis (coreògraf, DJ, teacher)