CUSTOMER EXPERIENCE TECHNOLOGY CONSTRUCTS FOR TELECOM CLIENTS

External Document © 2018 Infosys Limited External Document © 2018 Infosys Limited

In the endeavor to become more customer centric for our Telco client’s needs, Infosys has strategized an offering to deliver a personalized experience which is relevant and addresses the need. It aims to provide an Omni-channel Customer Experience (CX) across multiple channels and touch points for competitive advantage, compelling experience to reduce churn and increase conversions. Telco customers are increasingly using multiple touch points to resolve service issues and are expecting an integrated and seamless experience; It should deliver an intuitive and cohesive Sales and Care capabilities.

To provide engaging personalized experience, it is important that customer experience channel is defined for human purpose supported by a world of technology.

Having Consumers at the Centre of Experience, it is important to establish connect with them by leveraging the technology:

• Provide consistent brand experience in which telecom consumer processes are simplified for sales and self service

• Improve customer engagement by providing personalized digital experiences across channels

• Increase conversion by delivering targeted, personalized and highly-effective campaigns and promotions

The overall solution architecture and underlying capabilities forms the foundation for successful transformation.

Consistence Brand Experience:The future state architecture is modular (or ‘component based’), where the most appropriate (or ‘best of breed’) solution can be applied for each component. This approach provides flexibility of selecting themes, page templates, author-publish workflow, allowing components to be updated and/or replaced in the future without significantly impacting other components and pages.

Atomic UI – Component Development• Increased reusability to build different

experience from foundational elements

• Site requirements can be broken down to elements and design analysis is quicker

• Easier to interpret the site built using atomic principles which separates content and structure with ease

White Labelled – Component Repository (CSS3, JQuery, React, Bootstrap, Sass, LESS, minify, etc.)

• Branding CSS (coloring, fonts, feel, navigations …) for each Web property in Telecom

• Components reused across the Group with Color changes specific to web property –bringing reusability & consistency

Improved HTML Coding – HTL, HTL+AJAX and Angular (Client side MVC) Approach

Increased Security• The HTML Template Language increases

the security of sites that use it in their implementation, as compared to JSP and to most other template systems, because HTL is capable of automatically applying the proper context-aware escaping to all variables being output to the presentation layer.

Simplified Development• HTL itself is standard HTML5 as it uses

expressions and data attributes to annotate the markup with the desired dynamic behavior, meaning that it doesn’t break the validity of the markup and keeps it readable

• Increased security, simplified development and improved team

(Please note that the model is for illustrative purposes only. The model must be tailored towards the business and industry needs.)

Analytics /Targeting/Campaign

Presentation Tier

Channel Touch-point

Portal /Site / App

Website Mobile Web Mobile App Social Email /SMS KIOSK IVR Retail Customer care

Shopping Self-service Identification, Verification & Routing

AEM HTL, HTL with AJAX and Angular HTML5, CSS3, Bootstrap, JQuery, React, Sass/LESS, Minify,

Components, Templates, Workflow, Tags, Digital assets mgt, Forms etc

Offers & Campaigns Targeted / PersonalizationContents

Real-time, 2nd and 3rd party DataAnalytics data

UX/UI Framework &

Guidelines

Core CSS Framework

Common Framework:

ComponentsTemplates

ConfigurationIntegrations

UI Design: HTML5, CSS3, React,

Bootstrap, Jquery, Sass, etc

Style Guides:CSS3

Business Logic, Java, HTL, Sling

Bundles

AEM Components[HTL, HTL+Ajax, Client side MVC

(angular)]

AEM Templates

End User Experiences:

Pages

Building Blocks

External Document © 2018 Infosys Limited External Document © 2018 Infosys Limited

Organized Development with Standard Template/Component

collaboration, translates for AEM projects in reduced effort, faster Time to Market (TTM), and lower Total Cost of Ownership (TCO)

• Components with dynamic data will make AJAX call over HTTP to API Manager. The call is made directly from client-side and the response is parsed and rendered in client side

• AngularJS, with or without single page application (SPA) architecture, will be used for developing pure dynamic data driven components, where information will be

retrieved from the enterprise backend systems

• Responsive design will be employed to create pages that can be viewed from a variety of devices – desktop, tablets, mobile and Walmart specific devices. Pages created using the responsive design approach have an adaptable page layout, fluid grid and page elements, and dynamically resizable UI and content, such as videos or images

Integrated AEM + UI Development• The UI and Component Development are

completely modularized enabling the development to happen simultaneously with coordination between developer, making it more efficient

• No handover of HTML to component team reduces the overhead of testing the HTML / CSS and go back and forth. This reduces the overall development time, therefore making it a more efficient development model.

Atomic UI – Component Development

WhiteLabelled – Component Repository

Improved HTML CodingHTL Approach

Integrated AEM + UI Development

• Break down site to smallest reusable elements of building blocks (e.g Input Field, Button, Label).

• Atoms are further used to build Molecules which are relatively simple groups of UI elements functioning together as a unit.

• These further are used to build complex UI design of Organisms built by combining Atoms / Molecules placed in a Template to create instances of Pages

~5% ~15% ~5% ~5%

• Multi Site Management Site structure defined supporting inheritance

• Adobe supported set of components at top of hierarchy followed by Telecom company

• Component logic /Shared Libraries for html/css/js across Telecom company / WebProperty level

• Html is delivered by webmasterData bindings are added developerCss is integrated into site structureShared libraries for all components & Templates.

• There is a constant interaction between developers and webmaster during sprint for fixes, changes.

• Webmasters for e-sales an e-care work together to deliver consistent designs and maintain common css library.

*Overall Program Efficiency and Potential Effort Saving in reusabilityExpected ~30%

Savings in Effort for 3 websites

More savings for subsequent websites

AEM-UI Development methodology - Improved efficiency , Increased Savings & Reduced TAT

Keyword

Search the Page:

SearchSearch

• The HTML Template Language (HTL) supported by Adobe Experience Manager (AEM) takes the place of JSP (Java Server Pages) as the preferred and recommended server-side template system for HTML in AEM,

• HTL gets compiled into Java Servlets, the expressions and the HTL data attributes are both evaluated entirely server-side, and nothing remains visible in the resulting HTML. For improved security

What does New Approach in each Pillar mean?

*The efficiency % mentioned is based on 3 websites built on the platform and using this approach

ATOMS MOLECULES ORGANISMS TEMPLATES & PAGES

Overall potential project cost decrease by about 25%Overall potential project cost decrease by about 25%

DESIGNDESIGN HTML CSS/JSHTML

CSS/JS HTLHTL JAVAJAVA PROJECT MANAGEMENTPROJECT MANAGEMENT

Improves project efficiency by removing the pain of JSP and Java development

Copyright © Infosys 2017. Confidential

UX/UI Platform Guidelines by preferred 

UX/UI Partner 

Prototyping/Greyscale 

websites and encourage  its 

usage

Clear Digital strategy and roadmap for platform scalability and usage

Development guidelines and best practices by Platform 

Team

Develop Online/Offli

ne Component 

Wiki

Develop Online/Offline Component 

Wiki

Template/component Library to choose from

Greyscale or prototype websites to develop microsites

Decoupled component/Template development with web properties and service layer

Higher ROI on development investments

Scalable platform with optimized components

Better time to market for marketing campaigns

Continuous developmentContinuous

development

1 2

3 4

5 6

© 2018 Infosys Limited, Bengaluru, India. All Rights Reserved. Infosys believes the information in this document is accurate as of its publication date; such information is subject to change without notice. Infosys acknowledges the proprietary rights of other companies to the trademarks, product names and such other intellectual property rights mentioned in this document. Except as expressly permitted, neither this documentation nor any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, printing, photocopying, recording or otherwise, without the prior permission of Infosys Limited and/ or any named intellectual property rights holders under this document.

For more information, contact askus@infosys.com

Infosys.com | NYSE: INFY Stay Connected

Delivering targeted, personalized and highly-effective contentTelecom companies need to understand the entire customer journey and not just optimize contact points individually. Building unified and pro-active cross-channel services will deliver differentiated customer experiences that drive loyalty and repeat sales.

Creating promotions or personalized offers/ targeted contents through customer interaction - the mainstream adoption of technology through Adobe Experience Manager, Adobe Target combination of Adobe web analytics, Audience Manager and Adobe Campaign products have created greater transparency of business practices. Customer experiences may now be

exponentially grown to reach millions of potential customers within minutes. The quality of user interfaces in this channel significantly influences customer perceptions. Investing in user experience throughout the implementation of digital initiatives can improve customer satisfaction and brand recognition.

To know more about Infosys Adobe Practice and Solutions, please write to us at adobe@infosys.com

Customer Centricity Dimension Requirement Theme

Understand what your Telecom customer wants

Capture and analysis of customer data Superior insights into customer needs and benefits Actionable customer segment Identification of critical customer touch points Product development based on customer insights and

focused on customer value-ad

Create and leverage single view of customer Leverage social network to collaborate and create more

connections with customer Involve marketing in testing and fine tune products and

services

Provide an offering that is personalized

Pricing based on customer value and benefits Segmented service

Professionalize sales interactions on every channel / suggest customer actions on insights

Let customers configure their own products

Deliver an experience that is convenient

Consistent and comprehensive multichannel approach Increase responsiveness to customer inputs/ feedback

across touch points

Optimized retail experience Drive client self-selection of channel Segment customer Improve operational efficiency