K L A N T  C A S E

CSS animatie in e-mail: een geheel vernieuwend concept voor Mollie

De klanten van Mollie die bepaalde milestones behaalden ontvangen daarover een e-mail. De e-mail is onderdeel van een reeks van in totaal zeven e-mails, die elk een andere milestone uitlichten. Denk bijvoorbeeld aan de 1000ste betaling of de eerste producten die internationaal verkocht zijn via Mollie. 100%EMAIL is gevraagd om het bewegende design volledig door te trekken naar e-mail. Met daarbij de doelstelling voor de e-mailflow van het creëren van loyalty door een goed gevoel bij de klanten van Mollie op te wekken.

In deze klantcase lees je:

  • De unieke elementen
  • De 100%EMAIL aanpak en opzet​
  • Het proces in stappen
  • De learnings de we hebben geleerd van deze campagne
Image

De unieke elementen van deze e-mailcampgne

Het uitgangspunt van deze e-mailcampagne was dat het design gemaakt is door een designbureau welke geen rekening heeft gehouden met e-mailspecificaties. Dit was natuurlijk een uitdaging, omdat sommige aspecten toevoegen aan een e-mail ingewikkelder is dan het lijkt. Er had gekozen kunnen worden om Gifjes in te zetten voor de animatie elementen in de e-mail. Echter maakte de Gifjes de e-mail erg zwaar en bovendien wordt de beeldkwaliteit minder. Het doet afbreuk aan de scherpte. Daarom is er gekozen om gebruik te maken van CSS animaties, om op die manier de kwaliteit van de e-mail hoog te houden.

Een ander uniek element aan de e-mail is dat het designbureau bij Mollie op kantoor langs gegaan is en daar een fotoshoot gehouden heeft. De personen op de afbeeldingen in de e-mail zijn echte collega's van Mollie. Dit maakt de content authentiek en persoonlijk, iets waar wij trots op zijn. De e-mail is overigens ook in maar liefst acht talen beschikbaar, wat er voor zorgt dat de e-mail erg toegankelijk is voor de diverse klanten van Mollie.

Als laatste is er nog een element wat deze e-mailcampagne uniek maakt, namelijk dat het design ook buiten de 600xp kaders mee schaalt met de grote van het scherm. Hieronder zie je twee afbeeldingen van wat wij daarmee bedoelen; het design past zich aan, aan de grote van het device waarmee je de e-mail bekijkt.

Welke technieken zijn er gebruikt?

Voor deze e-mail hebben wij gebruik gemaakt van CSS animatie, waarbij een bepaald vlak niet getoond wordt op het moment dat het vlak over het rode vlak gaat. In feite bestaat de hoek met rood, wit en blauw uit drie verschillende lagen. Hier wordt op basis van overlap gezegd dat een bepaalde laag wel of niet zichtbaar moet zijn. De HTML/CSS is uitgebreid getest in Email on Acid.

Image

De bewegende elementen in de email, veranderen van kleur als ze een ander vlak aanraken.

De personen in de afbeelding zijn echt werkzaam bij Mollie.

De elementen in het design die mee schalen met de grote van het scherm, ook buiten de 600px.

Interactieve e-mail

Deze e-mailcampagne is een interactieve campagne, wat niet altijd door alle e-mailclients goed wordt ontvangen. Ongeveer 80% van de klanten van Mollie gebruiken Gmail en Outlook. Indien de e-mailclient CSS niet ondersteunt, hebben we een Gifjes als fallback waarmee de beweging alsnog zichtbaar is. De fallback e-mail ziet er daarom hetzelfde uit, alleen de beeldkwaliteit van de e-mail is iets minder.

Het proces

Samen met Mollie hebben wij de volgende stappen gezet om tot het eindresultaat te komen.

  1. Het vertalen van het design van naar een e-mail design
    Zorgen dat alle elementen uit de design tot zijn recht kwamen in de e-mail.
  2. Het bouwen van de e-mail
    Maken van het template, mobile proof maken, testen in diverse e-mailclients.
  3. Het inrichten van de e-mail in Hubspot
    Onder andere de e-mails implementeren geschikt voor 8 verschillende talen.
  4. Testen van de e-mail op een kleine batch
    Om te kijken of de e-mails naar behoren werkten, is er eerst getest op een klein aantal klanten om de laatste foutjes eruit te filteren.
  5. Het live zetten van de e-mailcampagne op volledige base
    Zorgen dat alle klanten van Mollie, de juiste e-mails ontvangen.
  6. Het monitoren van de e-mailcampagne en rapporteren
    Om uiteindelijk de resultaten te meten en een conclusie te trekken.

De conclusie

De grootste conclusie die uit deze e-mailcampagne is gehaald, is dat er veel meer mogelijk is met e-mail dan Mollie dacht. Ook wjj zijn zelf erg tevreden met de opgeleverde campagne. Het nieuwe design maakt de e-mails van Mollie speelser dan de normale, meer statische e-mails. Dit past erg goed bij deze klant. Mollie heeft onder andere op de 1000ste betalingsmail positieve feedback gekregen.

CSS animatie in e-mail is een nieuw concept. Het wordt nog niet veel toegepast, terwijl het via deze manier mogelijk is om de grenzen van e-mail op te zoeken. Het is bijvoorbeeld in een websituatie zelfs mogelijk om spelletjes te spelen door middel van een CSS animatie.

Dit is voor ons de volgende stap; we willen het mogelijk maken een spelletje te spelen in een e-mail!

BENIEUWD NAAR MEER KLANTCASES?

Image

Optimalisatie van een bestaande campagne stimuleert de verkoop van pakjes onder (potentiële) donateurs en verhoogt zo de conversies. 

Lees hier alles over deze campagne.

Image

In deze unieke eindejaarscampagne van T-Mobile Ondernemen kan men zelf klikken.

Klik hier om meer te lezen over het succesvolle resultaat van deze campagne.

Image

Voor Arsenal maakten wij met groot succes een e-mailcampagne met gepersonaliseerde filmpjes voor de jarige jong fans.

Lees hier alle ins & outs over deze campagne.

Wil jij ook relevanter communiceren met jouw e-mailontvangers door op een interactieve wijze hun interesses in kaart te brengen?

Image

Bij 100%EMAIL is jouw ambitie onze drijfveer, want ieder e-mailvraagstuk verdient het een succesverhaal te maken. Met onze gestructureerde en volledige aanpak én ons gedreven en ervaren team van e-mailexperts halen we buitengewone resultaten. Zo creëren we samen met onze klanten succesverhalen.

Je hebt direct contact met je eigen e-mailexpert en daarachter een team van experts. Je krijgt dus niet te maken met dure tussenlagen, zoals projectmanagers of accountmanagers. Bovendien zijn we software onafhankelijk, dat betekent dat we verder werken in jouw e-mailsoftware of marketingplatform.

Dus, zeg het maar… Gaan wij samen van jouw e-mailambitie een succesverhaal maken?

Bel ons gerust voor een vrijblijvend gesprek over jouw uitdagingen. Je kunt ons per telefoon bereiken op 010 – 254 03 20, of een e-mail sturen naar info@100procent.email.

Noodzakelijke cookies helpen een website bruikbaarder te maken door basisfuncties als paginanavigtie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren functioneren.

 

Inschakelen

Statistische cookies helpen ons begrijpen hoe bezoekers de website gebruiken, door anoniem gegevens te verzamelen en te rapporteren. Deze cookies verzamelen dus geen persoonlijke gegevens van de bezoekers.

Inschakelen

Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Het doel hiervan is om de bezoeker advertenties te laten zien die relevant zijn voor de bezoeker.

Cookies zijn kleine tekstbestanden die door websites kunnen worden gebruikt om gebruikerservaringen efficiënter te maken. Volgens de wet mogen wij cookies op uw apparaat opslaan als ze strikt noodzakelijk zijn voor het gebruik van de website. Dit zijn de functionele cookies. Voor alle andere soorten cookies hebben we uw toestemming nodig. Deze cookies worden benoemd als: voorkeuren en statistieken en hoeft u dus niet te accepteren. Deze website maakt gebruik van verschillende soorten cookies. Sommige cookies worden geplaatst door diensten van derden die op onze pagina’s worden weergegeven.

Cookies

100%EMAIL gebruikt cookies om je de beste online ervaring te geven. Wil je meer weten, bekijk ons privacy statement

×
Browser update aanbevolen.
Beste gebruiker, u maakt gebruik van een verouderde browser. Voor een optimale ervaring bij ons en bij andere websites adviseren we u om een nieuwere browser te gebruiken. Bijvoorbeeld Microsoft Edge, of Google Chrome.