A Journey of digital transformation: Revolutionising mortgage applications through innovative digital product design
How can we seamlessly translate and elevate the predominantly paper-based mortgage application process into a streamlined digital experience?
Client & Project Information
Client: German bank and financial institution
Industry: Financial Services
Area of focus: Mortgage and loan process digital transformation
Engagement Duration: 1,5 years
Status: Live
Role & Responsibilities
Lead:
Led junior UX and UI designers
Solution design communications
Design:
User journey and flow design
User interaction design
High-fidelity prototyping
Methods used
Persona design
Journey mapping
Wireframing
Mid-fidelity prototyping
High-fidelity prototyping
Usability testing
Structured interviews
Tools used
UI Design and engineer handoff
Wireframing
Mid and high-fidelity prototyping
Project management
Task flow design
As-is Process
Obtaining a mortgage in Germany can be notably time-consuming, primarily due to paper-based procedures and stringent legal requirements. Prospective homebuyers should brace themselves for a considerably extended application timeline and be prepared for patience.
Time consuming and lengthy process
The extensive documentation, including precise financial records, adds layers of intricacy, demanding meticulous attention to detail.
Consequently, prospective home-buyers should be prepared for a more protracted and paperwork-intensive journey when seeking a mortgage in Germany
Seemingly endless paperwork
The Approach
Why this approach
Since the digital solution did not exist nor existed an equivalent of it in the German market, user acceptance of the product was unclear.
The approach enabled early exploration of possible design variants.
Rapid prototyping was selected to design and validate the concept, process, as well as the interactions in the fastest and most cost-effective way.
The approach facilitated early user feedback on the entire product which validated the user acceptance.
The approach enabled the focus on product quality and go-live risk reduction.
The Outcome
Fully user-validated end-to-end digital solution for the mortgage application request.
Steady and constant flow of validated design to development and production.
Guaranteed product quality-based series of direct user feedback.
Exploring and Defining
Task flow
We started with series of workshops with topic experts, through which the task flow was outlined and defined, and user groups were detailed.
Screen flow
Then, the personas were created, future user journeys were designed through which the task flows were translated into screen flows.
Finally, we created a series of wireframes as the means to communicate design ideas and ensure alignment of the screen flow with the task flow.
Wireframing
1
Financing request
The user selects and inputs the property specifications such as:
The kind, year of built, address, and price of the property.
Their downpayment budget, renovation costs, realtor cost.
2
Check finances
Then the current financial information is provided through:
Connecting the bank accounts.
Selecting the reoccurring payments that will discontinue.
3
Finance selection
The user customizes payment parameters such as:
Duration of the fixed interest rate.
Amount of monthly payment.
4
Financial offer
Finally, the offer is presented to the user along with the next steps of the process.
Designing and Testing
First Iteration
During this iteration, based on research and aligned with the business requirements and development feasibility, we defined a series of parameters such as interaction and communication style. Then we validated with users through usability testing.
1
2
3
4
What was defined:
Interaction style
Communication language
Legal transparency
Process transparency
Information clustering
“Must Haves” and “Good to Haves” in each step
Validation
Who were the observers:
Business owners
Development leads
Design team
How was the testing setup:
5+1 testers per user group
Who was testing:
High-fidelity prototype
Task scenario + Structured interview guide
Observation room for the observer team
Testing room for the moderator and tester
Tobii eyetracking, screen casting, and recording
Lastly, after analysing the results, the functionalities that were validated by the user were documented into developer handoff and provided to the developers. The insights from the testing sessions were used in the second iteration.
1
Second Iteration
What was defined:
Chatbot
Communication language
During this iteration, further development and design improvements based on user feedbacks were continued. Moreover, the request of including a chatbot was explored through design and validation.
2
3
New interface
Validation
4
Business owners
Who were the observers:
Development leads
5+1 testers per user group
How was the testing setup:
High-fidelity prototype
Task scenario + Structured interview guide
Observation room for the observer team
Design team
Who was testing:
Testing the solution with and without the chatbot
Testing room for the moderator and tester
Tobii eyetracking, screen casting, and recording
Lastly, after analysing the results and based on the user feedback, the chatbot was disregarded and the functionalities that were validated by the user were documented into developer handoff and provided to the developers. The insights from the testing sessions were used in the third iteration.
1
Third Iteration
What was defined:
New sub-flow was defined
Communication language
During this iteration, further development and design improvements based on user feedbacks were continued. Moreover, the integration of direct connection to real state websites was explored.
2
3
New interface
Validation
4
Business owners
Who were the observers:
Development leads
5+1 testers per user group
How was the testing setup:
High-fidelity prototype
Task scenario + Structured interview guide
Observation room for the observer team
Design team
Who was testing:
Testing room for the moderator and tester
Tobii eyetracking, screen casting, and recording
Lastly, after analysing the results, the functionalities that were validated by the user were documented into developer handoff and provided to the developers. The insights from the testing sessions were used to modify and adjust the designs.