To respect the bank’s confidentiality, the work shared here does not capture the full scope of internal strategies or data. The content reflects my personal perspective on the project and does not represent the bank’s views or direction.
Designing an Islamic Banking experience required balancing cultural accuracy, usability, and technical feasibility.
Key challenges included:
Sadaqah integration: Linking multiple mosques, NGOs, and orphanages involved inconsistent data, making seamless donations difficult.
Zakat calculations: Multiple types and complex rules demanded precision to ensure trust and accuracy.
Feature differentiation: The Riyal Saver multi-currency account had to stand out from existing offerings while maintaining cohesion.
User comprehension: Features needed to be intuitive for both Muslim users and others unfamiliar with Islamic finance.
Process
1. Research & Problem Understanding
- I began by understanding how users interact with Shariah-compliant financial actions, focusing on where complexity or hesitation arises.
- Reviewed existing Sadaqah, Zakat, and savings flows to identify multi-step friction and confusing calculations.
- Studied how users perceive charitable impact and ethical financial guidance.
- Identified key pain points: unclear step sequences, calculation uncertainty, and low confidence in completing actions.
- Impact: These insights shaped a user-centered experience that guides users clearly, reduces cognitive load, and builds trust.
Early ideation mapping the end-to-end Riyal Saver user flow.
Process
2. UX Flows & Interaction Design
- I mapped end-to-end journeys for Sadaqah, Zakat, and Riyal Saver to simplify multi-step processes and guide users through complex calculations with clarity.
- Iterated wireframes and prototypes from low to high fidelity to validate navigation, labeling, and interaction flows.
- Collaborated closely with developers to ensure real-time calculations and multi-currency functionality worked seamlessly.
- Impact: Streamlined flows and validated interactions reduced user friction, built confidence, and ensured accurate, trustworthy results.
Wireframes and prototypes ensured consistent, effortless, and accurate user flows Zakat features.
Process
3. Wireframing & Prototyping
- I translated the UX flows for all three main features into wireframes and prototypes, ensuring consistent, intuitive, and functional flows.
- Created low- to high-fidelity wireframes and prototypes to validate layout, step logic, navigation, and multi-step calculations.
- Ensured consistency across Sadaqah, Zakat, and Riyal Saver while making each journey feel natural and easy to complete.
- Conducted stakeholder walkthroughs and usability testing, iterating interactions and flows based on feedback.
- Impact: Delivered cohesive, intuitive, and reliable flows that reduced friction, respected religious sensitivities, and aligned stakeholders on functional, user-centered designs.
UI Concept Screens — High-fidelity interfaces across critical user flows.
Process
4. UI & Cultural Design
- I crafted a modern, culturally respectful UI that balances Islamic aesthetics with banking guidelines, ensuring clarity, trust, and usability.
- Integrated subtle geometric patterns, green–gold accents, and culturally relevant icons to reflect Islamic values without overwhelming the modern banking interface.
- Designed layouts that guide users step-by-step, with clear hierarchy, progress indicators, confirmation screens, and contextual hints for complex financial and religious actions.
- Ensured the visual system was scalable, consistent, and responsive across devices while maintaining accessibility standards.
- Collaborated with developers to implement real-time calculations, dynamic currency conversions, and accurate step validations, combining cultural design with technical reliability.
- Impact: Delivered a visually engaging, intuitive, and technically robust experience that respects cultural values, supports religious financial practices, and meets modern banking usability standards.
The Islamic Banking theme introduced features that make ethical finance intuitive and meaningful:
Sadaqah: Seamless donations to mosques, NGOs, and orphanages with transparent tracking, transforming a traditionally complex process into a trusted, one-tap experience.
Zakat: Step-by-step guided payments with proper niat and accurate calculations, allowing users to fulfill obligations confidently and effortlessly.
Riyal Saver: Multi-currency account tailored for Saudi Riyals, simplifying travel savings while clearly differentiated from existing accounts.
Islamic Theme & One-Tap Access: A cohesive interface with cultural cues and intuitive entry points makes complex financial and religious processes easy to navigate.
These solutions streamlined complex financial tasks, enhanced user trust, and increased engagement, reflecting thoughtful design decisions that balanced usability, accuracy, and cultural relevance.
The project successfully brought hidden Islamic Banking features to the forefront, improving visibility, usability, and engagement. Users can now perform charitable donations, pay Zakat securely, and manage multi-currency savings with confidence. Beyond serving Muslim users, the app offers other religions and cultures an opportunity to explore and learn about Shariah-compliant finance, promoting inclusivity and awareness. By leading the UI/UX strategy, I ensured these complex features were not only functional but intuitive and visually engaging, positioning HLB Connect as a forward-thinking, socially responsible bank.
This project reinforced the importance of clarity and precision when designing complex, culturally sensitive financial processes. Coordinating with multiple charities and stakeholders highlighted the value of strategic planning and collaboration. Differentiating new features like Riyal Saver emphasized the need for clear visual hierarchy and intuitive labeling. Most importantly, it demonstrated that thoughtful UX and culturally resonant UI can make complex, ethical financial services approachable and meaningful, empowering users to engage confidently while broadening awareness across diverse audiences.
