Skip to content
Frank Spin
All projects

ConversionKit

Designed the web app and built the HTML front-end for ConversionKit, a platform for adding conversion-boosting elements to websites.

Role
Designer + Front-end
Period
2018
Stack
Design, Figma, HTML
With
Design and front-end development by Frank Spin. Concept by Bouke Majoor
Main preview of the ConversionKit project

The problem

ConversionKit was Bouke Majoor's idea. You add a script to your website and it shows visitors things like a discount pop-up, a newsletter sign-up or a sticky bar, then counts how many of them turn into leads. The landing page names Shopify, Magento, WordPress and other platforms, so the people setting it up would mostly be shop owners and marketers, not developers.

Approach

I designed the app and the landing page and built them in HTML. The app sidebar has six items: dashboard, actions, leads, statistics, settings and FAQ. The top bar shows the connected website and whether the script is active. Adding an action is a wizard of four steps. Step one asks what you want to achieve, such as build excitement, offer a discount or build trust, each with a short explanation and the number of triggers on offer. Step two keeps your choice at the top and asks for the trigger. The dashboard puts the latest actions with their conversion rate next to the newest leads. The landing page explains the tools on a drawn website, such as timed messages and autosave forms.

Outcome

The app screens were HTML pages in a browser, not pictures. You could click through the wizard step by step, which tells you more about a flow than a row of mockups.

What changed

  • A sidebar with six parts, from dashboard to FAQ.
  • A four-step wizard to add an action and pick its trigger.
  • Connected site and script status in the dashboard header.
  • A landing page with the private beta sign-up three times.