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
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 maken Gifjes een 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 zo 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 iets wat deze e-mailcampagne uniek maakt, namelijk dat het design ook buiten de 600xp kaders mee schaalt met de grootte 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.
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.
- 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. - Het bouwen van de e-mail
Maken van het template, mobile proof maken, testen in diverse e-mailclients. - Het inrichten van de e-mail in Hubspot
Onder andere de e-mails implementeren, geschikt voor 8 verschillende talen. - 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. - Het live zetten van de e-mailcampagne op volledige base
Zorgen dat alle klanten van Mollie, de juiste e-mails ontvangen. - 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 wij zijn zelf erg tevreden met de opgeleverde campagne. Het nieuwe design maakt de e-mails van Mollie speelser dan de normale, statischere 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?
Optimalisatie van een bestaande campagne stimuleert de verkoop van pakjes onder (potentiële) donateurs en verhoogt zo de conversies.
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.
Voor Arsenal maakten wij met groot succes een e-mailcampagne met gepersonaliseerde filmpjes voor de jarige jong fans.
Wil jij ook relevanter communiceren met jouw e-mailontvangers door op een interactieve wijze hun interesses in kaart te brengen?
Bij 100%EMAIL is jouw ambitie onze drijfveer, want ieder e-mailvraagstuk verdient het een succesverhaal te worden. 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.