Zap Pay: Landing Page

Zap Pay is a startup that is speeding up the drive-thru. I designed and built a landing page in order to build interest and contact potential customers. The project took a couple weeks of working time over the course of a couple months. It went through a few iterations in Figma, adjusting content, and gathering feedback from the team. The website had to be brief, to the point, and work on mobile and desktop. You can see the launched site here.

Landing page banner

One of the exciting things about this project is that it gave me opportunities to have fun with typography, creating bold layouts involving CSS masks, and variable fonts. Web technology has come a long way in the last decade, allowing me to create designs that would have only been possible in print when I started my career. But now, I can use live text to ensure that the page is still accessible and performant.

How Zap Pay works

In addition to bold typography, I used Spline, a 3D design tool, to create a tangible demonstration of the Zap Pay app experience on a phone. That, plus a little animation demonstrates the Zap Pay wireless technology at work.

3D and CSS animation

Demonstration of Zap Pay speed against the status quo

I used Rive, a web animation tool, to create an animated illustration comparing the current slower drive-thru experience, with the faster Zap Pay experience. The isomorphic styling of the illustration is great for comparing how things move compared to one another.

The Sign Up form

The sign up form is the main call to actino for the landing page. The Sign Up button in the header sticks to the top of the page as you scroll to make sure you can always jump down to the form. The form sends data to a Google Sheet, using Google App Scripts, and even falls back to a Google Form if the App Script becomes rate limited. This reduces additional dependencies and makes the project cleaner and easier to maintain.

The Zap Pay Landing Page is responsive, performant, bold, and simple to use. From little details, like the lightning bolt background textures, to autoscaling typography, it puts together the things I like most about design. Check it out.