User Interface (UI)

Modernization

Service Deck

Driving Business growth by creating new Opportunities for our

Customers

Contents

Syntel & LMCoE

Profile

Service

Overview

Service

Methodology

Case

Studies

2

3

Syntel Overview Small Enough to Listen, Big Enough to DeliverTM

100 Best Small Companies (#20, 2013) NMSDC Certified MBE

Chennai, India

(27-acres campus, Capacity:5000+)

Pune, India

(77-acres campus, Capacity:7000+)

Mumbai, India

(8.05-acres, Capacity:4000+)

Differentiators

Ranked among the top performing

344 public companies by Harvard

Business Review

World-Class Infrastructure

- DNA: Delivery & operational excellence

- Philosophy: 'Customer For Life'

- Culture: Entrepreneurial with 5 core values

- Mindset: Investment; ahead of the curve in

new technologies & automation

• Revenue

$911.4 M (2014)$235.3 M (Q4 2014)

• Revenue Growth

12% (Y-o-Y)

• Market Cap

~$4.2 Billion

• Headcount

24,553

• Headquarters

Troy, Michigan

(Founded 1980)

4

Services Tools & Accelerators Benefits Support and Development (Incident, User

request Mgmt., Change & Release Mgmt.,

Preventive Maintenance, Prod Assurance,

Performance tuning , Product life cycle Mgmt. …)

Migrations / Consolidation (Virtualization,

Migration to cloud, Rationalization, Re-hosting,

Transcoding)

Modernization Service Suite (Mobility &

Social Media, Analytics, Decommissioning, Re-

engineering, Reference Architecture)

IDENTEON, IntelliTransfer &

KARP

Agile for Dev & Support

CBEAT, CCAT and MACH

Portfolio Rationalization

Framework

Virtualization & Migration

Accelerators

Quick wins & early cost

recovery

Continuous Optimizations

Performance based pricing

Predictive Maintenance

Improved Business IT

Alignment

StayAhead

Roadmap

Unified Service

Catalogue

Outcome

aligned Pricing

Future State

Architecture

Syntel IPs &

Platform

Integrated Transformation – M-III

Migrate Manage Modernize

Legacy Modernization – Centre Of Excellence

5

• 60,000 + person years

of legacy experience

• More than 65% of

revenue from legacy

engagements.

• Engagement size from

20 FTEs to 3500

FTEs

• Average SLA

adherence of more

than 99%

• Technologies

Supported: Legacy to

Advanced Technology

platforms

Leveraging Experience Service Catalogue

LanguagesCOBOL, Assembler, PL/I, JCL, RPG, Natural,

Easytrieve, Netron, REXX, C-List, MANTIS

CASE Tools Cool-Gen, Telon, VA-Gen, Ad-Gen

Utilities &

Tools

ICETOOL, SORT, JOBSCAN/TRAC,SMF,

NWOMC, OPENPGP, …

Transaction

Mgmt.CICS, IMS-DC

Security RACF, ACF2

Data StoresDB2, VSAM, IMS-DB, IDMS/ADSO, ADABAS,

SUPRA

PlatformsIBM Mainframe, AS 400, Micro focus, DELL -

Clerity , GT software

Technology Stack

Manage

Migrate

Modernize

• BRMS

• Transformation Consulting

• Infrastructure Management

• Re-Hosting

• Product Migration

• Platform Migration

• Legacy to COTS

• UI Modernization

• Re-Architecture

• Re-Engineering

• SOA Enablement

• ----

• ---

Leveraging Partnerships

Legacy Exit Solution Options

6

7

Syntel Solution Accelerators - Exit Legacy

One Stop Shop for all Legacy Migration and

Modernization Initiatives

Subscription based service

Role based access

Project Based approach

Controlled Access to Projects

Exit Legacy Classification

Code Level

Analysis

Decommissioning

Suite

Portfolio

Consolidation

Reverse

Engineering

Migration

Accelerators

Service

Orientation

Enablers

Homepage – Portal

Dashboard – Portal

UI Modernization - Overview

9

Many people perceive Mainframe / iSeries as

outdated technology solely because of

character based user interface.

UI Modernization is a solution to move them

to Rich UI to provide enhanced customer

delight and higher productivity.

The success of UI modernization project also

depends on choosing the right tool to web

enable legacy screens.

Top 3 Benefits

Of UI Modernization

Business focused screen designs

Integrating Self-help for customers

Achieving quick Turn-around-time for innovation

Top 3 Reasons

for UI Modernization

Newer workforce not familiar with legacy screens

High cost of integration in the legacy system

Steps & Time taken to access relevant information

UI

Modernization

Rebranding

/ Refacing

Mobilize(Responsive Design)

MashupsWorkflow

Improvement

Legacy

Web-enablement

10

Intuitive UX Future Glimpse

Business Focus Wide Compatibility

• Re-align your end-user screen with your

business strategy

• Re-design Lean principle based data

capture & processing business flow

• Design science based

User-experience to

unlock maximum conversion ratio

• Leveraging Eye tracker to ensure

right information is rightly placed for

unlocking user productivity senses &

optimized Virtual real estate utilization

• Wider compatibility from desktop to

tablets devices

• Accessibility options for Portable

Kiosk and Booths

• Effectively design your screen to

match the look-n-feel of future post-

migration platform.

• Utilize this migration as an opportunity

for learning the feedback from the

user and incorporating the same in the

future enhancements

UI Modernization Framework

UIModernization

UI Modernization Methodology

Plan Analysis Design and Build

• Identify UX &

UI goals

• Generate UX

plan

• Resource &

role plan

• Identify time

bound

activities

• AS-IS process

study

• Brainstorm

• Identify user

groups

• Perform needs

specific

analysis using

various

Usability

methods

• Document tacit

user

requirements

• TO-BE process

definition

• Define workflow

and optimized

task flows

• Define Framework

• Define Navigation

• Define Interaction Patterns

Interaction Design

• Wire Frames

• Low and high-Fidelity Mockups,

Prototyping/ Visual Modeling

• Review

• Refine Design and Interaction

Analyze

• Integrate the approved

UI with the legacy and

peripheral systems

Build

Iterative

Cycle

• Integration

testing

• Stress

• Testing

• UAT

• User

Documentation

• User Training

• User Self-help

portal

• Socialize the

change

• Release

• User Feedback

Evaluation, Documentation and Support

Development team to build effective

technological frameworks and Rich internet

applications

DE

LIV

ER

AB

LE

S • Personae

• User Scenario

• Content

inventory

• SiteMaps

• User process flows

• Wireframes

• Style Guide

• Design patterns

• Usability

Reviews

• UI Development –

(HTML, CSS, RIA

technologies )

• Definition of

Business

Goals

• User Needs

• UX Plan

Test & ReleaseAssessment

• Assess the

current

technology

landscape

• Identify and

prioritize the

process flows

eligible for

modernization

• Propose the

Framework

options

•High level

architecture

diagrams for

Technology,

application

•Prioritized

Process flows

UI Modernization Options

12

UI Modernization

Mobilize

• Identify device and

platform support

• Define cashing

rules

Web Enablement

• Understand

Enterprise

architecture

• Design as per

guidelines

• New features

• Training

Workflow

Optimization

• Understand screen

navigation

• Scope

consolidation, split

and sequence

process flow

• Define optimized

navigation plan

• Review

MashUps

• Identify data

sources

• Define data access

rules

• Segregate UI from

business layer

• Review and revise

Mashup and

sequence

Rebrand

• Wireframe –

Corporate Design

• Define Scope

• Prioritize

• Update

presentation layer

Build, Test , Deploy, Support , Optimize

Improve legacy system

accessibility by Web-

enablement

Consolidate / Automate

workflows to improve

end-user productivity

Integration with wide

range of Internet and

Intranet application

Offer compatibility

support to various

devices

Rebrand products to

improve customer

confidence

UI Modernization Products

13

Ivory Suite

• Seamless integration of mainframe with new technologies like mobility, web-

based portals, business intelligence, business process management and

packaged applications.

UI M

od

ern

iza

tio

n

Inventu

Flynet Viewer and Screensurfer

• Flynet Viewer gives users simplified web access via code-generated web services

or enhanced ASP.NET UIs

• Screensurfer is a legacy application integration toolset+middleware product that

uses HTML, Javascript and its own Surferscript language

IBM HATSIBM Rational Host Access Transformation Services

• Transforms traditional text-based interfaces—such as 3270 and 5250 green-

screen applications—into web, portlet, rich client or mobile device user interfaces

Micro Focus RUMBA

Terminal emulation solution with UI (User Interface) modernization properties

• Rumba and Rumba+ allows users to connect to so-called 'legacy systems'

(typically a mainframe) via desktop, web and mobile. Rumba provides IT end

users with a modern UI, allowing them to bypass 'green screen' applications

Value Proposition

14

Identification of Right Stake

holders

Design Review Process

Agile Development Process

Testing Centre of Excellence

Consistence UI to

Eliminate/Reduce Training Time

Reduced Cost With the Use Of

Tools & Accelerators

Process Automation

Futuristic Solution

Business Process Optimization

User intuitive workflows

Self help inclusion

Latest Reference Architecture (RA)

Introduced

RA Reusable Component

Interface with Existing Systems

Extensible Solution

Strategy &

Approach

Best Practices

Technology

Excellence

Value Adds

Customer Business

Function

MCCGUI is a popular Establishment Services

servicing web based tool used especially in

the ES call centers and back-offices across

international markets to service American

Express merchants.

Since its inception in July 2001, MCCGUI

services more than 1 million merchants

driving their business from following markets :

France, Spain, UK, Germany, Netherlands,

Finland, Sweden, Airlines, Australia, Hong

Kong, India, Malaysia, New Zealand,

Pakistan, Argentina, Mexico, IDC

Business Drivers

• Need for a tool that does not have

dependency on any software

installation on the users’

machines.

• Ensure compliance with the

customer enterprise wide

technology standards

• Improved customer servicing

through a consistent GUI User

interaction with an Intuitive and

user-friendly presentation.

• Improved performance to ensure

shorter call duration thus

improving productivity

Engagement Details

• Engagement :

Development

• Tools

• Outsourcing Model:

Fixed Bid

• Offshore :Onsite ratio:

80:20

• Team size: 16

• Technology: VB.NET &

ASP .NET, WCF, XML ,

AJAX, Main frame DB2

Challenges Faced

•Remediating 60+ web screens

from Screen Scraping

technology towards a normal

web platform.

•Merging the functionality under

a single URL that caters to all

markets v/s the POD approach

of having unique URL per

market.

•Mimicking the authentication &

authorization scheme present

in the POD tool via the web

platform.

Syntel Solution• Syntel devised a POA approach where the screen scraping was completely replace by web to

DB2 calls via Messaging Queues/DB2 Stored Procedures and ADO.NET concepts.

• A completely new Security Module was developed that would allow the tool admins to control the access for the users, thereby controlling the functionalities managed by various types of users.

The Security Module was developed with a flexibility that would allow it to be leveraged by any other platforms tools in future. Presently around 10 different applications are being driven by this security module.

• The POD tool required separate urls to be maintained for separate markets thereby resulting into a lot of redundant efforts and costs in the tool maintenance. The proposed solution was designed to cater to all markets via a single url providing the users with flexibility to switch between markets on the fly.

• The proposed solution was built on ASP.NET framework and ensured 100% compliance with customer enterprise wide technology standards.

• The solution was designed to integrate with Infonet system to ensure that online help is easily available to the call center representatives while working on the tool.

Customer Benefits

• 50 % Reduction in training time for the new

recruits, Cross-functional Training and higher

employee satisfaction.

• Measurable MIS Metrics provides

Operational management with the capability

to categorize the call types for root cause

analysis and increase knowledge of

merchant behavior

• 60% shorter call durations thus improving

productivity.

• Hassle free on boarding of new users due to

elimination of additional software

installations.

Case Study #1 : MCCGUI Screen Scrapping Decommission

15

16

Customer Business

Function

• The customer is the world’s largest

For-Profit chain of hospitals in the

USA.

• It manages 162 hospital and 113

freestanding surgery centers in the

USA & UK

Business Drivers

• The legacy Patient Accounting (PA)

was designed with CICS with

inefficient workflows due to screen

size limitations.

• The business users wanted a new

look an fill of the system.

• The end users wanted effective

workflows across and consolidation

of the screens.

Engagement Details

• Outsourcing Models: Fixed Price

• Offshore / Onsite ratio – 30 / 70

• Team size: 240+

• Technology Stack:

• Mainframe – COBOL, CICS, DB2,

JCL, VSAM

• Unix – AIX, MF-COBOL, .NET 4.0,

DM Express, BizTalk, ASP.NET

Challenges Faced

• The data stores and batch

processing were to remain on

mainframe.

• No documentation available mapping

the business process workflows and

screen flows

• VSAM-based data could not be

accessed via .NET screens.

Syntel Solution

• Syntel migrated the existing CICS-based legacy screens to.NET platform in line with the customer’s

technology strategy.

• VSAM files were converted to DB2 for interoperability with the .NET screens.

• The existing DB2 database was re-used to reduce migration timelines and complexity.

• The .NET screens interfaced with the mainframe for data access and batch processing.

• Syntel reused many .NET devblocks already developed by the customer for other applications.

• Syntel provided services with regards to detail-level architecture and design, Build, and Test.

Customer Benefits

• Highly scalable architecture which can handle high volume

of data

• Service oriented application design for future extensibility

• Highly maintainable Object Oriented framework

• User friendly screens with rich UI

• Conversion of files from VSAM to DB2 provided

consistency for data storage

• Use of existing DB2 database reduces the time for

migration

• Improved workflows automate many manual activities

Case Study #2 : Patient Accounting Modernization

Healthcare Provider IT System

Customer Business

Function

• The customer is the world’s largest For-

Profit chain of hospitals in the USA.

• It manages 162 hospital and 113

freestanding surgery centers in the USA &

UK

Business Drivers

• Client planned to migrate their

legacy system to MVC .NET

platform.

• The requirement was to have a UI

design strategy that could be

adopted to all future migration of

applications to new platform.

• Some key activities are needed to

be identified, standardized and

included in the solution process.

Syntel Solution• Usability Analyst, technical BA and Client’s BA were allocated for reviewing the

existing system

• Stakeholders insight was captured through interviews and group meeting

• Customer usage requirements were captured through user interviews, group discussions and cognitive walkthrough

• Business and technical requirements were analyzed and gathered

• Design solution with software information and interaction model sampling was created and demonstrated through concept sketches and visual models

• Design standards and guidelines, behavior, navigation and functional frameworks were strategized and documented comprehensively and a sample module was implemented with interactive prototype to demonstrate its application

• Guidelines for design checkpoints , acceptance parameters, compliance management activities were finalized

• A execution roadmap was strategized

• Supported client teams in process adoption so that they can achieve systematic integration

Case Study #3 : UI Modernization Strategy

Healthcare Provider IT System

17