Framtidens cykelparkeringar
Om Cyklos
Cyklos utvecklar, tillverkar och säljer cykelparkeringar och andra produkter för offentlig miljö. Cyklos har till skillnad från många konkurrenter valt att enbart fokusera på just cykelparkeringslösningar.
Projektet omfattar
Jon Nordgren
Bakgrund
Designade cykelparkeringar
Cyklos styrka är den snygga designen, kvalitén samt en service i världsklass. De har även valt att arbeta aktivt med whitepapers – allt för att vägleda, stötta och ge sina kunder bästa möjliga underlag inför en affär.
Sammantaget har vi valt att behålla och låta alla dessa fördelar genomsyra Cyklos nya webblösning. Vi arbetar med stora produktbilder och videoytor på produktsidan, kopplat till en innovativ scrollösning där målet är att supporta besökaren i sitt beslut att lägga en offertbeställning. En snygg och genomtänkt helhetslösning som gör jobbet helt enkelt.
Uppstart
Underlag, möte och tidplan
Innan vi satte oss i uppstartsmöte tillsammans med ansvariga på Cyklos så fick de fylla i våra mallstyrda dokument – Behovsanalys och Upplevelseanalys. Detta gav oss en tydlig bild av uppdraget och vad vi skulle åstadkomma tillsammans. När vi sedan träffades för uppstartsmöte kunde vi direkt ta fram gemensamma mål och en tidplan med ansvarsområden, kopplat till projektets olika delmoment.
Gemensam fildelning
För tydlighetens skull satte vi upp en gemensam Dropbox-yta där vi delade alla projektdokument och där Cyklos kunde fylla på med underlag inför kommande designarbete – grafisk profil, bilder och övrigt nyttigt material. Vi bestämde hur underlaget skulle mappas upp och i vilken upplösning bilderna skulle sparas för optimal hantering. Denna yta delades sedan med alla projektdeltagare för total insyn och åtkomst. Vi hanterade även projektet i Monday tillsammans med kunden genom hela arbetsflödet.
Strategi
SEO-analys
Efter att vi fått tillgång till Cyklos besöksstatistik i Google Analytics och nödvändig info från bolagets webbansvarige gjorde vår SEO-avdelning en Nulägesanalys och tog fram en SEO-rapport för samtliga delar av sajten. Detta sammanställdes i en teknisk rapport – så kallad Site Audit. Den följdes upp med en sammanställning av sökords-ranking där Cyklos jämfördes med några utvalda konkurrenter – även kallad Rank Tracker. Arbetets nästa fas kunde inledas när detta var på plats och vi hade tagit del av resultatet och presenterat det för Cyklos.
Sajtstruktur
Vi satte upp en ny sajtstruktur som tillmötesgick vad SEO-analysen visat. Vi tog även hänsyn till aspekter som besöksflöden och tillkommande sidor. Målet var att hitta ett så rakt och relevant produktflöde som möjligt – allt för att göra det tydligt för besökaren, men även för Google. Vi använde genomgående tjänsten Slickplan för att, tillsammans med Cyklos, sätta strukturen för nya sajten. Här har vi även möjlighet att ge tips och råd kring hur uppdragsgivaren ska arbeta med, och tänka kring, delar som benämningar och innehåll på sidor.
Språkstöd
Cyklos har sin marknad även utanför Sverige och sajten behövde därför utöver svenska även ha stöd för engelska, norska och finska. En ytterligare faktor i val av lösning för språkstödet var att sajten skulle fungera stabilt med WooCommerce – så vi valde att gå vidare med en multisite-lösning.
Design
Wireframe
När strukturen till stor del var på plats var nästa steg i arbetet med nya sajten att sätta upp en klickbar prototyp över innehållet på nyckelsidorna. Denna klickbara prototyp kallas även för wireframe och används i huvudsak för att tydliggöra sambandet mellan sajtens väsentliga delar samt hur olika innehåll förhåller sig till varandra. Prototypen togs fram av oss och delades i projektgruppen i form av en webbsida där alla inblandade kunde klicka sig runt i prototypen och lämna eventuella kommentarer direkt på valda delar i skissen.
Färg och form
Baserat på godkänd prototyp och det underlag som vi tog del av i uppstartsfasen tog därefter designarbetet med följande nyckelsidor fart: Start, Kategori, Produkt och Kontakt. Stor vikt lades vid att fånga en helhetskänsla som signalerade design, kvalitet och service. Vi valde att hitta en genomgående färgställning av bilderna för att höja helhetsintrycket och skapa en rödare tråd genom det skiftande bildmaterialet. Detta tillsammans med bland annat ett modernt typsnitt, luftigare ytor och tydliga call-to-action-knappar skapade en mer stringent design för besökaren.
När vi kommit en bit in i designarbetet utförde vi ett par användartester av navigationen kopplat till de nyckelsidor vi tagit fram – allt för att säkerställa att upplevelsen låg i linje med målsättningarna.
Även anpassade ikoner togs fram för att lyfta intrycket ytterligare en nivå. Ikonerna fungerar även som inkastare samt tydliggör extra viktig information.
Programmering
CSS – fix och trix
När designen av nyckelsidorna godkänts tog utvecklarna vid för nästa steg i processen mot färdig webbsajt. Designen tolkades genom bra stöd från designverktygets inspektionsläge och exemplifieringar av UX-lösningar. I denna del av projektet tog vi även fram en unik inloggning för användarmålgruppen arkitekter, där en yta skapades för att hantera filutbyte genom direktkoppling till Google Drive.
Tekniken är med oss
Sajten är byggd i WordPress med det populära tillägget WooCommerce som möjliggör att kunder enkelt kan skicka offertförfrågningar eller be om mer information om Cyklos olika produkter.
Hantering av data
En stor del av arbetet var att renodla och läsa in den befintliga produktdatabasen på omkring 30 produkter – vilket i sig inte är ett stort antal men där varje produkt har ett stort antal anpassade tillval, utföranden och språk.
Webbläsarstöd
Vi använde Google Analytics för att analysera hur besökarna använder Cyklos sajt. Därefter anpassade vi användarupplevelsen för att uppnå våra och Cyklos målsättningar. Självklart säkerställde vi att webbplatsen fungerar optimalt i alla etablerade webbläsare.
Utbildning och innehåll
En sjyst överlämning
För bästa möjliga överlämning höll vi en genomgång och utbildning tillsammans med Cyklos i deras nya WordPress-lösning. Vi fick då möjlighet att klargöra och följa upp de sista frågeställningarna tillsammans.
Innehållet för sidorna lades in i de färdiga mallarna direkt av Cyklos. Produktdatabasen var på plats och kunde justeras direkt i WordPress.
Uppföljning
Löpande avrapportering av SEO-delarna sker tillsammans med Cyklos – rapporten och analysen ligger till grund för förbättringar och utvecklingsinsatser av sajten framåt.
I samband med att sajten lanserades under kontrollerade former hade vi en utvärdering tillsammans med Cyklos. Utvärderingen syftar till att förbättra såväl kundrelationen som våra interna processer.
Och resultatet?
Cyklos nya webbplats håller nu en riktigt hög nivå och svarar mot de målsättningar som vår uppdragsgivare satte upp från start. Till detta har vi fått fram en bra start på arkitektinloggningen – en funktion som kan komma att utvecklas i framtiden.
Den nya webbplatsen såg dagens ljus första gången i juni 2018.
Fler case
Inte fått nog?
Vill du se fler case som vi tagit oss an för våra trevliga uppdragsgivare – se fler av dem här.