Application Form Prototype

• 1 min read

Application Form Prototype mockup

We’ve been building a prototype for a new application form, an essential part of the finance conversion funnel. We chose to build this in a modern front end framework to allow us to build and iterate quickly during testing.

application form prototype initial view

The new application form has been designed to reduce cognitive load by pacing out the questions in a more conversational manner. We plan to launch an A/B test with the prototype in the next few weeks.

We chose Vue.js due to its performance advantages over React and Angular. We've used Vue Router, Vuex for state management, and Vuelidate to help with validation.

We’ve added custom validation in to verify the formatting of UK phone numbers, used semantic HTML5 for all the markup, every component has been designed to be accessible from the ground up, we even had time to add in a little easter egg.

You can see a live demo here:

https://priceless-jang-b73b28.netlify.com/

Google Lighthouse scores at the time of writing are 99 Performance, 100 Accessibility, 100 Best Practice and 100 SEO. Google Lighthouse scores

What have we done?

  • UK Phone number validation
  • Persistent State (on page refresh)
  • We tell customer how much more address history we need before they progress.
  • Addresses returned from the Postcode API are saved to save extra API requests.
  • Autofill enabled fields where possible.
  • UK Postcode Validation