Frontmania

Hoe een LLM mijn UX-redesign versnelde: van analyse tot prototype

Onlangs werkte ik aan een project voor een klant die een krachtige SaaS-applicatie had ontwikkeld. De backend en de rekenmodellen waren solide, maar de makers wisten zelf ook dat de UX niet voldeed aan moderne standaarden. Hun wens was duidelijk: een gebruiksvriendelijke, visueel aantrekkelijke interface die de waarde van hun product beter tot zijn recht zou laten komen.

In dit artikel deel ik mijn ervaringen met het inzetten van Large Language Models (LLM’s) bij dit redesign. Niet als theoretische verkenning, maar als praktijkcase: hoe ik AI heb gebruikt om analyses te maken, persona’s en verbeterplannen uit te werken, en zelfs om prototypes in React te laten genereren. Deze aanpak leverde me niet alleen waardevolle inzichten op, maar ook weken aan tijdswinst in het project.

Ik bespreek wat dit in de praktijk opleverde, waar de grenzen van een LLM liggen, en hoe je als UX/UI-designer en/of frontend developer LLM’s kunt gebruiken als versneller en sparringpartner in je werk.

De context van het project

De applicatie waar ik mee aan de slag ging, was gebouwd door een team dat uitstekend thuis was in backendontwikkeling en data-analyse. Hun product rekende complexe modellen door en presenteerde de uitkomsten in dashboards en grafieken. Functioneel werkte het goed, maar de interface was verouderd en lastig te gebruiken. Grafieken waren moeilijk leesbaar, knoppen en navigatie voelden niet intuïtief aan, en de algehele look & feel sloot niet meer aan bij wat gebruikers vandaag de dag verwachten.

Mijn rol was om de interface te moderniseren en de gebruikerservaring te verbeteren. Daarbij lag de nadruk niet alleen op het visuele ontwerp, maar vooral op de bruikbaarheid: hoe kan een gebruiker sneller de juiste informatie vinden? Hoe maak je grafieken zo dat inzichten direct duidelijk worden? En hoe kun je interacties soepel en prettig laten aanvoelen, zelfs in een applicatie die zware berekeningen uitvoert?

Het was meteen duidelijk dat dit meer was dan een esthetische facelift. De uitdaging zat in het vertalen van technische complexiteit naar een toegankelijke ervaring. Precies daar bood het gebruik van een LLM een kans: als hulpmiddel om sneller tot de kern te komen en de juiste ontwerpkeuzes in kaart te brengen.

De eerste inzet van de LLM: analyseren en plannen

Om een redesign goed te kunnen onderbouwen, begin ik altijd met onderzoek: wie zijn de gebruikers, waar lopen ze tegenaan, en hoe verhoudt het product zich tot alternatieven in de markt? Normaal kost dit veel tijd: interviews, desk research, concurrentieanalyse. Voor dit project besloot ik te experimenteren met een LLM als versneller in dit proces.

Met behulp van Cursor heb ik eerst de bestaande webpagina’s van de applicatie verzameld en aan de LLM aangeboden. Voordat ik daarmee aan de slag ging, liet ik de LLM echter eerst de rol van een professionele UX/UI-designer definiëren. Die set van uitgangspunten en richtlijnen heb ik weggeschreven in een .cursorrules-bestand. Daarmee kon ik ervoor zorgen dat alle antwoorden van de LLM consistent vanuit dat perspectief zouden worden gegeven.

Vervolgens vroeg ik het model om de gebruiksvriendelijkheid van de huidige interface te analyseren. Het resultaat was verrassend nuttig: de LLM gaf direct feedback op inconsistenties in navigatie, onduidelijke labels en de beperkte leesbaarheid van de grafieken.

Daarna ging ik een stap verder: ik liet de LLM persona’s uitschrijven en de doelgroep in kaart brengen. Natuurlijk waren dit aannames – de LLM had geen toegang tot échte gebruikersdata – maar het gaf me wel een vertrekpunt. Vervolgens vroeg ik om een concurrentieanalyse en een overzicht van best practices binnen vergelijkbare SaaS-applicaties. Ook dit leverde een solide basis om over te praten met de klant.

Het belangrijkste voordeel: binnen enkele dagen had ik inzichten en een globaal verbeterplan dat normaal weken aan onderzoek had gekost. Dankzij de LLM kon ik sneller hypothesen formuleren en richting bepalen. Dat betekende niet dat alle output klakkeloos bruikbaar was, maar wel dat ik sneller tot de kern van de uitdaging kwam en concrete vervolgstappen kon zetten.

Van analyse naar prototype: bouwen met Lovable.dev

Na de analyses was het tijd om de ideeën tastbaar te maken. Waar veel UX-trajecten beginnen met wireframes of Figma-designs, koos ik in dit project voor een andere route: direct prototypen in code. De reden? Met Lovable.dev kon ik via een LLM niet alleen schermen en componenten laten schetsen, maar ook meteen een werkend prototype in React laten genereren. Dat leverde veel sneller iets op dat ik kon beoordelen, aanpassen en doorontwikkelen.

De workflow was eenvoudig maar krachtig: ik gaf instructies over welke pagina’s en componenten nodig waren, en Lovable.dev genereerde de basisstructuur in React. Omdat ik zelf frontend developer ben, kon ik de code beoordelen en direct herkennen wanneer er optimalisaties nodig waren. Soms vroeg ik de LLM om een refactor, soms paste ik zelf de code aan. Het resultaat was een iteratief proces waarin ik in korte tijd verschillende versies kon uitproberen.

Een voorbeeld: voor de grafieken in de applicatie liet ik de LLM verschillende varianten opzetten, waarbij ik meteen kon testen hoe leesbaarheid en interactie verbeterd konden worden. Waar een wireframe slechts een schets geeft, leverde dit traject meteen klikbare componenten op. Dat maakte het eenvoudiger om keuzes voor te leggen aan de klant en direct feedback te verzamelen.

Het grote voordeel van deze aanpak was de snelheid waarmee ideeën concreet werden. Binnen enkele dagen stond er een werkend prototype dat functioneerde als een soort interactieve wireframe. Het was geen productieklare code, maar wel een stevige basis om de UX-verbeteringen mee te verkennen én te valideren.

Waar de LLM tekortschiet: custom oplossingen nodig

Hoewel een LLM verrassend goed kan meedenken en prototypen, liep ik in dit project ook tegen duidelijke beperkingen aan. Een concreet voorbeeld was een tabelcomponent die ik nodig had, waarbij zowel de bovenste rij sticky in beeld moest blijven bij verticaal scrollen, als de eerste kolom bij horizontaal scrollen.

Op papier leek dit een eenvoudige opdracht, maar de LLM kreeg het niet voor elkaar om beide functionaliteiten te combineren. Het ene moment werkte de sticky header, het andere moment de sticky kolom, maar nooit tegelijk. Uiteindelijk heb ik zelf een custom oplossing geschreven die het probleem oploste. Pas toen die basis er lag, kon ik de LLM weer inzetten om het component verder uit te breiden, bijvoorbeeld met draggable items.

Deze ervaring liet goed zien waar de grens ligt: een LLM kan prima ondersteunen bij het genereren van ideeën, code en varianten, maar wanneer een vraag echt complex wordt of meerdere technieken tegelijk vraagt, is menselijke expertise nog steeds onmisbaar. Tegelijkertijd bleek ook hier weer de kracht van samenwerking: zodra de moeilijkste horde was genomen, kon de LLM het stokje overnemen en de component verder verfijnen.

Extra use case: performance-optimalisatie

Naast ontwerp- en prototyping-taken zette ik de LLM ook in bij een technisch knelpunt. De applicatie maakte API-calls die soms wel twintig seconden duurden voordat de data beschikbaar was. Dat leidde tot frustratie bij gebruikers en bemoeilijkte het testen van nieuwe UX-ideeën.

Ik vroeg de LLM om een plan te bedenken om de data lokaal te cachen en te synchroniseren. Het voorstel: gebruikmaken van IndexedDB om resultaten tijdelijk op te slaan in de browser, gecombineerd met een slim synchronisatie-mechanisme richting de server. Wat mij verraste, was hoe uitgebreid het antwoord was. De LLM gaf niet alleen een globaal idee, maar werkte een volledig plan uit met:

  1. de voor- en nadelen van deze aanpak,
  2. mogelijke risico’s bij de implementatie,
  3. en zelfs gefaseerde codevoorbeelden om het stap voor stap op te zetten.

Alleen al deze uitwerking leverde een tijdswinst van zeker twee weken op. Het gaf me een solide fundament om op door te bouwen en maakte het eenvoudiger om keuzes met de klant te bespreken. Waar ik normaal een aanzienlijk deel van die tijd kwijt zou zijn aan onderzoek en prototyping, kon ik nu direct aan de slag met testen en implementeren.

Lessen voor frontend developers, UX- en UI-designers

Uit dit project kwamen een aantal duidelijke lessen naar voren over hoe je LLM’s praktisch kunt inzetten in UX- en frontendtrajecten.

Les 1: De juiste vragen stellen is cruciaal

Een LLM levert alleen nuttige output als je de context en instructies scherp hebt. Voor mij hielp het om de rol van een professionele UX/UI-designer vooraf vast te leggen in een .cursorrules-bestand. Daardoor kreeg ik consistenter en relevanter advies. Hoe beter je prompts zijn afgestemd op je domein, hoe beter de resultaten.

Les 2: Zie de LLM als sparringpartner, niet als eindoplossing

De kracht van een LLM zit in snelheid en inspiratie, maar je kunt de output niet blindelings overnemen. Soms genereert het verrassende ideeën of complete plannen (zoals het IndexedDB-cacheplan), maar er zijn altijd aannames en beperkingen die je zelf moet beoordelen.

Les 3: Combineer expertise met AI-output

Omdat ik zelf frontend developer ben, kon ik de gegenereerde React-componenten beoordelen, refactoren en uitbreiden. Zonder die kennis zou het moeilijker zijn om de kwaliteit te waarborgen. Het gaat dus niet om AI óf menselijke expertise, maar juist om de combinatie.

Les 4: Gebruik prototypes als wireframes, niet als productiecode

De gegenereerde code is ideaal om ideeën snel tastbaar te maken. Het werkt als een interactieve wireframe: klikbaar, visueel, bruikbaar voor validatie met stakeholders. Maar voordat je iets naar productie brengt, moet je elk component kritisch nalopen en doorontwikkelen.

Les 5: Kleine investering, groot verschil

Gratis met LLM-tools spelen geeft een leuk voorproefje, maar met een betaald abonnement (rond de €20 per maand) gaat er een wereld open. Je krijgt veel meer speelruimte om prompts te testen en écht de kracht van AI in je workflow te ervaren.

Les 6: Kies je tools bewust

Achteraf had ik Lovable.dev niet nodig gehad, omdat ik met Cursor dezelfde code had kunnen genereren. Toch was het waardevol: het liet me kennismaken met werken in een visual builder en gaf me inzicht in hoe AI-gedreven prototyping anders kan aanvoelen.

Door deze lessen te omarmen, kun je als developer of designer de kracht van LLM’s benutten zonder de valkuilen in te lopen. Je wint tijd, krijgt nieuwe perspectieven, en houdt toch de controle over de uiteindelijke kwaliteit.

Conclusie

Het inzetten van een LLM in een UX-redesignproject bleek voor mij een enorme versneller. Analyses die normaal weken zouden duren, stonden nu binnen dagen op papier. Prototypes waren niet langer statische wireframes, maar direct klikbare React-componenten. Tegelijkertijd waren er momenten waarop de LLM tekortschiet en mijn eigen expertise onmisbaar bleef.

De kracht zit in de combinatie: laat een LLM het zware voorbereidende werk doen en gebruik je eigen kennis om de kwaliteit te bewaken en de juiste keuzes te maken. Zo wordt AI geen vervanger van je vakmanschap, maar een waardevolle co-piloot in het ontwerpproces.