• Analytiikka
• Integraatio
• Konseptisuunnittelu
• Käytettävyystutkimus
• Saavutettavuus
• UI/UX -suunnittelu
• WordPress-verkkosivut

Vav.fi verkkopalvelu-uudistus

VAV on vuokratalokonserni, jonka emoyhtiö on Vantaan kaupungin omistuksessa. VAV on mahdollistanut hyvää ja laadukasta elämää Vantaalla vuodesta 1986. Konsernilla on lähes 12 000 vuokra-asuntoa ja sen tehtävä on tarjota koteja, joihin mahdollisimman monella vantaalaisella ja Vantaalle muuttavalla on varaa.

Marraskuussa 2025 käynnistyneen vav.fi -verkkopalvelun uudistusprojektin keskiössä oli erityisesti asunnon hakija. Kodin löytämisen ja hakemuksen jättämisen tuli onnistua verkossa alusta loppuun vaivattomasti kaikilla laitteilla.

Monen yhteisen työpajan, huolellisen suunnittelun ja hakemusprosessin tarkan testauksen jälkeen valmis sivusto julkaistiin syyskuussa 2026.

Lähtökohdat

Sopivan asunnon etsiminen ja hakeminen oli vanhassa verkkopalvelussa hankalaa. Asioinnin ongelmat lisäsivät hakijan tuen tarvetta ja hakemukset jäivät usein puutteellisiksi.

VAV määritteli uudistuksen lähtökohdat huolellisesti ennen kilpailutusta ja painotti erityisesti asunnonhakijan käyttäjäpolun selkeyttä ja asunnon hakemisen vaivattomuutta. Talojen ja asuntojen tietojen piti siirtyä verkkopalveluun suoraan VAV:n Tampuuri-kiinteistönhallintajärjestelmään rakennetun integraation kautta. Kieliversiointiin toivottiin tekoälypohjaista ratkaisua.

Työpajoista toimivaksi hakupoluksi

Aloitimme tarkentamalla konseptin ja määrittelyn yhdessä VAV:n projektitiimin kanssa. Työpajoissa kävimme hakijan polun läpi askel kerrallaan: miten uutta kotia yleensä etsitään, mitä tietoa päätöksen tekemiseen tarvitaan ja miten hakemus muotoillaan selkeäksi.

Polkua ei ratkaistu yhdellä kierroksella. Rautalankamallien, rajapintaratkaisujen etsimisen ja lukuisien asiantuntevien silmäparien kautta hakupolku hioutui toimivaksi. Visuaalisessa suunnittelussa sovelsimme VAV:n graafista ohjeistoa ja toimme kauniin kuvitusmaailman osaksi verkkopalvelua. Palvelu on suunniteltu toimimaan yhtä hyvin puhelimella kuin tietokoneella.

Suunnitelmia ei hyväksytty pelkän työryhmän arvion varassa. Testasimme kohdehaun käytettävyyttä VAV:n tiloissa aidoilla käyttäjillä eri ikäryhmistä ja havainnot vietiin suunnitelmiin ennen toteutusta. Kun sivusto oli koodattu, hakemisen käyttäjäpolulle järjestettiin vielä oma Redandbluen fasilitoima testauspäivä.

Tampuuri-integraatio tuo vapaat asunnot näkyviin

Rakensimme verkkopalvelun WordPressille hyödyntäen Gutenberg-editorin natiivilohkoja ja VAV:lle räätälöityjä lohkoja. Talojen ja niiden asuntojen tiedot tulevat verkkopalveluun VAV:n omasta järjestelmästä, joten hakija näkee, missä taloissa on asuntoja vapaana tai vapautumassa. Tiedot ylläpidetään Tampuurissa ja verkkopalvelu näyttää ne hakijalle.

Asuntojen statustiedot päivittyvät lähes reaaliajassa Tampuurin webhookien avulla. Palvelimen ajastettu tehtävä käsittelee jonon minuutin välein: se hakee asunnon tiedot Tampuurista, päivittää asunnon tilan ja laskee rakennuksen vapaustiedon uudelleen.

Hakija voi rajata taloja esimerkiksi asuinalueen ja huoneluvun mukaan. Ennen hakemuksen täyttämistä asuntojen pohjapiirrokset ja asuntokuvat auttavat hahmottamaan, millaiseen asuntotyyppiin hakemus on menossa. Asuinalueisiin pääsee tutustumaan myös asuinalueiden hakua varten rakennetun kartan kautta.

Palvelu toimii suomeksi, englanniksi ja ruotsiksi. VAV:n taloja on yli 200, joten käännösten ylläpito käsin olisi ollut mahdotonta. Nyt niiden tiedot päivittyvät automaattisesti verkkopalveluun integraation kautta. Rakensimme sivuston niin, että Tampuurista tulevat talotekstit käännetään automaattisesti DeepL-käännöspalvelulla aina kun teksti päivittyy. Sama tekoälypohjainen käännöspalvelu on käytössä myös muiden sisältöjen kääntämisessä.

Hakemus valmiiksi verkossa

Asunnon etsintään ja asuntohakemukseen rakensimme oman Vue.js-sovelluksen osaksi WordPress-teemaa. Sovellus käyttää sivuston omia REST-rajapintoja, jotka välittävät datan Redandbluen toteuttamalle Tampuuri-integraatiopluginille, joka hoitaa liikenteen Tampuuriin.

Jos hakemukseen tarvitsee tehdä muutoksia sen lähettämisen jälkeen, hakija tunnistautuu palveluun integroidulla Telian tunnistautumispalvelulla ja saa jo lähetetyn hakemuksen palautettua muokattavaksi. Tällöin hakemusta ei tarvitse aloittaa täyttämään alusta, ja hakijalla säilyy järjestelmässä vain yksi voimassa oleva hakemus.

Saavutettavuusvaatimukset sitovat kuntayhtymää. Asunnonhakuun tulee käyttäjiä kaikista ikäryhmistä ja hyvin erilaisista elämäntilanteista. Siksi verkkopalvelu on auditoitu WCAG 2.2 AA -tason mukaan, ja VAV:n saavutettavuusseloste laadittiin auditoinnin pohjalta.

Muutos näkyy VAV:n arjessa. Kun hakeminen on helppoa, hakijat eivät turhaudu, eivätkä joudu etsimään lisätietoja saadakseen asiansa hoidettua. Toisaalta taas VAV saa laadukkaampia hakemuksia, eikä hakemustietojen tarkentamiselle ole jatkuvaa tarvetta. Vuokraprosessi nopeutuu ja sujuvoituu, kun hakija pystyy hoitamaan hakemusprosessin itsenäisesti hyvin pitkälle verkkopalvelussa.

Lopputulokset

• Asunnonhaku yhdessä palvelussa: kohteet sekä asuntojen vapautumistiedot suoraan Tampuurista ja hakemus samassa paikassa teknisesti omassa sovelluksessaan
• Hakemuksen muokkaus: lähetetyn hakemuksen saa palautettua muokattavaksi Telian tunnistautumisella
• Käyttäjätestattu: kohdehaku testattiin aidoilla käyttäjillä ja hakemispolku testauspäivän aikana valmiissa sivustossa
• Saavutettavuus: auditoitu WCAG 2.2 AA -tason mukaan, saavutettavuusseloste laadittu auditoinnin pohjalta
• Suorituskyky: PageSpeed-mobiilipisteet nousivat yli kaksinkertaisiksi vanhan sivuston tehokkuuteen verrattuna 
• Kieliversiot: suomi, englanti ja ruotsi, yli 200 talon tekstit käännetään automaattisesti DeepL:llä

Kaipaatko vinkkejä brändin uudistamiseen tai verkkopalvelun kehittämiseen?

Ota yhteyttä, niin jutellaan tarkemmin

Petteri Laamo

Senior designer, Client director, Co-Founder

Puhelin 040 194 4421

Sähköposti petteri@redandblue.fi