Fasab
- Roll:
- Senior UX Designer
- År:
- 2024–pågående
- Bransch:
- Fackförbund och a-kassor
Sex webbplatser för fackförbund och a-kassor med gemensam kodbas – och nya Mina sidor för det inloggade läget
Bakgrund
FASAB är ett samarbete mellan sex fackförbund och a-kassor som delar på IT-plattform, kodbas och CMS (Optimizely) för att effektivisera sin verksamhet och minska kostnader.
I samband med en större uppgradering av Optimizely fattades beslut om att inte bara uppgradera, utan bygga helt nya webbplatser – med ny design, struktur och användarupplevelse.
Uppdraget bestod av två projekt: de publika webbplatserna, och det inloggade läget – Mina sidor, där medlemmar, förtroendevalda och arbetsgivare administrerar fackliga ärenden.
Utmaningen låg i att ta fram en gemensam lösning för sex olika kunder, med olika behov, redaktionella förutsättningar och målgrupper – men som ändå delade på samma funktioner och kodbas.
Min roll och ansvar
Jag ansvarade för att omsätta både användarnas och de interna kundernas behov till en gemensam, flexibel lösning som kunde anpassas till sex olika webbplatser – utan att skapa onödig komplexitet i kodbasen.
Min roll var att:
- Samla in och kartlägga behov från sex olika förbund och a-kassor
- Identifiera gemensamma krav och behov av anpassning
- Ta fram wireframes och övergripande UX-koncept
- Strukturera funktioner och flöden för att passa olika innehållsstrategier
- Samarbeta med Art Director kring UI och tonalitet
- Arbeta tätt med utvecklingsteamet och produktägare för att förankra lösningar
Genom hela processen fungerade jag som en brygga mellan användarperspektiv, redaktionella behov och teknisk realitet.
Process
Vi inledde projektet med en Sprint Zero där vi tillsammans med FASAB och förbunden arbetade fram en målstyrning med fokus på:
- Vision, syfte och effektmål
- Mätetal kopplade till användarbeteende och konvertering
- Identifiering av primära beteendegrupper och deras behov
Underlaget togs fram genom en kombination av kvalitativa intervjuer med användare och kvantitativ data från befintliga webbplatser, vilket gav oss en tydlig bild av nuläget och vad som behövde förbättras.
Utifrån detta formades en backlog i Jira, där vi prioriterade arbetsordningen tillsammans med kunden.
Varje vecka presenterade vi våra wireframes för kundgruppen i gemensamma möten, där vi först tog beslut kring funktionalitet. Därefter gick vi vidare till designfasen i Figma, där vi utgick från ett centralt designsystem och använde design tokens för att skapa automatiska visuella teman för respektive webbplats.
Feedback från kunderna samlades in direkt i Figma via kommentarer, vilket möjliggjorde ett effektivt och transparent samarbete.
Målstyrning
Innan designarbetet påbörjades genomförde vi en Sprint Zero med fokus på att skapa en gemensam målbild för projektet. Detta var särskilt viktigt eftersom vi arbetade med sex olika organisationer med olika behov men en gemensam plattform.
Vi tog fram:
- Vision och syfte för den nya webbplattformen
- Effektmål och mätetal kopplade till t.ex. kontaktfrekvens, självbetjäning och redaktionell hantering
- Primära beteendegrupper och deras behov utifrån intervjuer och webbstatistik
Detta arbete låg till grund för backloggen i Jira och hjälpte oss fatta gemensamma beslut kring både funktionalitet och innehållsstruktur.
Designsystem
För att hålla ihop designen mellan sex olika webbplatser använde vi ett gemensamt designsystem i Figma. Alla komponenter byggdes med stöd för design tokens, så att färger, typsnitt och uttryck kunde anpassas per kund – utan att ändra strukturen.
Vi jobbade med:
- Återanvändbara, responsiva komponenter
- Varianter för olika innehållstyper
- Dokumentation direkt i Figma för utveckling och content
Resultatet blev en flexibel men sammanhållen design som förenklade samarbetet i teamet och snabbade upp utvecklingen.
Understartsidor
Understartsidorna fyllde en dubbel funktion: att vara varumärkesbyggande och samtidigt konverterande.
De hjälper användaren snabbt hitta rätt ingång (t.ex. medlemskap, rådgivning, utbildning) och lyfter fram förbundets identitet genom bildspråk, tonalitet och struktur.
Vi använde denna vy som en design-pathfinder i projektet – en första testyta där vi kunde utvärdera komponenter, teman och innehållsstruktur tillsammans med kunderna.
Inträdesformulär
Vi började med att ta fram alla flöden i wireframes med fokus på låg kognitiv belastning och tydlig väg mot konvertering. Vi använde etablerade konverteringsprinciper som visuell enkelhet, gruppering och tydliga call to actions.
Formuläret testades och justerades för att passa olika målgrupper hos förbunden, och implementerades med möjlighet till designmässig anpassning per varumärke via design tokens.
Resultat och lärdomar
Resultat
- Ökad konverteringsgrad i inträdesformulären
- Förbättrad användarupplevelse – förbunden upplevs som mer moderna och tillgängliga
- En mer strukturerad och enhetlig webbplattform för samtliga organisationer
Lärdomar
- Vikten av att balansera sex olika kunders behov och prioriteringar
- Hur avgörande det är att alla parter får komma till tals i ett gemensamt projekt
- Att låta användarens faktiska behov styra besluten – även när de går emot interna önskemål