Jatka sisältöön
Hurja Solutions: Mondexin verkkosivuston mockup.

Mondex

Toimiala

Tukku- ja vähittäiskauppa

Palvelut

Verkkosivut WordPress-verkkosivut WooCommerce-verkkokaupat
Verkkosivut WordPress-verkkosivut WooCommerce-verkkokaupat Hakukoneoptimointi (SEO) Design UX- ja UI-suunnittelu Sisällöntuotanto Jatkuva kehitys WordPress-huolenpitopalvelu Tekoäly, data & analytiikka
Mondex-logo.

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

Verkkosivu-uudistus vahvistamaan brändiä ja käyttäjäkokemusta

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.

Verkkosivuston rakentaminen brändiä ja käytettävyyttä tukien

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ä.

Suunnittelu, sivuston tekniset ominaisuudet ja parannukset

Visuaalisen ilmeen ja rakenteen uudistus

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.


Moderni WordPress-toteutus ja räätälöity teemapohja

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.


Taittuvat lohkot, nostoalueet ja tyylikkäät animaatiot

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.


Tuotteiden haku ja vertailu tehtiin helpommaksi

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.


Kielikäännökset, automaatiot ja analytiikka

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.


Joko aloitetaan?

"*" näyttää pakolliset kentät

Nimi*
Hurja Solutions: Hannamari Männistö-lätti.