© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Your customer engagement transformation starts here
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.2Engage 2014
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Single Page Architecture
Case Study by Cigna
David Petriashvili / September 22, 2014
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.3Engage 2014
New Screens are taking over our lives
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.4Engage 2014
Web Apps Architecture is fundamentally changing
Content Repository
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.5Engage 2014
Single Page Architecture at Cigna
Business Benefits
Leveraging single page architecture allows Cigna digital marketing and product organizations to take advantage of the latest customer trends and position the products and services via more diversified and unique channels.
• Gamification
− Additional channel for customer outreach via engaging user experience.
• Animation
− UI that is fun and interactive making the user experience more responsive compared to the traditional web apps.
• Native App like experience
− SPA based responsive applications provide user experience of a mobile native app.
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.6Engage 2014
Objectives
Business drivers behind the initiative
Design a web platform that provides application delivery which is quick to market, portable between traditional desktop and mobile devices, and is supported by web content management, while providing business capabilities:
• User event driven content personalization
• Client selectable content personalization
• Application look and feel personalization
• Business content owner managed site configuration
• Consistent user experience across various devices
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.7Engage 2014
Functional Requirements
Technical Drivers Behind the Implementation
Design a light weight, easily extendable, scalable, web application platform that is quick to market and inexpensive to implement and support. The must have capabilities:
• Responsive across all devices
• Integration with enterprise WCMS
− Template based solution
− Business workflows/governance
• In-application administration
• Reduced release impact (duration, frequency, and vulnerability)
• Support for project-in-a-box approach
• Modular architecture of web components
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.8Engage 2014
Technology Choices
Why AngularJS?
Front-end development framework supporting application development best practices.
• MVC (or MVVC) pattern extended to JavaScript
• Well Supported codebase
• Comprehensive list of inbuilt functionality
− HTML extension
− Data-binding and Dependency injection
− Well organized code
• Easy to get started
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9Engage 2014
Technology Choices
Why TeamSite/LiveSite?
Comprehensive integrated web content management solution.
• Authoring support for run-time application
• Established ease of governance process
• Pre-built integration functionality
• Existing support for content targeting and segmentation
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.10Engage 2014
Video Demo
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.11Engage 2014
Solution Overview
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.12Engage 2014
TeamSite Page Authoring View
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.13Engage 2014
TeamSite Page Authoring View
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.14Engage 2014
Key server-side functionality
Design Overview
LiveSite
• Aggregation of Data
• JSON Conversion
• Component Load Delay
• IDOL Engine Driven Targeting
• WebSeal Integration
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.15Engage 2014
Key client-side functionality
Design Overview
AngularJS
• Global scope schema
• Page scope schema
• Delaying JSON object request
• AngularJS management
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.16Engage 2014
Future Considerations
TeamSite
Establishing a consistent user experience between the design-time preview and run-time application.
• Full visual site-publisher preview
• Site structure configuration in the site publisher templates
• UI customization/configuration in the site publisher templates
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.17Engage 2014
Conclusion
Return on Investment
• Gamified application build and support via LiveSite
• Single Page Application supported via Web Content Management
− Adjustment to non-traditional architecture without loss of the WCM capabilities
− Ease of site setup and configuration based on predefined branding templates with real-time preview
− Continued support for targeting and segmentation within SPA application
• Increased speed-to-market achieved by leveraging TeamSite/LiveSite supporting underlying JavaScript based SPA framework.
− 1.5 Month to design and implement the end-to-end product prototype
− 7 member team scrum
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
THANK YOU
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.19Engage 2014
Call to action
Questions?