Verkkokauppa / Shopify
Unikulma
Shopify-verkkokaupan uudistus
Uudistimme verkkokaupan teeman, sivut ja visuaalisen ilmeen. Samalla selkeytimme sänkyjen valintaa ja rakensimme sisältöjen ylläpidon uudelleen.
Koko verkkokauppa uusiksi
Päivitimme Unikulman verkkokaupan kokonaan uuteen Shopify-teemaan. Uudistimme sivut ja visuaalisen ilmeen sekä kävimme läpi, miten tuotteet ja muut sisällöt rakentuvat kaupan taustalla.
Oma työni painottui teknisiin toteutuksiin ja teeman muokkaamiseen. Rakensin uusia osioita ja tein koodimuutoksia silloin, kun haluttu ratkaisu ei onnistunut teeman valmiilla asetuksilla. Kuvasin ja editoin myös uudistuksessa käytetyt uudet sänkykuvat.
Lähtötilanne
Tiedon keskeltä oli vaikea löytää seuraavaa askelta
Vanhassa verkkokaupassa sänkyjen selaaminen ja eri vaihtoehtoihin tutustuminen oli hankalaa. Sängyt-sivulla oli paljon tietoa, mutta asiakkaalle ei aina ollut selvää, mistä aloittaa tai mihin siirtyä seuraavaksi.
Myös ylläpitoon oli kertynyt paljon erillisiä sivu- ja tuotepohjia. Tuotevalikoiman kasvaessa halusimme rakenteen, jossa sisältöjä voidaan hallita yhtenäisemmin ilman omaa templatea jokaiselle sivulle ja tuotteelle.
Selkeämpi reitti sängyn valintaan
Rakensimme Sängyt-sivun uudelleen niin, että hankinnan vaiheet avataan heti alussa. Sen jälkeen asiakas voi tutustua sänkytyyppeihin, vertailla mallistoja ja siirtyä katsomaan yksittäisiä sänkyjä.
Uudessa versiossa sängyt löytyvät myös erillisinä tuotteina. Asiakas pääsee siis yleisestä esittelystä konkreettisesti siihen, miltä eri vaihtoehdot näyttävät ja mitä niihin kuuluu.
Uusimme samalla sivuston kuvat ja yhtenäistimme ilmettä. Itse kuvaamani ja editoimani sänkykuvat ovat mukana sekä sivujen esittelyissä että tuotteiden yhteydessä.
Uudella sivulla hankinnan vaiheet, mallistot ja yksittäiset tuotteet muodostavat selkeämmin etenevän kokonaisuuden.
Navigaatio
Selkeämpi valikko koko verkkokauppaan
Uudistimme myös verkkokaupan valikon. Rakensimme siitä kaksitasoisen megamenun, jotta tuotteet ja muu tarvittava tieto löytyisivät selkeämmin samasta paikasta.
Tavoitteena oli, että asiakas hahmottaa vaihtoehdot jo valikossa ja pääsee suoraan etsimänsä sisällön pariin. Huomioimme rakenteessa myös hakukoneet: sivujen välisen linkityksen ja sisältöjen loogisen ryhmittelyn.
Tekninen toteutus
Oma accordion, jossa kuva vaihtuu valinnan mukana
Halusimme esitellä sänkytyypit niin, että teksti ja oikea kuva näkyvät yhdessä. Teemassa ei ollut tähän sopivaa valmista osiota, joten koodasin sen itse.
Kun asiakas avaa plusmerkistä esimerkiksi moottorisängyt, myös viereinen kuva vaihtuu moottorisänkyyn. Näin valitusta sänkytyypistä kerrotaan samassa kohdassa sekä tekstillä että kuvalla.
Rakensin uudistuksessa myös muita uusia osioita ja tein pienempiä koodimuutoksia, jotta saimme toteutettua haluamamme ulkoasun ja toiminnot.
Itse toteuttamani osio yhdistää avattavat sänkytyyppien kuvaukset ja vaihtuvan kuvan.
Vähemmän erillisiä pohjia. Yhtenäisempi ylläpito.
Uudistimme myös tapaa, jolla sisältöjä hallitaan Shopifyssa. Tavoitteena oli päästä eroon turhasta pohjien monistamisesta ja tehdä kasvavan valikoiman ylläpidosta selkeämpää.
Myymäläsivut metaobjekteilla
Rakensimme myymäläsivuja yhteisen rakenteen ja metaobjektien varaan. Myymäläkohtaiset tiedot tuodaan samalle sivupohjalle sen sijaan, että jokaiselle myymälälle ylläpidettäisiin omaa erillistä templatea.
Tuotekohtaiset sisällöt metakentillä
Uudessa teemassa tuotekohtaisia sisältöjä hallitaan metakentillä. Näin tuotteet voivat käyttää yhteisiä pohjia, vaikka niiden tiedot ja sisällöt eroavat toisistaan.
Tässä työssä piti ymmärtää, miten teema, sivupohjat, osiot ja sisältötiedot liittyvät toisiinsa. Ulkoasun lisäksi mietimme sitä, miten kauppaa päivitetään uudistuksen jälkeen.
Tekoäly mukana koodityössä
Hyödynsin tekoälyä teknisten ratkaisujen ja koodin työstämisessä. Samalla työ vaati ymmärrystä siitä, mihin kohtaan Shopify-teemaa muutos kuuluu ja miten se liittyy muuhun toteutukseen. Tekoäly oli yksi työväline oman Shopify-osaamiseni rinnalla.
Lopputulos
Uusi ilme ja selkeämpi rakenne
Uudistuksen jälkeen sänkyjen hankinta esitellään vaiheittain, mallistoja voi vertailla ja yksittäisiin tuotteisiin pääsee tutustumaan suoraan. Uudet kuvat ja uudistetut sivut tekevät verkkokaupan ilmeestä yhtenäisemmän.
Taustalla erillisiä sivu- ja tuotepohjia on vähemmän, ja sisältöjä hallitaan enemmän yhteisten rakenteiden kautta. Oma osuuteni yhdisti tässä projektissa teknisen toteutuksen, visuaaliset yksityiskohdat ja sänkykuvien tuotannon.