Glam Housen verkkosivujen suunnittelu ja toteutus Webflow'lla

Glam House – verkkosivujen suunnittelu ja toteutus Webflow'lla

Glam House on ylelliseen ja yksilölliseen kauneudenhoitoon erikoistunut kauneushoitola, jolla on kaksi toimipistettä Helsingissä: Kalasatamassa ja Vuosaaren Aurinkolahdessa. Valikoimaan kuuluvat sokeroinnit, ripsienpidennykset, lash- ja brow liftit, rakennekynnet ja geelilakkaus, suihkurusketukset, meikkaukset, jalkahoidot sekä kestopigmentoinnit. Suunnittelimme ja toteutimme hoitolalle verkkosivuston Webflow'lla.

Lähtötilanne

Aiempi sivusto ei näyttänyt siltä miltä Glam House tuntuu. Ulkoasu oli viimeistelemätön eikä ollut linjassa hoitolan ylellisen ja yksilöllisen brändin kanssa, ja sisältöjen päivitys oli hankalaa: palvelut ja hinnastot elivät omia elämiään ja olivat työläitä pitää ajan tasalla. Rakenne oli rakennettu yhden toimipisteen varaan, eikä toinen toimipiste istunut siihen luontevasti.

Ratkaisu

Lähdimme liikkeelle siitä, mitä asiakas tulee sivustolta hakemaan: mikä palvelu, mitä se maksaa ja milloin pääsee. Jokainen palvelu sai oman sivunsa, jolla kuvaus, hinnasto ja ajanvarauksen polku ovat vierekkäin — ei kolmessa eri paikassa. Vasta sen päälle suunniteltiin ulkoasu, joka kantaa brändin ylellisyyden.

• Ulkoasun suunnittelu — visuaalinen ilme, komponentit ja niistä koottu designjärjestelmä.
• Tekninen toteutus Webflow'lla, jossa palvelut, hinnastot, henkilöstö, toimipisteet, blogi ja kampanjat ovat omia CMS-sisältötyyppejään.
• Palvelusivut hinnastoineen: kahdeksan palvelua, joista jokaisella oma sivunsa ja hintataulukkonsa, sekä koottu hinnasto, jossa palvelut vaihtuvat välilehdiltä.
• Toimipistesivut Kalasatamalle ja Aurinkolahdelle: sijainti, saapumisohjeet, yhteystiedot ja toimipisteen oma henkilöstö.
• Henkilöstösivut — jokaisella Glam Dollilla oma esittelysivu ja hänen tarjoamansa palvelut.
• Blogi, jonka artikkelit voi suodattaa sekä kategorian että palvelun mukaan.
• Kampanjasivut omana sisältötyyppinään, ja niitä nostava kampanjapalkki sivuston yläreunassa.
• Ajanvaraus Timman kautta upotettuna suoraan sivustolle, verkkokauppa ja Google-arvostelut osaksi samaa kokonaisuutta.
• Rekrytointisivut avoimille paikoille omana CMS-sisältötyyppinään.

Designjärjestelmä

Ilme rakentuu samppanjan ja kerman varaan: lämmin samppanja kantaa painikkeet, reunat ja kutsut toimintaan, kerma osioiden pohjan, ja musta tuo kontrastin heroihin ja korostusosioihin. Typografia on kahden kirjasimen varassa — otsikot ladotaan Ralewaylla ohuella leikkauksella versaalina, leipäteksti Open Sansilla. Hierarkia syntyy koko- ja leikkauserosta, ei koristeesta. Sivut rakentuvat samoista komponenteista, joten uusi palvelu, toimipiste tai kampanja syntyy olemassa olevista paloista.

Kaksi toimipistettä ja ajanvaraus

Kahden toimipisteen hoitolalla sijainti on osa palvelua. Kummallekin tehtiin oma sivunsa, jolla kerrotaan saapumisohjeet julkisilla ja autolla, pysäköinti, yhteystiedot ja ketkä siellä työskentelevät. Palvelu- ja hinnastosivut toimivat samoin puhelimessa kuin työpöydällä — yhtenä sarakkeena, hintataulukot mukaan lukien — ja ajanvaraus aukeaa samalta sivulta ilman välikäsiä.

Lopputulos

Glam House sai sivuston, joka näyttää siltä miltä hoitola tuntuu, ja jonka sisällöt ovat yhdessä paikassa: palvelu, hinta ja vapaa aika löytyvät saman polun päästä. Hinnastot, henkilöstö, kampanjat ja blogi päivittyvät hoitolan omin käsin Webflow'n CMS:llä, eikä jokainen muutos käy toteuttajan kautta.