”Metamatrix är lösningsfokuserade, kunniga och intresserade! Så himla nöjd med vårt samarbete och ser fram emot vårt fortsatta arbete ihop”, säger Binaji Marouf, webbansvarig och kommunikatör på NBV. 

Bakgrund och vår historia med NBV

Nykterhetsrörelsens bildningsverksamhet, NBV, är landets äldsta studieförbund med 120 års erfarenhet av folkbildning. Deras verksamhet bygger på fritt och frivilligt folkbildningsarbete och vilar på idéerna om nykterhet, demokrati och bildning.

Metamatrix och NBV inledde sitt samarbete i början av 2016.

Utmaningar och mål

Målet med webbplatsen är att bidra till att NBV växer genom att locka till sig fler cirkeldeltagare och öka antal personer som vill starta studiecirklar. Ett annat mål är att minska NBVs interna kostnader. Strategin för att uppnå detta är att tillhandahålla så pass bra material och anpassa konceptet efter de personer som idag är eller vill bli cirkelledare – så att fler blir intresserade av att starta studiecirkel under NBVs flagg.

En utmaning med projektet var att ta fram ett koncept som bidrar till att NBV uppfattas som en organisation utåt, samtidigt som webbplatsen passar den interna organisationen med dess 14 regionala avdelningar.

Arbetssätt och metod

Fokusgrupper och webbanalys för att förstå användarnas behov

För att förstå användarnas behov analyserade vi webbstatistik och genomförde fokusgrupper med personer från medlemsorganisationerna, med cirkelledare och med deltagare i NBVs studiecirklar. Resultatet dokumenterades i form av personas, som är en bra metod för att skapa en lätthanterlig bild av användarnas behov som fler än bara projektgruppen förstår. Personas använde vi till exempel för ytterligare diskussioner i ledningsgruppen för att förklara hur det kommer sig att vi gjort de vägval vi gjort under projektet, men vi har även använt personas för att göra prioriteringar av funktionalitet. Personas gör det tydligt vem vi ska bygga webbplatsen för och vilka funktioner som är överflödiga på webbplatsen idag.

Användningstester av struktur och skissworkshop med projektgruppen

Parallellt arbetade vi fram en informationsstruktur som testades med hjälp av verktyget TreeJack på nätet. Vi arbetar gärna med användningstester när vi tar fram ett koncept eftersom det är ett sätt att ta reda på om konceptet motsvarar användarnas behov och att vi är på rätt väg mot lösningen.

Interaktionsdesignen tog vi fram genom att först visualisera användarnas viktigaste och mest prioriterade flöden på webbplatsen. Flödena blev utgångspunkt för en skissworkshop tillsammans med projektgruppen och ansvariga på NBVs kansli. En skissworkshop är ett kreativt och roligt sätt att få fram idéer och önskemål och ta reda på vilka förväntningar kunden har på den nya webben.

Vi kopplade ihop de bästa idéerna från skissworkshopen med vår kunskap kring användbarhet, standards och tillgänglighet för att skapa en responsiv enkel interaktionsdesign som mappar mot användarnas behov och organisationens vilja och önskemål.

En inspirerande och utvecklande webbplats som ska utstråla gemenskap och stolthet

Designprocessen inleddes med att vi gjorde så kallade stilplattor och sedan fortsatte med designskisser över de främsta sidtyper, som NBV löpande fick ge sin feedback på. Vi tog fram en digital designmanual i form av en stilguide, som är ett komplement till kundens grafiska profil men istället för att vara ett dokument är den gjord i HTML och CSS och öppnas alltså i en webbläsare. Stilguiden är responsiv och samlar webbplatsens alla grafiska element och sidtyper.

Utvecklingen i Episerver gjordes enligt den agila metodiken Scrum. Innan vi började utveckla sammanställdes en kravlista över de behov och önskemål som har kommit upp under de inledande faserna, som NBV fick prioritera i ”hög”, ”mellan” och ”låg”. Arbetet delades in i intervaller, ”sprintar”, där varje sprint avslutades med ett demo där Metamatrix presenterade vad som hade gjorts under sprinten.

Redaktörsutbildning och videotutorials för lokala redaktörer

Inför att NBV skulle börja lägga in innehåll på webbplatsen höll vi en redaktörsutbildning i Episerver. Vi tog även fram ett antal videotutorials som de lokala redaktörerna kan använda i sitt arbete med webbplatsen.

Resultat och utvärdering

  • Responsiv webbplats byggd i Episerver CMS 10 och ramverket Twitter Bootstrap.
  • Funktionalitet ”Hitta NBV nära mig” i syfte för besökaren att hitta närmaste NBV-avdelning. Funktionen använder sig av besökarens geografiska position, efter att besökaren har fått godkänna att platstjänster används i webbläsaren.

Efter avslutat projekt genomfördes en utvärdering, där NBV bland annat fick besvara en enkät. Resultatet på enkäten blev 6,9 poäng av 7 möjliga.

Kontakt

Webbplats www.nbv.se

Binaji Marouf, binaji.marouf@nbv.se, 073-372 63 02.  

Kontakta gärna vår kundansvariga Frida Hallén om du vill veta mer!