Emma Mason is a self taught cook, baker, writer, photographer, and the lovely lady and master mind behind Kitchen Mason – a website filled with some of the most mouthwatering recipes you’ll ever find around the Internet. She’s also a client of mine. I’ve been helping her improve various aspects of her website for the past few months now: UX, bug fixing, tweaked some existing functionalities, added some new ones, etcetera.

A while ago, Emma mentioned that she was looking for ways to improve the conversion rate of her mailing subscription form and asked for advice. After a short review, I found that:

• “Subscribe!” call-to-actions needed better headlines / copywriting.
• Said CTAs were redirecting users to an off-site, generic MailChimp form.
• Users had to perform way too many clicks than necessary to subscribe to the mailing list.
• Most of this stuff (headlines, call-to-actions) was “hard-coded”. Changing anything usually required messing around with code.

So, basically, we had two major issues here:

1. The overall user experience wasn’t great, which was probably hurting the conversion rates;
2. Making changes to texts was difficult and time-consuming for Emma.

So, instead of making her edit theme/plugin files, I thought it would be a better idea to create a plugin that provided her with a friendly user interface to change headlines/call-to-action texts and even some UI related things directly from the WordPress Dashboard. No coding required.

And since we were at it, we also took the chance to review the overall mailing subscription experience: we wanted users to join her mailing list quickly and in an intuitive way. Call-to-Action texts needed to be a bit more compelling and concise so I helped her with that too.

After a few e-mail exchanges, we went from this:

to this:

The KM Convert WordPress plugin was born.

Measuring effectiveness

The plugin has built-in Google Analytics integration, which basically means that Emma can tell when certain actions take place:

• The subscription form was shown to a user.
• A user interacted with a given “subscribe!” call-to-action.
• A user subscribed to the mailing list.

This will let her gauge the effectiveness of a given call-to-action, allowing her to take appropriate actions if/when needed (review its copy, change its location, use different photos, etcetera).

MailChimp integration

Since Emma uses MailChimp to send newsletters to her readers, the plugin provides seamless integration with MailChimp’s API:

1. When a visitor attempts to subscribe, KM Convert validates whether the e-mail address is valid and hasn’t been already subscribed to Kitchen Mason’s mailing list.
2. On successful subscriptions, a welcome email is sent to the visitor prompting them to confirm that they want to join Kitchen Mason’s mailing list (you know, because of the GDPR thing.)
3. On unsuccessful attempts, the plugin fails graciously displaying a user-friendly message.
4. Emma can also set to which mailing list should new users be added to via the plugin’s Settings page.
5. If Emma ever needs to change her MailChimp API key for whatever reason, she can do so also from the plugin’s Settings page. No coding involved at all.

Call-to-Action!

To help Emma improve her conversion rates, KM Convert adds two call-to-action boxes to the site:

The Top Bar CTA

The Top Bar is a dismissible box that’s fixed at the top of the window. It consists of a call-to-action text and a button that when clicked on displays the opt-in form lightbox.

Both the call-to-action copy and the button label can be easily customizable from KM Convert’s Settings page:

There’s even a checkbox to show/hide the Top Bar if needed.

The In-Content CTA

The In-Content call-to-action gets appended at the end of every post automatically. The two column box displays an image to the left and accompanying text (heading and a short description) to the right:

Like the Top Bar, the In-Content CTA is fully customizable too (yep, even the image can be changed):

The Subscription Form

Previously -as mentioned at the beginning of this article- whenever a user clicked on any of the previous CTAs that were present on Kitchen Mason’s website, they were automatically redirected to an external MailChimp form which wasn’t a great experience: the user had to abandon the website -even if momentarily- just to subscribe to a newsletter.

To keep the user on the website, KM Convert displays the opt-in form in a lightbox:

And yes, it has its own Settings page as well:

A UI to change the UI

The KM Convert plugin includes customizable options, not only to change some texts and images, but also has settings to change how the call-to-actions look on screen:

For now it only allows changing colors (text color, background color, etc) but we might add some more options in there in the future if/when needed.

Has KM Convert helped Emma convert more visitors into loyal subscribers?

The plugin has been active on the live site only for a few days (at the time of writing) so we can’t tell if it has had any noticeable impact on the conversion rate yet. In terms of user experience, however, it’s already way better than what Emma had before so that’s a good sign:

Hopefully we’ll see an increase of newsletter subscribers in the next few months.

Update:

As of February 9th 2019, Emma claims her MailChimp subscription list has grown 40.62% since the installation of the KM Convert plugin. That’s fantastic!