Overzicht
UX-onderzoek
- Stakeholderinterviews met product owners voor kredietkaarten, hypotheken, zakelijk bankieren en online kanalen om te begrijpen voor welke plek op de homepage elke groep streed, en waarom.
- Diepgaande analyse van de analytics van de bestaande homepage: scrolldiepte, klikheatmaps, uitvalpunten tussen de homepage en de login van online bankieren, en de lange staart van zoektermen die mensen in de zoekfunctie van de site zelf typen.
- Concurrentieanalyse van vergelijkbare banken in Ecuador en de bredere LATAM-regio (Produbanco, Banco Pichincha, Banco Guayaquil, plus referentiepunten van BBVA en Itaú) — niet om te kopiëren, maar om de visuele conventies van de categorie in kaart te brengen, zodat het redesign van BdA bewust kon kiezen waar het aansluiting zoekt (vertrouwenssignalen, beveiligingsaanwijzingen) en waar het zich onderscheidt (contentdichtheid, motion, toon).
- Gebruikersinterviews met een klein panel bestaande klanten en niet-klanten om de echte vragen bij een eerste bezoek boven te halen: "Kan ik dit vertrouwen?", "Waar log ik in?", "Wat biedt deze bank mij nu concreet?"
- Contentaudit van elke link, banner en promotionele blok op de homepage, getagd per eigenaar, datum van laatste update en meetbare click-through — wat marketing een onderbouwde shortlist opleverde van wat te houden, te schrappen of samen te voegen.
UI-richting
- Een duidelijke hiërarchie boven de vouw: één primaire belofte, één primaire actie (de login van online bankieren), één secundair redactioneel blok dat marketing beheert. Geen carrousels meer die met zichzelf concurreren.
- Een ingehouden palet dat vertrouwen uitstraalt, verankerd in de bestaande merkkleuren van BdA, met zorgvuldig gebruik van witruimte en één accent voor actie — want in de banksector is visuele ingehoudenheid een vertrouwenssignaal.
- Een typesysteem op basis van een moderne neutrale sans, gecombineerd met een iets warmere displayletter voor koppen, om de institutionele toon te verzachten zonder autoriteit te verliezen.
- Componentenbibliotheek in Figma — knoppen, kaarten, promoblokken, rentetabellen, disclaimers — één-op-één gekoppeld aan de componenten die het interne devteam echt bouwt, zodat design en code nooit uit elkaar lopen.
- Motion en micro-interacties met mate: subtiele hoverstates, een rustige scroll-reveal per sectie, geen parallaxgimmicks.
- Toegankelijkheid als volwaardige randvoorwaarde: WCAG AA-contrast gecontroleerd voor elke kleurencombinatie, focusstates ontworpen (niet gewoon geërfd), en bij alle promotionele beelden zinvolle alt-tekst opgesteld samen met marketing.
Samenwerken met development en marketing
- Met development: wekelijkse werksessies om de haalbaarheid van componenten te bekijken, een doelarchitectuur voor Next.js en de componentenbibliotheek af te spreken, en de designhandoff in een formaat te gieten (tokens + Figma-varianten) dat schoon naar code vertaalt, in plaats van het team layouts te laten herinterpreteren.
- Met marketing: samen eigenaarschap over de promotionele blokken. Marketing houdt volledige controle over de redactionele kalender, maar het design system bepaalt hoe campagnes worden weergegeven — zodat een nieuwe Black Friday-banner het visuele ritme van de homepage niet per ongeluk doorbreekt.
- Governance: een licht proces voor "homepage change" opzetten, zodat toekomstige bannerwissels, productlanceringen en wettelijke disclaimers een plek hebben in het systeem zonder dat er telkens een redesign nodig is.
Galerij
Kernfuncties
- Gerichte hero die de waardepropositie van de bank in één zin uitspreekt en terugkerende klanten een ondubbelzinnig loginpad geeft.
- Productclusterkaarten die het persoonlijke, zakelijke en vermogensaanbod groeperen met progressive disclosure in plaats van een platte megamenu.
- Tools eerst: calculators, kantoor- en geldautomaatzoeker en wisselkoersen op de plek waar uit het onderzoek bleek dat gebruikers ernaar zochten.
- Evergreen- en campagneplekken strikt gescheiden, zodat marketing snel kan schakelen zonder de evergreen journeys te destabiliseren.
- Mobile-first layout: aangezien het grootste deel van het eerste verkeer mobiel is, wordt elke component eerst voor kleine schermen ontworpen en daarna naar boven uitgebreid.
Gebruikte technologieën
- Onderzoek: stakeholderinterviews, GA4- en heatmapanalyse, remote moderated gebruikerssessies, concurrentieaudits.
- Design: Figma (variabelen, auto-layout, componentvarianten), FigJam voor onderzoekssynthese.
- Handoff: design tokens geëxporteerd naar de componentenbibliotheek van het devteam, samen met uitgeschreven interactiespecificaties.
- Implementatie (in partnership met de engineers van BdA): moderne componentgebaseerde front-endstack, afgestemd op de bestaande platformbeperkingen van de bank, met focus op Core Web Vitals en toegankelijkheid vanaf dag één.
Meetbare resultaten
- 18 stakeholderinterviews over product, marketing, compliance en klantenservice, vastgelegd in een gedeelde onderzoeksrepository.
- Diepgaande analyse van 12 maanden GA4-data die de echte uitvalpunten blootlegde en de lange staart van interne zoekopdrachten die de nieuwe informatiearchitectuur aanstuurde.
- Gemodereerde usabilitysessies met 9 deelnemers (een mix van bestaande klanten en niet-klanten) die het nieuwe homepageprototype testten, elk met een transcript en een geprioriteerde frictielog.
- Contentaudit die elke link, banner en promotionele blok op de huidige homepage catalogiseerde met eigenaar, datum van laatste update en click-through — zodat marketing een onderbouwde shortlist had van wat te houden en wat te schrappen.
- Figma-componentenbibliotheek van meer dan 30 componenten, één-op-één gekoppeld aan de implementatiestack, wat de overhead van design-naar-code-herinterpretatie wegneemt.
- Doelstellingen die met de business zijn afgesproken voor na de lancering: 25% meer click-through op de primaire CTA op de homepage, 15% minder tijd tot de login-knop op mobiel, en een meetbare daling van supporttickets over "waar vind ik X op de website".