VA SYD.

Mina sidor för app

Mockup of the envisioned start screen of the VA SYD app.

KORT OM PROJEKTET

VA SYD är ett av Sveriges största regionala vatten- och avfallsbolag. Konceptet; en vision där VA SYD:s app fungerar som en personlig servicehub, där vatten- och avfallstjänster blir enkla att hantera direkt i mobilen – allt samlat på ett ställe.

Som en del av ett UX-designteam säkerställde vi även att VA SYDs kritiska samhällstjänst uppfyllde alla lagstadgade tillgänglighetskrav.

Detta projekt slutfördes som det avslutande projektet av mitt UX-designprogram i samarbete med VA SYD.


KUND

VA SYD, ett av Sveriges största regionala vatten- och avfallsbolag, som betjänar sydvästra Skåne.

PROJEKT

VA SYD-appen – Integration av e-tjänster

KONTEXT

Examensarbete UX Design Program

SEKTOR

Offentliga tjänster / Kommunala tjänster

UTMANING

Den befintliga appen levererade bara aviseringar medan all självbetjäning omdirigerade användare till en webbportal, vilket störde mobilupplevelsen.

MIN ROLL

UX/UI-designer och tillgänglighetsansvarig

FOKUS

Mobil självbetjäning · informationsarkitektur · tillgänglighet · användbarhetstestning

TIDPLAN

5 veckor

VERKTYG

Figma · Figjam · Miro · Adobe Creative Suite · WCAG-utvärderingsverktyg

MIN ROLL
UX-designer
  • Ledde research synthesis och definierade kärnproblemet.
  • Utformade IA-processen och användarflödet för onboarding och återställning
  • Skapade wireframes och interaktiva prototyper.
  • Konverterade användbarhetsinsikter till iterativa designförbättringar.
UI/Visuell designer
  • Varumärkes- och logotypdesign
  • Definierade visuell hierarki och tillgänglighetsprinciper
  • Designade tydlig, läsbar grid och layout i Figma
  • Förfinade interaktionsfeedback och microcopy
  • Säkerställde att visuella element stödde användbarhet och tillgänglighet

Utmaningen

VA SYD förser södra Sveriges vatten och avlopp. Om kunder vill hantera sitt abonnemang eller göra en felanmälan måste de lämna appen och logga in på webbportalen Mina sidor. Den fragmenterade upplevelsen skapar friktion och gör appen begränsad.

Projektet undersökte om VA SYDs e-tjänster kan byggas in i en mobil app, och om kunder vill använda tjänsterna direkt i appen istället.

Målet var att ta fram en mobil lösning där användare kan få information, sköta sina ärenden själva och få relevanta uppdateringar; allt samlat på ett och samma ställe.

Slide som visar den första skissen och den färdiga prototypen av appens hemskärm.

Research

För att ringa in grundproblemet använde vi intervjuer, jämförelser med andra tjänster och användarundersökningar. Vi gjorde också en SWOT-analys för att se hur liknande appar presenterar information och självbetjäning.

Researchen undersökte hur kunder interagerar med kommunala serviceplattformar och vad de förväntar sig när de hanterar tjänster digitalt.

Insikter från denna fas lade grunden för personas, problemformulering och konceptutveckling.

Förstå användarna

Vår research visade två huvudtyper av användare av VA SYD:s tjänster. För att förstå deras behov och beteenden tog vi fram personas som visar hur de använder tjänsten och vad de förväntar sig.

Viktiga insikter

Genom vår research framträdde tre huvudmönster:

  • Användare interagerar sällan med tjänsten om inte något går fel.
  • När problem uppstår förväntar sig användare snabb tillgång till tydlig information.
  • För mycket information överväldigar snabbt användare i tjänsteappar.

Primär insikt: problemet är inte brist på funktionalitet – det är fragmentering. Möjligheten var tydlig: göra appen till en fullskalig e-tjänst, inte bara en kanal för aviseringar.

How Might We

Utifrån vår research omformulerade vi problemet till designmöjligheter genom HMW-frågor:

  • Hur kan vi göra det enklare för kunder att utföra tjänster digitalt?
  • Hur kan vi leverera relevant information till olika kundgrupper?
  • Hur kan vi omvandla VA SYDs servicedata till meningsfullt värde för användarna?
A person sorting cardboard boxes in the kitchen.

Idégenerering

För att utforska potentiella lösningar använde vi olika tekniker för idégenerering, som t ex. omvänd brainstorming.

Istället för att fråga hur vi kan förbättra appen utforskade vi vad som får användare att undvika den. Det hjälpte oss att identifiera hinder som otydlig navigering, brist på personlig relevans och bristande tillgänglighet.

Dessa insikter styrde designprioritering:

  • tillgängliga designmönster
  • personalisering
  • förenklad navigation
  • tydligare ingångar till e-tjänster

Koncept

Det slutliga konceptet omformade appen till ett personligt servicecenter.

I stället för statisk fakta visar startskärmen anpassningsbara widgetar med relevant info, till exempel:

  • nästa avfallshämtning
  • nuvarande vattenförbrukning
  • obetalda fakturor
  • operativa varningar

Denna metod gör det möjligt för användare att skräddarsy gränssnittet efter sina behov samtidigt som UI:t hålls lättläst och överskådligt. Konceptet integrerar VA SYDs Mina sidor direkt i appen, vilket gör det möjligt för användare att utföra uppgifter som:

  • granska statistik
  • sköta prenumeration
  • skicka in serviceförfrågningar
  • göra felanmälningar
Mockup mobile phone showing the splash screen for the concept app for VA Syd.

Designbeslut

Besluten styrde hi-fi-prototypens utseende och struktur, från detaljer till informationshierarki, med fokus på tydlighet och tillgänglighet inom ramen för VA SYDs identitet.

Designbesluten inkluderade:

  • använda organisationens befintliga typsnitt för att bibehålla igenkänning
  • förfina färgpaletten för digital läsbarhet
  • införliva illustrationer för att skapa en vänligare visuell ton

Designen betonar tydlighet och lugn, i linje med samhällsviktiga tjänster.

Tillgänglighet

VA SYD är ett allmännyttigt företag och måste följa DOS-lagen, med krav på digital tillgänglighet enligt WCAG 2.1/2.2. Tillgänglighet var därför en självklar princip i designprocessen, inte en efterkonstruktion. Lösningen anpassades till WCAG 2.2 inom områden som:

  • färgkontrast
  • tangentbordsnavigering
  • felmeddelande
  • formulärvalidering
  • visuellt fokus

Olika färgkombinationer testades gentemot tillgänglighet. Vi gjorde också simuleringar för att säkerställa läsbarhet för personer med nedsatt färgseende.

Image showing a color contrast check screen.
Urklipp från färgkontrastkontroll.

Prototyp- och användbarhetstester

Designprocessen inkluderade två omgångar av användbarhetstester. Första omgången använde en pappersprototyp, vilket gjorde det möjligt att snabbt testa navigation och informationsstruktur.

Deltagarna ombads att slutföra uppgifter som:

  • anmälan av adressändring
  • hitta statistik för e-service
  • navigera i kontoinställningar

Den andra omgången testade en hi-fi interaktiv prototyp på distans med modererade sessioner.

Inkluderade mätvärden:

  • tid för slutförande av uppgiften
  • error-frekvens
  • nöjdhetsbetyg

Varje session varade cirka 20 minuter och använde "Tänk högt"-metodik för att fånga användarnas resonemang.

Utdrag från sentimentanalys

First quote and metrics from the user testing sessions
Second quote and metrics from the user testing sessions

Resultat

Testning visade på flera återkommande mönster:

  • Användarna förstod snabbt den övergripande navigeringen och strukturen.
  • Anpassningsbara widgets uppskattades särskilt och uppmuntrade till utforskande.
  • Deltagarna bekräftade också att integrationen av e-tjänster i appen markant förbättrade upplevelsen jämfört med att använda webbportalen.
  • En tydlig insikt var att användarna förväntade sig att statistik och serviceinfo skulle ligga tillsammans med abonnemang, inte uppdelat.

Iterationer & justeringar

Baserat på testresultat justerade vi ett antal områden:

  • flytt av statistik till under Mina sidor
  • förenkla service terminologi
  • förbättra feedback för formulär
  • Navigeringsetiketter justerades för att bättre matcha användarnas sätt att tänka och minska förvirring kring kategorier.

Resultat & påverkan

Det redesignade konceptet visar hur VA SYDs app skulle kunna utvecklas från ett aviseringsverktyg till ett heltäckande gränssnitt för kundresan.

Viktiga förbättringar inkluderar:

  • en enhetlig plattform för information och tjänster
  • minskad friktion vid slutförande av uppgifter
  • tydligare informationshierarki
  • förbättrad tillgänglighet

Konceptet stöder även framtida expansion genom att tillåta att nya tjänster läggs till via modulära widgetar och strukturerad navigering.

The Takeaway

Projektet visade hur viktigt det är att utgå från hur människor faktiskt beter sig, inte från hur organisationen är uppbyggd. Det nya gränssnittet är tillgänglighetsanpassat och innehållet förenklat för att fungera för alla, oavsett förmåga. Det minskar trycket på kundtjänst och sparar pengar åt organisationen.

Kommunala tjänster märks ofta först när något går fel. Då måste upplevelsen vara direkt, tydlig och pålitlig. Genom fokus på personlig relevans, tillgänglighet och enkel åtkomst blir appen mer användarcentrerad.