1. Multi Chanel Self Service Amdocs and HTML5
Daniel Reiter
Chief Architect, Customer Management
November 2012

2. Agenda About Amdocs Multi Channel Self Service
Technological challenges
Solution approach
Architectural dilemmas

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

4. We support more than 2 billion customer experiences a day
250+ Customers
2500+ Projects

5. 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
Fast Deployment
Multi-touchpoint
Slick Apps
Easy Updates
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

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

7. 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 1
Mobile Deployment 3
HTML5, JQuery widget libraries REST services
Device abstraction layer for deployment to multiple mobile devices (reduce device porting time)
Touchpoint Optimization & Consistency 2
Rapid Deployment 4
Supports major form factor combinations – tablet, desktop, smart phone (increase code reuse)
IDE for Quicker page creation and re-use across form factors

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

9. Modularization Bringing Structure to Javascript
Provides structured approach to javascript simplfying code management and increasing reuse
Benefits
Capabilities
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
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

10. 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)
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

11. 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
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

12. Architectural Dilemmas
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

13. Hybrid Application The dilemma We decided hybrid HTML5
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…
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

14. User Experience and Code Reuse
Native
User Experience
UXF Hybrid
Web App
Code Reuse/Rapid Deployment
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

15. Client Framework The dilemma: We decided build our own…
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
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

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

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
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
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

19. 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
List Widget
Model
List of devices (name, picture, desc)
ViewModel – Abstract View
Select Row {Click on Row, Touch Row, … }
Next Rows {Scroll Down, Wipe…}
Views
Tablet View
Web View
Mobile View
Details
GetDeviceList
Service call.
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

20. Carousel Graph Widget Graph Widget Carousel Recommendation
Information Security Level 2 – Sensitive
© 2012 – Proprietary and Confidential Information of Amdocs

21. 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
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 daniel.reiter@amdocs.com
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