2026
•
ROCKAUTO.COM
Näin helpotin oikean varaosan löytämistä ja nopeutin asiakkaan ostopolkua fiksulla filtteröinnillä.
rockauto.com on autoalan ammattilaisille suunnattu auton varaosien verkkokauppa, jolta löytyy varaosat lähes jokaiselle automerkille ja niiden vuosimalleille.
Verkkokauppa on kuitenkin vaikeasti navigoitava, kun automerkkejä, malleja ja varaosakategorioita on kirjaimellisesti maan ja taivaan väliltä.
Uudelleensuunnittelin varaosien filtteröinnin, jotta käyttäjä pystyy löytää tarvitsemansa tuotteen nopeasti ja vie ostoprosessinsa loppuun saakka.
Tämän projektin suunnittelussa on käytetty tekoälyä apuna.
rockauto.com on autoalan ammattilaisille suunnattu auton varaosien verkkokauppa, jolta löytyy varaosat lähes jokaiselle automerkille ja niiden vuosimalleille.
Verkkokauppa on kuitenkin vaikeasti navigoitava, kun automerkkejä, malleja ja varaosakategorioita on kirjaimellisesti maan ja taivaan väliltä.
Uudelleensuunnittelin varaosien filtteröinnin, jotta käyttäjä pystyy löytää tarvitsemansa tuotteen nopeasti ja vie ostoprosessinsa loppuun saakka.
Tämän projektin suunnittelussa on käytetty tekoälyä apuna.
Kategoria
Projektin tulokset
Selkeä ja nopeasti hahmotettava varaosien suodatus
Paremmat edellytykset ostoksen loppuun viemiselle
RATKAISTAVA ONGELMA
RATKAISTAVA ONGELMA
Kun oikeaa varaosaa ei löydy, automekaanikot keskeyttävät ostoprosessin ja vaihtavat toimittajaa
Kun oikeaa varaosaa ei löydy, automekaanikot keskeyttävät ostoprosessin ja vaihtavat toimittajaa
Automekaanikot haluavat nopeasti löytää asiakkaan ajoneuvoon sopivan varaosan, mutta vertikaalinen navigaatiopuu tekee informaatiotiheän sisällön selaamisesta ja oikean osan löytämisestä hidasta.
Tämä voi johtaa siihen, että osa heistä poistuu sivustolta ennen ostoa ja siirtyy toisen toimittajan asiakkaaksi.
Kaikki alkuperäisessä versiossa oleva on kuitenkin tarpeellista käyttäjälle, informaation karsimisen sijaan keskityin tuomaan näkyväksi tarpeellisia toiminnallisuuksia. Ratkaisun tulisi siis helpottaa oikean osan löytämistä ilman että karsitaan itse sisällöstä.
Automekaanikot haluavat nopeasti löytää asiakkaan ajoneuvoon sopivan varaosan, mutta vertikaalinen navigaatiopuu tekee informaatiotiheän sisällön selaamisesta ja oikean osan löytämisestä hidasta.
Tämä voi johtaa siihen, että osa heistä poistuu sivustolta ennen ostoa ja siirtyy toisen toimittajan asiakkaaksi.
Kaikki alkuperäisessä versiossa oleva on kuitenkin tarpeellista käyttäjälle, informaation karsimisen sijaan keskityin tuomaan näkyväksi tarpeellisia toiminnallisuuksia. Ratkaisun tulisi siis helpottaa oikean osan löytämistä ilman että karsitaan itse sisällöstä.
SUUNNITTELURATKAISU 01
SUUNNITTELURATKAISU 01
Informaatiotiheyden kääntäminen vahvuudeksi horisontaalisella filtterillä
Informaatiotiheyden kääntäminen vahvuudeksi horisontaalisella filtterillä
Käänsin vertikaalisen navigaatiopuun neljäksi horisontaaliseksi filtteriksi, koska näin kaikki tarvittavat kategoriat ovat näkyvissä kerralla eikä mitään jää piiloon.
Rockauton tapauksessa mikään pystysuuntainen filtteriöintimuoto ei olisi järkevä ratkaisu, koska tietoa ja scrollattavaa on niin paljon.
Tuomalla jokaisen kategorian näkyväksi, tämä vaihtoehto mahdollistaa sen että käyttäjä ymmärtää heti mitä tuote mahdollistaa.
Käänsin vertikaalisen navigaatiopuun neljäksi horisontaaliseksi filtteriksi, koska näin kaikki tarvittavat kategoriat ovat näkyvissä kerralla eikä mitään jää piiloon.
Rockauton tapauksessa mikään pystysuuntainen filtteriöintimuoto ei olisi järkevä ratkaisu, koska tietoa ja scrollattavaa on niin paljon.
Tuomalla jokaisen kategorian näkyväksi, tämä vaihtoehto mahdollistaa sen että käyttäjä ymmärtää heti mitä tuote mahdollistaa.
SUUNNITTELURATKAISU 02
SUUNNITTELURATKAISU 02
Toissijainen löytämisen tapa tukee sekä käyttäjää että ostopolun loppuun viemistä
Toissijainen löytämisen tapa tukee sekä käyttäjää että ostopolun loppuun viemistä
Kaikki käyttäjät eivät löydä tarvitsemaansa varaosaa suoraan haun tai filtteröinnin kautta.
Tällöin related parts tarjoaa vaihtoehtoisen reitin relevantteihin tuotteisiin.
Koska tällainen tilanne on todennäköisesti yleinen, on turha piilottaa usein tarvittavaa toimintoa dropdownin taakse.
Suunnittelin Claude Design- tekoälyä apua käyttäen kolme vaihtoehtoa ja valitsin niistä parhaan.
Kaikki käyttäjät eivät löydä tarvitsemaansa varaosaa suoraan haun tai filtteröinnin kautta.
Tällöin related parts tarjoaa vaihtoehtoisen reitin relevantteihin tuotteisiin.
Koska tällainen tilanne on todennäköisesti yleinen, on turha piilottaa usein tarvittavaa toimintoa dropdownin taakse.
Suunnittelin Claude Design- tekoälyä apua käyttäen kolme vaihtoehtoa ja valitsin niistä parhaan.
Versio 1
Related partsin paikka ei ole linjassa sen kanssa miten muu layout ohjaa katsetta.
On mahdollista että käyttäjä ei huomaa toiminnallisuutta ollenkaan sen ollessa noin syrjässä muusta kokonaisuudesta.
Versio 1
Related partsin paikka ei ole linjassa sen kanssa miten muu layout ohjaa katsetta.
On mahdollista että käyttäjä ei huomaa toiminnallisuutta ollenkaan sen ollessa noin syrjässä muusta kokonaisuudesta.
Versio 2
Olisi hyvä olla täysin selvää voiko valita useamman vaihtoehdon
On myös hieman syrjäisessä kohtaa, eli löytyy vasta kun scrollataan tuotekatalogiin.
Pahimmassa tapauksessa sekoittuu bannerimainokseksi.
Versio 2
Olisi hyvä olla täysin selvää voiko valita useamman vaihtoehdon
On myös hieman syrjäisessä kohtaa, eli löytyy vasta kun scrollataan tuotekatalogiin.
Pahimmassa tapauksessa sekoittuu bannerimainokseksi.
VALITTU VERSIO
Related parts heti löydettävissä valitun osan yhteydessä, käyttäjä voi nopeasti klikkailla haluamansa vaihtoehdot ilman, että filtteröintiprosessi pitenee kohtuuttomasti.
On heti selvää, että voi valita useamman vaihtoehdon.
SUUNNITTELURATKAISU 03
SUUNNITTELURATKAISU 03
Aakkosfiltteri olikin olennainen, kun puhutaan poikkeuksellisen laajasta valikoimasta
Aakkosfiltteri olikin olennainen, kun puhutaan poikkeuksellisen laajasta valikoimasta
Alkuperäisessä versiossa aakkosfiltteri vaikutti kömpelöltä, minkä vuoksi kyseenalaistin ensin sen tarpeellisuuden. Ongelma ei kuitenkaan ollut itse toiminnossa vaan sen toteutuksessa.
Kun käyttäjän täytyy löytää oikea automerkki erittäin suuresta joukosta vaihtoehtoja, pelkkä hakukenttä aina riitä.
Alkuperäisessä versiossa aakkosfiltteri vaikutti kömpelöltä, minkä vuoksi kyseenalaistin ensin sen tarpeellisuuden. Ongelma ei kuitenkaan ollut itse toiminnossa vaan sen toteutuksessa.
Kun käyttäjän täytyy löytää oikea automerkki erittäin suuresta joukosta vaihtoehtoja, pelkkä hakukenttä aina riitä.
YHTEENVETO
YHTEENVETO
Kaikkea ei tarvitse karsia. Olennaisempaa on tehdä tieto näkyväksi
Kaikkea ei tarvitse karsia. Olennaisempaa on tehdä tieto näkyväksi
Lopputuloksena syntyi selkeämpi varaosien suodatus, jossa tärkeimmät kategoriavaihtoehdot ovat heti nähtävissä.
Sujuva tuotteen löytäminen vähentää ostopolun kitkaa ja luo paremmat edellytykset ostoksen loppuun viemiselle.
Opin tästä redesign- projektista, että laaja tietomäärä ei itsessään ole ongelma jos tuotteen rakenne tukee käyttäjän ajattelua ja hahmottamista.
