Paperturn · Pris- og tilmeldings-UX · 2019
Fra prisside til første login
Under min praktik hos Paperturn redesignede jeg den vej, en ny kunde går: prissiden, betalingsflowet, tilmeldingen til prøveperioden og de første e-mails, kunden modtager.
Kort fortalt
Én vej, designet trin for trin.
- Udfordring
- Paperturn sælger et online flipbook-værktøj som abonnement. Den gamle prisside viste lange funktionslister i farvede kasser og bad besøgende vælge antal i en dropdown i hver plan.
- Tilgang
- Jeg læste om best practice for prissider, sammenlignede konkurrenternes pris- og betalingsflows og samlede fundene i en kort liste af principper, før jeg designede.
- Resultat
- En ny prisside, et betalingsflow i tre trin, en redesignet tilmelding til prøveperioden og to onboarding-mails, godkendt af direktøren og overdraget til en udvikler.
- Rolle
- Grafisk designer (praktikant), eneste designer
- Tidsramme
- Aug. – nov. 2019 · 4 måneder
- Samarbejde
- Direktør (feedback, godkendelse) · Udvikler
- Leveret
- Prisside · Betalingsflow · Prøveside · 2 e-mails
Research
Start med det, der allerede virker.
Før jeg tegnede noget, læste jeg artikler om, hvad der får prissider og betalingsflows til at konvertere, og gennemgik konkurrenternes prissider og betalingsflows for at se, hvilke mønstre der gik igen.
Jeg skrev fundene ned som korte noter: fremhæv den plan, du gerne vil sælge, besvar spørgsmål før de opstår, vis kendte logoer, og fjern alle forstyrrelser, når kunden er i gang med at betale. Noterne blev briefet for resten af arbejdet.
“Familiarity often trumps logic and innovation.” En af linjerne fra mine researchnoter, og en god regel for et betalingsflow.
Prissiden
Hvert valg har en grund.
Første version beholdt to planer side om side. Anden version tilføjede prøveperioden som en tredje mulighed og gjorde Pro til det største kort. Den endelige version strammede alle tre op, gav hvert kort en tydelig købsknap og lod én skyder styre antallet af flipbooks for alle planer på én gang, med et valg mellem månedlig og årlig betaling ovenover.
Hver version fik feedback fra direktøren, og den endelige blev godkendt til udvikling.
Tre hurtige iterationer, hver lidt roligere end den forrige.
- Version 1
- Version 2
- Endelig
Fra researchnote til design
- “Fremhæv den plan, du helst vil sælge.”
- Pro står i midten, løftet over de andre, i Paperturns orange.
- “Undgå beslutningslammelse.”
- Første visning er tre planer. Den fulde funktionsoversigt ligger under dem.
- “Vis partnernes logoer på prissiden.”
- En række kundelogoer lige under planerne.
- “En FAQ på prissiden gør kunderne trygge.”
- Svar på de mest almindelige spørgsmål afslutter siden.
Betaling
Et betalingsflow uden forhindringer.
Når kunden har valgt en plan, forsvinder sitets menu. Betalingsflowet viser kun logoet, en fremdriftsbjælke i tre trin og en ordreoversigt, der er synlig hele vejen.
Konto- og faktureringsoplysninger kommer først, betaling bagefter og bekræftelse til sidst. Kort, PayPal og bankoverførsel står samlet i én liste med noter om sikker betaling og hosting nedenunder. Rabatkoden er et lille tekstlink, så den ikke sender folk på jagt efter en kode.
Researchen sagde: gå fra den simpleste formular til betaling, og få betalingen til at se sikker ud. Flowet følger begge dele.
- 1 · Konto og fakturering paperturn.com
- 2 · Betaling paperturn.com
- 3 · Bekræftelse paperturn.com
Prøveperiode
En tilmelding, der forklarer sig selv.
Den gamle prøveside var en enkel kolonne med formularfelter. I redesignet er upload af en PDF det første og mest synlige trin, fordelene og en visning på forskellige enheder står ved siden af formularen, og kundecitater og logoer nedenunder skaber tillid.
Ved siden af formularen animerer en lille enhedsvisning gennem eksempler på publikationer, så besøgende ser, hvad deres PDF bliver til, før de udfylder et eneste felt.
Besøgende ser, hvad de får, før de bliver bedt om noget.
Onboarding-mails
De første e-mails, en ny bruger får.
Jeg designede den velkomstmail, en ny bruger i prøveperioden modtager: loginoplysninger, én tydelig første handling (opret en flipbook) og et link til funktionsguiden.
En opfølgende mail skubber derefter brugerne i prøveperioden mod at opgradere, med korte introduktioner til de funktioner, de endnu ikke har prøvet. Begge bygger på den samme enkle skabelon.
Første udkast sagde for meget. Den endelige version beder om én handling.
Resultat
Overdraget, klar til udvikling.
Designene blev godkendt af direktøren og overdraget til Paperturns udvikler til implementering.
- Leveret
- Prisside, et betalingsflow i tre trin, en animeret tilmeldingsside til prøveperioden og to onboarding-mails.
- Proces
- Researchnoter først, derefter tre iterationer af prissiden med feedback fra direktøren.
- I dag
- Paperturns website er blevet redesignet siden, så siderne her er mine designs fra 2019, ikke det nuværende site.
Anbefaling fra Paperturn
“Thomas løste sine opgaver effektivt og selvstændigt. […] Han viste sine avancerede evner inden for visuelt design og farvelære og sit skarpe øje for detaljer, da han skabte et flot nyt design til vores prisside […]”