Overview
AQARI is a real estate investment app design project: a fractional real estate web app for Shariah-compliant property investing in Saudi Arabia. Investors buy a share of a building from 1,000 riyals, follow Taqeem valuations, receive rent into a wallet and trade units in scheduled windows. I designed the product end to end, Arabic first with full RTL layouts and an English twin, across 94 screens.
The challenge
The brief had four voices, each asking for something different:
- The investor: show me what I own and what it earned.
- The Shariah board: no riba, and a fatwa for every structure.
- The Capital Market Authority: clear limits and full disclosure.
- The Taqeem valuer: two independent valuations for every property.
Research named three fears: "Is the price fair?", "My money is locked for years" and "How much Zakat do I owe?". The main persona, Mohammad, is an Iqama holder who wants steady halal income instead of idle bank cash, with no safe, legal route into property. The first thing he opens is the wallet, to see when the next payout lands.
The process
I rebuilt the brief and PRD, then mapped how one share lives through a year: buy, monthly rent, the trading window, Zakat on the hawl and the exit vote. That cycle shaped an information architecture of 12 sidebar pages, from Overview and Wallet to Trading window, Sukuk, Zakat and Learn.
Every screen had to answer three questions: what do I own, what did it earn, and what happens next. I explored three visual directions and chose a grid of hairlines, a 1440 layout in three columns with 32 px cell padding and 1 px rules. The user flow ran from a listing to an ownership certificate, and the design system grew to 16 components with motion tokens.
The solution
Overview dashboard
The overview reads value and rent together. The portfolio value sits above one chart: a line for value, a dashed step for capital invested and gold bars for rent received, with ranges from 3 months to all time. Below, a properties table lists shares, current value, change, net yield and next payout, beside an allocation donut by city or type.
Property marketplace and detail page
Each property card shows funding status, a Shariah certified badge, a funded bar, target and net yield, the minimum and days left. The detail page puts every number beside its source: share price with its valuation date, a share stepper with quick picks, the fee, expected monthly rent, and two certified valuations side by side whose average sets the offering price.
Four steps to ownership
Investing is one modal with a four part progress bar: shares and review, SPV agreement with e-signature, Nafath verification and payment. The Nafath step shows one large number to pick in the Nafath app and a countdown, so nobody wonders what comes next. I break that pattern down in my Nafath sign-in UX guide. Payment offers mada, Apple Pay and SARIE, and the flow ends on a certificate.
Wallet and payouts
The wallet answers Mohammad's first question. Available balance sits on top with add funds and withdraw, then a payout timeline with the next amount in gold, and a switch to reinvest payouts automatically. The transactions page adds type filters, a distributions calendar with Hijri dates and reinvest choices: the same property, the highest yield or a balanced spread.
Trading window
Selling happens inside a price band set from the last valuation. The sell order modal offers a limit or market order, a slider marking the band and reference price, then quantity, fees and expected net. I designed three states: inside the band and ready to send, outside the band with a red field and a plain reason, and order filled with a confirmation toast.
Sukuk, votes and Zakat
Sukuk get a subscription modal, a coupon schedule and a diagram from investors through the SPV to the leased properties and tenant. Exit votes offer sell, extend or abstain as radio cards, signed through Nafath, then a result screen of bars. Zakat is estimated for the Hijri year, with a ring counting the months of the hawl and a note that leased property value is not zakatable.
Certificate, learning and settings
An ownership certificate can be shared by link, with a validity choice, toggles for what the receiver sees and current value hidden by default. Learn holds tracks, guides, a return calculator and a glossary. Settings speak plainly: connected devices, quiet hours that pause alerts at prayer time, data export and deletion, the risk profile, and a choice of digits, calendar and currency display.
Arabic RTL first, with an English twin
Every screen was drawn in Arabic first and mirrored into English. Charts and progress bars flip, video scrubbers stay left to right, money uses Western digits, and a direction mark keeps neutral text starting on the correct side. The full rule set is in my Arabic RTL interface design guide. The official riyal symbol sits beside every amount, and gold is kept for payouts, actions due and certificates.
The result
- 94 screens in Arabic RTL with an English twin, across 12 sidebar pages.
- Flows for investing, Nafath verification, payment, trading, sukuk, exit votes, Zakat and certificate sharing.
- Error and confirmation states, a Ctrl K command palette and quick invest with a balance top-up.
- A design system of 16 components, two-tone icons, a hairline grid and motion tokens from 120 ms to 360 ms, with one rule: money never animates.
How it helps the client
A fractional property platform in Saudi Arabia needs trust from investors, the Shariah board and the regulator at once. The design gives each a place: valuations with their source, a fatwa note at the point of investing, clear limits on trading and plain records for Zakat. More work like this sits in my real estate case studies, and how I run such projects is on my product design page.
