Linda Vennerlund

UX-processen:

Godkänna och attestera fakturor

Introduktion

Som UX-designer på Iver fick jag i uppdrag att förbättra processen för att godkänna och attestera fakturor. En av huvudutmaningarna var att arbeta med den befintliga backend-koden, vilket begränsade möjligheten till större förändringar. Min bakgrund som backend-utvecklare innebar dock att jag hade en djup insikt i kodbasen, vilket visade sig ovärderligt.

 

Användarundersökning och Design Thinking

För att säkerställa att min lösning mötte användarnas behov använde jag design thinking-metodologi. Tillsammans med produkt- och processägarna identifierade vi nio nyckelanvändare för intervjuer. Dessa samtal gav mig värdefulla insikter, då jag noggrant planerade dem och utvecklade en frågeguide. Målet var att förstå hur användarna navigerade det befintliga systemet, vilket erbjöd både ett enklare webbgränssnitt och ett mer avancerat WPF-baserat system.

 

Användarprofiler

Genom intervjuerna identifierade jag tre distinkta användarprofiler, eller "hattar":

 

  • Den sporadiske godkännaren, som hanterar ett fåtal fakturor av mindre belopp.
  • Den frekventa godkännaren, som handskas med många och ofta komplexa fakturor.
  • Attestanten, som kräver en process för att flagga avvikelser och prioritera större belopp.

 

Med dessa "hattar" kartlade jag användarnas behov och utmaningar, och identifierade vilken funktionalitet som kunde förbättra deras effektivitet i det nya gränssnittet.

Skisser blir prototyper

Jag började designprocessen med low-fidelity skisser för att visualisera viktiga funktioner för varje hatt. Dessa beskrevs i detalj för att fånga specifika användarflöden, såsom inloggning, notifikationer för fakturor, och själva godkännande/attesteringsprocessen. Skisserna baserades på den djupgående förståelsen för användares behov, framtagen genom intervjuerna.

Vi arrangerade en workshop med utvecklingsteamet för att inkorporera deras feedback och beakta tekniska begränsningar, vilket var avgörande för ett tekniskt och användarvänligt gränssnitt.

 

Efter att ha fastställt processer och funktionalitet, skapade jag high-fidelity mockups och prototyper i Adobe XD. Till en början fokuserade jag på grundläggande funktionalitet för sporadiska godkännare, som därefter utökades för de mer avancerade behoven hos de andra hattarna.

 

Testning och Feedback

Testning av prototyperna, med feedback från tidigare intervjuade användare, var en central del av designprocessen. Genom scenario-baserade tester identifierade jag snabbt eventuella problem och överflödig information, vilket möjliggjorde vidare justeringar.

 

Enligt användarna var en övergripande önskan en sammanfattande översiktssida för snabb hantering av mindre fakturor, samt lättillgängliga länkar för djupare utredningsinformation vid behov. Dessutom skulle det vara enkelt att se hanterade fakturor, redigeringar och deras aktuella status.

 

Nedan återfinns några prototyper av resultatet:

Dashboard

Översiktssida av faktura

Hanterade fakturor

Projekt: VIbe coding

Projekt: Visuell design

Linda Vennerlund

UX-processen:

Godkänna och attestera fakturor

Introduktion

Som UX-designer på Iver fick jag i uppdrag att förbättra processen för att godkänna och attestera fakturor. En av huvudutmaningarna var att arbeta med den befintliga backend-koden, vilket begränsade möjligheten till större förändringar. Min bakgrund som backend-utvecklare innebar dock att jag hade en djup insikt i kodbasen, vilket visade sig ovärderligt.

 

Användarundersökning och Design Thinking

För att säkerställa att min lösning mötte användarnas behov använde jag design thinking-metodologi. Tillsammans med produkt- och processägarna identifierade vi nio nyckelanvändare för intervjuer. Dessa samtal gav mig värdefulla insikter, då jag noggrant planerade dem och utvecklade en frågeguide. Målet var att förstå hur användarna navigerade det befintliga systemet, vilket erbjöd både ett enklare webbgränssnitt och ett mer avancerat WPF-baserat system.

 

Användarprofiler

Genom intervjuerna identifierade jag tre distinkta användarprofiler, eller "hattar":

 

  • Den sporadiske godkännaren, som hanterar ett fåtal fakturor av mindre belopp.
  • Den frekventa godkännaren, som handskas med många och ofta komplexa fakturor.
  • Attestanten, som kräver en process för att flagga avvikelser och prioritera större belopp.

 

Med dessa "hattar" kartlade jag användarnas behov och utmaningar, och identifierade vilken funktionalitet som kunde förbättra deras effektivitet i det nya gränssnittet.

Skisser blir prototyper

Jag började designprocessen med low-fidelity skisser för att visualisera viktiga funktioner för varje hatt. Dessa beskrevs i detalj för att fånga specifika användarflöden, såsom inloggning, notifikationer för fakturor, och själva godkännande/attesteringsprocessen. Skisserna baserades på den djupgående förståelsen för användares behov, framtagen genom intervjuerna.

Vi arrangerade en workshop med utvecklingsteamet för att inkorporera deras feedback och beakta tekniska begränsningar, vilket var avgörande för ett tekniskt och användarvänligt gränssnitt.

 

Efter att ha fastställt processer och funktionalitet, skapade jag high-fidelity mockups och prototyper i Adobe XD. Till en början fokuserade jag på grundläggande funktionalitet för sporadiska godkännare, som därefter utökades för de mer avancerade behoven hos de andra hattarna.

 

Testning och Feedback

Testning av prototyperna, med feedback från tidigare intervjuade användare, var en central del av designprocessen. Genom scenario-baserade tester identifierade jag snabbt eventuella problem och överflödig information, vilket möjliggjorde vidare justeringar.

 

Enligt användarna var en övergripande önskan en sammanfattande översiktssida för snabb hantering av mindre fakturor, samt lättillgängliga länkar för djupare utredningsinformation vid behov. Dessutom skulle det vara enkelt att se hanterade fakturor, redigeringar och deras aktuella status.

 

Nedan återfinns några prototyper av resultatet:

Dashboard

Översiktssida av faktura

Hanterade fakturor

Projekt: VIbe coding

Projekt: Visuell design

Linda Vennerlund

UX-processen:

Godkänna och attestera fakturor

Introduktion

Som UX-designer på Iver fick jag i uppdrag att förbättra processen för att godkänna och attestera fakturor. En av huvudutmaningarna var att arbeta med den befintliga backend-koden, vilket begränsade möjligheten till större förändringar. Min bakgrund som backend-utvecklare innebar dock att jag hade en djup insikt i kodbasen, vilket visade sig ovärderligt.

 

Användarundersökning och Design Thinking

För att säkerställa att min lösning mötte användarnas behov använde jag design thinking-metodologi. Tillsammans med produkt- och processägarna identifierade vi nio nyckelanvändare för intervjuer. Dessa samtal gav mig värdefulla insikter, då jag noggrant planerade dem och utvecklade en frågeguide. Målet var att förstå hur användarna navigerade det befintliga systemet, vilket erbjöd både ett enklare webbgränssnitt och ett mer avancerat WPF-baserat system.

 

Användarprofiler

Genom intervjuerna identifierade jag tre distinkta användarprofiler, eller "hattar":

 

  • Den sporadiske godkännaren, som hanterar ett fåtal fakturor av mindre belopp.
  • Den frekventa godkännaren, som handskas med många och ofta komplexa fakturor.
  • Attestanten, som kräver en process för att flagga avvikelser och prioritera större belopp.

 

Med dessa "hattar" kartlade jag användarnas behov och utmaningar, och identifierade vilken funktionalitet som kunde förbättra deras effektivitet i det nya gränssnittet.

Skisser blir prototyper

Jag började designprocessen med low-fidelity skisser för att visualisera viktiga funktioner för varje hatt. Dessa beskrevs i detalj för att fånga specifika användarflöden, såsom inloggning, notifikationer för fakturor, och själva godkännande/attesteringsprocessen. Skisserna baserades på den djupgående förståelsen för användares behov, framtagen genom intervjuerna.

Vi arrangerade en workshop med utvecklingsteamet för att inkorporera deras feedback och beakta tekniska begränsningar, vilket var avgörande för ett tekniskt och användarvänligt gränssnitt.

 

Efter att ha fastställt processer och funktionalitet, skapade jag high-fidelity mockups och prototyper i Adobe XD. Till en början fokuserade jag på grundläggande funktionalitet för sporadiska godkännare, som därefter utökades för de mer avancerade behoven hos de andra hattarna.

 

Testning och Feedback

Testning av prototyperna, med feedback från tidigare intervjuade användare, var en central del av designprocessen. Genom scenario-baserade tester identifierade jag snabbt eventuella problem och överflödig information, vilket möjliggjorde vidare justeringar.

 

Enligt användarna var en övergripande önskan en sammanfattande översiktssida för snabb hantering av mindre fakturor, samt lättillgängliga länkar för djupare utredningsinformation vid behov. Dessutom skulle det vara enkelt att se hanterade fakturor, redigeringar och deras aktuella status.

 

Nedan återfinns några prototyper av resultatet:

Dashboard

Översiktssida av faktura

Hanterade fakturor

Projekt: VIbe coding

Projekt: Visuell design