Mobile and Web App
Halal Mortgage Planner App
Project Type: Product Design, UX/UI Design, Creative Direction, Dashboard Design
Tools Used: Figma, AutoLayout
Duration: 2 Days
Background
Halal Mortgage Planner is a mobile fintech concept designed to simplify the halal mortgage journey from planning to approval. The app helps users calculate affordability, explore Sharia-compliant financing options, and complete a guided mortgage application through a clear and intuitive experience.
I started by researching mortgage applications and fintech products to understand how users plan home financing and what challenges they face. I analysed existing mortgage tools and identified common pain points such as complex forms, unclear terminology, and lack of guidance.
Research & Planning
Based on these insights, I defined the target users and key features. I mapped user journeys and created simple flows to ensure the application process would be clear and easy to follow.
Design & Prototyping
I designed wireframes and interactive prototypes in Figma, focusing on creating a clean and intuitive experience. The goal was to reduce friction and guide users step by step through the mortgage journey.
I developed a consistent visual style using reusable components and Auto Layout to ensure scalability. The interface was designed to feel modern, trustworthy, and easy to navigate across different devices.
Implementation
The design was structured using a component-based system to support efficient developer handoff. I created reusable UI components, variants, and consistent spacing rules to ensure the interface could be implemented accurately.
Interactive prototypes were used to demonstrate user flows and key interactions, making it easier to communicate design decisions and expected behaviour.
Product Design
This project focused on designing the complete mortgage journey from planning to approval and ongoing management. I designed the experience to support users at each stage, including affordability calculations, application submission, status tracking, and mortgage management.
The final product demonstrates a full end-to-end fintech experience with a strong focus on usability, clarity, and user confidence.
Business Problem: The existing system relied on manual processes that created inefficiencies and made tasks difficult for users.
Solution
A user-centred digital solution was designed to simplify workflows and create a clearer, more intuitive experience.
Wireframes
I use wireframing and prototyping to explore ideas, refine user journeys, and communicate design solutions clearly.
Prototypes
I use wireframing and prototyping to explore ideas, refine user journeys, and communicate design solutions clearly.
I created a design system to maintain consistency across the interface and support future product growth.
Short Summary
The system included reusable components, colour styles, typography rules, and spacing guidelines, making it easier to design efficiently and ensure a consistent user experience.
The final design delivers a clear and structured mortgage journey that helps users understand each step of the application process.
Improved User Experience
Complex financial information is presented in a simple and accessible way, making the experience easier to follow and less overwhelming.
Simplified Application Process
Clear navigation and consistent layouts reduce confusion and help users move through the process with greater confidence.
Interactive Prototype
The interactive prototype demonstrates how users can explore mortgage options, review details, and complete key steps within a smooth and intuitive interface. The design focuses on clarity, usability, and a calm visual style that supports trust and decision-making.
Final Thoughts
This project demonstrates my approach to designing clear and user-friendly financial products.
My Goal
The goal was to simplify complex information and create a structured experience that helps users make confident decisions.
Thoughts
If I continued this project, I would conduct user testing and refine the design based on real user feedback.
