Verkkosivut isännöintiyritykselle – saavutettava ja tehokas Webflow-ratkaisu

Hansa Isännöinti – verkkosivujen uudistus WordPressistä Webflow'hun

Hansa Isännöinti Oy on Helsingin kantakaupungissa toimiva isännöintitoimisto, joka on erikoistunut vanhoihin arvokiinteistöihin. Toimisto hoitaa taloyhtiöiden hallinnon, taloushallinnon ja teknisen isännöinnin saman katon alta – niitä taloja, joissa jokainen putkiremontti on oma kysymyksensä ja joissa kiinteistön arvo säilyy vain suunnitelmallisella huolenpidolla.

Lähtötilanne

Aiempi sivusto oli rakennettu WordPressin päälle. Se latautui hitaasti, sen ulkoasu ei vastannut arvokiinteistöihin keskittyvän toimiston laatumielikuvaa eikä orgaaninen hakukonenäkyvyys kantanut. Isoin ongelma oli kuitenkin arjessa: asukkaan piti soittaa tai sähköpostitella saadakseen isännöitsijäntodistuksen, tilatakseen teknisen valvojan tai tehdäkseen muutostyöilmoituksen. Jokainen tällainen yhteydenotto tarkoitti myös toimistolle käsityötä – tietojen kyselyä, kirjaamista ja laskutusta erikseen.

Ratkaisu

Toimitimme uudistuksen avaimet käteen. Suunnittelun keskiöön otettiin sivuston ensisijainen käyttäjä: taloyhtiön asukas, joka tulee sivustolle hoitamaan yhden asian ja haluaa sen hoituvan heti. Sen ympärille rakennettiin ulkoasu, palvelupolut ja tekninen toteutus.

• Visuaalinen uudistus – Hansan tutut brändivärit ja logo säilytettiin, mutta kokonaisilme nostettiin vastaamaan toimiston profiilia. Kantakaupungin julkisivut kulkevat kuva-aiheena läpi sivuston.
• Käyttäjäkeskeinen rakenne – tärkeimmät toiminnot nostettiin heti etusivun alkuun kolmeksi suoraksi poluksi: tilaa asiakirjoja, tilaa tekninen valvoja, tee muutostyöilmoitus.
• Webflow-toteutus, jonka kehitystyö valmistui parissa viikossa designin hyväksymisestä. Osana projektia rakennettiin komponenttikirjasto, jolla uusi sivu syntyy olemassa olevista paloista ilman syvempää teknistä osaamista.
• Webflow × Shopify -verkkokauppa asiakirjoille ja teknisen isännöinnin palveluille.
• Muutostyöilmoitus verkkolomakkeeksi, liitetiedostoineen. Asunto-osakeyhtiölain edellyttämä kirjallinen ilmoitus syntyy nyt selaimessa, ja piirustukset sekä suunnitelmat kulkevat mukana samassa lähetyksessä.
• Saavutettavuus omana työvaiheenaan: kontrastit, navigaation selkeys ja se, että etsitty löytyy ilman ylimääräisiä klikkauksia.
• Hakukonenäkyvyyden ja tekoälyhaun optimointi – sivukohtainen Schema-rakenne generoituu automaattisesti Webflow'n avulla.

Verkkokauppa, joka tuntee isännöinnin

Asiakirjojen ja palveluiden tilaaminen toteutettiin Kuasin Webflow × Shopify -integraatiolla. Se yhdistää Webflow'n visuaalisen ja joustavan sisällönhallinnan Shopifyn pitkälle optimoituun kassakokemukseen: tuotteet ja hinnat elävät Shopifyssa, mutta sivusto näyttää ja käyttäytyy täysin Hansan omalta.

Isännöinnin tilaukset eivät kuitenkaan ole tavallista verkkokauppaa. Isännöitsijäntodistus tarvitsee huoneistotiedon, lainaosuuslaskelma tiedon siitä mistä lainasta on kyse, muutostyön valvontapaketti tiedon remontin laajuudesta. Siksi integraatioon rakennettiin räätälöity lisätietovaihe: tilausta tehdessä avautuu kenttä, johon asiakas kirjoittaa yksilöivät tiedot ja voi liittää tiedostoja. Tiedot kulkevat tuotteen mukana ostoskoriin ja kassalle asti.

Lopputulos: tilaus saapuu toimistolle valmiina käsiteltäväksi eikä keskeneräisenä pyyntönä, jota pitää selvitellä sähköpostitse. Sama koskee teknisen isännöinnin puolta, jossa valvontakäynnit ja remonttien valvontapaketit ovat hinnoiteltuja tuotteita – asukas näkee hinnan etukäteen eikä joudu pyytämään tarjousta jokaisesta käynnistä.

👉 Lue lisää Kuasin verkkokaupparatkaisuista

Designjärjestelmä

Ilme rakennettiin kolmen värin varaan. Laivastonsininen kantaa rakenteen, keltainen merkitsee jokaisen toiminnon – tilaa, lähetä, pyydä tarjous – ja tiilenpunainen erottaa asukkaan pikapolut muusta sisällöstä. Värit elävät CSS-muuttujina Hansan omilla nimillä, joten teema on yhdessä paikassa eikä hajallaan sääntöjen seassa.

Typografiassa on kaksi perhettä: Metropolis otsikoissa ja Lato leipätekstissä, molemmat tarjoiltuna sivustolta itseltään Webflow'n omina webfontteina. Ulkopuolista fonttipalvelua ei ladata, mikä näkyy sekä latausajassa että tietosuojassa.

Tulokset

Sivusto latautuu nopeasti ja on aiempaa saavutettavampi: mittasimme Lighthousella mobiilin suorituskyvyksi 83–86 ja työpöydän 78–87 pistettä, saavutettavuudeksi 92 ja best practices -pisteiksi 100. Asukas löytää etsimänsä ilman puhelinsoittoa, ja tilaukset saapuvat toimistolle rakenteisena tietona eivätkä vapaamuotoisina viesteinä – se on suoraan pois manuaalisesta työstä.

Hansa päivittää sisällöt itse, ja komponenttikirjasto kantaa myös tulevat laajennukset. Sivukohtainen Schema-rakenne antaa vahvan pohjan sekä perinteiselle hakukonenäkyvyydelle että tekoälypohjaisille hauille.