Benjaminin verkkosivut suunnitelmista liveen alle viikossa

Benjamin — kolme sivustoversiota Webflow'lla alle viikossa

Benjamin on yhdysvaltalainen fintech-yritys, jonka sovellus auttaa käyttäjää saamaan enemmän irti mistä tahansa maksukortista tai kanta-asiakasohjelmasta: korttinsa liittämällä käyttäjä saa cash backia siellä, missä muutenkin asioi. Sama palvelu myydään kolmelle hyvin eri yleisölle — kuluttajille, kauppiaille ja korttiohjelmia tarjoaville pankeille — ja jokainen niistä tarvitsi oman sisääntulonsa.

Lähtötilanne

Kasvuyrityksessä tulokset lasketaan viikoissa. Benjaminilla oli akuutti tarve saada sivut suunnitelman asteelta liveen alle viikossa. Asiakkaan designkumppani oli toimittanut visuaalisen ilmeen ja sivujen layoutit, mutta toteuttajaa ei ollut. Tiimimme on tottunut työskentelemään startuppien kanssa tiukoilla aikatauluilla, joten otimme työn.

Kolme versiota, yksi rakenne

Rakensimme sivustosta kolme kohderyhmäkohtaista versiota. Kuluttajasivu kantaa mintunvihreää, kauppiassivu violettia ja pankkisivu sinistä — mutta rakenne, komponentit ja rytmi ovat samat. Tyylien nimeämislogiikka pitää sivuston pääpiirteet yhdenmukaisina poikkeavista värimaailmoista huolimatta: versio vaihtaa värinsä yhdestä paikasta eikä samaa sivua tarvitse rakentaa kolmesti.

Interaktiot, jotka kertovat tarinan

Palvelun toimintaperiaate on sivustolla vierityksen varassa. Kun kävijä saapuu ”How it works” -osioon, sivu pysähtyy paikalleen ja etenee neljän askeleen läpi: puhelinnäkymä vaihtuu, aikajanan merkki siirtyy ja teksti vaihtuu askeleen mukana. Samalla periaatteella tuotekortit pinoutuvat päällekkäin edellisen jäädessä näkyviin. Mobiilissa sama sisältö on karusellina, jota voi selata peukalolla.

Sisältöosiot

Etusivu rakentuu samoista paloista: lupauksen tiivistävä väliotsikko, pinoutuvat hyötykortit, cash back -tasojen vertailu, tulossa olevan tekoälyassistentin esittely ja oppaan latausosio. Jokainen osio on oma komponenttinsa, joten uusi sivu syntyy olemassa olevista paloista.

Alasivut ja lomakkeet

Sivustoon kuuluu kolmen pääversion lisäksi korttituotteen odotuslistasivu sekä usein kysytyt kysymykset. Liidit kerätään kolmella eri tavalla sen mukaan, kenelle sivu puhuu: kauppiaille sähköpostikenttä, pankeille yhteydenottolomake ja korttituotteelle odotuslista.

Designjärjestelmä

Ilme nojaa yhteen kirjasimeen ja kolmeen korostusväriin. Otsikot ja leipäteksti ovat Circular XX Webiä, ja kokoskaala on tiukka: otsikkotasoja on kolme ja leipätekstikokoja kaksi. Korostusväri vaihtuu version mukaan, mutta neutraalit — muste, yösininen ja valkoinen — pysyvät samoina. Niin eri kohderyhmille suunnatut sivut näyttävät silti saman yrityksen sivuilta.

Tulokset

Sivut olivat livenä alle viikossa suunnitelmien saapumisesta, kaikki kolme versiota kerralla. Toteutus latautuu nopeasti tinkimättä visuaalisuudesta, ja se taittuu puhelimeen asti: vieritysinteraktiot muuttuvat kosketuksella selattaviksi eikä sisältöä jää pois. Ennen kaikkea Benjamin sai jokaiselle kolmelle yleisölleen oman sisääntulonsa — ja markkinointi pystyi ohjaamaan liikenteen suoraan oikealle sivulle.