There were two main challenges to be met on this complex project.

The first challenge was to modernise the product: In order to stay at the top of our game and on trend as one of the leading banking apps in the world, Belfius needed to revisit the existing online mortgage simulator. The look and feel was very outdated, in the form of a card flow and was not visually stimulating enough.

The second challenge was to simplify the flow: The UX was also poor in terms of heavy cognitive load, making the experience for our users very tedious and overwhelming. The numbers of users, simulations and requests for appointment in branch was low and these numbers needed to increase significantly. The aim was to make the flow more transparent to the user and give them all the information possible. The challenge was to simplify a very complex flow, packaged in a beautiful and light interface.

Rival Banks have upped their game in the UX and UI department in the past couple of years, specifically in their digital products. The general styles have also become much simpler, bolder, bigger type and beautiful imagery or illustration styles. Copy has also started to become more direct and to the point, making the flow less overwhelming and confusing for a non-financial person. We needed to change our approach here at Belfius and look at all these elements to simplify them.

The objectives of Belfius was to increase the number of users starting a simulation by making the platform more aesthetically pleasing and user-friendly, turning a long tedious form into a pain-free and enjoyable digital experience. The end goal was that the user would finalise the process by booking an appointment digitally, into a branch. The 3 main objectives that would be taking into account were to increase these 3 figures: number of simulation starts on the platform, number of appointments in branch requests and number of new files created by an agent with a link to a saved simulation.

The final solution was a digital product that is accessible, transparent and user-friendly with a fresh new look and feel. Here are the ways in which we achieved this.

The product became more accessible with respects to complying fully with WCAG guidelines AA as we increased colour and typography contrasts. The online mortgage simulator is also more accessible in terms of getting to the flow. It is now reachable from the website, banking apps and has clearer entry points.

The flow is much more transparent to the user as all the information and all details are now visible to them such as the legal information which is now at the start of the flow, the simulation screen shows clear overview of their vital information such as the interest rates, monthly payments, annual costs, credit load etc. We also designed informational tool tips for every question that might require more insight. This created a more stable and trustworthy experience to for the user.

We created a new style of pattern for this flow which is a conversational UI pattern. Instead of showing all the questions at once on a card flow as previously shown at Belfius, we showed one question per screen which reduces the cognitive load. We also divided the flow into 4 steps (the clickable progress bar the top) which reassures the user of where they are in the process. We also record all of the data given throughout the whole journey which can be accessed via the 'aperçu' (overview) button top right on the screens below. This has the same behaviour as an e-commerce 'basket' as it adds all the answers to the questions as you move forward through the steps. These are all editable as well.

As Belfius is going through a huge rebranding phase with the new 'Love' brand emerging, the visual brief for this project was that it should become more interactive with its users. This is why we created this new conversational UI pattern. We also worked with the brand team to make a huge shift from using photos of people looking upwards to more 3D illustrative images which are more on brand. The brief also asked for a lighter look and feel with a more minimalistic aesthetic. This new conversational UI style became the new standard for all future Belfius digital projects.

A Movify UI /UX Designer was appointed to create a new seamless and intuitive hybrid design to integrate the Belfius product team.

Following the detailed UX user research and analysis phase, the UI designer's created a benchmark of different websites and app to inspire our visual style, interaction behaviours etc. We looked at everything but banking apps and finally got our inspiration from TOYOTA and other e-commerce sites. Since it is such a large flow with many compulsory questions, we decided to create a system which would be logical and efficient for everyone, using as little variations as possible.

We identified 4 main content types which become our main page templates. These 4 types were: the start screen, the popup info screen, the question screens and the 'basket' screen. We determined a rule for each content in the flow which then determined the UI pattern in further detail thereafter. This became very beneficial for the developers as well to understand the formats and structures from the get go and would generally save time and confusion as whole.

After defining the main structure and key screens, we developed the user interface with the new look and feel of the Belfius rebrand. We had to fully comprehend the IT constraints and possibilities as working for such a large complex organisational structure that already has a few different frameworks in place. There were many considerations, challenges and negotiations that took place based around existing and new components, hybrid vs native elements, budgets and man hours.

When designs were validated by the whole team, it was the UI designers responsibility to add the components to the design system and create all variants, states and behaviours to communicate these at the weekly meeting with the help of written guidelines and animated prototypes.

When a project has been delivered, we all attend the project retrospective and the outcome of this was that we all believed that the way we were working could be improved in terms of processes, communication, negotiations, validation rounds, information sharing. So we took action and Katsu (Head of UX) therefore organised 4 workshops including the whole product team in order to find ways to improve collaboration and processes especially between developers, designers and business departments.

The structure of these 4 workshops are identified below:
Workshop 1: Identify exactly how each sector works and their process
Workshop 2: Identify current pain points from all angles
Workshop 3: Identify new ways to improve them
Workshop 4. Putting into place a concrete methodology and planning to achieve these

The conclusion of these collaborations were very positive. The whole team identified exactly what everyone’s processes were, the pains points of the current issues within the project team processes, and finding potential solutions to moving forward. The main conclusion of these workshops was that we needed a single source of truth accessible to all parties involved in the design process that would integrate code, design and coders playgrounds.

The other positive outcome from these workshops is that as we all got to meet each other in person and collaborate in live, the trust between individuals grew stronger and closer, eliminating misconceptions and misunderstandings. Now there is a real plan for the future in place to improve the way of working in the digital team.

This was a very important project to be involved with as it became the first Belfius conversation UI project in the new branding and in the new framework that was ever released. From now on all project with similar flows will follow the framework and UI of the OMS project.

Thanks to the team's agile state of mind, the persistence and drive to succeed of all individuals involved, this project received a lot of praise when it was released in November 2022. Anyone can access the online mortgage simulator from the website or the app, whether they are a client or not and get a detailed, specific and taylor-made simulation, with a clear and transparent understanding of their rates, monthly or annual amounts and lending capacity through the interactive simulation design. This design made the experience much calmer and trustworthy.

The positive outcomes can be measured through the latest statistics. In the first 6 weeks following the launch of this flow:
• 51,506 users started to do a simulation on the platform
• 2,372 users requested an appointment which means they finished the flow
• 383 new files were created by an agent with a link to a saved simulation

Not only has the new flow proven successful with user acquisition and retention, the new design style that Movify implemented has made a huge impact in the new way of working, collaborating and designing. This new conversational UI style has become the design to follow for all future Belfius products with a brand new fresh look and feel to accompany the new brand values of Belfius.