Digital mortgage application for Landshypotek Bank

Landshypotek Bank is one of the largest banks in Sweden and has been financing housing and businesses in agriculture and forestry since 1836. The brief was an all digital mortgage application process as part of their digital transformation. The result is a systematic and user friendly experience built for all kinds of digital platforms, from smart phones to desktop computers.

My role UX design, UI design, wireframes

Landshypotek Bank was awarded for the best mortgage application 2020

Parts_0000_Layer-2.png
Parts_0001_Layer-3.png
Parts_0002_Layer-4.png
Parts_0003_Layer-5.png
Parts_0004_Layer-6.png
Parts_0005_Layer-7.png
Parts_0006_Layer-8.png
Parts_0007_Layer-9.png
Parts_0008_Layer-10.png
Parts_0009_Layer-11.png
Parts_0010_Layer-12.png
Parts_0011_Layer-13.png
Parts_0012_Layer-14.png
Parts_0013_Layer-15.png
Parts_0014_Layer-16.png
Parts_0015_Layer-17.png
25348164-origpic-ba90e5.jpg

 A couple of notes
on UX and UI

  • Stepper states. To apply for mortgage is quite a process, which was divided into six basic steps to start the case with the bank, and then two more with extra details if the inquiry gets accepted. The- states of the steppers are done (1), ongoing (2) and idle (3).

  • On screen. The steppers are always to the right, floating at the top of the screen on all platforms to keep the orientation of the process.

  • Animation behavior. A description of how the animations should behave. The circle of the ongoing state (2) will fill up as the application gets filled in.

  • Headings. To keep the complex application porcess as clean and simple as possible, the title of input fields, dropdowns etc. are placed in a column to the left. Description goes here

  • Something missing. If the system notices any errors in the application, the affected step will be marked with a “!”. If the error is further up on the page you’re at, the symbol above will indicate this.

  • Upload a document. To upload a required document, you can click to choose a file or drop it in the designated area. You’ll get visual feedback as the file is being uploaded. Description goes here

  • Application status. There’s five possible statuses of each ongoing application.Description goes here

  • Summary. Step 5 (Summary) shows all given data, divided in four expandable/collapsable categories.

  • Calculation. One of the starting points of the mortgage process. Calculation of monthly cost, updating the figures in real time.

Previous

ArkDes
Next

Dice