UI/UX Design for Financial App with Merchant Booking
Raza Ul Mustafa
Project Overview
This financial app combines payment management, booking services, and merchant discovery into a seamless digital experience. Designed with a user-first approach, the app empowers users to manage payment methods, explore exclusive offers, book services (like hotel stays), and review their experiences. The goal was to unify financial functionality with service interaction, offering an all-in-one platform where users can pay, book, explore, and review — all within a cohesive mobile experience.
The design emphasized fluid navigation, detailed service listings, and secure, intuitive payment flows.
My Role
As the UI/UX Designer, I was responsible for:
Designing the entire user flow from login to payment and post-booking reviews
Creating the visual interface for all core screens including home, bookings, profile, and merchant details
Building interactive prototypes for usability testing and stakeholder reviews
Leading user research to understand expectations around booking and financial transactions
Ensuring accessibility, consistency, and high usability across all screens
Working Process
User Research & Strategy
Analyzed common behaviors in financial and travel apps (like PayPal, Booking.com)
Conducted interviews and surveys to understand user preferences for payment methods and booking flow
Created user personas with primary use cases: “The Planner,” “The Explorer,” and “The Frequent Booker”
Wireframes & Flow Mapping
Defined key flows: onboarding/login → home → manage payment → search merchants → book → pay → review
Wireframed the bottom tab navigation for easy access to primary functions: Home, Search, Booking, Favorites, and Profile
UI Design
Developed high-fidelity mockups with a modern, clean interface
Integrated a consistent visual language using intuitive icons, color-coded status indicators, and bold typography
Designed components for reusable cards (offers, transactions, merchants)
Prototyping & Testing
Built interactive prototypes to test the booking-to-payment journey
Tested the scan-to-pay vs. card payment flow for speed, clarity, and user preference
Collected feedback and iterated to simplify forms, improve card management UX, and enhance merchant listings
Highlights from the Mockup Images
Home Screen:
At-a-glance view showing:
Recent transactions
Current offers
Quick access to manage payment methods (Cards, PayPal)
Tappable cards allow users to jump directly to offers or booking suggestions
Bottom Navigation Bar:
Five clear icons: Home, Search, Booking, Favorites, and Profile
Persistent bar ensures fast navigation between key flows
Booking Flow:
Search or browse merchants (e.g., hotels)
Merchant detail screens show:
Descriptions
Room options with filters (place type, bedrooms, baths)
Reviews and ratings from past users
Responsive and visual layout for selecting and viewing room options
Payment Flow:
Options to scan to pay or use saved payment methods
Secure card management UI for adding or removing cards and linking PayPal
Confirmation screen with payment success details
Review System:
Post-service, users are prompted to leave a review and rating
Review interface includes a quick star rating, comment input, and optional photos
Merchant profiles display aggregated reviews and top feedback
Profile Section:
Centralized user settings
Booking history and saved favorites
Payment method management
Review contribution tracking
Like this project
Posted May 10, 2025
This app combines seamless booking, secure payments, and service discovery in a clean, mobile-first design, making it a smart, all-in-one lifestyle tool.
