Työkeskus Sampolan verkkosivuprototyyppi

Syksyllä 2024 olin mukana Hämeen ammattikorkeakoulun Design Factory Project -kurssilla, jossa toteutimme kuukauden aikana verkkosivustoprototyypin Työkeskus Sampolalle. Vastasin projektissa logosta ja käyttöliittymäsuunnitelmasta ja johdin WordPress-prototyypin valmistusprosessia.

Työkeskus Sampolan prototyypin Koti-sivun hero section

Design Factory Project-kurssin aikana jokainen kurssiin osallistunut ryhmä loi oman ratkaisunsa siihen, miten Työkeskus Sampolan verkkonäkyvyyttä ja myyntiä voitaisiin parantaa. Työkeskus Sampolan omana erityistoiveena oli uudistaa heidän kotisivunsa ja verkkokauppansa nykyaikaisempaan suuntaan, sillä vanha sivusto ei enää palvellut heidän tarpeitaan.

Työkeskus Sampola värit ja fontit
Työkeskus Sampola logo prototyyppi

Uusi, upea logo

Ryhmässämme oli muutama henkilö, jotka suunnittelivat Työkeskus Sampolalle uusia logoja. Päädyimme kuitenkin lopulta hyödyntämään minun suunnittelemaani logoa, jota olisi helppo käyttää sekä kaikissa sähköisissä materiaaleissa että myös esim. vaatteisiin painettuna. Logo on ulkoasultaan minimalistinen, mutta kuitenkin rento ja nykyaikainen.

Jotain uutta ja jotain vanhaa

Työkeskus Sampolan verkkosivujen uudistaminen lähti liikkeelle tiedon hakemisella, jonka jälkeen aloin suunnittelemaan käyttöliittymäsuunnitelmaa. Käyttöliittymäsuunnitelmassa hyödynnettiin mm. Työkeskus Sampolan aiempien verkkosivujen värimaailmaa ja valokuvia, sekä Työkeskus Sampolan sosiaalisen median materiaalia. Yksi aiemman sivuston suurimmista ongelmista oli ollut sekavuus ja vaikea käytettävyys, joten sen takia käyttöliittymäsuunnitelmankin kantavana voimana oli selkeys ja helppokäyttöisyys. Sivuston saavutettavuus oli myös yksi tärkeistä kriteereistä, ja sen toteutumista testattiin jo käyttöliittymän suunnitteluvaiheessa erilaisten Figman saavutettavuuslisäosien avulla.

Työkeskus Sampolan sivustoprototyypin etusivu

WordPress & WooCommerce

Käyttöliittymäsuunnitelman valmistuttua rakensimme lopullisen sivustoprototyypin WordPressin avulla. Sivustosta tehtiin responsiivinen ja sen saavutettavuusominaisuuksiltaan mahdollisimman hyvin WCAG 2.2-ohjeistuksiin sopiva. Käytimme sivuston rakentamiseen mm. Gutenbergiä, WordPressin omaa lohkoeditoria, sekä Spectra One-nimistä teemaa. Sivustolle lisättiin myös WooCommerce-verkkokauppa. Sivuston ja verkkokaupan nopeuttaa parannettin mm. välimuistitus- ja kuvien koon optimointilisäosien avulla.

Pyydä WordPress-verkkosivutarjous jo tänään!

Piirros kädestä, joka pitelee viestin saanutta kännykkää | Jon Haataja verkkosivut