walgreens webinar final ns
Post on 20-Jan-2017
616 Views
Preview:
TRANSCRIPT
From Building Websites to Building Digital Experiences – Walgreens’ Journey to Adaptive & Responsive Design
Steve TrimboGlobal Omni-Channel
Practice ManagerDynatrace
Aaron RudgerDirector Product
MarketingDynatrace
Syed Y AliTechnical Architect Digital
Engineering & MobileWalgreens
Steve TrimboGlobal Omni-Channel Practice Manager
Dynatrace
Holiday 2015 and Expected Mobile Impact
Mobile Share of Sales: US
2013 2014 2015
THANKSGIVINGBLACK FRIDAY
CYBER MONDAY
24%
21%
16%
26%
18%
25%
29%
27%
21%
Holiday 2015 Mobile Phone Use
Research products
Compare product prices in-store
Communicate with friends/family about gifts
Create shopping lists
Seek additional product information in-store
Locate/navigate to stores
Check product inventory
0% 10% 20% 30% 40% 50% 60%
54%
46%
39%
35%
31%
28%
24%
The new digital customer
ALWAYS CONNECTED80% of them check their smartphone within 15 minutes of waking
MULTI-DEVICE95% of digital shoppers who started on a smartphone continued on a PC
EMPOWERED2+ BILLION people have some form of social media account, 44% will air their frustration on social media when they have a poor online experience
DEMANDING60% rate performance / response time as the #1 mobile app expectation – ahead of features and functionality
Traditional Channel Approach
Traditional WebSite Mobile (m.) Site Mobile App
Responsive Channel ApproachWeb & Mobile Site Mobile App
Advantages of Responsive Design
Wider Browser SupportBetter PerformanceImproved SEOSaves TimeSaves Money
Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to
decide the rendering on each device
”“
Delivered User Experience Quality
154 k 1,5 k 200Satisfied Tolerating Frustrated
Digital Performance Management Platform
Performance
Scalability
Time to Market
Quality of Service
Real-time Experience
&Behavior
Customer Analytics
SEO
Abandonment
Conversion
DevOps Business
Digital Performance Management Platform
DevOps Business
Syed Y AliTechnical Architect Digital Engineering & Mobile
Walgreens
From Building Websites to Building Digital Experiences– Our Journey to Adaptive & Responsive Design
Syed Y AliTechnical ArchitectDigital Engineering and Mobile Solutions
©2015 Walgreen Co. All rights reserved.
Agenda
2
Business Context
Architectural Design
Transformation & Challenges
Monitoring Tool
Lessons Learned
©2015 Walgreen Co. All rights reserved.
©2015 Walgreen Co. All rights reserved. 15
Context: Customer.
©2015 Walgreen Co. All rights reserved. 16
13 million downloads from Google Play
Walgreens is serious about Mobile
20 million downloads from Apple Store
©2015 Walgreen Co. All rights reserved. 17
Walgreens.com: Inconsistent and poor user experience
©2015 Walgreen Co. All rights reserved. 18
Walgreens mobile traffic
©2015 Walgreen Co. All rights reserved. 19
Mobile vs Desktop: Predictions were coming true
©2015 Walgreen Co. All rights reserved. 20
Where we were: 4 back-end stacks
Desktop Browsers
Transcoded Mobile Site
External Web Services
Main Web Site
Mobile Browsers Native Apps
HTML5 Mobile Site
Walgreens Developer Program
More than just mobile to think about
Multiple digital properties
More form factors
Multiple code bases
Third party APIs and integrations
©2015 Walgreen Co. All rights reserved.
©2015 Walgreen Co. All rights reserved. 22
User Experienc
eBusiness GrowthLower IT
Cost
Can the technology platform deliver
consistent and optimal customer
experiences across all breakpoints
or clients – now and in the future?
Problem Statement 1
©2015 Walgreen Co. All rights reserved. 23
Business Growth
User Experien
ce
Lower IT Cost
Can the technology platform
support new business models
and bring all the systems in
the enterprise together for the
omni-channel integration?
Problem Statement 2
©2015 Walgreen Co. All rights reserved. 24
Lower IT Cost
User Experienc
eBusiness Growth
Can the technology platform
contain the growth of IT cost
when facing the exploding
growth of clients, channels
and integrations?
Problem Statement 3
©2015 Walgreen Co. All rights reserved. 25
One Digital Architecture (1DA)
©2015 Walgreen Co. All rights reserved. 26
• Builds new experiences on top of reusable REST services • Enables new business channels through shared APIs
Separation of services from UI
• Delivers native “like” speed by maximum cache ability and minimized bandwidth consumption
• Reduces server resources utilization
Separation of data from applications
• Portable and structured client-side applications
• Faster prototype and UI development
Separation of Model, View, Controllers on the client side
Three core concepts of 1DA
©2015 Walgreen Co. All rights reserved. 27
Walgreens.com: Consistent and optimal user experience
©2015 Walgreen Co. All rights reserved. 28
Walgreens.com: Mobile/tablet traffic surpassed desktop traffic
Adaptive/Responsive Design Go Live!
©2015 Walgreen Co. All rights reserved. 29
Performance Engineering and Monitoring Transformation
From server side only instrumentation to end-to-end user experience visibility
From server side optimization to client side (breakpoint specific) optimization
From load-oriented performance testing to predictability-oriented performance engineering
From browser testing to multi-device/multi-break-point development and testing framework
Monitoring challenges…
©2013 Walgreen Co. All rights reserved. 30
Accurate MeasurementDeveloper Friendly
Increase awarenessPredictability
Comprehensive analysis
Finding the right monitoring tool…
©2015 Walgreen Co. All rights reserved. 32
The right monitoring tool…
100% End-to-End Visibility
Powerful Charting Capability
Free for every developer
User Experience Index
Drill Down Capability
Single User Search
3rd Parties and CDN Insights
AngularJS Support
Business Impact Analysis
Synthetic Monitoring
©2015 Walgreen Co. All rights reserved. 33
Dynatrace: End–to–End Visibility
©2015 Walgreen Co. All rights reserved. 34
Dynatrace: User Experience Index
©2015 Walgreen Co. All rights reserved. 35
Dynatrace: Single user search
©2015 Walgreen Co. All rights reserved. 36
Dynatrace: Developer friendly
©2015 Walgreen Co. All rights reserved. 37
Lessons learned
Make CSAT the number one metrics
Give more attention to IE browsers: over instrumentation
Simplify environments and better cache control: release integrity and cache poisoning
Aaron RudgerDirector Product Marketing
Dynatrace
Digital Performance Management
DevOps Business
UnifiedUser & App
Insights
ImproveMTTR &
MTBF
OptimizeSpend
Deliver on user sat &
SLAs
Improvereleasequality
Gain StrategicInsights
Protect & Grow Brand
Reduceunplanned
work
Releasecapabilities
faster
Keep up with the pace of change
Uncover new business insights
DigitalBusinessOwner
Development Operations
Identify and prevent problems
IncreaseConversions& Revenue
Increased Salesand Engagement
OperationalExcellenceInnovation
Acceleration
The Digital Performance PlatformMakes real-time information about digital services, and their users, visible and actionable by everyone in an organization
Unified visibility from conversion to code
THE EXPERIENCE VALUE CHAIN
Application Code
Public and Private Cloud
CDNs
Web APIs
Users and Devices Internet Applications & Code Data Center & Networks
Customer Experience Overview
• Real users for real-time behaviors and digital experience measurement
• In depth view into all real user actions and every visit, across mobile, web and any other channel
• Virtual users for launch readiness and SLA management
end-to-end transaction visibility from client to
DB
End-to-End View from Swipe to
Back-end• Gapless transactional
continuity, from your mobile device or browser, all the way to the back-end and specific line of application code
• Application-aware network analysis for packet-level depth with business-level context
• 20x faster problem resolution
Automated Analytics & Intelligence
• Over 1,500 third-party services identified and tracked
• Patent-pending algorithm provides most likely cause for issues; analyzes hundreds of page loads and thousands of objects in seconds
• Benchmarks the design of your site across detailed elements (images, JavaScript, time to first paint, etc.)
Excellence through Digital Performance Management
Real + Virtual Users for mobile
and web• 360 view of customer experience• All users, all visits, all channels in real time• From launch readiness to real time user analytics
World’s most realistic testing
network• Carriers, DSL,
backbone• Last mile: “in-
home” computers• Physical mobile
devices
Analytics engine & collective intelligence
• 3rd party intelligence
• Root cause analyzer
• Industry and competitive performance benchmarks
Deep transaction monitoring
• All transactions, from smartphone or browser to back-end
• Rich insights, down to code level
• 20x faster problem resolution
Dynatrace User Experience Management Dynatrace Application Monitoring
Dynatrace Synthetic Monitoring Dynatrace Data Center RUM
Thank-you!Time for Q & A
Steve TrimboGlobal Omni-Channel
Practice ManagerDynatrace
Aaron RudgerDirector Product
MarketingDynatrace
Syed Y AliTechnical Architect Digital
Engineering & MobileWalgreens
Participate in our Forum :: community.dynatrace.com
Like us on Facebook facebook.com/dynatrace
Follow us on LinkedIn linkedin.com/company/dynatrace
Connect with us!Follow us on Twitter twitter.com/dynatrace
Watch our Videos & Demos youtube.com/dynatrace
Read our Blogapplication-performance-blog.com
top related