jjzalm-blog

[jjzalm-blog]

Ontwerp / structuur ontwerp

[jjzalm-blog]

Ontwerp / structuur presentatie

[jjzalm-blog]

Ontwerp / structuur presentatie

[jjzalm-blog]

Ontwerp / structuur presentatie

Voor het groenlichtmoment heb ik de presentatie ontworpen en voorzien van alle content zodat we tijdens het presenteren op een zo goed mogelijke manier ondersteund worden. Ik heb gekozen voor een rustige vorm, waarin de elementen van onze stijl in terugkomen. Denk hierbij aan het paarse vierkant met de afgeronde hoeken. Het is belangrijk dat de presentatie strak is en professioneel overkomt met dezelfde beleving die wij in ons project hebben zitten. De presentatie is voorzien van een duidelijke structuur zodat we stapsgewijs ons project kunnen behandelen. Ook heb ik er verschillende animaties in verwerkt zodat de presentatie dynamisch wordt. Zo zal er een bewegende tijdlijn zijn, en zullen de schermen voorzien zijn van onze ontwerpen en zullen deze voorbij scrollen wanneer wij tikken op het smartboard. Dit heb ik gedaan om de beleving compleet te maken. In de volgende post zullen meerdere schermen van de presentatie te zien zijn die ik heb ontworpen. 

[jjzalm-blog]

Ontwerp onderdeel duurzaamheid avontuur landingspagina

In de vorige post heb ik de schets laten zien en het idee over duurzaam ondernemen. Dit is de uitwerking van de schets. Dit onderdeel bestaat uit een visualisatie van de data per bedrijf ten opzichte van heel Nederland. Links staan alle gegevens over het desbetreffende bedrijf, en bij een klik op de button bovenin zul je alle gegevens over Nederland vinden (rechts). Ik heb 4 onderdelen toegevoegd. Dit zijn de onderdelen die je op het energielabel terug vindt:

1. Liters brandstof per honderd kilometer 2. Brandstofverbruik in kilometer per liter 3. De klasse van zuinigheid 4. De CO2-uitstoot in gram per kilometer

We kunnen door het gebruik van een plugin (Die de developers hebben) gebruik maken van realtime data. Dat wil zeggen dat de data altijd up to date is, zodat je direct op ieder moment de data met elkaar kan vergelijken. Wanneer je over een onderdeel heen hoovert zul je extra informatie verkrijgen over het bepaalde onderdeel. Je zie ook de groei ten opzichte van Nederland. Bij Nederland zie je de groei en of daling ten opzichte van vorige maand. De data gebruiken we van het CBS, RIVM/Emissieregistratie. 

Je kunt eenvoudig het bericht delen door de button te gebruiken die onder te tekst te vinden is. Het is voor een bedrijf interessant om te delen, zodat andere kunnen zien hoe duurzaam het bedrijf aan het ondernemen is. Een onderwerp wat anno 2019 echt helemaal hot is. Ik heb getest met BD Lease en Pitcher of dit iets is waar ze enthousiast over zijn. En beide zijn ze overtuigd dat dit heel erg waardevol is om op de landingspagina te hebben. 

[jjzalm-blog]

Schets bedrijf avontuur landingspagina

Voor de avontuurpagina van het bedrijf hadden we verschillende input nog nodig. Want wat komt er op deze pagina te staan? Ik zat te denken aan onderdelen die voor het bedrijf relevant zijn om te delen in het zakelijk netwerk. Ik ben gaan kijken naar verschillende belangrijke punten die voor bedrijven de moeite zijn om naar buiten te brengen. Duurzaamheid is een van die punten, het is een relevant onderwerp en zeg nou eerlijk, ieder bedrijf wil laten zien hoe duurzaam hij aan het ondernemen is. De eerste schets gaat ook over deze duurzaamheid, hoeveel uitstoot per km vergeleken met de rest van NL produceert het desbetreffende bedrijf? 

De tweede schets gaat specifiek over het financial leasen. Omdat je hier niet een contract met aantal kilometers afsluit heb je al een stuk minder data waar je mee aan de gang kunt gaan. Voor financial lease ben je in principe aan het aflossen tot de auto echt van jou is, om in kaart te brengen voor hoeveel procent de auto jouw eigendom is, zal jouw auto te zien zijn, met het percentage van aflossing. In het geval hier boven is de auto al voor 50% jouw eigendom. 

[jjzalm-blog]

Nieuw leasecontract toevoegen

Hierboven zijn verschillende schermen te zien die ik heb ontworpen om een nieuw leasecontract toe te voegen. In het eerste scherm krijg je als backoffice medewerker de keuze over welk contract je graag wil toevoegen. Je hebt hier de keuze uit alle verschillende leasecontracten. Vervolgens kies je de werknemer aan wie je het contract wil gaan koppelen. Wanneer je een specifiek contract kiest dan zullen alle gegevens van het desbetreffende contract gevraagd worden. De gegevens die al bekend zijn worden automatisch ingevuld door het programma. De overige gegevens zullen handmatig nog moeten worden ingevuld. Wanneer je de gegevens hebt ingevuld kun je het contract opslaan en toevoegen. 

[jjzalm-blog]

Ontwerp klant bekijken via backoffice

Vanuit de backoffice kun je alle klanten bekijken op de zakelijke omgeving. Iedere klant heeft een eigen pagina waar alle informatie op te vinden is met betrekking tot het leasecontract, medewerkers en persoonlijke gegevens. Ook kan de backoffice zien welke activiteiten nog open staan. 

In dit geval heb ik de bedrijfspagina van Pitcher ontworpen aan de hand van de stijl die door Jimmy bepaald is zodat ieder scherm dezelfde uitstraling heeft. Vanaf dit scherm heb je de mogelijkheid om alle medewerkers te bekijken zodat je op hun zakelijke omgeving terecht komt. Wanneer je als backoffice medewerker een nieuw contract wil toevoegen, kun je dit doen bij het onderdeel ‘Leasecontract(en)’ via de groene knop ‘Nieuw’. In de volgende blogpost zul je verschillende schermen zien met betrekking tot het aanmaken van nieuwe leasecontracten. 

[jjzalm-blog]

Mailing schermen mobiel 

Voor mobiel heb ik ook de schermen ontworpen zodat ze klaar staan voor de mailing. Ze hebben allemaal dezelfde form zodat de mailing herkenbaar is. Het ontwerp is responsive zodat het op ieder device goed te lezen is.

[jjzalm-blog]

Ontwerp klant bekijken via backoffice

Vanuit de backoffice kun je alle klanten bekijken op de zakelijke omgeving. Iedere klant heeft een eigen pagina waar alle informatie op te vinden is met betrekking tot het leasecontract, medewerkers en persoonlijke gegevens. Ook kan de backoffice zien welke activiteiten nog open staan. 

In dit geval heb ik de bedrijfspagina van Pitcher ontworpen aan de hand van de stijl die door Jimmy bepaald is zodat ieder scherm dezelfde uitstraling heeft. Vanaf dit scherm heb je de mogelijkheid om alle medewerkers te bekijken zodat je op hun zakelijke omgeving terecht komt. Wanneer je als backoffice medewerker een nieuw contract wil toevoegen, kun je dit doen bij het onderdeel ‘Leasecontract(en)’ via de groene knop ‘Nieuw’. In de volgende blogpost zul je verschillende schermen zien met betrekking tot het aanmaken van nieuwe leasecontracten. 

[jjzalm-blog]

Mailing schermen mobiel 

Voor mobiel heb ik ook de schermen ontworpen zodat ze klaar staan voor de mailing. Ze hebben allemaal dezelfde form zodat de mailing herkenbaar is. Het ontwerp is responsive zodat het op ieder device goed te lezen is.

[jjzalm-blog]

Mailing schermen desktop

Ik heb het definitieve design met bijbehorende copy ontworpen en getest bij de opdrachtgever BD Lease. Ik heb alle vorige schermen voorgelegd, en daaruit is de feedback gekomen die te vinden is in de vorige posts. Ik heb vervolgens de schermen geoptimaliseerd zodat alle juiste informatie er in staat, en de juiste afbeeldingen er in staan. Tevens heb ik de juiste data onderaan de mail toegevoegd. Deze data wilde BD Lease graag in de mailing terug zien. Naast het desktop ontwerp heb ik ook nog een mobiel ontwerp gemaakt.

[jjzalm-blog]

[Ontwerp] Contract toevoegen aan bedrijf

Wanneer je een klant hebt aangemaakt, en alle gegevens die je nodig hebt zijn aanwezig, is het noodzakelijk om de functie te hebben om een contract te kunnen toevoegen aan een klant. Er zijn verschillende leasevormen die alle verschillende invulvelden nodig hebben. In het huidige CRM staan alle velden open voor iedere leesvorm, en dus moet je als gebruiker zelf maar uitzoeken welke velden ingevuld moeten worden, en welke velden niet ingevuld hoeven worden. Dat kost veel tijd, en zorgt regelmatig voor foutjes. Dit is iets waar een beter overzicht voor gecreëerd moet worden. Daarom heb ik twee schermen ontworpen waarbij er rust en overzicht gevormd is. 

Wanneer je een contract wil toevoegen aan een bedrijf dan zul je allereerst de optie krijgen welke leasevorm je wil toevoegen. Op deze manier zul je alleen de nodige velden te zien krijgen die er ingevuld moeten worden. Het voordeel is dat je niet de mist in kunt gaan met de velden. Wanneer je de velden invult zal hij veel gegevens overnemen van het internet. Wanneer je een type auto invoert, zullen de gegevens geïmporteerd worden (in dit geval van Leasedesk aangezien zij de lease verstrekken). Daarmee worden al veel velden ingevuld wat er voor zorgt dat het proces sneller verloopt voor de gebruikers. 

[jjzalm-blog]

[Ontwerp] Klantenoverzicht

Vanuit het Dashboard van Monique van Rosmalen (Backoffice medewerker) is het belangrijk dat je kunt doorklikken naar het krantenoverzicht. Wanneer je op het dashboard (Afbeelding 1, ontworpen door Jimmy) klikt op klantenoverzicht dan schuift het blok uit en vult de gehele pagina (Afbeelding 2, ontworpen door mij). In dit scherm zullen alle klanten te vinden zijn. Ik heb een sorteer functie toegevoegd zodat je gemakkelijk de klanten naar wensen kunt sorteren. De nieuwste veranderingen zullen dik gedrukt staan. En in eerst instantie buiten de sorteer functie vallen. Er is tevens een zoekfunctie bijgekomen om snel te kunnen zoeken naar een specifieke klant. 

[jjzalm-blog]

[Flow] CRM systeem (Backoffice)

Samen met Jimmy, Pim en de input van BD Lease zijn we begonnen met het bepalen van de flow voor het CRM systeem van BD Lease. Deze flow is voor de Backoffice van BD Lease. Maar er zijn veel onderdelen die ook bij andere disciplines terug komen in de flow (Inlog Admin BD Lease Peter, Inlog Partners).

De eerste versie hebben we samen met elkaar opgesteld in Gloomaps tijdens een creatieve sessie (1e afbeelding). Uiteindelijk kwamen we er echter dat je met Gloomaps geen goede combinaties kunt maken, en was onze sitemap / flow te groot voor Gloomaps. We hebben er voor gekozen om een ander programma te gebruiken. Ik vond het programma Flowmapp, en heb in dit programma onze flow / sitemap uitgewerkt met alle mogelijke onderdelen. De flow / sitemap is erg groot geworden en heb ik daarom opgeknipt om het zo leesbaar te maken op de blog (Video)

In de flow zijn alle onderdelen te zien die de Backoffice van BD Lease zal zien in het CRM pakket. Zo zijn er verschillende hoofd onderdelen (gekleurde vlakken) waar vele sub onderdelen onder vallen. Om de flow zo compleet mogelijk te maken heb ik aangegeven wanneer er invulvelden zijn in de flow, en wat deze invulvelden zijn. Zo zie je bij de laatste afbeelding bijvoorbeeld dat ik een optie heb gemaakt bij de leasecontracten waarbij je kunt zien wat voor invulvelden er nodig zijn per leasecontract.

De gehele Flowmapp is ook via volgende link te bekijken: https://app.flowmapp.com/share/faf69f160e2a3f56a8114bfa9edfcf55/userflow/27628

[jjzalm-blog]

[Ontwerp + Prototype] Optimalisatie + testen ontwerp

Om het huidige ontwerp te optimaliseren om voor ieder mailings platform geschikt te zijn, heb ik gekozen om te gaan kijken naar Marketing Platforms For Businesses. Via deze marketing platforms kun je vele mails versturen die door ieder mailings platform ondersteund worden. Je kunt zelf je ontwerp vormgeven en direct zien / testmails versturen om te kijken of het ontwerp ondersteund wordt.

Ik heb er voor gekozen om het platform Mailchimp te gebruiken. In Mailchimp kun je kiezen uit verschillende templates, en dit vormgeven naar jouw voorkeur en wensen. Het eerdere ontwerp wat ik heb gekozen bevatte een full screen afbeelding wat helaas nog niet door alle mailings platforms ondersteund wordt. Maar het was wel belangrijk dat er een grote afbeelding in de mail te vinden was. Ik heb een template gevonden en aangepast zodat het zo goed als mogelijk overeenkomt met het ontwerp wat ik eerder had staan. 

De afbeelding is nu een header afbeelding die we variabel kunnen toepassen om een persoonlijke benadering te creëren. Voor iedere gebruiker zal een persoonlijke variabele afbeelding te zien zijn, en een variabele ‘leaseauto’. Dit kan ingesteld worden bij Mailchimp. Het beeldmateriaal komt van Leasedesk (Powered by BD Lease) en zijn dus rechtenvrij te gebruiken.

Naast het desktop ontwerp, wordt mailing ook voor de helft geopend op mobiel. En daarom zal er een ook een mobiele versie moeten zijn van de mailing. Ook deze heb ik ontworpen en verwerkt in Mailchimp. Tevens heb ik dit getest op verschillende mobiele telefoons. 

Prototyping

Natuurlijk willen we ook graag dat we veel werkende onderdelen hebben in ons eindproduct. En dus ben ik aan de slag gegaan om het ontwerp gelijk te prototypen. Mede een rede dat ik voor Mailchimp gekozen heb, is omdat je ontwerpen goed kunt prototype en testen bij de doelgroep. Op deze manier is zal de livegang altijd goed en soepel verlopen doordat je het al uitgebreid hebt kunnen testen. Ik heb de mailing samengesteld, geprototyped en verstuurd naar verschillende e-mail adressen van verschillende platforms. De platforms die ik heb getest (op zowel desktop als mobiel) zijn: - Gmail - Outlook - ICloud mail - Yahoo mail  Bij het definitief ontwerp zal ik alle mailings platforms gaan testen om te zien of ieder mogelijk platform de e-mail campagne goed ondersteund. 

[jjzalm-blog]

Onderzoek e-mail marketing campagnes

Nadat ik mijn designs in combinatie met het concept heb toegelicht aan Pim, kreeg ik de feedback dat mijn ontwerp niet door alle mailingprogramma’s  ondersteund wordt. Ik heb gekozen voor een grote afbeelding die over het hele scherm te zien zal zijn, maar dit is tegenwoordig nog niet mogelijk. Het is namelijk jammer dat wanneer een klant zijn mail opent, hij de afbeelding niet te zien krijgt. Ook heb ik gebruik gemaakt van lettertypes die niet leesbaar zullen zijn in de e-mail aangezien het geen webfont is. Ik moet dus op onderzoek uit naar de regels voor een succesvolle nieuwsbrief, zodat ik zelf een goed ontwerp kan maken. 

Het design moet geschikt zijn om in alle e-mailprogramma’s goed over te komen; hoe overwin je die beperkingen?

Zorg er voor dat het ontwerp maximaal 600 pixels breed is

Helaas zijn e-mails redelijk blijven hangen in de tijd. In de praktijk bekijken gebruikers vaak een e-mail in een verkleinde weergave, voor de meeste gebruikers in dat tussen de 550 en 650 pixels breed. Als je er zeker van wilt zijn dat je ontwerp overal goed zichtbaar is, zorg er dan voor om je lay-out maximaal 600 pixels breed te maken. Jammer is dat je niet een full screen ontwerp kunt maken wat veel beter het concept zal overbrengen, maar je houdt de e-mail simpel. 

Gebruik web-veilige lettertypen

In mijn huidige ontwerp heb ik een font gekozen wat helaas niet wordt ondersteund door mening mailingprogramma’s. Zoals eerder al genoemd, zouden e-mails html-gecodeerde content moeten zijn, die werken in verschillende browsers, bij alle klanten, op verschillende desktops en op alle mobiele apparaten.Als de klant een bepaald lettertype niet op zijn computer geïnstalleerd heeft, wordt het lettertype dat jij gebruikt automatisch aangepast naar een lettertype dat wel geïnstalleerd is en erop lijkt (en dit kan lelijk uitpakken). Ik moet een web-veilig lettertype gebruiken. Er is gelukkig een lijst te vinden met de verschillende lettertype die ik kan gebruiken. 

Gebruik van afbeeldingen

In een microseconde besluiten we of we iets leuks vinden of niet, of we meer willen weten of het liever vergeten. Door het gebruik van aantrekkelijke afbeeldingen en titels kun je er voor zorgen dat je de aandacht grijpt van de gebruiker. In de huidige versie heb ik deze tip al toegepast, Alleen is de afbeelding nu nog te groot, en zal ik deze moeten gaan verkleinen. 

Call to Actions

Zij brengen de lezer van zijn inbox naar een externe webpagina.

CTA’s zijn de hart en ziel van e-maildesign en zouden zo prominent mogelijk aanwezig moeten zijn, vaak in de vorm van een button. Het gebruik van een button doodt twee vliegen in één klap: CTA-links zijn opvallend en als de lezer op een touch-apparaat zit, is het gemakkelijk om erop te klikken.

Om betrokkenheid te vergroten, maak je de meest belangrijke CTA iets groter en anders gekleurd dan de andere. Inc.com bijvoorbeeld begint haar e-mails met een uitgelicht verhaal en een effectieve CTA.

De perfecte footer 

Een footer is geen plek om creatief te zijn, het is een plek voor verplichtingen.

Om er zeker van te zijn dat het e-mail ontwerp legaal en professioneel is, zou de footer de volgende informatie moeten bevatten:

het fysieke adres van de klant;

afmeld-link;

een herinnering hoe de lezer in de e-maillijst is opgenomen (bijv. “Je ontvangt deze e-mail omdat je je daarvoor hebt aangemeld op onze website.”)

Referenties: 

Frankwatching (22 oktober 2014) E-maildesign: 7 tips voor een succesvolle nieuwsbrief. Geraadpleegd op 10 april 2019. https://www.frankwatching.com/archive/2014/10/22/e-maildesign-7-tips-voor-een-succesvolle-nieuwsbrief/

Qamel (n.b.) Design voor e-mail marketing Geraadpleegd op 15 april 2019. https://qamel.nl/diensten/design-voor-e-mail-marketing/ 

Rapidsugar (18 februari 2019) 10 tips voor e-maildesign dat scoort Geraadpleegd op 15 april 2019. https://www.rapidsugar.nl/blog/10-tips-voor-e-maildesign-dat-scoort