Esimerkkikokoelmasta järjestelmäksi: skaalautuvat verkkosivuesimerkit

Yhteenveto

Heti kun vastuullasi on useampi kuin yksi asiakas, tapasi käyttää verkkosivuesimerkkejä on muututtava. Kansio tallennettuja kuvakaappauksia toimii ensimmäisessä pitchissä, mutta epäonnistuu kolmanteen mennessä, koska todellinen arvo ei ole koskaan ollut kuva—vaan kaava, jonka voit viedä toimialalta toiselle. Tämä artikkeli käy läpi esimerkkiprosessin rakentamisen kolme vaihetta: esimerkkien kääntäminen ennen niiden näyttämistä, niiden kodifiointi anonymisoituun kaavakirjastoon ja niiden muuttaminen palautesilmukaksi, joka paranee jokaisen julkaisun myötä. Matkan varrella se argumentoi laiskaa yhden CTA-säännön versiota vastaan, joka hajoaa toimistojen sivuilla, jotka palvelevat useita yleisöjä. Tavoitteena on prosessi, joka selviää henkilöstövaihdoksista ja vaatii vähemmän makua, ei enempää.

Jossain kirjanmerkeissäsi on kansio nimeltä "inspo", ja siinä on aivan liian monta välilehteä. Keräät verkkosivuesimerkkejä jokaista asiakkaan aloitustapaamista varten, asettelet vahvimmat taululle ja vietät sitten tapaamisen kääntäen: "Ei, ei asettelu. Tapa, jolla he selittävät mitä tekevät." Tämä kääntäminen on varsinainen taito, mutta se on jumissa päässäsi. Sinä päivänä, kun toimisto antaa sinulle toisen asiakkaan, ja sitten kolmannen, temppu lakkaa olemasta "tiedä parhaat esimerkit" ja siitä tulee "tee tästä toistettavaa." Jos olet nähnyt juniorisuunnittelijan tuottavan lähes saman osion kahdelle toisiinsa liittymättömälle asiakkaalle, koska se on ainoa esimerkki, jonka näytit heille, tiedät ongelman. Tämä on opas siihen, miten saat esimerkkiprosessisi kasvamaan toimistosi mukana—ensimmäisestä voitosta mittakaavaan—muuttamatta sitä uskonnoksi.

Ensimmäinen asiakas: käännä ennen kuin esität

Valitse kolme esimerkkiä asiakasta kohti, ja ennen kuin näytät niistä yhtäkään, kirjoita jokaisesta yksi lause: minkä kaavan tämä esimerkki tuo, ja mitä asiakkaan tulisi jättää huomioimatta? Varhaisen vaiheen vaisto on hamstrata; halvin korjaus on valinta. Hyvin valittu Calendlyn etusivu tuo kaavan, jossa lopputulos nimetään otsikossa—"aikatauluta tapaamisia ilman sähköpostiviestittelyä"—samalla kun asiakkaalle sanotaan, että rauhoittava valkoinen tausta on jätettävä huomioimatta. Linearin hero-osio opettaa eri asian: jokaisella osiolla taitoksen yläpuolella on tehtävä, joten esimerkki pysyy hyödyllisenä, vaikka asiakkaasi myy jotain aivan muuta kuin ohjelmistoa. Kirjoita nämä kaksi käännöstä muistiin ennen tapaamista. Jos et osaa kirjoittaa toista lausetta, esimerkki on koristetta, ei todiste. Tämä on varasta heidän luurankonsa -liike, mutta siitä tulee tiimitaito vasta kun se on kirjoitettu ylös.

Oletetaan, että toimeksianto on alueellinen logistiikkayritys, jonka ostajat ovat varastopäälliköitä. Ensimmäinen vaistosi on ottaa kolme logistiikka-alan sivustoa; sen sijaan ota Calendly lopputuloksen ensin -otsikosta, Notion sivusta, joka sitoutuu yhteen toimintoon (sen "Get Notion free" -CTA), ja jokin ruma mutta informatiivinen seurantasivu miltä tahansa toimialalta. Sano tapaamisessa: "Calendly ei ole logistiikkayritys. Osa, jonka lainaamme, on se, että otsikko poistaa kitkan ennen kuin käyttäjä lukee ominaisuuden. Notionin arvo on pidättyvyys: yksi selkeä toiminto." Näet, että asiakas lakkaa pyytämästä parallaksiefektejä ja alkaa väitellä otsikosta. Se on koko pointti—esimerkit toimivat ajattelun työkaluina, eivät mallipohjina.

Viides asiakas: kodifioi toistuvat palikat

Aloita anonymisoitu kaavakirjasto, kun olet julkaissut muutaman sivuston. Ei toista kuvakaappauskansiota—vaan dokumentti toistuvista rakennuspalikoista, joilla on selkokieliset nimet: "lopputulosotsikko", "yksitehtävä-hero", "todistevoileipä", "luottamussivu". Pointti on vangita periaate ja riisua brändi, jotta tiimi voi käyttää sitä uudelleen toistamatta toisen asiakkaan ilmettä. Sama syy, miksi samat SaaS-esimerkit saavat jatkuvasti kiitosta, ei ole visuaalinen tyyli vaan rakenne: selkeä arvolupaus ylhäällä, fokusoitu osio taitoksen yläpuolella, yksi ensisijainen toiminto. Kaavakirjasto vangitsee rakenteen kerran ja antaa sen selvitä seuraavasta uudelleensuunnittelusta. Kun uusi asiakas tulee, etsit kirjastosta ennen kuin etsit internetistä. Se muuttaa budjettikeskustelun, koska et enää osta inspiraatiota; sovellat testattuja päätöksiä.

Vaihe	Säilytä	Hävitä
Ensimmäiset projektit	3 toimivaa esimerkkiä + miksi-käännökset	massiivinen swipe-tiedosto
Muutama julkaisu	anonymisoitu kaavakirjasto	esimerkit, jotka vaativat pitkän selityksen
Mittakaavassa	elävä kirjasto palautesilmukalla	versioimattomat kuvakaappaukset kolmen vuoden takaa

Työskentele boutique-tilintarkastustoimiston kanssa: sen sijaan, että antaisit suunnittelijalle "tässä on viisi tilintarkastuksen verkkosivua", annat hänelle kirjastokortin "luottamussivun kaava: keitä olemme, mitä asiakas välttää palkkaamalla meidät, todiste kokemuksesta, yksi seuraava askel." Suunnittelu vaatii edelleen ihmisen silmää, mutta päätökset on jo tehty. Vältät myös harmaapukuisen asettelun, jota jokainen tilintarkastustoimisto kopioi, koska kaavasi ei sano mitään väreistä. Parhaat lähteet eivät kuitenkaan ole usein samalta toimialalta; lainaa verkkosivuesimerkkejä muilta toimialoilta tarkoituksella ja käytä kaavakirjastoa säilyttääksesi sen, mikä siirtyy.

Kahdeskymmenes asiakas: anna kirjastolle palautesilmukka

Suorita lyhyt auditointi jokaisen julkaisun jälkeen ja vie löydökset takaisin kirjastoon. Useimmat tiimit pysähtyvät siihen, että "se, jolla on aikaa, päivittää viime vuoden mallipohjaa, kunnes joku valittaa." Mittakaavan liike on kohdella jokaista julkaistua sivustoa kaavojesi testinä. Auditointi ei vaadi hienoja työkaluja: julkaisupäivänä katso osioita tuntemattoman asiakkaan silmin; viikon kuluttua kysy puhelimiin vastaavalta, mitä kysymyksiä kävijät edelleen esittävät; kuukauden kuluttua tarkista, mitä CTA-painikkeita oikeasti klikataan. Huomaat, että jotkut rakastetut kaavat eivät koskaan ansaitse paikkaansa—poista ne. Tämä on tapa tehdä auditointi kuin asiakas, joka ei välitä sinusta, mutta sovellettuna itse kokoelmaan: auditoit esimerkkejäsi, et vain asiakkaan sivua.

Ota ammattipalveluasiakas, jonka vanha sivusto hautasi "työskentele kanssamme" -toiminnon Tietoja-sivun taakse. Kaavakirjaston "yksitehtävä-hero" -kortti kertoo seuraavalle suunnittelijalle, että toiminto on asetettava taitoksen yläpuolelle. Julkaisun jälkeen huomaat, että rekrytointiyleisö pomppii pois. Se ei ole kaavan epäonnistuminen; se on todiste siitä, että tämä sivu palvelee kahta yleisöä, ja kirjasto tarvitsee "moniyleisö"-muunnelman. Lisää muistiinpano, merkitse vanha kortti "vain yksittäiselle yleisölle suunnatuille sivuille", ja seuraava samankaltainen asiakas ei toista virhettä.

Vastakkaisnäkökulma: älä ota yhden CTA:n käskyä kirjaimellisesti

Sitten vastaväite. Monet SaaS-esimerkkikirjoitukset kertovat, että jokaisella sivulla tulisi olla yksi toimintakehotus, ja Notionin yksi "Get Notion free" nostetaan esiin todisteena. Tämä neuvo pitää paikkansa tuotesivuilla, joiden ainoa tehtävä on yksi rekisteröityminen; se muuttuu vääräksi heti, kun suunnittelet asiakkaalle, jolla on useita yleisöjä. "Yhden CTA:n" kohteleminen lakina tuottaa toimiston sivuja, joilla käytännön rekrytointisivu, lehdistöyhteys ja konsultaatiolomake kilpailevat yhdestä painikkeesta. Säännön puolustettava versio on "yksi ensisijainen tavoite per yleisö per sivu", ei "yksi painike, ikinä." Sama esimerkki, joka tähtää jokaisen osion yhteen toimintoon, voidaan lukea sivuna, joka pyytää kävijää tekemään täsmälleen yhden asian—se on periaate, joka kannattaa varastaa. Yliopisto tai konsulttiyritys tarvitsee ensisijaisen toiminnon potentiaalisille asiakkaille ja toisen henkilökunnalle; yhden CTA:n pakottaminen piilottaa molemmat. Säilytä periaate, ohita kuvakaappaus.