VERKKOKAUPPA.COM

Toin markkinoinnin ja tuotekehityksen yhteen rakentamaan verkkokaupalle yhteistä visuaalista linjaa.

Tuotekehitys vastasi verkkopalvelusta, mutta sen ilme ei ollut yhtenäinen verkkolehden ja muun markkinoinnin kanssa. Työni yhdisti käyttöliittymäsuunnittelun, suunnittelukirjaston kehittämisen ja keskustelut eri tiimien välillä.

Asiakas / Projekti: Verkkokauppa.com
Tyyppi: Verkkokauppa ja Design Systemit
Alusta: Verkkopalvelu
Aloitettu: 2018

Työtehtävä ja rooli

Suunnittelin käyttöliittymiä ja autoin muita suunnittelemaan yhtenäisesti

Vastasin käyttöliittymäsuunnittelusta sekä suunnittelukirjaston kehittämisestä ja ylläpidosta. Koulutin muita suunnittelijoita ja suunnittelin React-komponenttien rakennetta yhdessä kehittäjien kanssa.

Frontend-toteutus kuului kehittäjille. Teimme myös suunnittelijoille omia työkaluja hiekkalaatikkoympäristöön. Oma roolini yhdisti suunnittelutyön, yhteiset käytännöt ja yhteistyön eri tiimien välillä.

01 · Yhteinen suunta

Sain markkinoinnin ja tuotekehityksen saman pöydän ääreen

Otin yhteyttä entiseen luokkakaveriini, joka työskenteli markkinoinnissa, ja käynnistin keskustelut. Kuuntelin heidän tarpeitaan, kerroin tuotekehityksen näkökulman ja otin myös tuoteomistajan mukaan. Yhteistyön myötä navigaation alasisältöjä tiivistettiin ja etusivulle alettiin rakentaa tuotekokonaisuuksia: esimerkiksi grillauskampanjan yhteyteen tuotiin siihen liittyvät tuotteet ja sisällöt. Aloin myös tuoda käyttäjäpersoonia osaksi suunnittelun ajattelua.

Etusivu

02 · Suunnittelukirjasto

Yhteiset ratkaisut muidenkin suunnittelijoiden käyttöön

Kehitin ja ylläpidin atomista suunnittelukirjastoa Sketchissä. Suunnittelin React-komponenttien rakennetta yhdessä kehittäjien kanssa, jotta suunnittelun osat ja toteutuksen rakenne vastaisivat toisiaan.

Kirjaston rinnalla koulutin muita suunnittelijoita. Yhteinen suunta tarvitsi myös yhteisiä työtapoja ja tukea niiden käyttöön. Tuotekorttien työpöytä- ja mobiililuonnokset näyttävät, miten hinnat, arvostelut, saatavuus ja ostotoiminnot koottiin toistettaviksi asetteluiksi.

Verkkokauppa.comin Design Systemin yleiskuva: navigaatiokomponentteja ja tuotekorttimalleja

Suunnittelukirjasto

Työpöydän tuotelista ja vaihtoehtoisia tuotekorttiasetteluja

Tuotekortit työpöydällä

Mobiilin tuoteruudukko ja tiiviit tuotekortit

Tuotekortit mobiilissa

03 · Saatavuustiedot

Toimitus ja myymäläsaatavuus omiksi kokonaisuuksikseen

Saatavuustietojen suunnittelussa tutkin, miten toimitusarvio, myymäläsaldot ja noutovaihtoehdot voisi erottaa helpommin hahmotettaviksi kokonaisuuksiksi. Vertailin myös toimituksen tai myymäläsaatavuuden nostamista ensimmäiseksi.

Kommentoidut ennen–jälkeen-luonnokset näyttävät suunnitteluvaihtoehdot ja tiedon hierarkiaan tehdyt muutokset. Ne kuvaavat suunnittelutyötä, eivät mitattua vaikutusta ostamiseen.

Kommentoituja saatavuuskomponentin luonnoksia, joissa vertaillaan toimitus- ja myymälänoutotietoja

Saatavuustiedot