UX/UI-design · Byggföretagen · Senior UX/UI-design och designsystem
Så förenklade vi rapporteringen för flera företag och kollektivavtal
Som senior UX/UI-designer ledde jag designen av Lösen, en rapporteringstjänst för arbetad tid och lön som ersatte flera separata system. Jag tog den från research och workshops till användartestat UI för desktop och mobil, med ett designsystem bakom. Den fungerar för flera företag, kollektivavtal och användargrupper, utan att kompromissa med verksamhetens regler.
- Min roll
- Senior UX/UI-designer
- År
- 2025
- Bransch
- Branschorganisation
- Företag
- Byggföretagen
- Omfattning
- 3 månader
- Plattform
- Webb, desktop och mobil
- Verktyg
- Figma
Kort version
Problemet
Rapporteringen var uppdelad på flera system med överlappande funktioner. Den som rapporterade för flera företag och avtal visste inte var eller hur det skulle göras.
Vad jag gjorde
Jag ledde UX-designen från discovery till färdig lösning: research, workshops, koncept, UX/UI-design, användartester och ett designsystem för tjänsten.
Vad det gav
Ett gemensamt rapporteringsflöde i stället för flera system, tydligare vägledning och en grund för mer självservice. Sedan lanseringen har återkopplingen på användarflödena varit mycket positiv.
Det här gjorde jag som senior UX/UI-designer
Research och workshops
Intervjuer, workshops och kartläggning av användarresan med administratörer och chefer från medlemsorganisationerna. De visade att användarna tänker i uppgifter, inte system, så tjänsten organiserades efter vad de ska rapportera.
Struktur byggd kring uppgifter
En tjänst organiserad efter vad användaren ska rapportera, inte efter system eller kollektivavtal.
Interaktionsdesign för komplexa regler
Ett flöde steg för steg där regler och val visas först när de blir relevanta.
UI-design för desktop och mobil
Färdiga skärmar i Figma för hela rapporteringsflödet, med tabellrader som blir kort i mobilen.
Designsystem
Färg, en typskala i Open Sans, knappar, inmatningsfält med alla sina lägen, valkort och ikoner.
Användartester och arbete med utvecklarna
Jag testade flödena med användare och arbetade nära verksamheten och utvecklarna, så att lösningen höll i praktiken.
Problemet
Rapporteringen av tid och lön var uppdelad på flera system med överlappande funktioner, olika gränssnitt och skilda arbetssätt. För användare som rapporterade för flera företag och kollektivavtal var det svårt att förstå var och hur olika uppgifter skulle hanteras.
Bristen på överblick skapade osäkerhet, ökade risken för fel och ledde till onödiga supportärenden. Användarna blev beroende av instruktioner och manuell hjälp, vilket gjorde rapporteringen tidskrävande och höjde tröskeln för självservice.
Designutmaningen
Den största utmaningen var inte att förenkla verksamheten, utan att göra den begriplig.
Lösningen behövde stödja flera företag, kollektivavtal och olika användargrupper i samma tjänst. Designen skulle hjälpa ovana användare genom komplexa arbetsflöden och samtidigt låta vana användare arbeta snabbt och effektivt.
Målet var att minska den upplevda komplexiteten, utan att förenkla bort verksamhetens regler och behov.
Viktiga designbeslut
- Vi organiserade tjänsten kring användarnas uppgifterIntervjuerna visade att användarna tänkte utifrån vad de skulle rapportera, inte utifrån vilket system eller kollektivavtal varje anställd hörde till. Därför organiserades tjänsten kring uppgifter.
- Vi visade komplex information steg för stegKomplexa regler och val visades först när de blev relevanta. Det minskade den kognitiva belastningen och gjorde flödet lättare att följa.
- Vi skapade ett gemensamt gränssnittI stället för flera olika rapporteringsflöden designade vi ett enhetligt gränssnitt som fungerade för olika företag och avtal.
Mitt bidrag i teamet
Min roll
Jag ledde UX-designen från discovery till färdig lösning. Arbetet omfattade research, facilitering av workshops, konceptutveckling, UX/UI-design, användartester och ett nära samarbete med verksamheten och utvecklarna så att lösningen fungerade i praktiken.
Genom workshops, kartläggning av användarresan, prototyper och användartester identifierade jag de kritiska momenten och förenklade flödena.
Teamet
Administrativa chefer, tekniska chefer och administratörer från olika medlemsorganisationer, liksom systemutvecklarna, var med och formade lösningen.
Lösningen och användarflödena
Lösningen, som heter Lösen, blev ett samlat och mer intuitivt gränssnitt där användarna kan rapportera tid och lön, byta mellan företag, göra rättelser och hitta relevant stöd direkt i tjänsten. Tydligare vägledning, återkoppling och felhantering hjälper användarna att förstå vad de ska göra och att rapportera rätt från början.
Rapportera manuellt, steg för steg
Huvudflödet följer uppgiften: välj hur du vill rapportera, ange period, lägg till de anställda och skicka in rapporten. Alla skärmar kommer från Figma-filen och är på svenska. Klicka på en bild för att förstora den.
Andra flöden i tjänsten
Rapportera med fil
Ladda upp en fil från lönesystemet. Filen valideras, och användaren får ett tydligt meddelande om den inte gick att läsa.
Ändra en inskickad rapport
En inskickad rapport kan öppnas, justeras och skickas in igen, så att användarna själva kan rätta misstag.
Företag, rapporter och support
Mina företag, inskickade rapporter och support nås från navigeringen, med guider direkt i tjänsten.
Samma flöde i mobilen
Designprinciper
- Gör komplexiteten begriplig.
- Visa rätt information vid rätt tillfälle.
- Stöd både nya och vana användare.
- Skapa enhetliga arbetsflöden.
- Minska behovet av support, genom att låta användarna göra ändringar själva och genom tydlig vägledning.
Tillgänglighet
För att tjänsten skulle fungera för användare med olika digital vana arbetade jag med:
- En tydlig informationshierarki.
- Enhetlig navigering.
- Begripligt språk.
- Hög kontrast.
- Tydliga felmeddelanden.
- Responsiv design.
Designsystem
Ett gemensamt gränssnitt för flera företag och avtal behöver gemensamma delar. Jag byggde tjänsten utifrån ett litet designsystem i Figma, så att alla flöden använder samma färger, typografi, formulärfält och knappar.
Färg
- NavigeringMörk blågrön
#344951 - PrimärKnappar och aktiva lägen
#61D29B - Primär tonChips och hover
#E6F7F1 - InfoAccordions och vägledning
#DEEEF5 - YtaPaneler
#F4F9FC - TextPå vitt
#1A1A1A - KlartKlart och giltigt
#2E7D32
Typografi
Open Sans i en kort skala: en rubrikstorlek, en underrubrik, en brödtextstorlek och en mindre etikett.
- Rapportera arbetad tid och utbetald lön
- Rapportera arbetad tid och utbetald lön
- Rapportera arbetad tid och utbetald lön
- Rapportera arbetad tid och utbetald lön
Komponenter
Dialogrutor finns i tre storlekar, och accordions och sammanfattningsblock återanvänds för inskickade rapporter. Gränssnittet följer Material UI:s komponentmönster.
Resultatet
Lösen har lanserats sedan dess. Jag hade lämnat uppdraget då, men återkopplingen jag har fått på användarflödena är mycket positiv: det känns enklare att rapportera nu.
För användarna
- Ett gemensamt rapporteringsflöde.
- Tydligare vägledning.
- Mindre osäkerhet.
- Färre manuella moment.
För verksamheten
- En gemensam lösning i stället för flera system.
- Minskad komplexitet.
- En grund för mer självservice.
För teamet
- En skalbar design.
- Ett nytt gränssnitt utan större förändringar i den befintliga tekniska plattformen.
Vad jag tar med mig
Projektet lärde mig att komplexitet inte alltid går att ta bort, men att den går att organisera. Genom att utgå från användarnas uppgifter och inte från verksamhetens struktur kunde vi skapa en lösning som både stödde reglerna och förenklade vardagen för användarna.