Improving sign up completion through better form design.
Moneykey is a mid-sized financial company servicing the highly competitive and regulated payday loan market in the US. Their online sign up form was a crucial part of the business. Millions of marketing dollars were spent to acquire online customers and they all had to sign up using this form.
The form completion rate was less than 30% and the company wanted to solve this problem quickly.
The first page of the Moneykey Self Service Sign up form had over 20 fields on one screen. It not just looked daunting, the users also had to fill out all the required fields to find out if they qualified for a loan. Most of the time we didn’t offer services in their state or they were not of eligible age. We could have spared the user from the time and energy if we asked those qualifying questions up front.
The first page of the Moneykey Self Service Sign up form had over 20 fields on one screen. It not just looked daunting, the users also had to fill out all the required fields to find out if they qualified for a loan. Most of the time we didn’t offer services in their state or they were not of eligible age. We could have spared the user from the time and energy if we asked those qualifying questions up front.
I listened to live calls in the call centre to understand who our customers were. Apart from the demographics of the customer, I heard the urgency or calmness in their voices, their responses to the questions and the reason why they were calling.
The form completion rate was less than 30% and the company wanted to solve this problem quickly.
I created a persona based on the people who called in and from the demographical information the company had collected.
A journey map was created collaboratively by the team.
A brand voice was created after empathizing with the user through their journey. We discovered that our customers needed our money to address something in their life – quickly. The company needed to help the customer through this stressful time by being:
Deliver an experience that is:
New brand visuals were created to reflect the brand voice.
A new square logo was designed to be displayed on mobile devices. Internally, we all referred to the company as MK. As we were trying to project a more “friendly” vibe to our customers, we decided to reveal this in our logo.
Web fonts were selected and clearly communicated to the design and development teams.
The new brand colours to bring in a more warm and friendly vibe to the application.
The new custom SVG icons were drawn and animated by me to again reflect our trustworthy yet friendly voice.
The first page of the form was grouped into multiple screens to reduce cognitive load and allow for progressive disclosure so that the user would have shorter “tracks” of only answering questions relative them.
Started with asking for the user's state of residence to see if we provided loans to that user. If the user was in a state we didn’t service then the user wouldn’t have to needlessly fill in any more fields.
The number of pages in the legal documents were shortened. For example, the agreement to the privacy policy, Jury Trial Waiver and Arbitration Agreement was linked in the Create Account step together with the agreement to the terms of service and electronic communications agreement.
More conversational and friendly wording was used throughout the application form. The pay schedule was particularly confusing for users to fill out. We reworded the options and made the proceeding fields customized based on what period they picked — making the experience faster and more clear.
Using Sketch and InVision, a clickable prototype was demoed to the internal stakeholders. Over 5 iterations from feedback from over 10 stakeholders were done before creating the rapid prototype.
I taught myself to code in React and I created the prototype as my first project. The prototype was realistic but it didn’t store anything the user entered in a database.
It helped the user see the quality of life (QOL) improvements we added to make it easier for them to fill out the form.
Check out the initial prototype used on UserTesting.com:
By observing how real users we actually using the prototype(s), we were able to spot certain behaviours that weren’t apparent from the outset.
At the screen where the payment amount was confirmed, we found out that some users thought that the sign up process was over and exited. It was too congratulatory and so we removed the “Welcome” and “Congratulations” copy. This page was only shown if the user qualified for a lower loan amount than the amount they requested on the first screen (which was usually the case). The page was simplified to represent that purpose only.
On the legal documents, the Next button was at the bottom (which was very lengthy). A “sticky” signature box was added.
To satisfy the Legal department’s requirement for the user to scroll (and therefore read), the Next button only activated when the user scrolled to the bottom.
This is how a form should be.
~ Tester on UserTesting.com
User satisfaction from the final round of user testing was 100%. The completion rose over 30% a month after the new form was deployed.
UserTesting.com proved to be a game changer. To be able to show recorded feedback from real users to stakeholders of the project, helped to make the decision to make the changes quickly. It also gave confidence to everyone that the form was going to be successful when we saw the satisfaction rate get to 100% by the last round of testers.
We had the luxury of time before launching this form to also design the form for a new company that was being launched. This allowed me to create synergies in the design to allow for whitelabelling. We essentially hit two birds with one stone
See it live:
https://secure.moneykey.com/apply/stateselection https://secure.creditfresh.com/apply/stateselection