How We Built a Financial Services App Using SAP Services in Just 10 Days

SAP Applications Blog Background Image

In today’s digital economy consumers expect the very highest levels of customer service at the touch of a button. Large enterprise organizations have felt the pressure to meet the growing demand for better customer experience at the point of interaction, on mobile devices, tablets, and browsers. New Technology forward start-ups can utilize best-of-breed technology from the ground up to deliver these winning customer experiences without the overhead of legacy integration or significant organizational change.  

One industry that has been affected heavily by this wave of start-ups is the financial services industry. New challenger banks and insurance providers such as Monzo, Lemonade, and Atom, as well as many others, are gaining huge momentum in the market. The reason these challengers have been so successful is that they are able to really focus on customer experience. The products and services that they offer are often nothing new. In fact, in most cases, they are simplified models of existing products that have been around for many years, but wrapped in beautiful user experiences, simplified messaging and exceptional service.

So how do large established financial organizations compete when they are steeped in legacy systems? How can they take advantage of new agile ways of working to deliver rapid iterative solutions when they often lack the agility and skills to do so?  All while maintaining control and not putting their core business at risk?

The Evangelist team here at Mendix has thought about these very problems and built a solution in just 10 days to show how the Mendix Platform helps solve these challenges.

How we built our Financial Services App integrated with SAP Data and Services in Just 10 Days

The Design Process

When designing our latest financial services customer application, the Evangelist team started by using a design approach called affinity diagrams. We are big believers in Affinity Diagrams and you can read about how we use them in our previous post How we built an IOT application integrated to IBM Watson Blockchain in just 10 days. Once the initial use cases and concepts were created, we could draw up some Lo-fi pencil drawings of the user pages and interaction. Lo-fi or low-tech provide a quick and low-cost way to prototype the app concepts by using drawings and post-it notes. After a few iterations, we agreed upon the user interaction and could begin to build the user stories and backlog for the application.

SAP App Planning Sketches

The Functionality

During the design phase, we identified four key areas that we wanted the app to cover:

  1. Managing accounts & transactions
  2. Viewing & paying bills
  3. Providing feedback
  4. Making transfers.

We felt we could improve each of these areas using great UX and the latest technology. We then identified the appropriate SAP products and services that would help us to complete our vision and begin the sprint planning phase. We started with SAP Cloud Platform.

SAP Cloud Platform

We wanted to use SAP Cloud Platform, SAP’s platform-as-a-service, for application development. This was important so we could extend both cloud and on-premises applications to provide a fast and efficient way to build our financial services application alongside our existing SAP system.  

SAP API Business Hub

During the build, we wanted an easy way to demonstrate how we could use live SAP data in combination with Mendix. After some research, we found the best way to demonstrate connectivity was to utilize SAP API Business Hub. SAP API Business Hub is a public catalog of all SAP and selected partner APIs for developers to discover, test and consume in order to build integrations.

The SAP API Business Hub has a huge range of API’s, everything from image recognition and sentiment analysis, to Success Factors and S/4HANA. These seemed like an excellent starting point for building an application on top of Mendix. In our app, we used: SAP Sentiment Analysis, SAP Banking APIs, and S/4HANA Finance Cash APIs.

SAP API Business Hub

Collecting Feedback with a “Rate Us” Feature

An important feature of any customer-facing application is its ability to collect instant feedback from customers. To provide this experience to the customer, we wanted to utilize Sentiment Analysis or Tone Analysis. Sentiment analysis uses linguistic analysis to detect communication tones in written text, we can use a tone analyzer service to understand conversations and communications, and then respond to customers appropriately at scale. To build the Sentiment Analysis into our app, we decided to use SAP HANA Text Analysis service.

Mendix Platform ScreenshotFirst, we built an integration to the SAP service using the Mendix JSON Mapper and REST Connector. Mapping the request and response to receive data from the service is quick and simple in Mendix. We simply took the JSON response payload from service and pasted it into our JSON interpreter, which automatically creates a JSON Structure in our App.

Once we have the structure, we mapped it to our data model so that we can interact with the returned data. To map it to our model, we created an import mapping and selected our newly created JSON Structure.

SAP service using the Mendix JSON Mapper and REST Connector

Next, we need to call the service itself, here we use Mendix microflows with a native REST action to call the service URL:

Mendix microflows with a native REST action to call the service URL

In 3 easy steps, we are able to build the required integration to the SAP service: 

  1. Pass in the text we want to analyze as a parameter to the microflow
  2. Create a simple post request to the service
  3. Return the response from the call to be used in our workflow process

Building simple solutions that automate processes helps improve operational efficiency, whilst at the same time increasing customer satisfaction through less friction and instant responses to the user’s needs.

SAP service MicroflowSo, now that we have the returned raw data from the service we need to build the logic required to automate the appropriate response to our customer based on how they are feeling. To achieve this, we built some simple logic to provide different on-screen responses, as well as a workflow process to channel those unhappy customers towards either: robotically automated services or a customer services representative to promptly deal with their concerns.

 

SAP App Screenshots

Accounts

An important part of any financial services app is the ability to be able to quickly navigate and view your latest account information: how much money you hold in each account, the latest transactions, and how well you are managing your income and outgoings. When building this app, we wanted to put the account information at the forefront to make it simple and intuitive to navigate. Upon loading the app, the first thing a user sees is a clear overview of all their financial accounts with useful iconography and patterns to help identify them quickly.

The app employs fully responsive web and hybrid mobile via a single application model, requiring just one low-code skillset to address multiple form factors. This approach helped us to reduce development cost, increase our speed and iteration cycle, as well as address the needs of the customer working across multiple-channels.

We were able to create our user experience through simple drag and drop inside Mendix’s latest web-based modeling tool.

App Built with SAP and Mendix Screenshots

Most organizations have a significant investment in internal Systems of Record, where the data needed to complete an app like this resides. However, it’s often difficult to surface this to the customer. This is where the combination of Mendix and SAP makes it easy to build truly integrated solutions and new experiences across multiple channels in a fraction of the time it takes with more traditional coding approaches. For our app, we used the S/4HANA Finance Cash APIs and SAP Banking APIs from SAP API Business Hub to show current account balances and transactions.

To offer more context and value to the user, particularly for B2C users, we integrated the ability to plot the location of a transaction on a google map, as well as a simple split the bill function amongst your friends and colleagues.

Finance Cash App Screenshots

Managing Bills

A financial services app isn’t complete without the ability to view and make payments. To address this requirement, we included a summarised billing section with swipe functionality to pay bills via credit card or account transfer.

Managing Bills Application Screenshot

It’s always difficult parting with your money, especially when it comes to bills. But to make the payments process quicker and easier we built a new Mendix widget which integrates with Card.IO. Card.IO is a fantastic library to support credit card scanning. Once scanned, the details are saved, removing the burden of entering card details when paying for goods.   

Credit Card Reader Application

Transfers and Currency Conversion

Transferring money between accounts is a common requirement, as well as converting transactions between currencies. To address this need we used the currency conversion service SAP S/4HANA Finance API, which has several features to allow the retrieval of currencies and rates to manage real-time currency conversion.

Addressing Accessibility

When most people think of great user experiences enabled through technology, they immediately think about traditional digital channels such as mobile, tablet or desktop. But future applications will need to move beyond these simple form factors to address multiple different user interfaces via composite application models. This is especially important when addressing users with special needs, such as visual impairments. Thanks to the rise of artificial intelligence, bots and remote assistants, like Alexa, we can now easily deliver user interfaces through voice and chat. And that’s exactly what we did using the soon-to-be-released Mendix Amazon Alexa Connector. We built a new skill to allow users to search and return their bill status and make payments through voice alone:

We hope you’ve enjoyed reading about how we created our financial services application integrated with SAP Data and services. Now what will you build?