Credit card form image

Ocean Finance
Credit Card Form

  • UX/UI
  • Frontend Dev
  • Mobile first
  • Responsive design
  • HTML
  • SCSS
  • Flexbox
  • Javascript
  • Vue.js
  • Sketch
  • Zeplin
  • Abstract

Overview

The credit card is one of the main products on offer at Ocean Finance and was overdue a complete overhaul. This was done through the hard work of a combination of teams and processes, from content, to user research, to design, Hotjar recordings, development and testing.

The original form was not fully responsive, not ideal as around 80% of traffic was coming through mobile, and required a lot of scrolling which was found to be an information overload to some people as it felt neverending. These were the main issues at heart as the user had to be at the forefront of the transformation, alongside plenty of UI updates to bring the form styling into the 21st century.

Updates

  • A progress bar following a page to page format, showing the users progress made through the form, simplifying the journey so that it has an endpoint and making it seem shorter.
  • A very limited amount of questions on each page, mainly just 1, no more than 3, which meant no more information overload and no more scrolling (maybe just a little on mobile).
  • Font sizes, colours, labels, inputs and buttons updated to all be accessible and, if necessary, easily clickable.
  • Clear error text, subtext and info text to help guide the user on anything they may not be sure about.
  • The journey is now dynamic based on how some questions are answered. For example, if someone is employed they are directed to a question that is mandatory on what their occupation is, should they not be employed, this next question becomes optional.

Results

The new form saw an uplift in sessions starts to submits of over 10%. Great success!

Credit card form imageCredit card form imageCredit card form imageCredit card form image
Credit card form imageCredit card form imageCredit card form imageCredit card form image

Live form here