UX & UI Designer.
Simplifying the complex.
Designing digital experiences that feel clear, intuitive, and human.

Scroll
Selected Work
More work coming soon
← All Projects
Housing Loan App — 2025

Housing Loan App Mobile Redesign

Role
UI / UX Designer
Type
Mobile App Redesign
Platform
iOS & Android
Tools
Figma
Year
2025
Housing Loan App Screens
Overview

Turning a housing loan app into a confident, human experience.

Qatar Development Bank’s housing loan app served thousands of citizens navigating one of the most significant financial decisions of their lives. However, the app’s core service journeys - requesting milestone payments, managing repayments, and tracking loan progress - were impacted by high friction, weak information hierarchy, and limited status visibility, making essential tasks harder to complete with clarity and confidence.

This project was a ground-up redesign focused on three principles: visual clarity, process transparency, and bilingual accessibility. Every screen was rethought from the user's perspective - not the system's.

The Problem

Dense screens. No hierarchy. A stressful process made worse.

The existing housing loan app presented users with data-heavy screens that lacked clear visual hierarchy. Key actions were buried — making an already stressful financial process even more overwhelming.

Cluttered Login
Decorative background reduced readability. Multiple competing elements with no clear entry point.
Data Dump Dashboard
Loan data in raw table format with no visual separation between critical and secondary information.
No Clear Navigation
Users relied on a hamburger menu, adding friction at every step.
Unclear Payment Flow
The disbursement request process lacked step-by-step structure — no sense of progress.
Inconsistent Typography
No heading hierarchy — text sizes competed visually, making screens hard to scan quickly.
Before & After

Every change earned, not assumed.

Each decision maps to a usability observation. Nothing changed arbitrarily.

Screen 01 — Login
Before
Before — Login
old-login.png
After
After — Login
new-login.png
  • Decorative background clutters the screen
  • Two CTAs compete for attention
  • Language toggle awkwardly placed at top
  • Clean white background — focused and calm
  • Clear Customer / Consultant role toggle
  • Single primary action with breathing room

Removed the decorative background in favour of a minimal white layout. Role selection simplified to a clear pill toggle.

Screen 02 — Dashboard
Before
Before — Dashboard
old-dashboard.png
After
After — Dashboard
new-dashboard.png
  • Dense table format — no visual hierarchy
  • No personalisation — cold and transactional
  • Hamburger menu hides key navigation
  • Personalised greeting — "Welcome, Mr. Khalid"
  • Circular progress rings for key loan amounts
  • Persistent bottom tab bar replaces hamburger

Introduced personalised greeting and visual progress rings to make loan data feel human and scannable at a glance.

Screen 03 — Disbursements
Before
Before — Disbursements
old-disbursements.png
After
After — Disbursements
new-disbursements.png
  • Flat milestone list — no sense of progress
  • No visual distinction — completed vs pending
  • CTA buried with no prominence
  • Progress bar — "4 of 10 milestones completed"
  • Completed items separated with receipt links
  • Sticky "Continue to Payment Request" CTA

Rebuilt the milestone view with a clear progress bar and visual separation between completed and pending items.

Screen 04 — Repayments
Before
Before — Repayments
old-repayment.png
After
After — Repayments
new-repayment.png
  • Repayment schedule buried in a data table
  • No distinction between paid and upcoming
  • Amounts hard to parse at a glance
  • Card-based schedule with clear paid / due states
  • Colour-coded status chips for quick scanning
  • Next due amount prominently highlighted

Replaced the raw repayment table with a card-based schedule using colour and hierarchy to make payment status instantly clear.

>
Screen 05 — Settlement
Before
Before — Settlement
old-settlement.png
After
After — Settlement
new-settlement.png
  • Settlement figure buried with no emphasis
  • No summary or confirmation screen
  • Action unclear — users unsure what to do
  • Settlement amount displayed as hero figure
  • Clear breakdown: principal, profit, charges
  • Single confirm CTA with a review step

Elevated the settlement amount as the focal point, supported by a clean breakdown and a single, confident CTA.

Design Decisions

Five decisions that changed the experience.

Each decision grounded in what users needed, not what looked good on a spec sheet.

01
White Canvas Over Decorative Backgrounds
The original login used a heavy decorative image that competed with the form. Switching to clean white eliminated visual noise and let the primary action breathe.
02
Circular Progress Rings for Loan Data
Replacing raw numbers with circular progress rings gives users an immediate read on how much of their loan has been disbursed, repaid, or remains — without reading a single figure.
03
Persistent Bottom Tab Bar
A persistent tab bar keeps all key destinations — Dashboard, Disbursements, Repayments, Settlement — always visible and reachable with one thumb.
04
Milestone Timeline for Disbursements
A milestone-driven timeline with clear completed, active, and pending states transforms an opaque process into a transparent journey with a visible finish line.
05
Consistent Type Hierarchy
A strict three-level type scale: large headings for key figures, medium weight for labels, light weight for supporting text. This alone made every screen dramatically easier to scan.
Design System

Colours. Typography. Components. Bilingual.

Every visual decision documented as a consistent, reusable system built to support both English (LTR) and Arabic (RTL) interfaces.

Colour Palette
Primary#198079
Secondary#142A66
Success#1a6b40
Warning#8B5E0A
Error#B91C1C
Black#111111
White#FFFFFF
Typography — Mukta (English) + Almarai (Arabic)
English — Mukta — LTR
H1 Bold · 32/36
Build House
H2 Bold · 24/28
Disbursements
H3 Bold · 20/24
Account No. 5725666
Para lg Med · 20/24
Welcome, Mr. Khalid
Para md Reg · 16/20
Browse collection of villa designs that fits your vision.
Button md Med · 16/20
Don't have an account? Register
Caption Med · 12/16
Account No. 5725666
Arabic — Almarai — RTL
H1 Bold · 32/36
بناء منزل
H2 Bold · 24/28
الدفعات
H3 Bold · 20/24
رقم الحساب: 5725666
Para lg Med · 20/24
مرحباً السيد خالد
Para md Reg · 16/20
تصفح مجموعة من تصاميم الفيلات التي تناسب رؤيتك.
Button md Med · 16/20
ليس لديك حساب؟ سجل
Caption · 12/16
رقم الحساب: 5725666
Components
Buttons
Form Fields
Selection Controls
Checkboxes
Radio Buttons
Role Toggle
Customer Consultant
Progress & Status
Progress4/10 completed
Progress0/10 completed
Completed Pending Overdue
Icons — Used in App
Home
Loans
Disbursements
Repayments
Statements
Discounts
Notifications
Profile
Progress
Milestones
Receipt
Qatar ID
Password
Show/Hide
Security
Bilingual
UI Card — Loan Summary (English + Arabic)
Build House Card EN Build House Card AR
User Flows

The moments that matter most.

The disbursement and repayment flows are where users spend the most time — and where the old app failed hardest.

The user checks their milestone progress, initiates a new payment request, reviews the breakdown, and confirms. Four screens, one goal.
Dashboard
Dashboard
1Dashboard
Disbursements
Milestones
2Milestones
Request
Request
3Review
Confirmation
Confirm
4Confirmation
Live Prototype
Tap to interact
Key Learnings

Clarity is a design feature, not a byproduct.

This project reinforced that in a financial context, reducing visual noise isn't just aesthetic — it directly reduces user anxiety and builds trust. Every removed element is a decision made on behalf of the user. The biggest shift wasn't in how the app looked, but in how confidently users could move through it.

Back to Portfolio
View all work →

My background in Graphic Design, Creative Direction, and Digital Art Direction — shapes how I approach UX/UI today—bringing together visual craft, product thinking, and strategic perspective.

Liyakat Ali
Available for full time - freelance & consulting
About

I'm a UX/UI Designer with a background in Graphic Design, Senior Creative Direction, and Digital Art Direction — a progression that shapes everything I do. I bring visual craft and product rigour to the same table, which means I think about hierarchy, emotion, and system logic all at once.

Currently a UX/UI designer at Qatar Development Bank, where I work on mobile banking and trade finance products serving citizens and businesses across Qatar.

By the numbers
6+
Years building user-centered digital banking experiences
12+
Projects shipped, from UX/UI product releases & to multi-channel creative and print campaigns
Skills
UX ResearchUI DesignInteraction DesignPrototypingDesign SystemsFigmaMobile BankingTrade Finance UXBilingual DesignUsability TestingInformation ArchitectureDesign Leadership
Get in touch