Kandidatarbete – Kontextuell LLM-assistent för gränssnitt
Design och utvärdering av en datagrundad LLM-assistent för att förklara komplexa finansiella arbetsflöden.
Page Guide var mitt kandidatarbete i medieteknik vid KTH. Projektet undersökte hur en LLM-baserad assistent kan hjälpa människor att förstå täta finansiella gränssnitt genom att förklara den del av gränssnittet som de tittar på. Arbetet genomfördes med Mrava.ai som extern företagspartner efter att jag själv tagit kontakt med bolaget och ordnat samarbetet för kandidatarbetet.
Kandidatarbetets sammanhang
Den fullständiga akademiska titeln var Design and Evaluation of an LLM-Based Contextual UI Explanation Assistant for a Financial Operations Platform. Jag designade, implementerade och utvärderade Page Guide i en befintlig plattform för finansiella arbetsflöden; jag byggde eller ägde inte den bredare plattformen.
Problemet: att förstå täta finansiella gränssnitt
Företagssystem kan visa specialiserade begrepp, statusar och arbetsflöden utan att deras praktiska innebörd blir tydlig. I en dashboard för leverantörsfakturor kan en användare se en blockerad attest, en misslyckad faktura eller en avstämningsstatus utan att förstå varför det spelar roll eller vad nästa steg är. Page Guide undersökte om kontextuell hjälp kunde göra just det ögonblicket enklare att förstå.
Page Guide: kontextuell utforskning av gränssnittet
Prototypen använde en liten utforskningsbot som användaren kunde dra över en del av gränssnittet. Den valda kontexten skickades med en begäran om förklaring. Page Guide beskrev sedan vad det valda området betydde, varför det var viktigt och möjliga nästa steg. Omfattningen var medvetet avgränsad till dashboarden för leverantörsfakturor, inte stöd för hela produkten.
Den dragbaserade prototypen fångade den del av fakturagränssnittet som användaren ville få förklarad.
Från en snabb MVP till en grundad arkitektur
Den första fungerande versionen återanvände ett befintligt strömmande LLM-flöde och byggde stora delar av prompten på frontend. Det gjorde en snabb MVP möjlig, men förklaringarna kunde stanna vid ytnivån i gränssnittet. Jag flyttade därför promptkonstruktionen till backend och införde ett strukturerat flöde:
- UI-interaktion och vald kontext blev en strukturerad frontendbegäran.
- Backend byggde prompten och berikade den med verifierad arbetsflödesinformation där den fanns tillgänglig.
- LLM:en genererade förklaringen, som strömmades tillbaka till gränssnittet via Server-Sent Events.
Enkelt uttryckt behöll systemet deterministisk plattformsdata som sanningskälla. LLM:ens uppgift var främst att göra kontexten begriplig i språk, i stället för att gissa hur ett finansiellt arbetsflöde fungerade.
Systemdata som sanningskälla
Deterministiskt backendstöd implementerades för ett litet antal arbetsflödesetiketter, särskilt Blocked Approvals och Failed Invoices. I dessa fall kunde Page Guide använda verifierade antal, arbetsflödesstatus, ärendekontext och möjlig information om nästa steg innan språk genererades för användaren.
Stödet täckte inte varje förklaring. Andra delar av gränssnittet förlitade sig mer på kontextuell prompting, vilket gjorde prototypens gräns tydlig: grundade förklaringar var som starkast när backend kunde tillföra specifik systemkontext.
Användarutvärdering
Jag genomförde en formativ utvärdering med åtta deltagare, där de flesta hade begränsad eller ingen erfarenhet av ERP-system eller professionell finansmjukvara. Studien kombinerade observation under användning, frågeformulär efter testet, Likert-skalor och öppna svar. Resultaten kommer från ett litet formativt urval och är inte statistiskt generaliserbara.
- 8 deltagare i utvärderingen
- 4,25 / 5 samlat betyg för Page Guide
- 4,88 / 5 förklaringarnas relevans
- 4,50 / 5 stöd för att förstå möjliga nästa steg
- 4,50 / 5 användbarhet i komplexa affärs- eller finanssystem
- 4,38 / 5 trovärdighet
- 3,00 / 5 initial förståelse av dashboarden före Page Guide
Vad utvärderingen visade
Den tydligaste riktningen var att dataspecifika förklaringar upplevdes som mer användbara än generiska. Blocked Approvals var särskilt hjälpsamt när Page Guide kunde förklara vad som var blockerat, varför och vad som kunde hända härnäst. Det stödjer en avgränsad designprincip från prototypen: LLM-stöd i komplex verksamhetsmjukvara blir mer användbart när språket grundas i verifierad systemkontext.
Begränsningar och vad jag skulle förbättra härnäst
Utvärderingen validerade inte bara idén; den visade också exakt var interaktionsmodellen behövde förbättras. Flera förstagångsanvändare förstod inte omedelbart drag-and-drop, några förväntade sig en vanlig klick- eller chattinteraktion och steget för att generera en förklaring var otydligt. Deltagarna efterfrågade också tydligare återkoppling, följdfrågor, kortare förklaringar och mer handlingsinriktad vägledning.
Prototypen var begränsad till dashboarden för leverantörsfakturor, endast ett litet antal etiketter hade deterministisk berikning från backend och alla som besvarade frågeformuläret var studenter snarare än yrkesverksamma inom leverantörsreskontra. Begränsningarna visar nästa steg för forskning och produktutveckling, snarare än att minska prototypens värde.
Teknisk översikt
- Frontendprototyp i React och TypeScript integrerad i en befintlig plattform
- Integration med Python-baserad backendtjänst
- Insamling av kontextuellt UI-tillstånd från den dragbaserade interaktionen
- LLM-promptorkestrering med strukturerad kontext mellan frontend och backend
- Deterministisk berikning från backend för utvalda arbetsflödesetiketter
- Server-Sent Events (SSE) för strömmande förklaringar i gränssnittet
- Autentiserade API:er i den befintliga plattformen för verifierad arbetsflödeskontext