Multi Chanel Self Service

Amdocs and HTML5

Daniel Reiter
Chief Architect, Customer Management November 2012

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Agenda
About Amdocs
Multi Channel Self Service Technological challenges

Solution approach
Architectural dilemmas

About Amdocs
Leader in Customer Experience Systems

and Services
$3.2b revenue, $1.17b in cash More than 19,000 professionals

Serving customers in more than 60 countries

Traded on New York Stock Exchange (DOX)

For 30 years, Amdocs has ensured service providers success by embracing their biggest challenges

We support more than 2 billion customer experiences a day

250+ Customers 2500+ Projects

Multi Channel Self-Service (MCSS)

The Business need: Unassisted consumer access to Service Provider Complete, integrated transactional-care (Bill payment, Care, Commerce) that provides consistent and great user experience across all touch points

Slick Apps Multi-touchpoint

Fast Deployment Easy Updates

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Technological Challenges
Mobile deployment on limited control environment,

multiple OS, form factors and constantly expanding matrix of devices Native user experience
Need for common code base to

reduce lengthy development and deployment cycles and retain consistency across touch point
Customizable yet upgradable (theme, styling, functionality) Continuous upgrade/patch

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Solution Approach
User Experience (UX) Framework
Unified UI infrastructure that cuts across touch points and channels enabling rapid time to market and a screamingly simple user experience

Modern Web Architecture

Mobile Deployment

HTML5, JQuery widget libraries REST services

Device abstraction layer for deployment to multiple mobile devices (reduce device porting time)

Touchpoint Optimization & Consistency

Rapid Deployment

Supports major form factor combinations tablet, desktop, smart phone (increase code reuse)

IDE for Quicker page creation and re-use across form factors

Standards Based Web Technology

UXF is based on technologies, JavaScript open sources tools, and utilities that are industry-standards:
HTML5 BackboneJS jQuery Stack
jQuery jQueryMobile jQueryUI

RequireJS Underscore

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Modularization
Bringing Structure to Javascript
Provides structured approach to javascript simplfying code management and increasing reuse Capabilities
UXF uses Asynchronous Module

Benefits

Provides a clear separation of

Server REST services UI business logic UI flows Client presentation layer

Definition (AMD), supported by requireJS A module is a component that is treated/loaded as a standalone entity Every UXF JavaScript object is defined as a module Provides basic and common components that are used to create web-based applications
Widget library Application building blocks

HTML/JS/CSS

Easier maintenance of largescale applications Easy reuse of code Customization enables substitution of core module with a customized version
Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Widgets Library
Versatile Building Blocks
Widgets provide ease to reuse building blocks of functionality allowing rapid page construction Capabilities
Widget self contained client side

Benefits Easy reuse of code drop widgets into pages Customization creation of custom composite widgets

component that exposes a specific piece of content (information or service). Typically implements several views, optimized per touch point or device. Technical Widgets based on jQuery/JQM widgets that provide basic UI elements. Widgets can be grouped to form higher level (composite) widgets Business Widgets widgets combined with services create reusable blocks of business functionality (i.e. search product widget)
10

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Supporting tools
UXF is a complete stack of technologies and tools that supports creating and deploying user-experience focused applications cross device and cross platform Capabilities
Set up environment Quick jump start, standard working environment Design Design tools Services, Data and presentation Develop Structured development concepts, templates, live documentation,

data binding, code inspection Test Automated tests, build reports, Simulates browsers, desktop, mobile and tablet, simulate devices API, device emulator Build Optimize development resources for production, code validation, build servers for multiple platforms (So all development and build could be done on same machine) Custom build Create partial build in case not all features, widgets are required to create specific application version that contain only what is needed by specific customer Runtime Logging framework, Usage analysis, Configuration, background updates

11

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Architectural Dilemmas

12

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Hybrid Application
The dilemma
Native or HTML5?
Native has the potential to provide better performance and optimized

graphics..

We decided hybrid HTML5

Built using web technologies and compiled into a native executable run

by the native browser A True design once deploy many enabling technology Close to native experience on smart devices and desktops Rapid Development Code Reuse Rich customizable Experience
Repeated effort to customize multiple native code

13

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

User Experience and Code Reuse

User Experience

Native

Code Reuse/Rapid Deployment

14

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Client Framework
The dilemma:
Use an existing frameworks such as Dojo or Sencha Vs. building our

own framework based on smaller components such as jQuery /JQuery Mobile, Backbone, RequireJS etc.

We decided build our own

Amdocs requirements include a unique blend of

customization/upgrade/experience/rapid development Widget library decoupling easier to adopt new UI elements without impacting the JS framework Vendor locking/decoupling Ability to upgrade Strengthen our in house knowledge of the technology

15

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Mobile Enablement
User Experience Framework (UXF)
UXF Mobile Enablement allows deployment of a single sourced Hybrid Mobile app to host of supported devices

Hybrid Application Support HTML5 pages encapsulated and installed on mobile device as application Supported Devices UXF ME supports broad range of mobile phones and tablets Device Abstraction Provides common set of APIs to access native resources on supported devices (camera, accelerometer, GPS) Push Notification Provides common API enabling Push Notification across multiple OS Mobile Development IDE that allows emulation of devices as well as simulation of local device resources Packaging and Deployment Installer generator for selected devices creates OS specific installation package and application /version management. Use of technology specific package selection such as Android Google filters.

Client or Server Centric Architecture

The dilemma
Client based architecture reduces network resource utilization and

reduces impact on service provider backend systems Server based architecture simplifies Security and Role Based Authorization. Also uses more popular language (java vs JS)

We decided to go client centric because

UI experience (performance) Higher scalability (strong client side CPU) Resource security is managed on the server Decoupling of server/client technology

17

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Client Centric MVVM Design Pattern

The entire application is client side - Server provides only

content via REST Services Model Reflects front end server REST services View Interact with the user in graphical way ViewModel the displayed data model
Allows clear separation of front end server data from the UI display

logic Data binding automatic update of UI when model data change and vise versa

18

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Cross Touch Point Design

Design Once Deploy Many
The use of Model View ViewModel(MVVM) paradigm enables a single widget to render appropriately for different form factors

Adaptable widgets across

major form factors

Smartphone, Tablet,

Desktop Multiple embedded views (based in part on responsive design concept) Enables touchpoint specifics events with widgets
Increases code reuse

Views Web View Mobile View Tablet View

List Widget

ViewModel Abstract View Select Row {Click on Row, Touch Row, } Next Rows {Scroll Down, Wipe} Model
List of devices (name, picture, desc)

GetDeviceList
Service call.

Graph Widget

Carousel Graph Widget

Carousel

Recommendation
20

Recommendation

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Summary
Service Providers are looking to provide a superior customer

experience which is consistent across unassisted touch points

However, technological challenges such as limited control

environment, multiple OS, form factors and constantly expanding matrix of devices as well as long development and deployment cycles inhibit adoption of self service solutions
The Amdocs Multi Channel Self Service provides a solution based on

the UX Framework and advanced web technologies such as HTML5, JavaScript, widget libraries and industry standard open source tools and utilities

21

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Questions

?
22
Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Thank You

[email protected]

23

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs

Highly Customizable UI
Style Customize application look and feel (CSS) Design concept and theme Widget styling View Customize application layout, widgets used,

widget style in context, widget display properties Presentation logic (JS Object) Customize user interaction, application and user event handling Flows and client side processing Customize application flows, validation, relational model Interaction with BE Server Customize REST services

24

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs