Zagat.com Case Study - DrupalCon Denver 2012

ZAGAT.COM CASE STUDY
WHO ARE WE?
Steven Merrill
Director of Engineering, Phase2 Technology
@stevenmerrill
Brian McMurray
Developer, Phase2 Technology
@bmcmurray
, the quick history
Founded in 1979 by Tim and Nina Zagat
User-Generated Content before “UserGenerated Content”
“The Gastronomic Bible”
- The Wall Street Journal
We worked with Zagat from June 2010 November 2011
THE PROBLEM(S)
Legacy ASP.NET website rapidly aging
Updates difficult
Complicated QA testing and deployment
process
Desire for website to be more social
Separated systems (website, blog, webstore)
THE SOLUTIONS
Fight for the Users
Drupal and Friends
Robots for Better Living
It’s Dangerous To Go Alone! Take This!
Eye on the Prize
Hindsight is 20/20
FIGHT FOR THE USERS
Iterate quickly and test the ideas with real users
Track goals and analytics
USER TESTING
Formal in-person interviews with functional
prototype
On-going user testing through usertesting.com
service
Users could be granted special permission
(roles) to access beta features
USER TESTING (VIDEO)
00:01
-00:34
TRACK GOALS AND ANALYTICS
Google Analytics –
http://dgo.to/google_analytics
CrazyEgg analytics – http://crazyegg.com
Google Website Optimizer for multi-variate
testing
Links with anchor names (# tags) to track in-site
referrals
DRUPAL AND FRIENDS
Use complimentary technologies to augment
Contrib for the 80%, Custom for the 100%
DYNAMIC CHARTING
RaphaëlJS –
http://raphaeljs.com
Browser Compatibility
Mobile phone
compatibility
THE ZAGAT MATRIX
THE ZAGAT MATRIX
PERFORMANCE MATTERS
Varnish – http://varnish-cache.org
Front-end Performance
VARNISH
HTTP Caching
Caching Fragments (ESI)
FRONT-END PERFORMANCE
Spriting
“Spooning”
<img src="spacer.gif"
data-src="actualimage.jpg" />
Page Weight Trimming
AJAX upgrades
OpenLayers build scripts
Monitoring
HARViewer -
http://www.softwareishard.com/har/viewer/
ShowSlow - http://www.showslow.com/
FRONT-END PERFORMANCE TUNING
Run daily front-end performance tests against a
number of competitors and keep metrics
FRONT-END PERFORMANCE TUNING
CONTRIB SUCCESS STORIES
Social Badges
Flag –
http://dgo.to/flag
Rules –
http://dgo.to/rules
Zagat “Buzz” Blog
Maps
Shop
CONTRIB: ZAGAT "BUZZ" BLOG
Migrate – http://dgo.to/migrate
Views – http://dgo.to/views
CONTRIB: MAPS
OpenLayers – http://dgo.to/openlayers
CONTRIB: SHOP
Übercart – http://dgo.to/ubercart
GOING CUSTOM
Search
Paid Online Subscriptions
SEARCH
Needed to integrate with specific Endeca setup
AJAX refreshing of results
Integration with subscription upselling
Multiple search interfaces
Custom autocomplete
PAID ONLINE SUBSCRIPTIONS
Integrate with specific payment handler and
Zagat backend
Many discrete data points:
Promo codes
Subscription offers
Bundles
Partner promotions
CONTRIB IN CUSTOM CODE
Subscription offers used CTools Export UI
ROBOTS FOR BETTER LIVING
Automate deployments
Performance monitoring
Regression testing
JENKINS
Automated data imports
Automatic deployment
Run SimpleTests before each
deploy
Empowering QA people to push
and do deploys
TortoiseHg on a Windows
server
Cron, with historical reporting
Run daily tasks to sync between systems
MONITORING TOOLS
Real-time Stats
Pingdom
GTMetrix
REAL-TIME STATS
CoRadiant Appliance
Zeus Load Balancer
PINGDOM
Uptime
Backend response times
GTMETRIX
Front-end performance testing
Daily snapshot and performance over time
Can send custom cookies or use HTTP
authentication
SELENIUM
http://seleniumhq.org
Automated regression testing
Run on the QA environment
ARIA-compliant autocomplete
(by upgrading jQuery and jQuery
UI) meant we could test with Selenium
IT'S DANGEROUS TO GO ALONE!
TAKE THIS!
Your Drupal site needs more than just Drupalers
Tips on adding team members
BRINGING IN NON-DRUPAL TALENT
Look for folks:
Who are familiar with contributing to opensource
Interested in learning new things
Examples
Junior developer with a Linux / CS
background who ended up contributing to a
large amount of Drupal development
Experienced contributor to a Linux distribution
with no web programming background who
came in and helped write complex Selenium
tests and automate web QA
Later went on to assume the majority of the
sysops responsibilities
EYE ON THE PRIZE
All software has bugs
Product owners with deep experience will notice
bugs that users won’t
Some features were gone, and users let us know
HINDSIGHT IS 20/20
Config Management
Virtualized LAMP environments
CONFIGURATION MANAGEMENT
Six hosting environments