Single Page Checkout

Web
KNB single page checkout on desktop, tablet and mobile

Promotional landing page with checkout functionality.

Client
Caitec
Role
UI/UX Designer & Front-End Developer
Tools
Figma, Illustrator, Photoshop, & VS Code
KitNipBox landing page on desktop and mobile

Summary

After phase one of a redesign of a legacy CakePHP e-commerce website, I was tasked to refactor the checkout functionality into a landing page template that could be quickly reused for marketing promotions to reduce the steps in the marketing funnel from email and social platforms to purchase.

KitNipBox landing page design on laptop

The Challenge

Create a landing page template with checkout functionality that is easy to update for future promotions with the limitations of a custom legacy e-commerce platform.

KitNipBox landing page website on laptop

The Solution

The solution was fairly straightforward using assets I had created during phase one of a refresh of the legacy CakePHP based website. Once the base page was completed I created new assets for new promotions.

KitNipBox landing page on Mobile

The Results

We saw better engagement, reduced cart abandonment and increased subscriptions. The template is now used for email and social campaigns.

Resources

UI Kit, Mock-ups.