De Hypotheker Project

Self Service Mortgage Application Portal for De Hypotheker
With my company Yellowtail BV.

Project Goal
Improving the mortgage application portal, so users can navigate the process easier, and complete necessary identifications and upload documents and buy their home.

My role
Making use of data and my own UX analysis, improving the user friendliness and interface of the whole application portal. As the only designer in this project, I have changed the existing designs, and added new features.

Team
Me (UX Designer), Business analysts, Product Owner, Scrummaster, FE Developers.

NDA limitations
Due to NDA, I can not show screens here that needs login. Feel free to reach out to me for more information.

🚩 The problem
De Hypotheker has an online mortgage application portal where users can do the mortgage application themselves after a payment. There are multiple problems that users have voiced, and we have also analyzed with business looking at data.
It relates to:

Not having a clear progress bar to help them navigate the process,
A messy documents section where users can not track the progress and differentiate within partner documents,
Third party apps where users gather their citizen data not having a proper user flow, so users drop off here. (DigiD, Ockto)
Users not being able to differentiate between completed and open tasks (and see what they should still do the complete a task)
Mobile not working properly, and is a bad copy of the desktop version.

🎯 Goal
Being able to improve the points mentioned above with editing existing features, and implementing new features. The success is going to be tested by collecting data.

✍️ Approach

Here is a short explanation of how we approached the problem, and how our process looked like.

We aim to understand the user together with business to see what they want to achieve via this portal.

🧑Understand the user

How can we best meet users needs? We brainstorm, ideate solutions, and define how are going to execute it.

💡 Ideate & Define

Time to make it into something real. Collaborating extensively with developers for feasibility and consistency.

🚀 Execute

User Persona
We created user persona together with the insight from business. Of course we focused on young people who are using the self service portal to buy their first or second home.

Ideation sessions
I laid out my ideas for improvement points and discussed this together with the stakeholders to see which is feasible. This took multiple sessions, where we prioritised based on budget.

Aligning with developers
I have done sessions with developers to look at the designs I have. Which components need tweaking? Anything does not exist in style guide?

Data Analysis
We mapped out data analyticss we have to analyse where the drop-offs were higher. This included qualitative data from customer representatives too.

Wireframing
I have designed wireframes to further visually illustrate to non-design background stakeholders how my ideas would look like.

Handoff
Handing off the components/screens to developers to they can start with building. Used Zeplin in this case.

User Flow
We looked at the current user flow and analyzed inconsistencies. Made multiple flows for users with and without partners. We mapped out pain/improvement points.

Prototyping & UI design
I created desktop and mobile prototypes using the brand style guide/design system and shared this demo with stakeholders.

Review / Tweaks
Communicating with the stakeholders the final designs, and following the progress of the pushed features to if any tweaks are needed.

🙋‍♂️ What users needed, what I have designed.

I can not show the screens here because of NDA. Feel free to reach out for more information

Problem: The progress bar was not clear enough to give a good overview of the process. It also did not exist on mobile.

Solution: I have designed a new progress bar with a mobile variant, with numbers and better names. Re-organized what section was included in each step.

🚗 Progress Bar

Problem: No visual cues to differentiate what upload is successful, what is in review, and what is still to-do. Also your documents & partner documents were in one section. So users were uploading the wrong documents.

Solution: I Designed stickers for document cards that shows what is completed, what is in review, and what is still to do.

📚 Documents - Status cards

Problem: No good flow for third party apps such as DigiD and Ockto. No good explanation of how you are going to work with a QR code for yourself and partner.
Users also dont trust it with data since Ockto is pretty new in financial world.

Solution: A mini progress bar designed for sections where users gather data from third party apps. How users can proceed with QR is explained with visuals.
Users can also read more information about Ockto, and sense of trust is created with more logo usage.

🔗 DigiD & Ockto Integrations

Problem: Users were not able to review the answers they gave in the orientation phase, nor were able to edit them. If anything was answered wrong in this fase, whole application would be false.

Solution: Review page added to the orientation step where users could review their answers, and also edit their answers if they needed to.

👋 Orientation - Profile Creation

🕺 The end.

I have heard good statistics from the business that shows the design changes were succesful:

Less calls to the customer service about a problem in portal.
Users completing the Documents steps in a higher percentage.
Third party integration steps having less drop-offs.

I have enjoyed working on this product since it gave me freedom to push new features based on my analysis. This was

a good freedom to have.

Download my resume

Self Service Mortgage Application Portal for De Hypotheker With my company Yellowtail BV.

Project Goal Improving the mortgage application portal, so users can navigate the process easier, and complete necessary identifications and upload documents and buy their home.

My role Making use of data and my own UX analysis, improving the user friendliness and interface of the whole application portal. As the only designer in this project, I have changed the existing designs, and added new features.

Team Me (UX Designer), Business analysts, Product Owner, Scrummaster, FE Developers.

NDA limitations Due to NDA, I can not show screens here that needs login. Feel free to reach out to me for more information.

🚩 The problem De Hypotheker has an online mortgage application portal where users can do the mortgage application themselves after a payment. There are multiple problems that users have voiced, and we have also analyzed with business looking at data. It relates to:​

Not having a clear progress bar to help them navigate the process,

A messy documents section where users can not track the progress and differentiate within partner documents,

Third party apps where users gather their citizen data not having a proper user flow, so users drop off here. (DigiD, Ockto)

Users not being able to differentiate between completed and open tasks (and see what they should still do the complete a task)

Mobile not working properly, and is a bad copy of the desktop version.

🎯 Goal Being able to improve the points mentioned above with editing existing features, and implementing new features. The success is going to be tested by collecting data.

✍️ Approach

Here is a short explanation of how we approached the problem, and how our process looked like.

We aim to understand the user together with business to see what they want to achieve via this portal.

🧑Understand the user

How can we best meet users needs? We brainstorm, ideate solutions, and define how are going to execute it.

💡 Ideate & Define

Time to make it into something real. Collaborating extensively with developers for feasibility and consistency.

🚀 Execute

User Persona We created user persona together with the insight from business. Of course we focused on young people who are using the self service portal to buy their first or second home.

​Ideation sessions I laid out my ideas for improvement points and discussed this together with the stakeholders to see which is feasible. This took multiple sessions, where we prioritised based on budget.

Aligning with developers I have done sessions with developers to look at the designs I have. Which components need tweaking? Anything does not exist in style guide?

Data Analysis We mapped out data analyticss we have to analyse where the drop-offs were higher. This included qualitative data from customer representatives too.

Wireframing I have designed wireframes to further visually illustrate to non-design background stakeholders how my ideas would look like.

Handoff Handing off the components/screens to developers to they can start with building. Used Zeplin in this case.

​User Flow We looked at the current user flow and analyzed inconsistencies. Made multiple flows for users with and without partners. We mapped out pain/improvement points.

​Prototyping & UI design I created desktop and mobile prototypes using the brand style guide/design system and shared this demo with stakeholders.

Review / Tweaks Communicating with the stakeholders the final designs, and following the progress of the pushed features to if any tweaks are needed.

🙋‍♂️ What users needed, what I have designed.

I can not show the screens here because of NDA. Feel free to reach out for more information

Problem: The progress bar was not clear enough to give a good overview of the process. It also did not exist on mobile. Solution: I have designed a new progress bar with a mobile variant, with numbers and better names. Re-organized what section was included in each step.

🚗 Progress Bar

📚 Documents - Status cards

🔗 DigiD & Ockto Integrations

👋 Orientation - Profile Creation

🕺 The end.

I have heard good statistics from the business that shows the design changes were succesful:

Less calls to the customer service about a problem in portal.

Users completing the Documents steps in a higher percentage.

Third party integration steps having less drop-offs.

​

I have enjoyed working on this product since it gave me freedom to push new features based on my analysis. This was

a good freedom to have.

Self Service Mortgage Application Portal for De Hypotheker
With my company Yellowtail BV.

Project Goal
Improving the mortgage application portal, so users can navigate the process easier, and complete necessary identifications and upload documents and buy their home.

My role
Making use of data and my own UX analysis, improving the user friendliness and interface of the whole application portal. As the only designer in this project, I have changed the existing designs, and added new features.

Team
Me (UX Designer), Business analysts, Product Owner, Scrummaster, FE Developers.

NDA limitations
Due to NDA, I can not show screens here that needs login. Feel free to reach out to me for more information.

🚩 The problem
De Hypotheker has an online mortgage application portal where users can do the mortgage application themselves after a payment. There are multiple problems that users have voiced, and we have also analyzed with business looking at data.
It relates to:

🎯 Goal
Being able to improve the points mentioned above with editing existing features, and implementing new features. The success is going to be tested by collecting data.

User Persona
We created user persona together with the insight from business. Of course we focused on young people who are using the self service portal to buy their first or second home.

Ideation sessions
I laid out my ideas for improvement points and discussed this together with the stakeholders to see which is feasible. This took multiple sessions, where we prioritised based on budget.

Aligning with developers
I have done sessions with developers to look at the designs I have. Which components need tweaking? Anything does not exist in style guide?

Data Analysis
We mapped out data analyticss we have to analyse where the drop-offs were higher. This included qualitative data from customer representatives too.

Wireframing
I have designed wireframes to further visually illustrate to non-design background stakeholders how my ideas would look like.

Handoff
Handing off the components/screens to developers to they can start with building. Used Zeplin in this case.

User Flow
We looked at the current user flow and analyzed inconsistencies. Made multiple flows for users with and without partners. We mapped out pain/improvement points.

Prototyping & UI design
I created desktop and mobile prototypes using the brand style guide/design system and shared this demo with stakeholders.

Review / Tweaks
Communicating with the stakeholders the final designs, and following the progress of the pushed features to if any tweaks are needed.

Problem: The progress bar was not clear enough to give a good overview of the process. It also did not exist on mobile.

Solution: I have designed a new progress bar with a mobile variant, with numbers and better names. Re-organized what section was included in each step.