Redesigning Erste’s home loan 
Redesigning Erste’s home loan calculator

Redesigning Erste’s home loan calculator


This was an individual Bootcamp project divided into two parts. First, I redesigned the browser version user flow for the home loan calculator. Second, I applied the same design for iOS and Android taking into account the platform-specific guidelines, Human Interface and Material Design.

Doing all the research to meet the guidelines and find the best solution turned out to be tricky. However, it was a fun project and a very effective way to learn the particularities of each of the two biggest mobile app UI design rivals.

My role
Research, wireframing, interface design.
Project time
3 weeks

The challenge

To redesign the Erste’s home loan calculator in order to provide users with a better overview of the specific costs they would face when purchasing their dream home.

user persona

Compared with the other projects, we already had four hypothetical personas who were first time home buyers and weren’t familiar with a home loan calculator. They need a simple and straightforward solution to find their dream home.

Persona #1
Persona #2
Persona #3
Persona #4
Persona #1


Usability testing

After a detailed analysis and user testing sessions of the current version of Erste’s home loan calculator, I have identified improvement areas.


Hidden fees and interest rate. Users missed to find info about additional costs.

Not very clear for the user what subsidies mean and no tooltips available.

Lacking error messages, language selector, mandatory fields, validation.

User couldn’t find info regarding required documentation.

Missing explanations regarding financing and mininum starting funds.

Missing country code for telephone numbers.

Competitive analysis

The next step in the project was to learn how direct competitors of Erste Bank are solving these problems, what is their main differentiator, their strengths and weaknesses.


  • The process is complex and confusing
  • FAQ section easily accessible for any questions the user may have
  • Tooltips available where necessary
  • Simplified costs
  • Indication of the minimum and maximum value of home loan amount and own funds for each case
  • Friendly copywriting


Designing initial interface

Mood board

When creating the mood board, I wanted to give the new design a fresh and friendly look, also take into account Erste’s bank corporate design and colour scheme.

Mood board

the solution

Mobile home loan calculator browser version

type of loan

This is an overview of the Erste’s home loan calculator mobile page design. Using a minimalist approach I divided the experience into six steps to make it easier for the user to focus on one task at a time.

Mobile first


  • The user inputs the property value, his own deposit and any housing subsidies
  • Tooltips available where necessary (eg. housing subsidies)
  • The customer is provided with a preview of different rates according to the period of time selected

Who is asking

Who is asking


  • The user inputs his income and the total monthly expenses
Tooltip Error message


Summary screen Summary screen

Personal details

  • The user is required now to write his personal details so the bank can get in touch
Personal details

confirmation screen

Confirmation screen


  • Improved information architecture
  • Made relevant information clear in order to accelerate decision-making to apply for credit
  • Added language selector to include the underrepresented group of users
  • Highlighted the most important information like monthly instalments and interest rate
  • Mandatory fields and error messages to validate user input in real time and provide instant feedback
  • Progress bar indicator so the user knows were he is all the time throughout the process

Platform comparison

account page

Mobile Account

Type of loan

Type of loan screens


Loan amount screens


Income screen iOS Income screen Android


Knowing these guidelines and putting them into practice for this project has increased my awareness, helped me understand established user patterns and build an application that is naturally adapted to the users' habits.
When translating the design to another platform, I was tempted to duplicate it without any changes but, this would hurt the user experience and make development difficult. Being aware of the differences between the native solutions, I was able to adapt my design correctly and ultimately is a skill a mobile app designer must-have.