HayFixr

“Design a modern, premium, and user-friendly UI/UX for a home maintenance service booking mobile application called HayFixr. The app should support Rapid, Standard, Normal, and Emergency bookings with live technician tracking, in-app payments, downloadable invoices, and a digital wallet. The design should follow a clean, contemporary aesthetic using a deep blue primary color (#0B3C5D) with light blue accents, soft gradients, and subtle glassmorphism/neumorphism elements. Use Poppins or Inter as the primary font. Icons should be modern, rounded, and micro-animated. Include the following screens and structure in Figma (iPhone 14 frame – 390 × 844): Splash Screen – Animated logo with the tagline: ‘One App. All Home Services.’ Login Screen – Mobile number login with India flag (+91), illustration, and a primary ‘Continue’ button. OTP Screen – Four large OTP input boxes, countdown timer, verify button, and resend option. Home Screen – Header with auto-detected location (left) and profile icon (right). Auto-rotating slider banner with offers and emergency/rapid service highlights. ‘Top Providers Near You’ horizontal scroll section showing provider photo, name, rating, and distance. Three large animated booking cards: Rapid, Standard, and Normal. Categories Screen – 4-column grid layout for categories (Plumbing, Electrical, Electronics, Carpentry, Cleaning, AC, Appliances, Home Maintenance). Services Screen – List of services inside a category with icon, price range, and ‘Book Now’ button. Booking Details Screen – Editable location, booking type selection, date/time picker (for Standard), notes box, and confirm button. Live Tracking Screen – Full-screen map with moving technician icon and bottom info card (photo, name, rating, ETA, call button). Work Status Screen – ‘Work In Progress/On Hold’ status, progress bar, and buttons for Resume, Chat, and Call. Payment Screen – UPI, Card, Net Banking, and HayFixr Wallet options with a prominent ‘Pay Now’ button. Invoice Screen – Detailed invoice with breakdown and ‘Download PDF’ button. Wallet Screen – Gradient wallet balance card, ‘Add Money’ button, and transaction history. Offers Screen – Coupon cards with apply buttons. Current Bookings Screen – Ongoing bookings list with status and view details. Booking History Screen – Past jobs list with date, amount, download invoice, and rebook option. Profile Screen – Name, phone, addresses, saved locations, payment methods, dark mode toggle, and logout. Create a Figma design system including: Color styles, typography styles, button variants, input fields, reusable cards, and bottom navigation bar. A clear user flow diagram from Splash → Login → OTP → Home → Booking → Tracking → Payment → Invoice. Prototype animations: splash fade, slide transitions, auto-sliding banners, button micro-interactions, and success animation after payment. The final design should feel fast, premium, trustworthy, and visually attractive while remaining simple and easy to use.”

Pages