Erste Bank’s loan calculator’s new User Interface
a UI case study
Project:
Erste bank home loan calculator
Client & Project type:
Brainster Academy, unofficial UI design project
Project date:
1st to 19th of July 2021
Role:
UI researcher and designer
Tools:
Figma, Miro
Project summary:
The Austrian Erste Bank is one of the biggest Commercial banks domestically and in central Europe. Its brand identity is simplistic and clean, building on the bank’s goal to be “the bank for everyone”. Erste has had great success with its mobile bank application “George”, receiving wide applause for its user-friendly UI and design. Erste’s home loan calculator, on the other hand, is another story.
As part of my 4th module at the Brainster UX/ UI Academy, I was tasked with scrutinizing Erste’s home loan calculator by identifying its UI weaknesses and improving it by doing competitor research, ideating potential solutions, and designing a high fidelity prototype for both mobile and desktop versions.
The Challenge:
Our hypothetical users, defined as Peronsas, were all first-time home buyers and have never used a home loan calculator before. Their needs were identified as needing a simple solution, guidance, and a focus on the costs of purchasing a home.
The Research:
Product:
After a thorough analysis of the current version of Erste’s home loan calculator, issues regarding its UI were identified. These included:
- Hidden fees and interest rates
- Trouble finding an overview over the required documentation
- Missing country code for telephone numbers
- Poor navigational UI
- Missing explanations regarding financing and minimum starting funds
- Inconsistent calculator logic and feedback
- And other UI and aesthetic issues such as missing error messages, language selection, required input, validations, and confusing background images
Competitive research & Ideation:
For inspiration, Erste bank’s competitors were analyzed to see how they dealt with the issues identified as the main challenge. Following this, I began ideating on possible solutions.
My main focus was simplifying the calculator while keeping the most essential information available for the user. Since users are invited to a talk with a loan advisor before any loan approval, and together with the competitive analysis, I deemed many of the inputs for the calculator excessive, and possibly confusing for the user.
I concluded that the purpose of Erste’s home loan calculator should be to give the User a proper indication of the full costs of their loan and whether they are within the accepted basic financial requirements or not. All additional calculations that are not essential for the calculation itself, such as taxes, subsidies, and contract costs, were cut out and moved to the discussion with the loan advisor for the best possible clarity and understanding.
An important feature I wished to implement which I drew from the competitor analysis was the real-time calculation of the values, and its prominent accessibility.
Solution:
Moodboard & prototype:
With my concept ready, the preparations for a prototype were initiated. Drawing on the creative and brand identity of Erste Bank, I wished to keep its simplistic style both in terms of colors and design. I chose Montserrat as the primary font since its typography is easy to read even in small size, even allowing the design to push the limits of the recommended smallest font size.
I designed the experience to be done in 4 simple steps:
- Selecting the type of loan
- Determining the cost of a loan
- Its affordability and potential acceptance by the bank
- Contact information for an appointment with the local branch office.
The issues the new design solves:
- Most important information about costs, rates, and fees is presented to the user with no need to search for them
- Secondary information, such as explanations or calculation details is available through a tooltip
- Aesthetically neat and user-friendly design, true to the brand identity
- Real-time and easily accessible calculation results
- An easy-to-find overview of the needed documents for a potential loan
- Feedback on calculation if it would be approved by the bank or not
- Language and country code selector
User testing:
Following the completion of the wireframing and low fidelity prototyping for the mobile version, I had it tested on 3 users and gained important feedback of which most of the issues lie with balancing the font size and better copywriting. However, the prototype was a success in regards to its simple and intuitive UI, and personal and fun CTA buttons.
High fidelity prototype:
The next step was to implement the necessary changes and add some life to the prototype.
Desktop version:
For the desktop version of the calculator I went with a concept I saw many competitors use: A simple two-tab calculator for the costs of the loan and the affordability.
The contact form for appointments is placed underneath it for easy and quick access no matter if the user used the calculator or not. This solution is similar to the original concept, except for a more compact calculator section.
Conclusion:
The project was in essence an exercise in product analysis, user understanding, UI theory, and implementation. The issues with the original designs were identified through research and Personas, and solutions were ideated through competitor analysis and UI theory.
My solution for a loan calculator aims to make it a very simple tool that would determine, in a few steps, the costs of a loan, and whether the user is eligible for it based on the minimum financial criteria. The requirements for input from the user were reduced to the minimum, avoiding confusing the user with inputs about taxes, subsidies, and bureaucratic costs. These must be known by the user but unnecessary in determining whether the user will get a loan or not. Ideally, these are explained and discussed when face to face with a bank advisor, which the user is invited to talk to at the end of the user flow.
The UI elements that were missing, such as language and country code selection were implemented. The CTA for required documents was made more prominent, and a breakdown of the most important costs was highlighted in a neat summary.
The overall aesthetics were improved, eliminating clashing backgrounds and overpopulated text sections.
I feel my design has solved the challenge in a good way and that it stays true to Erste Bank’s brand identity and its goal to be “the bank for everyone”.
