your customer engagement transformation starts here · your customer engagement transformation...

© 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?