L&T Infotech: UI Renewal - Application Migration to New Digital Architecture - Sandesh Darne

UI Renewal

Application Migration to New Digital Architecture

Confidential | Copyright © Larsen & Toubro Infotech Ltd. 2

User Experience Expectations

User Experience till Y’day

Enterprise User Expectation

Ente

rpri

se U

ser

exp

ecta

tion

s ar

e ev

er c

hang

ing,

Ch

angi

ng f

aste

r th

an e

ver

befo

re


Today’s Challenges and Why Transform

Increase User Productivity

§  Improve Task Completion Rate

§ Reduce Time on Task

§ Reduce Errors §  Increase East of

Learning § Reduce Training

needs

Reduce Resource Burden

§ Reduce Development costs and time

§ Reduce redesign costs

§ Decrease Support costs

§  Improve Investment choices

§ Reduce time to market

Improve Credibility

§  Increase User Satisfaction

§  Increase trust in the system

§  Increase number of visits referral & adoption

Increase Exposure

§  Increase User base §  Increase number of

return visitors §  Increase number of

new visitors


Transformation

Transformation program will implement necessary service elements

Transform

Extract

Analyze

Generate device agnostic future-ready consumer grade user interface responsive application which can be available anytime anywhere.

Detail analysis of existing Application business need with all its dependencies, formation , interaction with others

Prepare Reverse Documentation for Technical Components in a meaningful format that will be readily

understandable, easy-to-use and practical almost for

transformation


Typical Transformation Activities

Current State Analysis

Possible Migration Strategy

§  User Interfaces (Portal/BSP/WDA) with custom code §  Self Service Functionality (ESS/MSS) with custom code

§  Document content (policies, help documents, announcements)

§  Non-SAP sources and integration with external sites

§  Users, geographies, user roles and other security and compliance requirements

§  Infrastructure readiness to support FIORI/SAP UI5 Framework/HTML5 §  Dependencies and external sites integration

§  Mapped existing solutions to readily available SAP Fiori applications

§  Enhance SAP Fiori applications which are partially mapped to Business tasks

§  White spaces areas to be bridge with new Fiori like SAP UI5 applications

§  Design FIORI prototype (branding, security model, infrastructure/sizing, custom FIORI and UI5 app, patterns for reuse, tools tune-up, business suite portal, user-feedback)

§  Build global template (languages, integration, user-feedback, tune-up)

§  Clustered roll-outs (countries, locations, user roles, training/documentation)

Design, Deploy and Test


UIRenewal – UI Migration tool for UI5/HTML5

Analyze source components in BSP/WebDynro Java & ABAP

Prepare Reverse Documentation for Technical Components

Prepare Base UI5 App/Project

§  Analyze Metadata Repositories (Views, Controllers, Function calls, Code extracts, Classes (methods/events)

§  Analyze Run-time Trace (Table Calls, Function calls, includes, classes )

§  Where used lists – dependencies on other ABAP objects

§  Documentation

§  Generate Reports - ABAP o b j e c t s / c l a s s e s , B S P applications, Function calls, custom code extracts, flowcharts

§  Data Model and maps – RFC methods, JSON models

§  System Map – Integration map source systems

§  R e u s e o p t i o n s – U I mapping against FIORI and other reusable repository entries (mapping using keywords, tags)

§  Base UI5 Project for quick eclipse import

§  B r i e f D e s i g n w i t h r e c o m m e n d e d F I O R I layouts, UI prototypes and framework components for custom app development

Analyze Extract Transform


Architecture

UIRenewal Tool

SAP UI5 Templates +

Framework Components

ECC

Dependency map

BSP/WD App Controllers

Controllers Controllers

Views Views

Views

TABLES

Function Modules Function

Modules

TABLES

TABLES Integration map

source systems

Generate UI5 project

components W

eb A

pp A

naly

zer

ABAP Objects Reports

JSON models

SAP Fiori Repository Database

Custom Fiori Repository Database

UI Prototype

Functionality Mapping with custom Fiori

UI mapping against

custom Fiori

Functionality Mapping to

Standard Fiori

UI mapping against

Standard Fiori

Quick Eclipse project

Analyze Extract Transform


UIRenewal application …Demonstration

Demonstration…..


Case Study 1 SAP FIORI Performance Management System at L&T Finance

Objectives §  Transform existing BSP base Performance Management

Application to device agnostic ready to use anytime anywhere. §  Leveraging the SAPUI5 framework to create SAP FIORI theme

based user interface to display extended item level details. §  Enhance existing workflow for approvals of the appraisals

triggered.

About Client L&T Finance offers a spectrum of financial products and services for trade, industry and agriculture. The company shares the professional values and ethos of its parent company.

§  SAP NetWeaver 7.3

§  SAP NetWeaver Gateway 2.0 add-on

Landscape Used

Implementation Approach §  Use underlying SAP Data sources with minimal enhancements to

suite for consumption in SAP UI5 framework

§  Leverage workflow rules and security objects

§  Factory Model utilized for accelerated developments across clustered rollouts

§  Deployment of highly scalable, user friendly, interactive solution resulting in enhanced employee productivity




Demonstration


Case Study 2 Implementation and Rollout of Employee Life & Career (SAP-ESS/MSS) at Global CPG Major, USA

Objectives §  Improve Employee Produc0vity

§  Easier and faster approach to search services, policies and related

documents

§  Easier to perform – No training required

§  Improve User Sa0sfac0on

§  BeAer User Experience with more engaging sites

§  Social collabora0on op0ons

§  Reusable paAerns/templates

§  Factory approach for development

About Client §  Global CPG Major, USA

§  Employee Size: 138,000+

§  HQ: Cincinnati Ohio

§  Global Presence: 77 countries

§  SAP NetWeaver 7.3

§  SAP NetWeaver Gateway 2.0 add-on

Landscape Used New responsive Layout with activity log and more HTML5

Save 100 million minutes of employees over 3 years – Improved content, navigation and search for better usability



Implementation Approach §  Agile approach - Various POCs developed to

help bring clarity to business stakeholders/sponsors and obtain early buy-in of solution

§  Automate and accelerate Development cycle using UI Renewal tools

§  Factory Model utilized for accelerated developments across clustered rollouts

§  Deployment of highly scalable, user friendly, interactive solution resulting in enhanced employee productivity


Life & Career Portal - Home

Welcome iView Pattern (JSP)

Context Specific/ Global Help eTraining / Policies / FAQ1

Related Links can be maintained with User Personalization

Pushed Alerts

Announcements iView Pattern (JSP)



Source: P&G

Consistent Look and Feel Across all HCM Portals

Manager Self Service – Landing Page

Case Study-4



Transformation – Top Priorities

Personalized content activity log, current/ overdue actions

More social networks friendly (Intranet communities)

Reduce clutter further

Display based on role, location and person

Suitable for desktops & mobile devices

Implement in a rapid deployment cycle New responsive Layout with activity log and more HTML5




Thank You

Our Business Knowledge, Your Winning Edge.

Technology

L&T Infotech: UI Renewal - Application Migration to New Digital Architecture - Sandesh Darne