Verkkosivu-uudistus ja WooCommerce-verkkokauppa tehostamaan brändin näkyvyyttä ja varaosakauppaa

Mondex valmistaa huippulaadukkaita sähkö- ja puukiukaita sekä kivipattereita. Mondexin kaikilla tuotteilla on Avainlippu-merkki, mikä kertoo korkeasta suomalaisesta laadusta. Tuotteiden suunnittelu, valmistus ja kokoonpano tapahtuvat omassa tehtaassa Pohjois-Pohjanmaalla Ylivieskassa, jossa työskentelee yhteensä yli 100 henkilöä Mondexin tuotteiden ja ohutlevymekaniikan sopimusvalmistuksen parissa. Mondex on osa ylivieskalaista Premec Oy:tä, joka kuuluu useita satoja henkilöitä työllistävään kansainvälisesti toimivaan Darekon Oy Ltd:n konserniin.

“Uusi verkkosivustomme vastaa täysin odotuksiamme ja tarpeitamme. Ilme on modernimpi, sivusto on huomattavasti selkeämpi ja käyttäjäystävällisempi. Nyt saamme viestittyä Mondexin brändin ydintä vahvemmin ja entistäkin vaikuttavammin verkossa!”

Petri Hulkkonen, Myynti- ja markkinointipäällikkö, Mondex

Tarve

Verkkosivu-uudistuksen tarve syntyi, kun Mondexilla huomattiin, että vanha sivusto oli tullut teknisesti tiensä päähän ja ilme kaipasi päivitystä modernimmaksi. Lisäksi haluttiin sivuston tuovan vahvemmin esiin Mondex-brändin ydintä, joka kiteytyy sanoihin design, laatu ja kotimaisuus. Mondex haluaa olla osa kehittyvää, modernia ja kotimaista saunakulttuuria myös tulevaisuudessa, ja uusi verkkosivusto on yksi tapa viestiä näitä arvoja ja tarinaa entistä vaikuttavammin verkossa.

Sivustolla oli havaittu myös selkeyden puutetta, mikä vaikeutti käyttäjäkokemusta, joten uudesta sivustosta toivottiin selkeämpää ja helppokäyttöisempää. Erityisesti toiveena oli ylätunnisteen ja navigaation selkeyttäminen, sillä valikkorakenne koettiin sekavaksi. Etusivun rakennetta haluttiin myös selkeyttää ja ohjata käyttäjiä löytämään tarvittavat tiedot ja toiminnot nopeammin ja sujuvammin.

Ratkaisu ja toteutus

Projekti aloitettiin olemassa olevan sivuston analysoinnilla, jonka jälkeen kehitettiin uusi ulkoasu, rakenne ja sisältö. Asiakkaan toiveet ja ajatukset olivat verkkosivustouudistuksessa koko projektin ajan suunnittelun keskiössä. Mondexin sivuston ilmettä päivitettiin modernimmaksi monin tavoin. Brändi-ilmettä mukailemalla tehtiin pieniä muutoksia fonttien käyttöön ja väripalettiin. Tavoitteena oli säilyttää brändin tunnistettavuus, mutta tuoda ilmeeseen modernimpaa särmää. Lisäksi verkkosivustolle tuotiin myös muutamia uusia sävyjä ja värejä tehosteeksi, jotta sivusto ei olisi liian yksitoikkoinen ja vastaisi paremmin asiakkaiden toiveita värikkäämmästä ilmeestä.

Sivustoa raikastettiin myös poistamalla ylimääräisiä mustia elementtejä ja lisäämällä ilmavuutta, eli niin sanottua whitespacea. Tämä teki ilmeestä avaran ja vähensi ahtauden tunnetta. Sivuston kuvamaailmaa myös vaalennettiin ja otettiin käyttöön enemmän ja suurempia kuvia. Tavoitteena oli monipuolistaa visuaalista sisältöä ja välttää liiallista harmautta, koska pääosa tuotteista on väriltään harmaita kiukaita.

Sivuston rakennetta suunniteltaessa painotettiin selkeyttä ja helppokäyttöisyyttä. Päätavoitteena oli varmistaa, että käyttäjät löytävät tarvitsemansa tiedot, tuotteet ja varaosakaupan vaivattomasti, joten ylätunnistetta ja navigaatiota selkeytettiin tätä tavoitetta silmällä pitäen. Lisäksi etusivun rakennetta optimoitiin, jotta käyttäjät voidaan ohjata entistä tehokkaammin kohti olennaisia sisältöjä. Tämä parantaa sivuston käytettävyyttä ja auttaa käyttäjiä löytämään nopeasti tarvitsemansa tiedot ja toiminnot.

Verkkosivusto toteutettiin WordPress-julkaisujärjestelmän uusimmalla versiolla ja verkkokauppa WooCommerce-lisäosan avulla. Projektissa käytettiin Roots Bedrockia ja Roots Sagea, jotka nopeuttavat projektin aloittamista ja helpottavat ylläpitoa ja jatkokehitystä.

Roots Bedrock on WordPress-alustus, joka helpottaa riippuvuuksien hallintaa (esim. lisäosat, teemat) ja sitä hallitaan Composerin kautta. Composer on avoimen lähdekoodin ohjelmisto, joka on laajasti käytetty työkalu PHP-yhteisössä sekä muissa ohjelmointiympäristöissä, kuten WordPressissä ja Drupalissa. Roots Sage on WordPress-teema, josta olemme tehneet Hurjalla oman räätälöidyn version, jota käytämme aina, kun teemme räätälöityjä verkkosivustoja asiakkaillemme. Sage-perusversiossa ei ole juuri mitään valmiina, joten jokainen osa sivustoa, kuten kaikki taustajärjestelmän erikoistoiminnot, on rakennettava alusta alkaen. Meidän versiossamme on valmiina tarvittavia perusominaisuuksia, esimerkiksi sivuston runko (sisältäen headerin, sisältöalueen ja footerin) sekä muutamia muita kiinteitä ominaisuuksia, joita tarvitaan lähes kaikilla sivustoilla.

Mondexin verkkosivustolla hyödynnettiin monipuolisesti erilaisia sisältölohkoja, kuten taittuvia lohkoja (accordion) ja nostoalueita, jotka on räätälöity vastaamaan kunkin sivun erityistarpeita. Taittuvia sisältölohkoja hyödynnetään laajasti erilaisten aiheiden tietojen tiiviissä ja kätevässä esittämisessä, koska niiden avulla sisältöä voidaan avata ja sulkea tarpeen mukaan. Nostoalueet sen sijaan toimivat tehokkaasti tärkeiden tietojen ja kuvien korostamisessa. Sivustolle lisättiin myös hienovaraista liikettä ja animaatioita, mikä tuo tyylikästä dynamiikkaa sivustolle.

Mondexin uudelle sivustolle tuotiin myös kiuas- ja kivipatterisivuille joukko merkittäviä ominaisuuksia, jotka parantavat käyttäjäkokemusta. Arkisto- ja kategorianäkymissä on mm. suodatustoimintoja, jotka mahdollistavat tuotteiden nopean ja vaivattoman löytämisen. Yksittäisen kiukaan sivulla voidaan myös suodattaa tietoja mallin ja värin perusteella. Tämä ominaisuus helpottaa kiukaan valintaa. Uudet lisäominaisuudet tekevät sivustosta informatiivisen ja käyttäjäystävällisen, edistäen samalla tuotteiden tehokasta esittelyä. Sivustolla olevaan kiuasvalitsin-toiminnallisuuteen tehtiin myös muokkauksia ja optimointia.

Sivustolla on yhteensä viisi kieliversioita, tästä syystä sivustolle toteutettiin lisäksi käännöksiin liittyviä automaatioita, jotka auttavat pitämään tiedot ajan tasalla kaikilla kielillä. Automaatiot synkronoivat automaattisesti tietyt tiedot eri kieliversioiden välillä. Tällaisia tietoja ovat muun muassa kiukaiden mallit, värivaihtoehdot, tuotekuvat ja tekniset tiedot. Esimerkiksi, jos sivustolle lisätään uusi kiuas, tarvitsee tiedot syöttää vain suomenkieliselle sivulle, ja ne päivittyvät automaattisesti kaikille muille kieliversioille. Tämä vähentää manuaalista työtä ja tekee sisällönhallinnasta helpompaa. Mondexille toteutettiin myös lisäpalveluna web-analytiikka-asennus konversiopisteineen sekä perussivuston että verkkokaupan seurantaan.

Hyödyt

Mondexin verkkosivusto uudistettiin vastaamaan nykyaikaisia standardeja ja asiakkaiden tarpeita sekä viestimään oikeaa henkeä. Sivusto on modernimpi ja sujuvampi käyttökokemukseltaan. Sisältöä on myös helppo muokata ja hallita. Lisäksi sivusto on nyt teknisesti ajan tasalla, mikä tuo mukanaan monia etuja. Sivusto on paremmin suojattu haittaohjelmilta ja muilta tietoturvauhilta, lisäksi sivusto latautuu nopeammin, mikä tukee sekä sivuston ylläpitoa että parantaa sen hakukoneystävällisyyttä.

Huolehdimme myös Mondexin sivuston jatkuvasta teknisestä ylläpidosta. WordPress-huolenpitopalvelun avulla pidämme verkkosivut ja niihin asennetut lisäosat teknisesti ajan tasalla. Erillisten kehitys- ja tuotantoympäristöjen ylläpito takaa sujuvan jatkokehityksen Mondexin muuttuvien tarpeiden mukaisesti. Myös erilaiset pikamuutokset sivustolle onnistuvat kätevästi, kun ylläpitäjinä meillä on sivuston hallintaan jo valmiiksi pääsy.

Me etsimme myös sinulle sopivan ratkaisun, kun tarvitset näyttävät ja toimivat verkkosivut tai osaajia muihin verkkoviestinnän palveluihin, ota siis rohkeasti yhteyttä!

Jätä yhteydenottopyyntö