Yamarin ja Cross verkkosivuston uudistus

Yamarin & Cross

Brändiuudistuksen tuominen digitaaliseen maailmaan

Scroll down icon
Mitä teimme

Käyttäjätutkimus, käyttäjäkokemussuunnittelu, käyttöliittymäsuunnittelu, verkkosivuston kehitys, Drupal back end, React/Redux, JavaScript, HTML5, CSS3 front end, DevOps, jatkuva kehitys ja ylläpito

Loimme verkkosivustot kahdelle venebrändille osana asiakkaamme brändiuudistusta, jossa Yamarin-nimen alla kulkeneet veneet eriytettiin erillisiksi Yamarin- ja Cross-brändeikseen. Loimme kummallekin brändille design system -järjestelmän, jolla varmistetaan että brändi-identiteetti toistuu yhtenäisenä digitaalisissa palveluissa. Työskentelimme läheisessä yhteistyössä asiakkaamme ja heidän bränditoimistonsa kanssa sisältöpainotteisessa projektissa.

40 vuoden olemassaolonsa aikana Yamarin on lunastanut paikkansa yhtenä Pohjoismaiden tunnetuimpana venemerkkinä, jonka veneitä on maailman merillä jo 70 000 kappaletta. Yamaha Motors:in omistama Yamarin erottautuu veneidensä tinkimättömällä laadulla ja syvällä ymmärryksellä asiakkaidensa tarpeista. 

Vuonna 2018 Yamarin kävi läpi merkittävää brändiuudistusta. Olemassa oleva Yamarin-brändi, joka piti sisällään sekä Yamarin-lasikuituvenemalliston että Yamarin Cross -alumiinivenemalliston, jaettaisiin kahdeksi erilliseksi brändiksi. Brändiuudistuksen myötä Yamarin-lasikuituveneet jäisivät Yamarin-nimen alle, kun taas 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 myynnin tueksi.

Vanha Yamarin.com-verkkosivusto oli toiminut markkinointikanavana ja näyteikkunana Yamarin-veneille, joita myyvät jälleenmyyjät. Halusimme luoda jotain merkittävämpää: sivustot, jotka palvelisivat asiakkaamme liiketoiminnallisia tavoitteita vaikuttamalla konkreettisesti tulokseen. Halusimme luoda kaksi sivustoa, jotka kasvattaisivat myyntiä muuttamalla sivuston käyttäjät laadukkaiksi myyntiliideiksi jälleenmyyjille. 

Tavoitteet:

Kaksi verkkosivustoa kasvattamaan myyntiä muuttamalla käyttäjät laadukkaiksi liideiksi

Kahden ainutlaatuisen brändin erottaminen visuaalisesti digitaalisessa maailmassa

Erottuva digitaalinen identiteetti kahdelle brändille

Asiakkaamme bränditoimisto Avidly loi uudet brändi-identiteetit. Me saimme Avidlylta brändiohjeistukset, jotka sisälsivät kummankin brändin ”look & feel” -ilmeen ja puhuttelutavan. Työskentelimme brändiohjeiden pohjalta, kun suunnittelimme miten uudet brändi-identiteetit mukautuvat digitaalisille alustoille. 

2 sites example

Brändiohjeiden mukautus verkkosivuston suunnitteluun oli oma mieluisa haasteensa. Jokainen suunnitteluvalintamme pohjautui käytettävyyteen ja tarkoituksenmukaisuuteen. Samalla varmistimme että kummankin brändin uniikit ominaisuudet toistuvat palveluissa yhtenäisesti.

Cross graphic
Kuvien halkileikkaus oli toistuva elementti Avidlyn Crossille suunnittelemassa visuaalisessa identiteetissä. Halkileikkauksen tulisi toistua kaikissa Crossin visuaalisissa materiaaleissa. Visuaalisen ilmeen toteutus responsiiviseen verkkosivustoon oli haaste, jonka ratkaisimme käyttöliittymää suunnitellessa. Lue lisää blogissamme siitä, miten ratkaisimme haasteen.

Design System - skaalautuva suunnittelu

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. 

Colors

 

Typography
Lue blogissamme lisää Design System -järjestelmästä ja siitä, pitäisikö sinun brändilläsi olla sellainen

Sukelsimme sivuston informaatiorakenteeseen suunnitellaksemme mahdollisimman selkeän ja yksinkertaisen navigaation sivustoille. Laitoimme etusijalle asiakkaamme tavoitteisiin nähden olennaisimman informaation, samalla pitäen pääsivut näkyvillä koko ajan.

Sivustot jakavat samanlaisen rakenteen ja ”flown”, joka pohjautuu Buster.fi-projektissa suunnittelemaamme, toimivaksi todettuun rakenteeseen. Rakenne on suunniteltu 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.

Animation

Projektin tavoite oli parantaa konversiota käyttäjälähtöisen suunnittelun avulla ja luoda kaksi sivustoa, jotka todella vaikuttavat veneiden myyntiin. Yksittäisen veneen sivulla käyttäjät voivat suunnitella unelmaveneensä ja vaivatta 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.

Valitsimme sivuston teknologiaratkaisuksi Drupalin. Drupal 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.

Yamarin on iPad iPhone

Cross iPad iPhone

Tulokset

Uudet sivustot julkaistiin tammikuussa 2019. Tulokset tähän asti ovat olleet lupaavia. Olemme nähneet merkittävän parannuksen orgaanisessa liikenteessä ja käyttäjien säilyttämisessä verrattuna vastaavaan aikaväliin edellisenä vuonna. 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.

Vertailu aikavälien 1.2 - 26.3.2018 ja 1.2 - 26.3.2019 välillä.
Vertailu aikavälien 1.2 - 26.3.2018 ja 1.2 - 26.3.2019 välillä.

Katso työmme osoitteissa Yamarin.com ja Cross.boats.

Varaa maksuton konsultointi siitä, miten projektisi kannattaa toteuttaa.

Käymme tapaamisessa läpi projektisi tavoitteet ja kerromme näkemyksemme siitä, miten projekti kannattaa rakentaa. Tarjoamme apua projektin määrittelyyn, toteutukseen tai digitaalisen palvelun innovointiin.

Ota yhteyttä

Jätä yhteydenottopyyntö, ja palaamme sinulle seuraavaan arkipäivään mennessä.

Voit myös soittaa meille numeroon +358 50 371 9516.