Client:
SwiftFinance, a digital lending platform specializing in personal loans, approached us to improve the user experience of their loan application form. The existing form was complex, lengthy, and had high abandonment rates.
Challenge:
Users found the form overwhelming, leading to significant drop-offs before completion. The goal was to streamline the form, enhance usability, and improve completion rates without compromising the collection of necessary data.
Objective:
To apply the principles of good UX for forms—covering layout, microcopy, validation, and accessibility—to create an intuitive and user-friendly loan application experience.
Research and Problem Identification
- User Interviews and Surveys:
Feedback revealed common pain points:
- Length: Users felt the form was too long and asked for unnecessary details upfront.
- Lack of Guidance: Users were confused by financial terminology.
- Errors: Missing validation or unclear error messages caused frustration.
- Analytics Review:
The highest abandonment rates occurred in sections requiring financial details, indicating that the complexity and lack of clarity discouraged users from continuing.
Design Strategy: Principles of Good UX for Forms
1. Simplify and Structure the Layout
Problem: The original form presented all fields in one long scroll, making it overwhelming.
Solution:
- Segmenting the Form: The form was divided into three clear steps:
- Personal Information
- Financial Details
- Loan Preferences
- Progress Indicator: A progress bar was added to show users where they were in the process, motivating them to complete the form.
- Logical Flow: Questions were grouped logically, with simpler fields like name and contact information appearing first to build momentum.
2. Use Clear and Actionable Microcopy
Problem: Users were confused by vague labels and financial jargon.
Solution:
- Descriptive Labels: Instead of “Net Income,” we used “Monthly Take-Home Pay (After Taxes)” to clarify the meaning.
- Inline Help Text: Short, helpful tips were placed below complex fields (e.g., “Include salary, bonuses, and freelance income” for income fields).
- Friendly Tone: Microcopy was rewritten to be conversational and supportive, e.g., “Don’t worry if you’re unsure—just estimate your monthly expenses!”
3. Optimize Validation and Error Feedback
Problem: Users were frustrated by error messages that were vague or appeared only after submission.
Solution:
- Real-Time Validation: Each field was validated as users typed, immediately flagging errors like missing or invalid input.
- Specific Error Messages: Instead of generic “Invalid Entry” messages, errors were specific, e.g., “Please enter a valid 10-digit phone number.”
- Positive Reinforcement: When fields were completed correctly, they displayed green checkmarks to build user confidence.
4. Minimize Cognitive Load
Problem: Too many fields per page overwhelmed users.
Solution:
- Use Defaults and Smart Suggestions: Where possible, fields were pre-filled (e.g., country based on IP address) or included suggestions (e.g., auto-completing addresses).
- Dropdowns vs. Open Text: For fields like “State” or “Loan Purpose,” dropdown menus replaced open text to reduce decision fatigue.
5. Make the Form Accessible
Problem: The original form lacked accessibility features, alienating users with disabilities.
Solution:
- Keyboard Navigation: Users could tab through fields and use keyboard shortcuts for dropdowns.
- Screen Reader Compatibility: Labels and instructions were updated to ensure compatibility with assistive technologies.
- High Contrast Design: Clear distinctions between text, background, and interactive elements made the form easier to read.
Implementation and Testing
- Usability Testing:
The redesigned form was tested with a group of target users, incorporating their feedback into further iterations. Testing revealed:
- Users completed the new form 30% faster on average.
- Drop-off rates decreased by 20% in the financial details section.
- A/B Testing:
The new form design was compared against the original form in a live environment. The redesigned version resulted in a 25% increase in completion rates.
Results and Outcomes
After implementing the redesigned form, SwiftFinance experienced:
- Higher Conversion Rates: A 40% increase in loan applications completed successfully.
- Improved User Satisfaction: Positive feedback highlighted the clarity and ease of the new form.
- Reduced Support Inquiries: Fewer users contacted customer support for help with form-related issues.
Conclusion
This case study illustrates the power of applying good UX principles to forms:
- Simplifying layout and structure reduces cognitive load.
- Clear microcopy ensures users feel guided and supported.
- Real-time validation and actionable error feedback minimize frustration.
- Accessibility features make forms usable for all audiences.
By focusing on these principles, Swift Finance transformed its loan application form into a streamlined, user-friendly experience that delivered measurable business outcomes. These lessons are universally applicable to any form design project, helping bridge the gap between user needs and business goals.