Information Security Level 2 – Sensitive © 2012 – Proprietary and Confidential Information of Amdocs Multi Chanel Self Service Amdocs and HTML5 Daniel.

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

Multi Chanel Self ServiceAmdocs and HTML5

Daniel ReiterChief Architect, Customer Management

November 2012

Agenda

● About Amdocs● Multi Channel Self Service● Technological challenges● Solution approach● Architectural dilemmas

For 30 years, Amdocs has

ensured service providers’ success by embracing their biggest challenges

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)

250+ Customers

2500+ Projects

We support more than 2 billion customer experiences a day

5

Multi Channel Self-Service (MCSS)

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

● 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

Fast Deployment

Multi-touchpoint

Slick Apps

Easy Updates

6

Technological Challenges

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

● 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

• HTML5, JQuery widget libraries REST services

Modern Web Architecture1 Mobile

Deployment3• Device abstraction layer for

deployment to multiple mobile devices (reduce device porting time)

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

Touchpoint Optimization & Consistency

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

Rapid Deployment42

Unified UI infrastructure that cuts across touch points and channels enabling rapid time to market and a screamingly simple user experience

Solution ApproachUser Experience (UX) Framework

8

Standards Based Web Technology

● HTML5● BackboneJS● jQuery Stack

● jQuery● jQueryMobile● jQueryUI

● RequireJS● Underscore

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

UXF is based on technologies, JavaScript open sources tools, and utilities that are industry-standards:

9

ModularizationBringing Structure to Javascript

● UXF uses Asynchronous Module 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

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

• Provides a clear separation of• Server REST services• UI business logic• UI flows• Client presentation layer HTML/JS/CSS

• Easier maintenance of large-scale applications

• Easy reuse of code

• Customization enables substitution of core module with a customized version

Provides structured approach to javascript simplfying code management and increasing reuse

BenefitsCapabilities

10

Widgets LibraryVersatile Building Blocks

● Widget – self contained client side 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)

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

• Easy reuse of code – drop widgets into pages

• Customization creation of custom composite widgets

Widgets provide ease to reuse building blocks of functionality allowing rapid page construction

BenefitsCapabilities

11

Supporting tools

● 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

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

Capabilities

UXF is a complete stack of technologies and tools that supports creating and deploying user-experience focused applications cross device and cross

platform

12

Architectural Dilemmas

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

13

Hybrid Application

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

● 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…

Native

User Experience and Code Reuse

Information Security Level 2 – Sensitive© 2012 – Proprietary and Confidential Information of Amdocs14

Use

r E

xper

ienc

e

Code Reuse/Rapid Deployment

UXF Hybrid

Web App

15

Client Framework

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

● 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

Mobile EnablementUser Experience Framework (UXF)

● 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.

UXF Mobile Enablement allows deployment of a single sourced Hybrid Mobile app to host of supported devices

17

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

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

18

Client Centric MVVM Design Pattern

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

● 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

Cross Touch Point DesignDesign Once Deploy Many

● 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 reuseL

ist

Wid

get

ModelList of devices (name, picture, desc)

ViewModel – Abstract View• Select Row {Click on Row, Touch Row, … }• Next Rows {Scroll Down, Wipe…}

Views

Tablet ViewWeb View Mobile View

Details

GetDeviceListService call.

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

Information Security Level 2 – Sensitive© 2012 – Proprietary and Confidential Information of Amdocs20

Graph WidgetGraph Widget

Carousel

Carousel

RecommendationRecommendationRecommendation

21

● 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

Summary

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

22

Questions

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

?

23

Thank You

● ● [email protected]

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

24

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

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