End-to-End, Content Managed Online & Mobile Banking

Discussion and Demo

September 4, 2012 Basel, Switzerland

Presentation Topics

•  Issue / Challenge / Solution

•  Online / Mobile Banking Platform with Embedded Magnolia

•  Multichannel Banking and Magnolia

•  Online / Mobile App – Platform Tech Stack

•  Native App – Platform Tech Stack

•  Demo -- iPad Banking App and Magnolia

•  Questions / Contact Us

2  

Issue / Challenge / Solution

Issue: Financial institutions (FIs) are confronted with a forest of user applications housed in individual silos that deliver an inconsistent customer experience and prevent FIs from responding rapidly to changing consumer expectations.

Challenge: There is a clear need for FIs to provide customers with a consistent experience across all online and mobile channels. To accomplish this, it is imperative that such a solution include an embedded Web content management system.

Solution: NRG Edge Online / Mobile Banking Platform w/ embedded Magnolia •  Consistent customer experience across all online / mobile banking channels.

•  Consistent application framework that exposes RESTful services.

•  Single console (Magnolia Author) manages all online and mobile channels.

3  

Online / Mobile Banking Platform – Capabilities

•  The platform supports the development of the following applications / products:

-  Tablet applications (iPad & Android)

-  Mobile applications (iPhone & Android)

-  Online banking including account origination & funding and online account case management

-  Web marketing sites (Web storefronts)

•  Embedded Web content management system – Magnolia

-  The Magnolia component can manage, publish and edit content across all Web and mobile access points from a single console.

4  

Embedded Magnolia Features

•  Manage content for . . . -  Text changes.

-  Field label changes.

-  Links and document uploads.

-  Style changes; e.g., button colors, sizes, shapes, uploading of cascading stylesheets (CSS).

•  Pull rate information from a banking engine.

•  Enable promotional advertising w/ Adobe / Omniture Test and Target enabled m-boxes.

•  Manage multiple channels from one Magnolia Author instance.

5  

Embedded Web CMS

Managing Bank Content w/ Embedded Magnolia

6  

Traditional Model

Native, Web & Mobile Banking Enabled w/ Magnolia

Developer Codes

Create WAR File

Release WAR File via Controllers

UAT Testing

Publish Content

Content Change Request

Publish Content Publisher

Changes Reviewed in Workflow

Editor(s) Change Content

End-to-End Solution – Platform Applications Overview

7  

Service Oriented Architecture (SOA)

NRG Edge Online / Mobile Banking Platform (RESTful Services)

APIs

Internet

Single Magnolia Console

Intranet

Magnolia-enabled Online

Banking, Origination & Funding, and

Banking Ancillaries

Magnolia-enabled

Marketing Storefront

(Web & Mobile)

Magnolia-enabled

Mobile Web

Magnolia-enabled Native Mobile Apps iPad

iPhone Android

Bank System of Record (BSOR)

A Magnolia Console Manages Content for All Direct Channels

8

WebStorefront Web Online Banking Mobile Web Native Mobile &

Tablet Apps

Customer Engagement Experience

Magnolia Console

Pages

Links Tables

Charts

Video

Rates

Promos & Ads

Surveys Chat

Images

Text

Multilingual

Social Media

Help Legal

Product Info

Calculators

Tech Stack - NRG Edge Online / Mobile Banking Platform

9  

Bitronix JTA – Java Transaction API

Apache Wicket – framework for Web applications

Magnolia – Web content management system

Spring Security – framework for authentication & access control

Custom Business Logic – contains the business rules

Spring Security – secures all calls into the service layer

Hibernate Search – Search – uses Apache Lucene

Hibernate Java Persistence API – JPA 2.0 Platform Database

Experian – third party services

System of Record

Database

Spring Inversion

of Control (IoC)

pattern – wires

together components

and services

Third Party Databases

JasperReports – report writing engine

Activiti – workflow – business process management

User Interface

Layer

Service Layer

Data Layer

Apache Maven –

manages project's

dependencies, builds,

reporting, and

documentation

Mechanics of Integration w/ Wicket

•  Created content provider (class) that uses core Magnolia components to retrieve content based off an identifier.

•  Content provider can return resource bundle strings for field labels.

•  Content provider can also return a complete Wicket template (HTML).

10  

<div> <label wicket:id="firstNameLabel">[Label will display here]</label> <input type="text" wicket:id="firstName" /> </div>

The Content Provider

11  

public interface ContentProvider { public List<String> getContentCollectionById(String id); public String getContentValueById(String id); public String getContentValueById(String id, String defaultValue); }

•  The identifier can be either a path or a UUID.

•  The content provider returns either HTML or plain text from Magnolia.

Tech Stack - Native Mobile (iPad, iPhone / Android tablets & phones)

12  

Bitronix JTA – Java Transaction API

Custom Business Logic – contains the business rules

Spring Security – secures all calls into the service layer

Hibernate Search – Search – uses Apache Lucene

Hibernate Java Persistence API – JPA 2.0 Platform Database

Experian – third party services

System of Record

Database

Spring Inversion

of Control (IoC)

pattern – wires together components and services

Third Party Databases

JasperReports – report writing engine

Activiti – workflow – business process management

Native Components

Hogan.js – Templating Engine

Apache Cordoba – HTML5 and JavaScript UI

Service Layer

Data Layer

Apache Maven –

manages project's

dependencies, builds,

reporting, and

documentation

User Interface

Layer

Magnolia – Web content management system

Mechanics of Integration w/ Adobe PhoneGap

•  Using PhoneGap, we create native applications that use HTML and JavaScript.

•  We create a RESTful content service that uses core Magnolia components to retrieve content based off an identifier.

•  We use Twitter’s Hogan.js templating library within PhoneGap.

•  Content service can return resource bundle strings for field labels in JSON format.

•  The content service can also return complete Hogan.js templates.

13  

<div> <label for="firstName">{{firstNameLabel}}</label> <input type="text" name="firstName" /> </div>

The Content Service

14  

•  The identifier can either be a path or a UUID.

•  The content service returns either HTML or plain text from Magnolia in JSON format.

@Path("/content-service/") @Produces({"application/xml","application/json"}) @Consumes({"application/x-www-form-urlencoded","application/xml","application/json"}) public interface ContentService { @GET @Path("/{id}") public Content getContent(@PathParam("id") String id); }

Native iPad App – Magnolia Demo

15  

Downloadable iPad App

HTML5 & JavaScript

Native iOS Components

iPad Services

RESTful Services

Custom Business Logic

Magnolia

Profile Data / Content

Native iPad App Demo with Magnolia

16  

Questions / Contact Us

17  

Address: NRG Edge, LLC 5 Great Valley Parkway Suite 210 Malvern, PA 19355 USA

Web: www.nrg-edge.com Contact: 1-888-638-2704 info@nrg-edge.com