Yamarin- ja Yamarin Cross -verkkosivustojen suunnittelu ja toteutus osana brändiuudistusta

Vuonna 2018 Yamarin kävi läpi brändiuudistusta, jossa Yamarin-lasikuituveneet jäisivät Yamarin-nimen alle ja alumiinivenemallisto tuotaisiin uuden ja erottuvan Cross-brändin alle. Meidän tehtävämme oli tuoda kaksi uudistunutta brändiä erilleen digitaalisessa maailmassa ja luoda kummallekin verkkosivusto myyntiä kasvattamaan. Työskentelimme läheisessä yhteistyössä asiakkaamme ja heidän bränditoimistonsa kanssa sisältöpainotteisessa projektissa.

Sivustouudistuksen ensimmäinen tavoite oli erottaa kaksi ainutlaatuista brändiä visuaalisesti digitaalisessa maailmassa. Bränditoimisto Avidly loi uudet brändi-identiteetit. Brändiohjeiden pohjalta me suunnittelimme miten ne mukautuisivat digitaalisille alustoille. Loimme kummallekin brändille monikäyttöisen Design System -järjestelmän. Design System antaa puitteet sivuston toistuville elementeille ja sisältää kaikki sellaiset käyttöliittymän komponentit, joilla taataan, että visuaalinen suunnittelu skaalautuu brändin digitaalisen läsnäolon kasvaessa. 

Projektin toinen päätavoite oli parantaa konversiota käyttäjälähtöisen suunnittelun avulla ja luoda sivustot, jotka todella vaikuttaisivat veneiden myyntiin ja muuttaisivat sivuston käyttäjät laadukkaiksi myyntiliideiksi jälleenmyyjille. Suunnittelimme sivustojen rakenteen siten, että käyttäjät luontevasti ja helposti ohjautuvat kohti sivuston sydäntä, yksittäisen veneen sivua. Varmistimme, että käyttäjät liikkuvat sivustolla vaivatta ja tietävät sijaintinsa sivustolla koko ajan. Yksittäisen veneen sivulla käyttäjät voivat suunnitella unelmaveneensä ja tallentaa tai lähettää venesuunnitelman lähimmälle jälleenmyyjälle tarjouspyyntönä. Näin käyttäjät muuttuvat laadukkaiksi myyntiliideiksi, jotka välitetään sivustolta jälleenmyyjille.

Sivustot on toteutettu Drupalilla, joka tarjoaa joustavan CMS-järjestelmän, kattavan tuen kieliversioille ja vaivattoman sisällönhallinnan asiakkaamme admineille. Rakensimme sivuston front endin käyttäen Bootstrap 4 kirjastoa. Venekonfiguraattori rakennettiin Reactilla.

Julkaisun jälkeen olemme nähneet merkittävän parannuksen orgaanisessa liikenteessä ja käyttäjien säilyttämisessä verrattuna vastaavaan aikaväliin edellisenä vuonna. Lisäksi olemme onnistuneet vähentämään käyttäjän selaamia sivuja per istunto, mikä tarkoittaa että käyttäjät löytävät hakemansa tiedon helpommin ja nopeammin uudella sivustolla.

Lue lisää projektista täällä.