Together with Raiffeisen, we are pushing the boundaries of online retail banking technology. This is the story of how the team brought their vision of the future of retail online banking to life.

How it all started

Just over nine months ago we started working with Raiffeisen Schweiz to help bring their vision of the future of retail online banking to life. As the market leader for home mortgages in Switzerland, Raiffeisen aimed to extend their offering to customers who wished to apply for a mortgage whenever and wherever they wanted. This meant taking online retailing banking to the next level. Together, we built the Online Hypothek tool

The Online Hypothek tool not only allows a customer to get an indication of the affordability of their dream property, but actually takes them through the entire application process. The end result is a contract that the customer simply needs to print out, sign, and send in to their local Raiffeisen bank, along with their supporting documentation. Such an end-to-end solution has never been offered in this fashion by a major bank in Switzerland until now.

Our role

Netcentric was asked to develop the front-end part of the application, which was to be a single-page application built using AngularJS. All business logic and data retention was provided by a Raiffeisen system in the back-end. The driving requirements were the integration with the Raiffeisen back-end system, a responsive design, multi-language support, the flexibility to update content shown within the application and, of course, a superior user experience.

In September 2015, Roman Müller (Project Manager) and Sarah Maguire (Business Analyst) first went to St. Gallen to meet with Raiffeisen and lay the ground-work for the project. After an initial requirements phase, a development team in Barcelona was built-up and started building the first features for the application. The development phase used an agile approach, which allowed the Raiffeisen project team to make small adjustments to the design and behaviour of the application as the development progressed.

Working together

Since the development team was in Barcelona, support on-site was provided by the Project Manager, the Business Analyst and the Architect. This team was on-site in St. Gallen 2-3 days per week, supporting both the Raiffeisen team to specify the next requirements and to provide easy communication with the development team when needed. This proximity allowed the team to manage changes and issues quickly and efficiently and contributed to the fantastic team spirit with our Raiffeisen colleagues.

Modern technologies

The Online Hypothek application was the first AngularJS application built by Netcentric, and the development team was thrilled to be involved in such a "greenfield" project. We've honed our skills in developing single-page applications, as well as how to handle the special requirements of a co-operative company like Raiffeisen. It has a total of approximately 290 individual banks, most of which would be offering the Online Hypothek application.

AngularJS was released in 2012 and in the intervening years a lot of front-end best practices have changed. We chose not to build the Online Hypothek application in the traditional Model-View-Controller (MVC) way of structuring applications. Instead we chose a more modern component-based architecture similar to Angular 2 and React. This made it much easier to compose highly interactive and responsive user interfaces.

We wrote the whole application in the latest version of JavaScript (EcmaScript 2015), which offers great constructs for building large scale applications, and it was helpful in encouraging us to keep our code-base nice and clean. Not all browsers support these modern features, so we used JSPM in combination with SystemJS to bundle and transpile our application to JavaScript code that all browsers understand. To ensure high quality application code, we used the code analysis tool ESLint in our building process in combination with the Airbnb JavaScript Style Guide. This is a fantastic way to force all programmers on the team to write clean and consistent code for better maintainability.

Additional projects

Although the Online Hypothek project was the first project that Raiffeisen commissioned Netcentric to deliver, last year we were asked to deliver three more Raiffeisen projects for Spring 2016. These projects are the redesigned mortgage section of the Raiffeisen website, a "favourites list" extension to the RaiffeisenCasa website (a buy/sell portal for Swiss property), and a factsheet page, which allows a customer to look up statistics about any municipality in Switzerland.

Each of these products was designed to support and add value to Raiffeisen's mortgage business. Now a customer can find a property on RaiffeisenCasa, check the details of the municipality using the factsheet, and finally, organise a mortgage online using the Online Hypothek!

Going live!

The month of May was quite busy in St. Gallen, Barcelona and Munich, as the finishing touches were put on all three projects (the website redesign was delivered one month earlier), and the individual Raiffeisen banks were able to play with the results of all our hard-work. Finally, on Friday 27th May, we went live with the Online Hypothek, Favourites List and Municipality Factsheet projects! Reaching this milestone was a huge achievement and, of course, the teams enjoyed the fruits of their hard work!

The Raiffeisen project manager sent the Barcelona development team a thank-you pastry gift for their coffee break!

Want to know more?

On Monday 30th May, Raiffeisen posted a press-release about the new Online Hypothek product. This was picked up by the Swiss Finews online-publication.