Figma UI/UX Prompt – Bandhan Bank Instant Loan Portal
Generated Prompt
## APPLICATION OVERVIEW The Bandhan Bank Instant Loan Portal is a modern web application designed to facilitate a seamless and user-friendly experience for customers seeking instant loans. This responsive platform focuses on providing users with a clear and efficient process for selecting loan categories, filling out applications, and verifying eligibility—all while maintaining a professional fintech appearance. ## CORE FEATURES 1. **Landing Page**: A visually appealing hero section that showcases the Bandhan Bank brand and highlights key benefits of using the portal. 2. **Loan Category Selection**: A grid of loan category tiles that allows users to easily select their desired loan type using radio buttons. 3. **Application Form**: A multi-step form that collects essential user information and uploads documentation, ensuring a smooth application process. 4. **Eligibility & Loan Offers**: After submitting the application, users receive instant eligibility results and can configure their loan parameters. 5. **OTP Verification**: A secure modal for OTP validation to ensure the authenticity of the application process. 6. **Success Screen**: A confirmation page that provides details of the submitted loan application, including application ID and expected approval time. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: The application will feature a card-based layout with soft backgrounds, rounded cards, and clear navigation that promotes ease of use. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: React Context API or Redux (if necessary for state management) ## IMPLEMENTATION STEPS 1. **Set up the project**: Initialize a new React app using Create React App with TypeScript. 2. **Install dependencies**: Add Tailwind CSS and other required libraries for UI components and state management. 3. **Create the design system**: Develop a consistent component library, including buttons, inputs, and cards, following the design specifications. 4. **Develop the landing page**: Implement the hero section, benefit points, and loan category selection tiles. 5. **Build the application form**: Create the multi-step form component with conditional rendering based on loan type selection. 6. **Implement eligibility results**: Design the eligibility screen that shows loan offers based on user input. 7. **Add OTP verification**: Develop the modal for OTP validation after the loan application is submitted. 8. **Create the success screen**: Design a confirmation page that summarizes the loan application details. 9. **Optimize for responsiveness**: Ensure all components and layouts are mobile-friendly and adapt to various screen sizes. ## USER EXPERIENCE The user journey begins with an intuitive landing page, where users can easily navigate through loan categories using visually distinct tiles. After selecting a loan type, users are guided through a multi-step form that collects necessary information while providing contextual help. Upon submission, users receive instant feedback on their eligibility and can quickly verify their identity through OTP. The final success screen reinforces their application status and provides next steps, ensuring a smooth and efficient experience throughout the loan process. By adhering to these specifications and steps, the Bandhan Bank Instant Loan Portal will deliver a modern, user-centric digital lending experience that instills trust and confidence in users.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
