Case: ABN AMRO

Sinds 2013 zijn we betrokken bij de ontwikkeling van ABN AMRO Insights. Na verschillende releases met aanvullingen en verbeteringen was het nu tijd voor een flinke upgrade. Het kennisplatform met artikelen, publicaties en blogs van specialisten en economen over macro-economische ontwikkelingen en trends is totaal vernieuwd. Tam Tam is aangehaakt voor een nieuw visueel design en wij hebben weer de realisatie in WordPress voor onze rekening genomen.

Het vernieuwde Insights platform biedt een geoptimaliseerde gebruikerservaring op elk apparaat en elk scherm. De content is visueler door middel van grotere afbeeldingen en interactieve grafieken. De nieuwe header en zoekfunctionaliteit verbinden de verschillende contentplatformen van ABN AMRO Corporate Banking en biedt bezoekers de mogelijkheid snel binnen deze verschillende websites te navigeren.

Volledig responsive

De website is ‘mobile-first’ opgebouwd en biedt op elk apparaat en elke scherm een geoptimaliseerde gebruikerservaring. De website is volledig fluid en past zich aan de grootte van je scherm aan. Daarnaast zijn er zogenoemde ‘breakpoints’ gedefinieerd waardoor er verschillende weergaven ontstaan zodat de gebruikerservaring gewaarborgd wordt.

Omdat het ontwerp beeld gedreven is, hebben we zoveel mogelijk gebruik gemaakt van async- en lazyload technieken. Hiermee zorgen we bijvoorbeeld dat alle afbeeldingen pas inladen als ze echt nodig zijn. Dus pas wanneer de bezoeker het specifieke gedeelte van de pagina bezoekt. Dit voorkomt dat je bijvoorbeeld 15 seconden moet wachten voordat de hele pagina is geladen.

Interactieve grafieken

Stiekem zijn wij met deze release misschien wel het meest trots op de interactieve grafieken die verwerkt zijn in de Visie op Sectoren 2015. Waar wij vorig jaar nog een stuk of 200 grafieken met de hand hebben opgemaakt, hebben we dit jaar Datawrapper geïntroduceerd. De economen hebben een self-hosted versie van de tool tot hun beschikking gekregen om de data waar ze over schrijven visueel te maken. Samen met de mensen van Datawrapper hebben we gezorgd voor grafieken in de huisstijl van de bank en hebben we naast de meest gebruikte type grafieken een serie maatwerk grafieken geïntroduceerd om aan alle wensen tegemoet te komen. Ingevoerde data wordt realtime gevalideerd en omgezet in interactieve en responsive grafieken die met oEmbed eenvoudig in WordPress te embedden zijn.

Centrale top navigatie

Door succesvolle contentmarketing is het aantal platformen bij ABN AMRO gegroeid. Als we het over gebruiksvriendelijkheid hebben, dan is een snelle zoekfunctie en een duidelijke navigatie van essentieel belang. Met deze release hebben we een centrale overkoepelende navigatie en zoekfunctie geïntegreerd voor de verschillende content platformen van ABN AMRO. Op de websites Insights, Verder met Financieren en Grenzeloos Ondernemen is één centrale topnavigatie met overkoepelende zoekfunctionaliteit geïntroduceerd. Met deze nieuwe header zijn de platformen direct aan elkaar verbonden en kunnen we de bezoeker, platform onafhankelijk en beter bedienen.  Content wordt toegankelijker, de interactie tussen de platformen wordt versterkt en de navigatie zorgt ook voor eenduidige look & feel. Door het inzetten van Elastic (voorheen ElasticSearch) als centrale zoekfunctionaliteit zoek je, als een warm mes door de boter, realtime door de bergen data van de verschillende platformen.

Details en slimme transities

Binnen dit project worden we blij van de technische- en slimme details. We hebben verschillende transities toegevoegd bij de belangrijkste interacties waardoor de overgangen super natuurlijk ‘aanvoelen’. In een artikel scrollt bijvoorbeeld de afbeelding, afhankelijk van de browser, sneller weg, en zoomt de afbeelding ook uit waardoor op een natuurlijke manier de focus verlegt wordt van beeld naar tekst.

Deze details zijn eigenlijk niet te beschrijven. Ervaar het zelf op insights.abnamro.nl.

Bij de vorige release was het aantal views op de artikelen na drie maanden met 400% gegroeid. We zijn benieuwd naar de nieuwe resultaten.