”Den nya hemsidan har gett vårt varumärke en tydligare och mer modern framtoning. Vi har också skapat ett innehåll som ska inspirera och skapa engagemang hos besökarna. Tack Bazooka för att vi kunnat genomföra detta projekt tillsammans”

Håkan Jarlenius, Kommunikationsansvarig på Hand in Hand

Bakgrund & process

Hand in Hand kom till oss på Bazooka våren 2014 och ville hjälp med att ta fram en ny webbplats. Den gamla webbplatsen var alldeles för statisk, speglade inte alls Hand in Hands verksamhet och resultat och var mycket texttung. Den var dessutom svår att administrera och laddningstiden var en katastrof.

Skärmdump på gamla handinhand.nu

Gamla handinhand.nu

Vi inledde arbetet med en strategifas där vi gick igenom utmaningar, möjligheter, omvärld, uppdragets mål, mätpunkter, Hand in Hands och användarnas behov, drivkrafter, beteende samt varumärke/identitet.

Med stöd i strategin prioriterades innehåll och funktionalitet och en innehållsstruktur arbetades fram. Därefter visualiserades detta i form av interaktionsdesign, där struktur, flöden och vyer samt vilken information de skall innehålla och hur man navigerar mellan dem, presenterades i visuella men odesignade “wireframes”.

Efter det designades hela lösningen och utvecklarna satte fart på kodandet.

Under projektets gång beslutades även att det befintliga donationssystemet som var byggt av Slagkryssaren skulle få sig en rejäl ansikslyftning. Bazooka ansvarade i detta “sidoprojket” för koncept, interaktionsdesign, design och frontend-utveckling medans Slagkryssaren stod för backend-utvecklingen.

Lösning och resultat

Strategi

Den nya webbplatsens fokus är att förtydliga verksamheten och belysa det arbete som Hand in Hand gör samt att öka andelen donationer online.

Webbplatsens innehåll kring kvinnor och entreprenörskap är väldigt berörande och engagerande, de berättelserna och bilderna lyfts ytterligare. Vi har sedan i den nya strukturen skapat nya ytor som fångar upp besökaren när hen blivit engagerad av Hand in Hands berättelser och skapat möjligheter att direkt kunna agera på sitt engagemang genom att t.ex. dela i sociala kanaler, anmäla sig till nyhetsbrev eller donera.

Vi ville också öka känslan av trovärdighet och trygghet, en organisation att lita på och har därför jobbat med att lyfta målsättningar, syfte, resultat och att visa upp människorna som jobbar på Hand in Hand och vilken skillnad donationer gör.

Interaktionsdesign

I detta uppdrag som var en total re-design av den nuvarande digitala närvaron på webben tog interaktionen ett nytt kreativt grepp sprunget ur den nyligen framtagna strategin. Med nyckelord som, personlig, engagerande och transparant arbetades en ny struktur fram.

När arbetet med wire frames började blev vår nya vision och syn på den kommande webbplatsen ännu tydligare. Ytor och sektioner som snabbt fick användaren att förstå syftet och sammanhanget prioriterades. Liksom tydliga, stora bildytor med syfte att beröra och komma närmare de människorna vars liv, på ett positivt sätt, påverkas av Hand in Hands arbete. Menyvalen har fått en tonalitet som väcker engagemang hos användaren och genomgående på varje sida finns en möjlighet att agera.

Resultatet blev en intuitiv webbplats som berör och talar ett tydligt språk. Vi förbättrar människors liv och din hjälp gör skillnad.

Design

Fokus i designarbetet var liksom i strategi och interaktionsdesign att beröra användaren och samtidigt, på ett hoppingivande sätt, visa att pengarna som doneras går fram.

Vi valde att jobba med stora starka bilder för att locka fram de rätta känslorna hos besökaren. Vi arbetade även fram infografik för att visa nyttan av Hand in Hands arbete på ett lite roligare sätt än bara information i text.

För att underlätta för användaren att hitta den information som hen är ute efter har webbplatsen fått en luftig design i form av block där alla sektioner hamnar under varandra. Blockdesignen gör även att webbplatsen fungerar väldigt bra i alla enheter, mobil såsom surfplatta.

Utveckling

Fokus för utvecklingen har legat på att bygga ett system som ska vara så enkelt som möjligt att administrera. Designen innehåller rätt många olika element som ska vara redigerbara för administratören. Detta skapar alltid utmaningar om man vill ha ett administratörsflöde som är hanterbart. Det finns lite olika vägar att gå för att lösa detta problem och i detta projekt valde vi att gå på spåret med sidbaserade anpassade fält.

Förutom utmaningen att skapa enkelthet i administrationen är det alltid lite mer att ta hänsyn till när man integrerar mot andra system. I detta fallet främst donations-systemet och MyNewsdesk som båda är iFrames som ska integreras på ett sätt som inte bryter känslan av att man är på Hand in Hands site.

 

Team

Vill du veta mer?

Maila oss: sales@bazooka.se Ring oss: 08 - 31 70 00