Manzil Mortage App


    Mobile Web, Desktop Web


    1 month


    Sketch, Illustrator, InVision


Manzil provides interest-free mortgages for Muslims across Canada. They enable their clients to purchase homes through a Murabaha arrangement.

TomYum worked with the Manzil team to design their landing page, onboarding and application experience, client dashboard, and backoffice tool.

Understanding the Why

We started off with a Discovery session with the client. Our first objective was to understand why this product was being offered to the market. We learned about the Riba, which under Islamic banking context refers to charged interest. Riba is considered exploitive, and therefore non Shariah (Islamic Law)-compliant. Thus taking out traditional mortgages containing interests is not allowed. Manzil enables Muslims to purchase homes without Riba.

The rest of the Discovery session was focused on understanding the client's vision for the brand and product. Together we went over personas, and mapped out all possible user flows from initial mortgage application to paying back the principal. We ensured that this was a collaborative effort and looked to the client's industry knowledge of mortages to supplement our process.

Design and Prototyping

To obtain Manzil's financing, candidates need to go through an application process to determine eligibility. Like a traditional mortgage, a lot of information needs to be collected: Property, Personal, Employment, Financial, and Documents of the applicant and co-applicant (if applicable). This can easily make for a boring experience, which we wanted to avoid. Therefore one of our design objectives was to make sure that the application process was as simple as possible. We achieved this in several ways.

First, we introduced account creation as the first step to onboarding. Applicants are able to save their progress during the application and resume at a later time if needed. Second, we made the forms conditional and dynamic. Where possible, we pre-filled information for the user. For example, the address field uses Google Maps API to auto-fill location data. The design was also created to be mobile-friendly so that applicants can fill out information on the go. Third, we introduced Progress Cards in the UI, which allowed for users to jump around any section and return later on when ready.

Our designs were prototyped on InVision as it also serves as a feedback and developer handoff tool. We also prepared a Components Library for the developers and future designers to use to easily implement new screens as the product scales.


We don't believe in working in a vacuum or big design reveals towards the end of a projects. This is something we tell all our clients. With Manzil, we involved their feedback as early on as possible. This positioned the project in the right direction for success. We continued to check in with the team, and used InVision to capture comments.

Let's get in touch

Simply fill out the form or email us at

Worldwide reach.

Follow TomYum on social media channels


© 2018 TomYum Incorporated. All rights reserved.