ConversionKit
Webapp ontworpen en omgezet naar HTML voor een platform dat conversieverhogende elementen aan websites toevoegt.
- Rol
- Designer + Front-end
- Periode
- 2018
- Stack
- Design, Figma, HTML
- Met
- Design en front-end ontwikkeling door Frank Spin. Concept door Bouke Majoor
De vraag
ConversionKit was een idee van Bouke Majoor. Je zet een script op je website en dat laat bezoekers bijvoorbeeld een kortingspop-up, een aanmelding voor de nieuwsbrief of een vaste balk zien. Daarna telt het hoeveel bezoekers een lead worden. Op de landingspagina staan Shopify, Magento, WordPress en andere platforms, dus wie het instelt is meestal een winkeleigenaar of marketeer, geen developer.
Aanpak
Ik ontwierp de app en de landingspagina en bouwde ze in HTML. De zijbalk van de app heeft zes onderdelen: dashboard, acties, leads, statistieken, instellingen en FAQ. Bovenin staat welke website gekoppeld is en of het script actief is. Een actie toevoegen gaat in vier stappen. Stap één vraagt wat je wilt bereiken, zoals enthousiasme wekken, korting geven of vertrouwen opbouwen, elk met een korte uitleg en het aantal triggers dat erbij hoort. Stap twee houdt je keuze bovenaan in beeld en vraagt om de trigger. Het dashboard zet de laatste acties met hun conversieratio naast de nieuwste leads. De landingspagina legt de tools uit op een getekende website, zoals getimede berichten en formulieren die zichzelf opslaan.
Resultaat
De appschermen waren HTML-pagina's in de browser, geen plaatjes. Je kon de stappen echt doorklikken, en dat zegt meer over een flow dan een rij mockups.
Wat het opleverde
- Een zijbalk met zes onderdelen, van dashboard tot FAQ.
- Een actie toevoegen en de trigger kiezen in vier stappen.
- Gekoppelde site en scriptstatus bovenin het dashboard.
- Een landingspagina met drie keer aanmelden voor de bèta.
