GameDev

A New Interface on Old Rails: A Redesign of a New Zealand Bank's Personal Account

A New Interface on Old Rails: A Redesign of a New Zealand Bank's Personal Account

Try 4 top design professions. Free ➞ In 5 days, you'll get acquainted with illustration, UX/UI, web, and graphic design. Add 4 compelling case studies to your portfolio and decide which direction to take next.

Learn more

NZHL (New Zealand Home Loans) is a New Zealand-based service company that has been offering its clients financial solutions for many years. In the late 2000s, the company developed a personal account for clients, which remained unchanged for a long time. However, over time, NZHL's management decided to redesign this tool. The goal of the changes was to improve the user experience and identify new opportunities for business growth. The personal account redesign is aimed at simplifying navigation and improving usability, which in turn should help attract new customers and increase loyalty among existing ones.

Product Manager Nikolai Ilyushkin and designer Stas Savenkov shared details about the project. Nikolai operates in New Zealand, while Stas works in the UK. Their international experience and different cultural approaches to design and project management make a significant contribution to the successful development of the project.

A digital product designer with many years of experience working in startups and large companies in Russia, the UK, and New Zealand. Stas has more than eight years of experience in designing and launching services that not only improve the quality of life of users, but also effectively meet business needs. His expertise covers all stages of development, from idea to implementation, which allows him to create innovative solutions that meet modern market requirements.

A product and transformation manager with experience in implementing digital transformations in Russia, Australia, and New Zealand. Nikolay helps large companies become more agile and flexible, developing their ability to self-organize and adapt to market changes. His approach to business transformation improves internal processes, increases efficiency, and creates an innovative corporate culture. Nikolai actively utilizes modern technologies and methodologies to achieve sustainable results and enhance organizational competitiveness.

Their collaboration has been successfully tested in various projects over several years. Together they launched products in both large corporations and startups, demonstrating high efficiency and professionalism.

Image: Stas Savenkov / NZHL

About the task and limitations

The main goal of our work is to relaunch the personal account for mortgage borrowers and optimized data presentation. We strive to provide clients with information that will help them more effectively manage their mortgage repayments. This will improve the user experience and increase borrowers' financial literacy. Working with existing products presupposes that the client has an existing system with predictable support costs and profits. In this context, it is important to consider a number of rules and features that affect the process. Development in such an environment typically comes with more restrictions and additional conditions than creating a product from scratch. In our case, we encountered several factors that needed to be considered: Six months before we began working, the company updated its main website, as well as templates for marketing communications, SMM, and small merchandise used in the office. We aimed to follow new style guidelines established by another agency while maintaining consistency with the brand and graphic design. This is especially important to ensure a consistent experience when users navigate between the website and our app, as well as between emails and the website. Consistent visual style helps strengthen a brand and improve the user experience.

Trust is fundamental in banking and personal finance management. In an environment where scams, phishing, and fraud are becoming increasingly prevalent, it's crucial for product designers to create logical and seamless visual transitions between different products. Inappropriate design can negatively impact user perception of a service, which in turn affects trust levels, a company's reputation, and reviews. Effective design not only improves the user experience but also fosters trust in financial institutions.

We sought to minimize reliance on legacy systems in our infrastructure. Each change to these systems significantly increased the cost of the final solution and significantly extended the launch time. Our goal was to maximize the efficient use of available resources, such as APIs and partner data, to optimize processes and accelerate the implementation of new solutions.

We created a backlog of user and consultant needs from banking professionals and immediately tested the feasibility of implementing innovations using existing solutions. This allowed us to develop a long-term strategy and determine the composition of the first releases for the new application. This approach has proven effective in terms of conserving the company's resources, although the benefits may not be immediately obvious.

Context - How mortgages work in New Zealand

In May of this year, the average house price in Auckland reached $1,472,369 (RUB 90,182,601). The average mortgage size was $680,000 (RUB 41,650,000). These data highlight current trends in the Auckland property market, where home values ​​continue to rise and mortgage rates remain a key factor for buyers.

Mortgages in Russia and other CIS countries have a simple structure. You can borrow 5 million rubles for 30 years at an interest rate of 10%. This results in a monthly payment of 45,000 rubles over 30 years. Mortgage terms are easy to understand, making this financial instrument accessible to many citizens.

In New Zealand, Australia, and England, mortgage terms differ from the usual ones. The interest rate is not fixed for the entire loan term, for example, for 30 years, but only for short periods of 1, 2, 3, or 5 years. In some cases, the rate may be floating, tied to changes in the central bank's key rate. It's also possible to combine mortgage offers with different rates and terms, allowing borrowers to tailor the loan terms to their financial capabilities and plans.

In practice, this means that your weekly mortgage payment could increase from $800 to $1,500 overnight. You need to be prepared for this. Yes, that's right, weekly payment. These changes can significantly impact your budget, so it's important to assess your financial capabilities in advance and prepare for potential fluctuations.

Mortgage payments account for a significant portion of New Zealand family budgets. Therefore, when managing such large finances, it's crucial to choose a wise repayment strategy and mortgage structure. Choosing the right mortgage terms can significantly reduce your financial burden and help you plan your family budget more effectively.

Our mission is to help New Zealanders close their mortgages effectively and on time. We achieve this goal by offering a tailored loan structure for each family. For example, a $1 million loan is divided into three installments, allowing for streamlined payments and a shorter repayment period. This approach provides clients with flexibility and the opportunity to save significantly on interest, a significant step toward financial independence.

  • $600,000 with a fixed rate for two years at 4.5%;
  • $250,000 with a fixed rate for one year at 3%;
  • $150,000 with a floating rate, say, at 4%.

The offset portion of the loan is a unique opportunity for borrowers. This feature allows you to deposit funds into a special account that is linked to your loan. While the funds are in this account, you are not obligated to pay interest. Since interest is accrued daily, increasing the amount in the account and extending the time the funds are there will lead to a decrease in the total amount of interest you will need to pay. This means that the more you can save in the offset account, the faster you can pay off your mortgage and save on payments. This approach makes offset mortgages an attractive option for those who want to manage their finances as efficiently as possible.

The third portion of the mortgage is linked to a card to which funds are transferred. This money can be used as you wish: for groceries, kitchen renovations, or even a new Tesla with a loan rate of just 4% per annum.

If the Central Bank rate rises significantly tomorrow, the risks become less significant.

Because the total debt is distributed across several parts with different interest rates and terms, the risk of interest increases does not affect the entire loan amount. For example, if you took out a $1 million mortgage on September 1, 2022, changes in interest rates will only affect the portion of the loan that is about to mature, not the entire amount. This allows for more effective financial risk management and reduces the overall burden on the borrower's budget.

If the local Central Bank raises the floating rate to 5% in November, it will only affect the $150,000, minus savings, not the $1 million. By dividing investments into different parts and securing them under more favorable terms, the risk of market stagnation can be reduced over a 1-5-year horizon. This "shock" will not occur instantly, giving the family the opportunity to prepare for changes.

Searching for an idea

To understand how the company can stand out from the competition, we conducted a market analysis. This competitor research allowed us to identify key aspects that will help improve our position. We focused on unique offerings, price positioning, and marketing strategies used by other companies in our industry. The research findings informed the development of an effective differentiation strategy to enhance competitiveness and attract new customers.

  • Top 5 New Zealand banks – their mortgage-related offers and services.
  • Top 5 mortgage brokers, as well as the state of the Australian market.

Using the Blue Ocean Canvas, we demonstrated to NZHL's management how to improve the product. We identified key growth areas that will help increase competitiveness and attract new customers.

Optimization of the digital self-service channel. Providing users with an intuitive interface for self-service significantly reduces the number of call center calls. Customers can easily check their balances, make early payments, and manage their accounts. Reducing the number of call center calls reduces the need for full-time employees, which leads to significant cost savings. Effective self-service not only improves the customer experience but also helps optimize the company's operating costs. Optimizing data and dashboards for employees significantly reduces the time managers spend searching for and analyzing information. When customer service time in offices is reduced, employees are able to more deeply understand each client's situation. This allows them to prepare higher-quality and more informed recommendations that are visualized in the system. As a result, such optimization contributes to increased efficiency, improved service quality, and stronger customer relationships. Increasing the number of people served per unit of time; Improving the quality of service; Motivating customers to recommend the company to friends and acquaintances. Setting up lead generation channels is a key aspect of the company's successful business model. A primary focus on customer service significantly increases the LTV (Lifetime Value) of each client, which depends on the length of interaction with the company. Long-term customer relationships contribute to their loyalty, which reduces the likelihood of switching to competitors, such as other banks. Many clients own multiple properties or mortgages throughout their lifetime, creating additional opportunities to offer new services and products. Effectively setting up lead generation channels not only expands the client base but also strengthens existing relationships, which ultimately positively impacts the company's revenue. Optimizing client acquisition channels significantly increases the number of new clients within the company. Effectively setting up these channels allows you to attract the target audience, improve conversion, and, as a result, increase revenue. It's important to consider various strategies and tools to maximize results. The right approach to setting up acquisition channels will help your business not only expand its customer base, but also strengthen its position in the market.

Blue Ocean CanvasScreenshot: Blue Ocean Canvas / Skillbox Media

First prototype

We organized a mini-workshop with management, at which discussed the company's key priorities and areas for growth. During the work, we broke down the ideas into thematic cards and created a “wall” of opportunities, which will allow us to visualize our goals and strategic initiatives.

Slide from the workshop and a photo of a piece of the “wall of opportunities” Image: Stas Savenkov

Branch directors received virtual $100, which they could use to fund cards on the wall. This approach allowed us to confirm priorities and made directors active participants in the change process. Virtual tools facilitated more effective interaction and involvement in decision-making, which increased overall productivity and team engagement.

We spent several days in service offices, studying the company's customer service process. This experience allowed us to develop an initial prototype that takes user needs into account and optimizes customer interactions.

Russian digital products in the mass market segment demonstrate high-quality visual solutions comparable to their Western counterparts. In recent years, domestic developers have significantly improved the quality of design and user interface, allowing them to successfully compete in the international arena. These achievements confirm the high level of professionalism and creativity of Russian specialists, who are contributing to the development of the digital industry in the country.

Tinkoff, Sber, Alfa-Bank, and Beeline offer high-quality digital solutions to meet the everyday needs of their customers. These companies develop innovative products that simplify financial management, communications, and access to services. Their high level of service and ease of use make their solutions popular among users, as evidenced by the growing popularity of digital financial and telecommunications services.

In one version of the prototype, we implemented functionality for breaking down expenses by category and presented monthly spending statistics. This tool is available in almost all Russian banks, while it is rare in the UK. Similar functionality is absent in New Zealand, although surveys show that users are interested in smart interfaces that can provide minimal analytics, such as monthly spending. Implementing such a feature could significantly increase user engagement with the new financial tool.

The idea was based on the hypothesis that regular access to functionality that allows users to view their spending statistics in their personal account on a monthly, weekly, or daily basis would lead to increased engagement. This, in turn, was intended to increase the likelihood of upselling new services, strengthen product loyalty, encourage referrals, and improve the quality of user data. However, it turned out that open banking in New Zealand was not yet fully available, and the proposed functionality proved ahead of its time.

The first prototype focused on events related to transactions and stages in the mortgage process. We proposed creating a page with a vertical timeline starting from the current date and including forecasts for the future account status. The timeline visualizes the achievement of the first goal in two years and the second goal in three years, which helps users better understand their financial path and plan further actions.

A draft of the very solution with the timeline, which we ultimately did not use. Infographics: Stas Savenkov

On the timeline, we We sought to display projected future events based on current debt and repayments. However, this approach proved too ambitious for our clients, and the NZHL team expressed doubts about the sufficient backend data to implement such a visualization. After analyzing the available information, we concluded that radical solutions were best avoided. Furthermore, we had clients with multiple mortgages, which complicated the graph and made it less understandable.

When analyzing the data, we discovered a significant number of users with multiple, complex mortgages, as well as real estate and trusts. These elements needed to be carefully integrated into the interface to ensure ease of use and meet user needs.

We typically avoid creating rough sketches and prefer to develop concepts in brand colors and build on existing visual patterns. However, for complex services, it is most effective to start with simple drafts. This allows for a better understanding of the structure and functionality before delving into design details and color schemes. Simple drafts help focus on the core elements, which facilitates further work on the project.

Firstly, this approach focuses the client's attention on the process, functionality, and details of the project. Secondly, it avoids premature discussions of visual design, which facilitates a quick iteration of options and progress. Furthermore, it significantly saves time on creating mockups that may prove unnecessary after discussion. This method of work promotes more effective interaction between the client and the contractor, which ultimately leads to a higher quality result.

Some rough sketches of sections. These simple drafts can be designed in minutes and save time when iterating through options, most of which are discarded. Image: Stas Savenkov

User Tests

Through our research, we identified the key functionality required by different categories of users. We focused on psychological needs to understand how people currently cope with their problems and how relevant this is to them.

We identified two main segments: first-time home buyers (FHB) and clients switching from competitors to refinance their mortgages. During product development, we applied the Jobs-To-Be-Done (JTBD) methodology, which allowed us to more accurately understand our customers' needs and tailor our offering to their requirements.

We conducted a series of interviews with users to deeply understand the needs of each segment and identify additional small and micro-tasks that we could solve for them. During the research, we analyzed:

  • what problems each segment has, what other small tasks we could solve for them;
  • how users currently solve these problems;
  • what is the customer journey of customers with dominant solutions.

As a result of the research, we identified what problems need to be solved and what improvements need to be implemented to attract customers using the current dominant solution. We focused on identifying key factors that could influence customer decision-making and facilitate the transition to our solution.

The lack of basic personal account functions was often resolved with a call to a consultant. The study found that many clients valued their advisors but were afraid to bother them with minor questions. This meant that simple questions like "Until what date is my current loan rate valid?" or "How will the loan term change if I increase my monthly payment by $100?" went unanswered. This underscores the need to improve the functionality of the personal account so that clients can quickly access information without having to ask for help. Improving the user experience and accessibility of information contributes to increased customer satisfaction and a more streamlined experience with financial services. Property appraisal information is an important aspect for clients with a mortgage, especially for those who have had their mortgage for 3-5 years. Knowing the market value of your home helps you make informed decisions about the future, such as whether to sell your current home or purchase a new property. Integrating this information into the user account proved to be a technologically simple solution, significantly increasing client satisfaction. Providing access to up-to-date property value data facilitates more informed choices and improves the client experience.

We need to ensure that interfaces present all the information that is relevant to advisors.

Advisors provided us with query statistics, which allowed us to understand how they prepare for annual client meetings. We analyzed what information they search for in the systems, how they use it, and how they explain it to clients. This data formed the basis for the design of the first prototype. As a result, we created a more effective tool that will meet the needs of advisors and improve their interactions with clients.

The research conducted with participants amazed us with its depth and unexpected results. We received valuable information that significantly changed our understanding of consumer behavior and preferences.

On the first page, we provided information about mortgage parameters, balances, and terms, which was straightforward. On the inner pages, we covered all aspects in more detail. However, in some interfaces, users had difficulty understanding our help. We strive to improve the user experience and make information more accessible and understandable so that everyone can easily navigate mortgage offers and terms.

Prototype of the main page with research Image: Stas Savenkov / NZHL
Prototype of one of the internal pages from the research Image: Stas Savenkov / NZHL

The chart, previously effectively used in meetings with consultants, became a source of questions during interviews with users. This highlights the importance of tailoring the data presented to the audience, as differences in how information is perceived can significantly impact the outcome of the interaction.

Page with a payment schedule and statistics on how the debt amount changes over time Image: Stas Savenkov / NZHL

We have developed interactive widgets “What, "If..." apps that demonstrate how changes in clients' financial behavior can impact their mortgage obligations. For example, we show how one-time payments, increased monthly payments, or credit card use can change the amount owed and the terms of their mortgage. We also explore scenarios where clients spend $30,000 on a kitchen renovation or a vacation to Fiji, allowing us to better understand the impact of such expenses on their mortgage obligations.

Advisors identified an opportunity to significantly improve the value and quality of their service by implementing personalized advice and improving in-app communication. This solution allowed us to create more effective interaction with users and increase their satisfaction.

"What if..." widgets that live on the payment schedule pageImage: Stas Savenkov / NZHL

We noted a low level of user engagement with our service's tools. While users express positive opinions about the functionality, the need for its regular use isn't always clear. To increase awareness of the benefits of using the service more frequently, we decided to implement core banking app features, such as expense and income breakdowns by account and card, as well as detailed transaction information. This should help users better understand their financial flows and increase their interest in our tools.

First approaches to designing a breakdown of income and expenses from an account Image: Stas Savenkov / NZHL

Currently, open banking in New Zealand is not yet available to the general public. After testing the concept in a prototype, we decided to postpone the implementation of this feature until a later date.

Negotiations

Conflicts in product development are an integral part of daily work. To effectively resolve these conflicts, it is necessary to rely on facts, data, and rapid experimentation. Otherwise, the number of meetings and discussions can become endless, slowing down the development process and reducing team productivity. Using data and experimentation allows you to make informed decisions, reducing time spent on discussions and improving the quality of the final product.

We spent a significant amount of time explaining why certain features from previous versions of the application were unnecessary. For example, the "Goals" and "Budget Versions" features proved to be too complex, and prototype testing showed that users did not notice them. However, consultants held the opposite opinion. After additional discussions, we concluded that these features are indeed important, but only during the sales phase. As a result, we decided to retain them for face-to-face meetings with clients and during the sales process, but removed them from the app to simplify the user experience.

We encountered some skepticism from the company's IT department regarding the feasibility of some of our ideas.

Involving IT specialists in the research process as observers increased the level of empathy between them and end users. This, in turn, contributed to increased trust in our product and design solutions. We are proud that NZHL chose Deloitte Digital as their development partner, as our collaboration was close and aimed at understanding the real feasibility of the proposed solutions.

The company's management required transparency and clarity of all processes, as the banking sector is characterized by conservativeness. We sought to implement digital innovations, but many market participants are not yet ready for the principles of rapid testing and agile methodology.

The design process is carried out iteratively, with regular testing of hypotheses and assumptions. This approach allows for continuous improvement in the quality of the final product, adapting to changes and user requirements. The iterative method ensures flexibility, which is especially important in a dynamic market.

Product solutions were developed based on specific business cases, not in isolation. Each solution presentation was based on conducted research, significantly facilitating their defense. Transparency, an iterative approach, and systematic research contributed to the establishment of trust, which, in turn, increased confidence in the development process.

During our process, all issues and disagreements with management were successfully resolved during the initial mini-workshops. During these meetings, we discussed the strategy in detail, defined priorities, and clarified project expectations. This allowed us to establish clear directions of work and improve the effectiveness of interaction within the team.

Result

Service home page Image: Stas Savenkov / NZHL
Page with a graph and a "What if..." widget. Image: Stas Savenkov / NZHL
Spending sections and account structuresImage: Stas Savenkov / NZHL
Profile section and part of the mobile layouts Image: Stas Savenkov / NZHL

While we cannot provide specific conversion data, we note that the number of issued mortgage loans increased by 7%. In addition, the productivity of mortgage managers increased by 17%. These indicators demonstrate positive changes in the work of our team and growing interest in mortgage products.

The application is being developed in collaboration with our partner Deloitte Digital, based on our designs. It is currently available to a limited number of users, with a full launch planned for this spring.

We have won two gold Indigo Awards in the Digital Tools and Utilities and Interactive Design categories, and a bronze award in UX, Interface & Navigation. These achievements highlight our professionalism and innovative approach to developing digital solutions and interactive design.

Project team

  • Stas Savenkov - designer.
  • Nikolay Ilyushkin - product manager.

Rework the text with SEO in mind, add keywords, and improve its content without changing the main topic. It is important that the text is structured and easy to read. Avoid using emojis and unnecessary characters, and do not include numbers or bulleted lists.

Read also:

Creating a Case Study of Your Work: A Practical Guide for Designers

A case study of your work is an important tool for showcasing your skills and achievements in design. It allows potential clients and employers to evaluate your style, approach, and professionalism. To create an effective case study, follow these guidelines.

Start by choosing a project that best illustrates your abilities. Make sure it is interesting and has significant implications for your career. Describe the challenges you faced and the goals you set for yourself. This will help readers understand the context of your work.

Then, detail the development process. Include the research, conceptualization, and implementation phases. Explain the methods and tools you used to achieve your results. This will not only demonstrate your professionalism but also help other designers learn from your experience.

Don't forget to include visuals. Photos, screenshots, and graphs will make your case study more engaging and visual. Ensure high-quality images and proper layout so they fit harmoniously with the text.

Conclude with conclusions and lessons learned. Share what you learned along the way and how it impacted your future growth as a designer. Be sure to highlight the results achieved through your project, whether improved client metrics or positive feedback.

Creating a high-quality case study takes time and effort, but it will become a valuable asset in your portfolio. A well-designed case study will not only attract attention but also help you stand out from the competition in the design world.

Explore more design case studies for inspiration and analysis. Researching diverse examples of work will help you understand current trends and elevate your own design. Diversity in case studies allows you to see how different approaches and styles can be used to solve the same problem. By studying successful design projects, you can develop more effective and creative solutions for your own work. Don't forget that constantly updating your portfolio and expanding your knowledge of best design practices play a key role in your professional growth.

  • The letter "alpha" in a combined logo and free lines
  • The "book" project of the LINII agency for a bakery from Yoshkar-Ola
  • ESH Gruppa became part of a project about the problem of violence
  • How the Shchuka bureau created a brand communication system for Cian

Graphic Designer PRO Profession

You will learn how to create corporate identity elements and graphics for business. You will build a portfolio that reflects your style and confirms your design skills. You can start a career in a studio or as a freelancer.

Find out more