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
Fast Deployment
Easy Updates
Multi-touchpoint
5
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
6
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
1
Modern Web
Architecture
• HTML5, JQuery widget
libraries REST services
2
Touchpoint
Optimization &
Consistency
• Supports major form factor
combinations – tablet, desktop,
smart phone (increase code
reuse)
3
Mobile
Deployment
• Device abstraction layer for
deployment to multiple mobile
devices (reduce device porting
time)
4
Rapid
Deployment
• 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
8
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
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
9
Benefits
• Provides a clear separation of
• Server REST services
• UI business logic
• UI flows
• Client presentation layer
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
Benefits
● 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)
10
• Easy reuse of code – drop
widgets into pages
• Customization  creation of
custom composite widgets
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,
●
●
●
●
11
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
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
User Experience and Code Reuse
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
●
●
●
●
15
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
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,
● Increases code reuse
Views
Web View
List Widget
Desktop
● Multiple embedded views
(based in part on
responsive design concept)
● Enables touchpoint
specifics events with
widgets
•
•
Mobile View
Tablet View
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
daniel.reiter@amdocs.com
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