← tornar als projectes

WhisperPad

La landing i l'onboarding d'una app de dictat per a Mac, dissenyats per convertir la desconfiança d'un desconegut en la seva primera transcripció.

  • RolPosicionament · Landing · Onboarding · Marca · Accessibilitat
  • Any2026
  • ContextFeina de client per a MITM LLC · publicat al seu web
  • StackFigma · HTML/CSS/JS · auditoria WCAG 2.1 AA
WhisperPad

La versió curta. WhisperPad és una app de macOS que escriu el que dius, transcrivint sencer al teu propi ordinador. Vaig fer el posicionament, la landing, el flux d'onboarding i la marca per a MITM LLC, un estudi d'una sola persona i sense pressupost de màrqueting. La part difícil mai va ser la pàgina, va ser la confiança: ningú instal·la una cosa que l'escolta si l'experiència no s'ho guanya abans. La feina està publicada al web del mateix client.

el problema

WhisperPad competeix amb eines ben finançades com Superwhisper, Wispr Flow o MacWhisper. Però els seus competidors de debò són el teclat de l’usuari i la seva desconfiança cap a qualsevol cosa que toqui un micròfon.

Dues restriccions ho van marcar tot. És un estudi d’una persona sense pressupost de màrqueting, i Apple va rebutjar la versió amb enganxat automàtic, així que la principal es distribueix com a descàrrega directa en comptes d’una instal·lació còmoda des de l’App Store. La pàgina ha de convèncer ella sola.

Un brief més fluix hauria estat “fes-me una landing bonica”. El vaig reformular com un problema d’UX:

Ningú instal·la una eina que l'escolta si no se'n fia. Com es guanya l'experiència aquesta confiança i porta la persona fins a la seva primera transcripció abans que guanyi el dubte?

Aquesta reformulació parteix la feina en dos embuts que sí que són d’un dissenyador de producte: la captació, on la landing es guanya el clic, i l’activació, on l’onboarding lliura el primer èxit prou ràpid perquè es quedin.

la recerca

Aquí la recerca va ser competitiva i secundària, i ho dic sense maquillar perquè és el límit honest d’aquest projecte. Tres entrades van marcar la direcció.

  • Anàlisi de la competència. Superwhisper, Wispr Flow i MacWhisper obren totes amb funcionalitats i amb IA. Cap s'apropia de "la teva veu no surt del dispositiu" com a promesa emocional. Ho tracten com una línia de fitxa tècnica.
  • Usuari d'entrada. El treballador del coneixement preocupat per la privacitat: desenvolupador, escriptora o PM que ja va provar el dictat un cop i el va abandonar, per fricció o per no saber on acabava el seu àudio.
  • Job to be done. "Quan he d'escriure una cosa llarga, vull dir-la un cop i que aparegui on estic treballant, sense que les meves paraules acabin sent dades d'entrenament d'algú."

Per això la pàgina mai argumenta “som la millor app de Whisper”. Argumenta una sola cosa: la teva veu és teva.

tres direccions, dos rebutjos

La direcció visual va necessitar tres intents, i els rebutjos són la part útil perquè ensenyen el disseny responent a un objectiu i no a un gust.

  • V1, terminal. Fosca, monoespaiada, local-first per a hackers. Tècnicament honesta, però encongia el públic: un treballador normal la llegeix com a "això no és per a mi". Rebutjada.
  • V2, Apple neta. Blanca, tipografia de sistema, segura i professional. Correcta i completament inerta. No donava a ningú un motiu per continuar llegint. Rebutjada.
  • V3, publicada. Tipografia display contundent, un degradat càlid com a identitat de la veu, targetes amb vores gruixudes i una demo amb la qual es pot jugar. Desitjable sense deixar de ser neta.

"Correcte" i "desitjable" són objectius diferents. La V2 passava qualsevol checklist heurística i continuava suspenent l'única prova que ha de passar una pàgina de descàrrega: si un desconegut vol això en els tres primers segons.

decisions de disseny

L’ordre de l’scroll són les preguntes del visitant, en seqüència. Ganxo, després com funciona a través de la demo, després les objeccions (funciona sense connexió, escriu a qualsevol app), després la càrrega de confiança, després el preu i el tancament. Una landing és una conversa, i respondre les objeccions en l’ordre en què apareixen guanya a una llista de funcionalitats.

Pots provar el gest abans d’instal·lar. La interacció central, doble toc, parles i s’escriu, es pot jugar a la mateixa pàgina: fas doble toc a la tecla Control de debò i veus aparèixer el text. La manera més ràpida de fiar-te d’un comportament és sentir-lo un cop, i la demo és honesta sobre que la part de la veu està simulada.

La privacitat es demostra, no s’afirma. En comptes de l’adjectiu “privat”, la pàgina et repta: apaga el wifi, continua funcionant. La prova és l’arquitectura, així que el text assenyala una cosa que pots verificar tu. Una afirmació que pots comprovar guanya a un adjectiu.

El pla gratuït és una primera experiència completa. 120 minuts al mes amb totes les funcions. Una versió primerenca dels preus coronava el gratuït com “el producte de debò”, cosa que abaixava la fricció d’instal·lació però no donava a ningú un motiu per pagar. El plantejament final manté la generositat i deixa que el sostre mensual defensi sol el pas a Pro, així la pàgina mai ha d’empènyer.

L’onboarding busca el primer èxit en 60 segons. Tres pantalles, sense tour de funcionalitats. La promesa de privacitat apareix exactament al permís del sistema, el moment de màxima desconfiança, i el mateix onboarding és la primera transcripció real.

construïda per aguantar l’escrutini

Una pàgina que es veu bé i falla amb algú que navega per teclat no és bon UX, així que vaig fer una passada de WCAG 2.1 AA i vaig documentar cada arreglo amb la seva raó.

  • La demo interactiva va passar a ser un botó real, enfocable i amb anunci per live region, en comptes d'un truc decoratiu.
  • Cada animació en bucle té alternativa per a moviment reduït.
  • El contrast del titular en degradat i de la targeta de preu es va corregir sense carregar-se la vivesa.
  • Els elements decoratius estan ocults per a lectors de pantalla, i la pàgina funciona abans que carregui el JavaScript.

què mesuraria

La pàgina està publicada i les dades d’ús les ha d’instrumentar el desenvolupador, així que encara no tinc resultats per ensenyar. El que sí puc ensenyar és quines mètriques vaig definir, i són d’activació, no de vanitat.

  • 1 transcripció aconseguida en les primeres 24h després de la descàrrega, com a mètrica nord.
  • ↓ temps fins a la primera transcripció, mesurat en segons.
  • D7 de retenció: va transcriure alguna cosa una setmana després?
  • 2a conversió de gratuït a Pro, només com a senyal secundari.

què testejaria ara

  • Cinc usuaris, amb una sessió només de teclat i una altra amb lector de pantalla. Això és feina heurística i basada en estàndards, i no ha estat davant d'un usuari real. Les dues coses a validar: si la demo es descobreix ni que sigui, i si el primer èxit arriba de debò.
  • La concessió d'accessibilitat que vaig triar. La targeta de preu en degradat compleix AA-large, però una versió a prova de bales en AAA necessitaria una targeta fosca sòlida. Vaig escollir la vivesa de marca a propòsit i vaig deixar escrit per què, en comptes de fingir que la decisió sortia gratis. Abans de continuar defensant-la, la posaria davant de persones amb baixa visió.
  • Instrumentar l'activació des del primer dia, perquè la següent iteració la dirigeixi on abandona la gent de debò i no les meves suposicions.

què vaig aprendre

L’encàrrec que em van donar era una landing. L’encàrrec que vaig lliurar era un problema de confiança, i aquesta reformulació és el projecte sencer. Tot el que és defensable d’aquella pàgina, la demo jugable, el repte del wifi, el pla gratuït generós, va sortir de preguntar-me què fa por a un desconegut en comptes de què sap fer el producte.

També vaig aprendre a llegir bé els meus propis rebutjos. La V2 era la versió que hauria passat qualsevol revisió: neta, correcta, molt Apple, res a criticar. Matar una cosa que no té cap defecte visible, perquè falla en l’única cosa que importa, va costar més que matar la V1 i em va ensenyar molt més.