Webbplats/Atomic Design/STYLE GUIDE

Göteborgs Stad

Göteborgs Stad samordnar sina teknik- och webbuppdrag inom en organisation som heter Intraservice. De har på senare tid fått en mer omfattande roll med fler och större uppdrag vilket gjort att det blivit allt viktigare att kunna följa, uppdatera och vidareutveckla såväl gamla som nya lösningar.

Genom åren har flera olika utvecklare kommit och gått samtidigt som det har saknats ett gemensamt och strategiskt arbetssätt, vilket lett till att stadens olika webbtjänster drabbats av växtvärk. Göteborgs Stad insåg att det var dags att komma fram till en bättre och mer långsiktig lösning där såväl förvaltning blir mer förutsägbar och tillförlitlig och nyutveckling passar in i helheten samt kan växa i den gemensamma plattformen.

NetRelations har under flera år haft ett samlat gränssnittsansvar för Göteborgs Stads webb- och e-tjänster som finns på den externa huvudkanalen goteborg.se samt stadens intranät. Vi arbetar både med förvaltning och nyutveckling av webbtjänster samt med kontinuerlig kvalitetssäkring och anpassning av gränssnittskoden utifrån ett tillgänglighetsperspektiv. 

Då vi arbetat med Göteborgs Stads digitala kanaler i många år fick vi glädjande också förtroendet att tillsammans med en UX-designer och en systemutvecklare från Göteborgs Stad utveckla en strategi för ett framtidssäkert gränssnitt som ska hålla över tid. Våra gränssnittsutvecklare bidrog med interaktionsdesign, gränssnittsarkitektur och strategisk rådgivning i projektet.

För att ta fram koncept och processer för vårt centrala ramverk behövde vi en partner med djupa kunskaper i gränssnittsutveckling och med tidigare erfarenhet av att jobba med styleguides och komponentbaserad GUI-arkitektur.

Mikael Sandin Product Manager och UX Designer, Göteborgs Stad Intraservice

Atomic Design blir ledstjärna för en ny Styleguide

I november 2014 inleddes arbetet med det som skulle bli lösningen på Göteborgs Stads gränssnittsutmaningar.

Inspirerade av Atomic design och Ian Feathers ”A maintainable style guide” påbörjade vårt team arbetet med att ta fram en prototyp på en komponentbaserad gränssnittsarkitektur för Göteborgs Stad. Vi tog fram ett objektorienterat gränssnitt med återanvändbara och fristående komponenter. Koden för dessa lagras på ett centralt ställe – ett komponentbibliotek – vilket innebär att uppdateringar kan ske på ett och samma ställe. Det innebär också att varje tjänst som använder sig av en komponent alltid kommer att ha den allra senaste koden.

Den här typen av lösning medför att Göteborgs Stad kan nyttja komponenter mellan alla sina kanaler - externwebb, intranät och e-tjänster.

Att behöva underhålla olika gränssnittslösningar för samma behov är slöseri med resurser som vi istället vill använda för att öka kvalitén i våra leveranser.

Mikael Sandin Product Manager och UX Designer, Göteborgs Stad Intraservice

Rent praktiskt möjliggör detta arbetssätt att de verksamheter inom Göteborgs Stad som vill bygga nya webbtjänster nu kan dra nytta av de ”legobitar” som finns vilket innebär minskad arbetsinsats och gränssnittsutveckling i ett projekt.

Gemensamma nyttor i komponenterna arbetas fram löpande vilket förenklar underhållet avsevärt och kommer alla webbplatser tillgodo. 

Resultatet blev ett plattformsoberoende komponentbibliotek som har dokumenterats och visas nu upp i en publik Style guide. Eftersom även denna Style guide hämtar sin kod från samma komponentbibliotek så är också den alltid uppdaterad. Det blir med andra ord en mer modern och dynamisk grafisk profil.

En pilot av Style guiden lanserades veckan efter midsommar och tanken är att ca 1.500 planerade mikrosajter kommer att byggas upp av de komponenter som finns i ramverket under hösten och vintern. Visionen och planen är sedan att löpande involvera ännu fler av Göteborgs Stads webbtjänster i det här tänket. Initialt innebär det en stor satsning från Göteborgs Stads sida, men över tid kommer nyttorna med gränssnittsramverket att bidra med positiva effekter både avseende kostnads- och tidseffektivitet.