How to Manage Digital User Experience for Web Applications

How to Manage the Digital User Experience
Approaches and Use Cases
© eG Innovations, Inc | www.eginnovations.com

Moderator
• Natalie Tomko
• Digital Marketing Manager
• eG Innovations
• Natalie.tomko@eginnovations.com

Logistics
• Please submit your questions at any time
during the webinar using the questions panel
on the GoToWebinar client
• This webinar is being recorded. You’ll receive
a link to the recording in a few days
• A copy of the presentation will be posted on
SlideShare:
http//www.slideshare.net/eginnovations/

Today’s Presenter
• John Worthington
• Director Product Marketing
• eG Innovations
• John.Worthington@eginnovations.com
• 201.826.1374

Today’s Agenda • What is the digital user
experience?
• Digital user experience
approaches and use
cases
• Digital user experience
and digital performance
management
• Conclusion

WHAT IS DIGITAL USER EXPERIENCE?

What is the Digital User Experience (UX)?
Customer experience has been defined as the quality of all of a consumer’s encounters
with a company’s products, services, and brand1.
Offline experience
A customer’s experience in a physical setting is
determined by a large group of factors ...they naturally set
a lower bar for what passes as a satisfactory experience.
Online (Digital) experience
Digital customer experience includes only those
experienced through a digital interface, like a computer,
tablet, or smartphone.
• Online and offline customers are birds of very different feathers
• A ten-second wait for a page to load can make 50% of consumers give up and leave
• Researchers at Microsoft even found that a website begins losing traffic to competitors when it takes
250 milliseconds longer to load
• It seems that when people have a less-than-favorable online experience, they fault the company
immediately. To consumers, there’s no satisfactory excuse for a poor digital experience.
1 What a Great Digital Customer Experience Actually Looks Like, Harvard Business Review

Digital User Journey Mapping
PR
Email
Blog Social
Awareness Consideration Purchase Retention Advocacy
Content
Video
Blog
Website
eCommerce
Store
Support
Services
Knowledge
Base
Case
Study
Blog
Social
Forums
Vision & Strategy
Manage Products &
Services
Market & Sell
Products & Services
Deliver Physical
Products
Deliver Services
Manage Customer
Service
Management & Support Services
Level 1 Business Processes – External/Internal Customer-Facing IT Services
Network
Storage
Servers
Virtualization
OS
Middleware
Runtime
Data
Applications
Network
Storage
Servers
Virtualization
OS
Middleware
Runtime
Data
Applications
Network
Storage
Servers
Virtualization
OS
Middleware
Runtime
Data
Applications
Network
Storage
Servers
Virtualization
OS
Middleware
Runtime
Data
Applications
Private IaaS PaaS SaaS
Client
Managed
Provider
Managed
IT Segments – Supporting IT Services
Digital journey
maps can span the
entire customer
lifecycle... ...digital business
services are the
basis of value
and customer
experience...
...but the Digital User Experience is
made up of many different
segments!

Simplifying the Digital UX Pyramid
UX
Design
• Useful: Your content should be original and fulfill a need
• Usable: Site must be easy to use
• Desirable: Image, identity, brand, and other design
elements are used to evoke emotion and appreciation
• Findable: Content needs to be navigable and locatable
onsite and offsite
• Accessible: Content needs to be accessible to people with
disabilities
• Credible: Users must trust and believe what you tell them
Usability.gov
79% of people who don’t like
what they find on one site
will go back and search for
another site

UX
Design
UI Design
48% of users say they feel frustrated
and annoyed when on sites that are
poorly optimized for mobile
Akamai, Gomez
• Project
Management
• User
Research
• Usability
Evaluation
• Information
Architecture
(IA)
• User
Interface
Design
• Interaction
Design (IxD)
• Visual Design
• Content
Strategy
• Accessibility
• Web
Analytics

UX
Design
UI Design
Site/Application
Performance
• Poor performance damages findability
• Poor performance increases the time to complete a task
• Poor performance reduces user satisfaction
• Poor performance endangers accessibility
• Poor performance undermines understanding
The faster the site, the better the
ranking, especially on mobile.
Akamai, Gomez
A one-second delay in load time leads
to a 7% drop in conversion and an
11% fewer page views.
In fact, a staggering 1 in 4 people will
abandon a page that takes longer
than 4 seconds to load.
Akamai, Gomez
A 1-second delay in page load will
decrease customer satisfaction by
about 16%.
Worst still 79% of users who are
dissatisfied with a website’s
performance are less likely to buy
from the same site again.
Akamai, Gomez
Each 1 second added to load time
leads to users viewing 11% fewer
pages.
The fewer pages users visit, the less
understanding they have of your
products or services.
Akamai, Gomez
All of your efforts in
UX and UI design are
wasted if
site/application
performance is poor

COMMON APPROACHES TO MONITORING
DIGITAL USER EXPERIENCE

Application code?
Database?
Storage?
Server?
Network?
Virtualization?
Cloud Service?
Digital User Experience Monitoring
End Users Accessing
Websites
UX Analytics Front-End Back-End

Analytics
• Analytics tools help optimize your content
marketing efforts
– Web Analytics, Competitive Intelligence and
Benchmarking, Content Marketing, SMO, and
Marketing Performance Management
UX
Design
UI Design
While UX analytics tools are important
for understanding user behavior, they
are not sufficient for digital user
experience monitoring
Site/Application
Performance

Front-End: Synthetic User Monitoring
• Can be performed at the application-protocol
level (i.e., HTTP GET to a web server)
– Does not test actual clients (web browser, Citrix
receiver, etc.)
– May not include multiple transactions in a single
session
• Client emulator
– Uses same client applications that users access
– Creates scripts that detail all the steps a user
takes
– Matches results to expected and specified
patterns
– Reports results
– Broad applicability - can be used for web-based,
thin-client (i.e., Citrix) or thick client (i.e., SAP
GUI) applications
While protocol level emulation is useful for
determining if an application is up or not,
it does not assess all aspects of application
performance.

Free Logon Simulators for
Digital Workspaces
Front-End: Application-specific Emulators
• Do not require recording or script creation
• Make use of the fact that packaged applications
have a pre-defined login form and a click-through
format
• Offer pre-built solutions that work out of the box
with minimal configuration - very simple to deploy
https://www.eginnovations.com/solutions/citrix/free-logon-simulator
https://www.eginnovations.com/solutions/vmware-horizon/free-logon-simulator

Front-End: Synthetic User Monitoring Use Cases
• Understand the performance of an application at any time, even when
there is no real user load – minimizes production overhead
• Obtain a consistent benchmark of the availability and performance of
an application; provide SLA baseline/benchmark
• Measure the performance of an application before and after an
upgrade, or before and after a migration
• Assess the performance of an application from
multiple geographies
• Ensure that new functionality or a new workflow
added to an application is working as expected

Demonstration
Correlated Visibility,
Root Cause Diagnosis,
Machine Learning, AIOps
ü User Experience
ü Business Transactions
ü Application Performance
ü Infrastructure Performance
On-premises Cloud
End-User Experience
Business Transactions
Application Middleware
Database
Operating System
Server (Physical/Virtual)
Network, Storage, AD, etc.
ApplicationInfrastructure

Synthetic User Monitoring – Pros & Cons
• Pros
• Active Monitoring
– Measure performance by simulating users,
can be used 24x7
• Proactive
– Provides a measure of user experience
even when there are no real users
– Can proactively detect slowness before
end-users
• Cons
• Simulation
– Does not report on what actual users are
experiencing
• Limited Visibility
– Only transactions executed during the
simulated test
• No visibility into browsers or devices not
included in synthetic tests
• Browser rendering, network latency, server
backend or content payload not measured
What Synthetic Monitoring Provides
• Is the service up?  Detect outages
• How fast is the service?  Measure page load time
• Are all the transactions
working as expected?
 Measure response time for transactions and
establish baselines

Front-End: Real User Monitoring (RUM) Approaches
• Network Probes/Sniffers
– Hardware devices that can be deployed on the network, connected
to span ports, and configured to snoop on traffic over the network to
capture and analyze user experience metrics in real-time
• Client Agent
– Involves installing an agent on the client device and configuring that
agent to track the requests and responses at the client
• JavaScript
– An ‘agentless approach’ that involves embedding a small Java script
in every page to be monitored in the target web site/web application

Easy to Use
• Hassle-free installation, language and framework-independent,
hands-free monitoring
• Auto-discovers where (i.e., the location) application users are coming
from and reports user experience per location
Front-End Diagnostics
• Monitors real users in real-time
• Front-end isolation; browsers, JavaScript errors, client devices and their
impact on performance
Advantages of JavaScript Approach to RUM

Front-End: JavaScript Code Injection
JavaScript
code snippet
injected into
web page
User hits web
page,
downloads
JavaScript to
browser
Web Site
User
RUM Collector
eG Remote
Agent
eG Manager eG Database
eG Agent collects
web performance
statistics and sends
this to the eG
manager
Real time visibility
into your
application
1
2 3
4
1. Use automatic container injection – no code change required
2. Insert JavaScript snippet manually into the common header/footer
3. Edit template code to include custom API helper class that generates
the RUM script
4. Use automatic RUM instrumentation via JTM jar
5. Use manual injection for every page

Front-End: Real User Monitoring Use Cases
• Analysis of user behavior, device and browser usage in plan/build
stage
• In pre-production and view breakdown of all page resources,
including 3rd party content
– Assess true impact of infrastructure and software changes
• Auto-triage front-end user experience performance issues in
production in real time
• Verify compliance with SLAs

Real User Monitoring – Pros & Cons
• Pros
• Passive monitoring
– Capture how real users interact with the
website or application
• Front-End Isolation
– Get real-time measures of user
transactions and detect performance
problems
• Cons
• Requires real user activity
– If there are no real users, there is no
measure of system availability or
performance
– No visibility to issues with the transactions
and website paths not taken by real users
What Real User Monitoring Provides
• How are users interacting
with the service?
 Track real-time activity
• What is the actual user
experience?
 Identify bottlenecks – traffic, load times, errors,
etc.
• Where is performance
bottleneck?
 Front-End or Back-End?

Back-End: Infrastructure Monitoring
• End user experience can be impacted by issues associated with
applications and/or infrastructure
– Networks, servers, databases, third-party calls, operating systems, application code or
physical/virtual infrastructure
– Trace slow business transactions
• Tag and follow each request and break down processing time by tier
– Application deep dive
• View code causing poor performance (i.e., database query,
third party call, etc.)
– Infrastructure analytics
• Auto-correlate infrastructure dependencies with web
application performance

Back-End: Infrastructure Monitoring Use Cases
• Map software to the physical and logical runtime architecture
needed to run workloads (topology)
– Feasibility analysis for cloud migration
• Capture comprehensive performance baselines inclusive of the
entire end user ecosystem
• Trace transactions to analyze processing time by tier and
isolate code-level issues (pre- and post-production)
• Auto-correlate user experience to application and
infrastructure dependencies

Infrastructure Monitoring – Pros & Cons
• Pros
• Transaction Tracing
– Transaction tracing can help visualize
business transaction flow, speed
application debugging and improve MTTR
• Back-End Isolation
– Provides reach and depth needed for
problem analysis and capacity planning
• Cons
• Requires Front-End Context
– Without an end user context,
infrastructure monitoring can be reactive
and inconsistent
• Dependency Management
– Infrastructure monitoring requires service
orientation for dependency analysis and
effective correlation
What Infrastructure Monitoring Provides
• What are the paths taken
by user transactions?
 Visualize business transaction flow, speed
application debugging and improve MTTR
• Why is my site or
application slow?
 Identify actionable causes of poor performance
• When will I need more
capacity?
 Leverage historical trends and forecasting

DIGITAL USER EXPERIENCE AND
DIGITAL PERFORMANCE MANAGEMENT

Front-End: Both RUM & Synthetic Monitoring Are Needed
Use Cases RUM Synthetic
Determine user satisfaction: know what users are seeing in real time
Identify root cause of real-time website issues
Visualize real user transaction to measure front-end vs. network vs. server
response time
Analytics: Trend patterns of user activity, locations, browsers, device types
Monitor transaction performance
Test new feature before deployment, or before entering new market
Test with simulated workloads to establish baselines of web performance
Detect website/web application if up and running 24x7

Back-End: Required for isolation and effective analysis
Use Cases Front-End Back-End
Isolate what are the digital user experience performance issues
Isolate where the digital user experience performance issues are
IF THEY ARE IN THE FRONT-END (i.e., JavaScript errors, network
slowness, content download, transaction tier)
Isolate why there is an issue with digital user experience
performance, including the applications and their supporting
ecosystems
End Users Accessing
Websites
APM-only solutions still leave performance
visibility gaps. Issues associated with the
underlying application ecosystems, whether
they are on-premises or in the cloud, are not
included in any performance correlation.

Digital User Experience and
Digital Performance Management
UX
Design
UI Design
Site/Application
Performance
End Users Accessing
Websites
Application code?
Database?
Storage?
Server?
Network?
Virtualization?
Cloud Service?
User Experience Monitoring, UX Analytics
What is the issue?
Front-End Monitoring, Simulated User
Monitoring, Real User Monitoring
Where is the issue?
Back-End Monitoring, Topology Discovery,
Transaction Tracing, Application Deep-
Dive, Pre-emptive Alerting, Auto-diagnosis
Why is there an issue?

Traditional (ITIL) Approach
UX
Design
UI Design
Site/Application
Performance
1
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
1. Identify service targets, service segments
– Good initial targets are neither too easy (no
business value) or too hard (too broad in scope)
2. Application/Infrastructure Component
Instrumentation
– All segments and components of the target
service(s)
– Identify any process requirements (i.e., monitoring
run book)
3. Front and Back-End Monitoring Integration
– Process integration/automation(s) will vary (ticketing,
tool chains, etc.)

UX
Design
UI Design
Site/Application
Performance
1
2
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
Instrumentation
service(s)
run book)
– Process integration/automation(s) will vary (ticketing,
tool chains, etc.)

UX
Design
UI Design
Site/Application
Performance
1
2
3
UX
Design
UI Design
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
Instrumentation
service(s)
run book)
– Process integration/automation(s) will vary (i.e.,
operating model(s), ticketing, tool chains, etc.)

Today’s Reality
UX
Design
UI Design
Site/Application
Performance
1
2
3
UX
Design
UI Design
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
“the layers of the pyramid are not layers at all, but
rather mutually supporting and reinforcing
elements...
Better than a pyramid would be a swirling
whirlpool wherein all elements of a complete
system support and reinforce one another.”
- User experience is not a pyramid
Gerald Gordinier, Interaction Designer @ Google
Monitoring is Shifting Left
Process & Service Owners
Managers
Practitioners
Service
Design
Service
Transition
Service
Operation
Plan &
Build
Release Operate
ITIL©
DevOps
DevOps organizations will seek to structure around capabilities and is more
dynamic; i.e., ‘Team of Teams’
ITIL structures emphasizes cross-functional processes and services
Business Capability Teams
Product
Owner Designer
Developers
Testers
Shared Services Teams
Service
Owner
Deployment Staff
Testers
Engineers
IT Operations
Management
Application
Management
Infrastructure
Management
Ops
Control /
Facilities
Mgt
Service
Desk
Process & Service Owners
Managers
Practitioners
Service
Design
Service
Transition
Service
Operation
Plan &
Build
Release Operate
ITIL©
DevOps
DevOps organizations will seek to structure around capabilities and is more
dynamic; i.e., ‘Team of Teams’
ITIL structures emphasizes cross-functional processes and services
Business Capability Teams
Product
Owner Designer
Developers
Testers
Shared Services Teams
Service
Owner
Deployment Staff
Testers
Engineers
IT Operations
Management
Application
Management
Infrastructure
Management
Ops
Control /
Facilities
Mgt
Service
Desk

How to Manage the
Digital User Experience
UX
Design
UI Design
Site/Application
Performance
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
1
2
Business
Requirements
People/
Roles
Processes/
Procedures
Management
Tools
Technology
3
Public
Cloud
SAP
Business
Service
Segments Share
Point
O365
Digital
Workspace
• Ideal service targets should focus on
internal or external customer-facing
IT services
– User Experience ≠ supporting IT services
• Provide flexibility in
instrumentation approaches
– Front-end, Back-end or Converged
• Integrate the front and back-end
– eG Enterprise supports 180+
applications, 10+ operating systems, 10+
virtualization platforms and 20+ storage
devices out-of-the-box

APPLICATION
PERFORMANCE
MONITORING
INFRASTRUCTURE
MONITORING &
AUTO-DIAGNOSIS
End-User Experience
Monitoring User-Defined
Transaction Profiling
Application Topology
Discovery & Visualization
Application Component
Deep Dive
Analytics & Reporting
End-to-End
Infrastructure
Visibility
Auto-Baselining
& Thresholding
Automatic
Cross-Tier Diagnostics
Preemptive
Detection & Alerting
Configuration
Change Tracking &
Correlation
Automatic Topology /
Dependency Mapping
Comprehensive Reporting & Trending
Developers
Systems
Engineers
A Single Pane of Glass View of Performance
for the entire Service Team
Observability
Monitoring
• Digital User Experience is a critical guidepost
– Helps keep stakeholders business-aligned and situationally aware
– Can adapt to multi-mode operating models

eG Enterprise and Digital User Experience Monitoring
• eG Enterprise monitors the
entire digital user experience
– Business transactions
– Applications
– Infrastructure
Digital User Experience
• Protect your investments in UX and UI design
• Assure the underlying business transactions,
applications and infrastructure health

About eG Innovations
Worldwide Locations
Global Headquarters: Singapore
US Headquarters: New Jersey
Founded in 2001
eG Innovations is a provider of enterprise-class application and IT infrastructure performance
management software that delivers end-to-end monitoring, diagnosis, reporting and analytics
across on-premises, cloud, and hybrid IT environments.
Faster diagnosis and resolution of performance problems
Enhanced service delivery and user satisfaction
Maximum business productivity and cost savings
Accelerated IT deployments and production rollouts
Improved user experience and customer satisfaction
Transform IT Service Delivery into Business Advantage

Questions?
© eG Innovations, Inc | www.eginnovations.comwww.eginnovations.com
info@eginnovations.com
+1 (866) 526 6700
Manage the Digital User Experience
Front-End | Back-End
End-to-End
Code to bare metal. Public, Private, Hybrid.

How to Manage Digital User Experience for Web Applications

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie How to Manage Digital User Experience for Web Applications

Ähnlich wie How to Manage Digital User Experience for Web Applications (20)

Mehr von eG Innovations

Mehr von eG Innovations (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

How to Manage Digital User Experience for Web Applications