Web 2.0 brings innovative design ideas and methodologies to the financial industry and improves considerably the development of business applications in this competitive market environment. This article explains how Web 2.0 influences the design of financial applications. Examine trends in Internet banking and how Web 2.0 practices influence those trends.

Chen Xu Ming (chenxum@cn.ibm.com), Solution Architect, IBM  

Chen Xu Ming is a member of the China Software Development Laboratory and works as a solution architect on the WMBTT (WebSphere Multichannel Bank Transformation Toolkit) team. You can contact him at chenxum@cn.ibm.com.

Shan Jian Hong, Chief Architect, IBM  

Shan Jian Hong is a member of the China Software Development Laboratory and works as the chief architect on the WMBTT (Websphere Multichannel Bank Transformation Toolkit) team. You can contact him at shanjh@cn.ibm.com.

Shao Yu, Software Engineer, IBM  

Shao Yu is a member of the China Software Development Laboratory and works as a software engineer on the WMBTT (WebSphere Multichannel Bank Transformation Toolkit) team. You can contact him at shaoyu@cn.ibm.com.

01 December 2009

Also available in Japanese Portuguese

Web 2.0 methodology and business value

Figure 1. Web 2.0 business model
Two cloud diagrams are shown with an arrow indicating interraction betweenthem. The cloud on the left is the Technical Layer, containing the components Ruby, AJAX, PHP, JSON, XML ATOM, RSS, Restful and Mashups. The cloud on the right is the Busines Model containing C2C, C2C Loan, SNS Financial, Video/Flash, SNS/Wiki/Blog, User recommendation, Customer Central, RSS news, User segment and rating, Tag and Long rail methodology.

The Web 2.0 business model

Many business applications are based on Web 2.0 concepts and technologies—C2C e-business, video sales, iTunes, Google Maps, and so on—which represents the transformation from the traditional enterprise-centric model to the customer-centric model. In the age of Web 2.0, the end users play more important roles in the network. They participate in communities, compose blogs, contribute to wikis, share Flash videos, populate tags, and perform many other functions. End users are not only consumers of the information and services provided by enterprises but also providers.

Web 2.0 technology

Many technologies and standards of Web 2.0 began as marketing requirements, driven by business demands which were implemented to provide more flexibility for customers within business applications. For example, mashup technology drove the creation of several widget standards which now accelerate the construction and integration of network applications. The result is a richer experience for end users and a greater pool of resources that developers can use to create products and services.

Web 2.0 concepts have evolved in many industries. However, in the financial industry it just begins to show its business value and industry impact. The customer-centric personalization technology of Web 2.0 has created customer demand for applications that move from a traditional transaction platform to a model that is more accessible and personal for the user, creating a new set of requirements for banks to compete with their applications.

We'll introduce how the Web 2.0 concepts and technologies are changing Internet banking, the user experience, and the landscape of business development for banking.

The transformation and challenges of Internet banking

Most commercial banks are finding ways to increase revenue by performing value-added services. These innovations require the corresponding banking channels to be transformed. Here are some things to consider:

  1. Customer flow: Internet banking has replaced 80% of the counter transactions in some commercial banks. In some cases, banks are releasing some of the resources consumed by branches and redirecting them to provide technology-intensive services to customers.
  2. Extension of the counter: Internet banking is no longer used only to publish information and perform transactions. It is becoming an extension to the counter, and customers are expecting the same financial services they would receive in a branch through the virtual Internet platform.
  3. Cross selling: When a customer is using Internet banking for one service, the application can automatically recommend other related services. However, if a customer visits the branch, the teller should be able to use the records from the Internet banking to help suggest other products and services the customer may need. Any activity a customer does with the bank should be available to drive sales regardless of whether it was through the counter or virtual.
  4. Financial supermarket: Banks can provide a wider range of services through mixing operations. This goes beyond letting customers choose whether to do a transaction online. It involves integrating all of the services that may be offered through a financial institution. For example, customers can access their normal banking functions, plus buy stocks, funds, and insurance.

Internet banking is quite important to commercial banks' channel transformation. Yet, Internet banking faces the following obstacles:

  1. Insufficient personalization: Banks are responding to the changes technology brings to the financial industry. They have invested in Internet banking and have added more and more functions into it. However, the customer experience is not highly personalized. All customers (regardless of their identity, gender, age, and interests) see the same operation pages and procedures. Little or no adjustment is made to select the best product selling model according to each customer's potential demand and risk preferences.
  2. Limited integration with marketing: In the global financial environment, the competition for the same kind of products is very fierce, and development of new products is a long process. Banks should be able to apply modern marketing theories and consider consumer behavior analysis, user experience, and competitor analysis as the main theoretical foundation for the new generation of front-end systems.
  3. Poor user experience: Based on Web 1.0, traditional Internet banking provides a poor user experience. Operations require a full-screen refresh, which takes a long time. They don't have the integrated view and one-stop service which you find in other kinds of Web-based applications.

Features of next-generation Internet banking

Web 2.0-based, next-generation Internet banking has the following features:

1. Personalization and customization

The next generation of Internet banking based on Web 2.0 fully exhibits the idea of "people-orientation." For different customers, different personalized Internet banking transaction and marketing platforms are displayed. Customers can freely customize the information and financial services that interest them. According to a customer's personalized Internet banking layout, banks can know clearly the potential demands to achieve cross-channel selling and realize target marketing and customer-oriented marketing. Figure 2 shows the next-generation Internet banking based on Web 2.0:

Figure 2. Web 2.0-based next-generation Internet banking
Drawing shows icons of a casual user with a personalized display containing a list of services on the left, a Google Map, a Calendar and an application to transfer funds through financial accounts. Another icon shows a user with a headset which shows a different list of services, a Google Maps street view, an ad and two different financial applications.

2. Rich third-party services

Based on the Widget standard, Web 2.0-based next-generation Internet banking can conveniently integrate many third-party services, such as Google Maps, Yahoo Stocks, weather forecasts, financial news, and so on. These services can be combined together into a mashup application which provides customers with value-added services and enhances the user experience. Figure 3 shows an example of third-party services integration:

Figure 3. Rich third-party services integration
Screen shot of an application showing various services integrated into one window. A frame in the upper left shows a list of houses. A frame in the lower left shows a summary of information about the selected house. In the upper right is a map of the location provided by Google Maps with a map view and street view. In the lower right is more detailed information about the selected house with options to adjust the information.

3. Multi-service window

Most Internet banking nowadays has only a single window and needs a full-screen refresh when a function is requested. If a customer encounters an Internet "traffic jam" when operating one service, he may be unable to visit other banking services. The next-generation Internet banking, based on Web 2.0, supports multi-service windows. Users can open several service windows at the same time, and each window supports asynchronous concurrent operation. The following diagram illustrates the multi-service window. There are several service windows in this tag page. These services can be used synchronously, which greatly improves the user experience:

Figure 4. Multi-service window
A screenshot of an application with various kinds of information integrated together in a multi-service window. On the left is a list of services. To the right of that is a Google Map showing the locations of various bank branches. Further right are two service frames with options to transfer funds and manage financial accounts.

4. A new development model

Web 2.0 promotes a user-centered design. Products and services adjust and improve according to users' demands and feedback. Web 2.0 advocates the "Never Release" concept, which means that there is no "official version," but every version is an official version, providing E-business On Demand. When bank developers develop services that the customer needs, they can put them in the service pool where users can subscribe to the services and add them to the operation area. This kind of development model enables bank IT engineers to pay more attention to individual service development, respond quickly to financial innovation demand from business staff, and improve the service constantly.

5. Usability

Because Internet banking is unmanned, customers can encounter problems easily. One of the typical problems is that customers cannot find the service they need. Web 2.0-based next-generation Internet banking supports personalization and blocks the services that customers may not be interested in. After the customers log into Internet banking, they see their own profile, which displays their favorites and a service list with a familiar layout.

To enable more users to use Internet banking conveniently, a user's habits have been thoroughly considered during the design, providing a user interface selection function. The Internet banking interface provided is similar to the desktop operating system, taking advantage of familiarity and providing more intuitive functionality. An example is shown in Figure 5.

Figure 5. XP-style Web 2.0-based Internet banking
A screen shot shows an application with a layout similar to a typical desktop operating system. Services are represented with icons. One service for managing payments is opened and resembles a desktop application.

6. Accessibility support

Some customers of Internet banking may have disabilities, such as color weakness or color blindness. An increasing number of users with accessibility requirements are using Web-based applications, increasing the demand for applications that meet their needs. Additionally, many governments are placing requirements for businesses to make their applications accessible. Web 2.0-based next-generation Internet banking provides accessibility support, including full keyboard operation, a screen reader, and so on.

Architecture and implementation of next-generation Internet banking

The next-generation Internet bank is the next evolution of the traditional Internet bank. It can be constructed based on the original application, utilizing the banking transaction pages and processes, while providing new features in using Web 2.0 business models and technology. Next, we'll examine the technical architecture of such an application.

Technical architecture

Figure 6 shows the typical architecture of an Internet bank.

Figure 6. Traditional Internet banking architecture
The traditional Interntet Banking architecture has three component areas which are shows as interacting left to right. On the left is the browser with a Web 1.0 presentation. In the middle is the sever side containing the Channel Handler, Channel Managment, Logic Controller. The Middle area interacts through connectors with the back end servers including the ESB, Mainframe and Application Platform.

In the architecture from Figure 6, the Channel Handler is responsible for receiving the request from the browser and sending the response to the browser. The Channel Management Module is used to control the channel policy, channel integration, channel interaction, and so on. The Logic Controller invokes the corresponding Page Logic Flow according to the content in the request. Page Logic Flow includes the operations and views in the banking transaction, for example, the "Account Transfer" transaction. The Connector can communicate with the back-end applications or the service integration bus.

The next-generation Internet bank is constructed based on the traditional architecture, and some new Web 2.0 components are added to it, aimed at a smarter system, which is shown below in Figure 7.

Figure 7. Next-generation Internet banking architecture
The Web 2.0 architecture shows infrustructure within the browser and the server side to create the new functionality. The browser contains the Web 2.0 Workplace which has a model layer and presentation layer, functioning through various widgets. The browser interacts with the server-side which has additional functionality including XML/JSON Data support within the Channel Handler. Channel Management now has Theme and Style management, Layout management and Service Management.

In Figure 7 several new components have been added into the server side and the browser side. On the server side, the Channel Handler should support communication with the browser through the XML or JSON data formats. With the two kinds of structured data, the request and response between the server and client will have more content and meaning.

Besides the XML/JSON communication support, the server application needs to manage the Web 2.0 theme and style as well as the Web 2.0 layout, which are related to the GUI presented on the browser. The selection of the themes and the user's styles and layout configuration will be restored on the server side, in the database, in a file system, or in some other repository. In another Web 2.0 application, such as a blog system, the theme and layout management are for the purpose of sharing. In an Internet banking application, the aims are personalization, usability, and consummability. The different goals indicate different detailed functions. For example, the Internet bank system can recommend some default layouts for the end users, which contain the most common services; some of these services may have some relationship. The bank systems are also required to provide service management, which allows end users to add desired services into their Internet bank so they are not forced to see the complicated service menu every time. Web 2.0 Theme and Style Management, the Web 2.0 Layout Management, and the Web 2.0 Service Management are three key modules newly added into the Channel Management. They store the configuration of the users and recommend some configuration to the clients. For example, "Happy Birthday" can be recommended for one user, if her birthday is near, or a list of service options could be displayed as a Certificate of Deposit (CD) is reaching maturity.

The record of the theme, style, layout, and selected services of the users will be sent to the Channel Intelligence module. The Channel Intelligence module collects and analyzes the user behavior data, channel data, transaction record data, and so on to obtain the matched patterns for users. Based on the results, the Internet Bank System can recommend services, products, and information to end users, while providing alerts about potential business opportunities to the bank.

On the browser side, the Web 2.0 framework will take on an important role. It is responsible for loading the required resources and managing the data models, as well as presenting and organizing the GUI. So much work will be done on the browser side compared to the traditional Web 1.0 Internet bank. However, it does not mean the Web 1.0 presentation can be completely replaced. Due to legacy functionality and other factors, the Web 1.0 structure may still exist for a long time and run from within the Web 2.0 framework.

Web 2.0 components design

In the previous section, we introduced some of the technical architecture for the next-generation Internet bank. Now we'll focus on some new key components in the architecture, including the Web 2.0 Browser Side Runtime, the Web 2.0 Theme and Style management, the Web 2.0 Layout Management, the Web 2.0 Service Management, and the Channel Intelligence. Some of the design has been implemented in some IBM Web 2.0 products.

1. Web 2.0 browser-side runtime

The Web 2.0 runtime on the browser side is usually some JavaScript or an RIA framework. Here we'll focus on the JavaScript technology.

The GUI of the next-generation Internet bank mainly consists of the service list, work area, and widget instances, as shown in Figure 8, supported by the browser-side runtime. The service list contains service items that users can choose from the service repository; the runtime obtains the service list model from the server side and presents it on the GUI, saving the new service list customized by the user to the server side. The design of this part of the Web 2.0 runtime follows the MVC pattern. As with the service list, the work area has persistence on the server side, leveraging the MVC pattern. This design allows users to do many different operations, which helps users get their own personalized layout and content. For example, in the screen shots shown below in Figure 8, the users can add new tabs, columns, and widget instances, modify the titles and icons of the tabs, change the width of the columns, alter the position of the widget instances, and more.

Figure 8. The key elements on the GUI
Two screenshots show how the key components to the GUI can be represented in different views. In the example on the left the work area looks like a typical portal-sytle applications with the Service List and Widget instances shown as interconnecting frames on a single browser window. In the right example the interface resembles a desktop for an operating system with the service list as a series of icons and an application launcher type of menu while the Widget instances are shown as free-floating, individual windows.

Besides the service list and the work area, another key part in the Web 2.0 runtime is the widget container. Before going any further, let's clarify the concept of a widget. A widget is a module that has individual presentation and functionality—for example, a widget that can link to another Web site, or a widget that can be used as an RSS reader. At present, there are various widget standards established by different companies such as Yahoo!® Widget, Google® Gadget, and IBM® iWidget, which all deal with presentation. Although some differences exist in these widget standards, the widget definition of them follows the same protocol using an XML definition file plus various kinds of resource files, as shown in Figure 9.

Figure 9. Definition of a widget
A package is shown to contain an XML definition bundled with various resourcessuch as javascript, CSS, images, HTML, video and audio.

A banking service can be implemented based on the widget definitions and transformed into widget instances. There are three modes for one service implementation: a single simplex widget instance, a single composite widget instance, or a group of widget instances. One simplex widget instance means the service is only one widget instance; one composite widget instance means a widget instance, which represents the service, is composed of several inner widget instances; and a group of widget instances means several widget instances compose the service. Figure 10 shows the three modes to implement a simple "Account Transfer" transaction.

Figure 10. Three modes of one service implementation
Three approaches to service implementation are shown: In the Simplex Widget Instance a single window shows what looks like a traditional HTML page with a form to perform and account transfer. In the Composite Widget Instance there is a single window divided into two frames with the account transfer information on one side and a mechanism to choose accounts from a list on the other. Finally the same functionality of multiple widgets is shown, but now rather than being separate frames in a single window, they are separate windows.

The widget container is the runtime of the widget instances, responsible for generating the widget instances based on the widget definition and the configured attributes, saving and restoring the widget instances to the server side, which can be implemented by some JavaScript technology.

2. Web 2.0 theme and style management

The style, theme, and layout are the most immediate parts which are related to the user experience. Here, style refers to one specific presentation framework of the Web 2.0 Internet bank. For example, in Figure 8, you can see the Internet bank is presented based on two different styles. One is the "column" style, and the other is the "desktop" style. The theme is a group of settings including the font, color, background, position, and so on, based on one style. Figure 11 demonstrates two different themes based on the same "column" style.

The browser-side runtime provides the display ability for the various styles and themes in virtue of CSS, JavaScript technology, or some RIA technology. The module on the server side contains the various styles and themes, manages the storage data of the themes and styles of the users, prepares the data for the Channel Intelligence module, and accepts some response from the Channel Intelligence module. According to these responses, the Theme and Style Management can recommend some styles and themes to the users for the purpose of marketing recommendations and customer care.

Figure 11. Different themes based on column style
Two screen shots show the same data and essential widget layout that use vastly different headers and overall color schemes.

3. Web 2.0 layout management

Layout refers to the organization and distribution of the widget instances on the work area. For example, in the "column" style, one widget instance must belong to one row; one row must be in one column; one column is in one tab; and all the tabs compose the whole work area. The Web 2.0 browser-side runtime is responsible for the construction and maintenance of the structure of the layout on the browser. On the server side, the Web 2.0 Layout Management module manages the layout persistence. The layout information may be saved in the XML files, in a database, or in some other repositories. The layout data has a close relationship with data from the widget instances. IDs are used to establish the relationship. For example, in the data of column layout, each row has a unique ID. In the data for the widget instances, each widget instance node will have one attribute valued with the ID of the row where the widget instance is positioned.

On the browser, the users can change the Web 2.0 Internet bank layout, which depends on the style. Users will choose their frequently used banking services and put them on the appropriate place in the work area. So, the layout information of the users is a good source for data analysis and mining. The Web 2.0 Layout Management module collects not only current, but historical layout information for the users. The collected data will be sent to the Channel Intelligence module.

The Layout Management module extracts a layout template from the data of thousands of users and recommends it to users, avoiding some new users who may want to start from scratch.

4. Web 2.0 service management

In the architecture of the next-generation Internet bank, a service will be realized by one or several widget instances, as mentioned in the introduction of the browser-side runtime. The real Web 2.0 Internet bank provides thousands of services and needs an appropriate and effective mechanism to organize the services flexibly, while providing the ability to support extensibility and personalization. The Banking Service Repository and Service List are designed and implemented for these purposes.

The Banking Service Repository contains all the banking services. These services are implemented through configuring the widgets. Users can see the Service List on the page of the Internet bank, which is a subset of the Banking Service Repository. The Service Management module manages the Banking Service Repository and the Service Lists. The Service Management module recommends some Service Lists to the users based on personal information, transaction records, and so on. The users can select required services from the Banking Service Repository and add them into their own Service Lists. The creation, deletion, updates, and searching of the services in the Banking Service Repository and Service List on the server side is controlled by the Service Management module. The services in the Banking Service Repository and Service List are organized into various categories. The following picture gives the structure of the Banking Service Repository and Service List.

Figure 12. Banking Service Repository and Service List
Two boxes are shown. One represents the Service Repository, which contains every possible widget. The second box contains the user's profile with a specific collection of widgets that the user has chosen.

5. Channel Intelligence

The Channel Intelligence module is of great importance in the whole next-generation Internet bank. It decides the extent and depth to which the Internet bank understands its customers. It collects, analyzes, and integrates the data of user behavior, channel data, GUI data (including style and layout), transaction records, and so on. This collection is used to get the useful information for customer care and business opportunities. The Channel Intelligence module consists of data collectors, smart engines, and result handlers. The output of the Channel Intelligence module includes various results for different uses. Some will be presented in the form of diagrams; some will be sent to the event engine; some will be sent to the Channel Management module; some will be given to some page flows. The Channel Intelligence is the core that influences the behaviors of various components in the next-generation Internet bank.

The key part of the design of the Channel Intelligence module is the smart engines. They may be based on some rule engines, mathematical engines, or a mixture, depending on the practical use and the level of maturity. Generally speaking, a stronger Channel Intelligence module has more powerful mathematical engines in it, created from theory and practical experience. The graceful design of the Channel Intelligence module needs the integration of good technical architecture and business knowledge, as well as the effective and efficient algorithms. They may be designed in-house, or take advantage of third-party experience such as some of the IBM business intelligence products. Figure 13 shows the structure of the Channel Intelligence module.

Figure 13. Channel Intelligence module structure
The Channel Intelligence module is shown as a complex combination of historical records, smart engines, analytical results, statistical results, etc., which interact with a result handler that provides the appropriate page flow logic, channel handler, channel managment, event engine and presentation for the specific user.

Application implementation

The traditional Internet bank has run on a combination of open source and commercial software such as IBM WebSphere® Multichannel Bank Transformation Toolkit (WMBTT), IBM WebSphere ESB, IBM WebSphere Message Broker, IBM DB2, and the Spring Framework.

For the next-generation Internet bank, new tools are added. More robust offerings in the open source arena will provide the standards and functionality to give users a rich experience across platforms. Commercial products will also gain sophistication as more data and experience becomes available about what users want and how they behave in a Web 2.0 environment. IBM has specific products aimed at helping developers harness this power for financial applications. The IBM WebSphere Bank Transformation Toolkit, IBM WebSphere Portal, and IBM Lotus Mashup can support the implementation for some of the new Web 2.0 components mentioned.


We examined the concepts and technologies of Web 2.0 as they pertain to the design of the Internet bank. We looked at some of the differences in thinking and design between the traditional style of financial applications and the next-generation Internet bank. The next generation provides customer-centric features, giving users an extremely personalized experience while at the same time providing increased intelligence and automation to help financial institutions sell appropriate products and services to their customers.





developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into Web development on developerWorks

Zone=Web development, Industries
ArticleTitle=Next-generation banking with Web 2.0