Introducing the next generation of Checkout forms designed for better conversions

Dalan Mendonca
Instamojo Matters
Published in
3 min readMay 11, 2016
Our research shows that The Force is strong with these forms

As a payments platform, one of the most crucial parts of the Instamojo experience is our checkout form. It represents both Instamojo and the sellers who use us. Even though we’ve worked hard on giving the best success rates in the industry, our checkout experience hadn’t been updated in a while and really needed some design love ❤

After many months spent polishing the finer aspects of the new forms; today, we’re starting the rollout of the new Instamojo checkout forms.

Lets jump right in with a demo!

Before

Big, slow, boring

And now

Small, gentle, sexy

What makes the new checkout forms awesome?

1. Strong Seller Identity

Who and what of the payment — crisply displayed in the new header

A recurring theme in feedback from our customers has been the need to customize the payment form and make it look like their own. The new form has header which features a cover image along with the users name & photo prominently. This makes it dead simple to customize the form. We’re not stopping there — we’ll soon be launching the ability for sellers to change the text and form colours to match their own branding.

2. Mobile First Design

Big things come in small packages that are 320 pixels wide

The new checkout forms are designed mobile first because that’s where all the buyer eye-balls are and designing for the toughest constraints first makes it easier to scale to the rest. Sellers now don’t have to worry how their forms will look on small screens, the experience is consistent everywhere.

3. UX Improvements

The new form brings along a plethora of improvements to the user experience. Context about the payment and person being paid is crisply available in the header. The form follows a horizontal flow with animations being used to gently load successive sections. Our long scary form is now broken down into smaller parts — wih payment choice being a separate last step. Errors are clearer and make the form cutely wiggle.

4. Modularity

The checkout forms are designed as a nifty module that can be customized and plugged into parts of a site or overlaid on product pages to create even more powerful experiences.
Desktop, mobile web, mobile apps, floating checkout, inline checkout — you name it, we can handle it — our new checkout can fit in everywhere without major tweaks.

Rollout

All new users are on the new forms by default.
Existing users can opt-in using the steps below.

To enable the new forms

  1. Go to instamojo.com/settings
  2. Open the “Beta Settings” menu
  3. Tick the box next to “Enable New Checkout Forms”
  4. That’s it!

--

--

Dalan Mendonca
Instamojo Matters

Product Manager by day, Writer by night · Recovering Nihilist · ❤️ Books, Running, Humour, Philosophy, Elegance · dalanmendonca.com