Mobile web is not (just) a technical challenge

Transcript

1. l a r a h o g a n . me / c u l t u r e / @l a r a _ h o g a n
3. Engineering Teams at Etsy • Feature Teams • Listing page • Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing)
4. Engineering Teams at Etsy • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Feature Teams • Listing page • Seller tools • Checkout
5. • Feature Teams • Listing page • Seller tools • Checkout • Mobile Web spun
7. User agent sniffer delivers different templates
8. No mobile subdomain
9. One team was responsible for mobilizing everything
10. Worked okay... for a while.
11. Everyone hates duplicate code templates/! templates/mobile/ assets/js/! assets/js/mobile/ assets/css/! assets/css/mobile/
12. We began to explore native development
13. “Everyone at Etsy should be doing mobile”
14. ... so then no more mobile web work happened for a year.
15. It was a large technical hurdle
16. Device sizes and operating systems grew more fragmented
17. mobile web caring shipping teaching }
18. Options
19. 1. Give up
20. Source: StatCounter Global Stats, 6/14 % of Internet Traffic
21. 1. Give up 2. Appoint mobile web cops/janitors
22. In 2013, we appointed a new Mobile Web Team...
23. ... but feature teams know how their feature should work on mobile.
24. 1. Give up 2. Appoint mobile web cops/janitors 3. Implement technical solutions
25. We built tools to make it easy to mobilize features...
26. ... but feature teams still weren’t mobilizing anything.
27. 1. Give up 2. Appoint mobile web cops/janitors 3. Implement technical solutions 4. Enact culture change
28. We were trying to solve a cultural problem with just technology.
29. • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web • Feature Teams • Listing page • Seller tools • Checkout
30. • Infrastructure Teams • Data engineering • Autobots (testing) • Mobile Web got
31. Mobile Web’s parallel universe: Performance at Etsy
32. Educated coworkers
34. clear
36. +160kb
37. Incentivized coworkers
39. whoa!
40. Developers fixed it
41. whoa,
42. Performance hero
43. Performance hero
44. Empowered coworkers
45. People began to do performance caring shipping teaching }
46. stan: hey bucky perf just jumped with this deploy bucky: looking now stan stan: dashboards.etsycorp.com/ deploy.php#pageperf...
47. Yash: great catch stan, thanks for vigilance ross: thanks for seeing something & saying something bucky: stan
48. None of these people are on the performance team.
49. Solving mobile web’s culture problem
50. Educating coworkers
51. Lunch & Learn: Mobile Web Performance
52. Workshop: How to Test on Mobile
53. Lunch & Learn: Designing for Touch
54. Incentivizing coworkers
58. Mobile Web Hack Week
59. Empowering coworkers
60. “We are a mobile-first company.” - Chad Dickerson, Etsy CEO in a company meeting
61. Feature teams began to care, ship, and teach
62. “Remember this win on desktop, where we added some light copy changes and saw a lift in conversion? As promised, we're running this experiment on mobile web...” (actual
64. “Does this work on mobile? Absolutely! ... We found that a one-template approach for this page was much better for both user experience and operational overhead...” (another
66. “...we’ve mobilized the Interactions feature in the Activity Feed, which wasn’t previously mobilized.” (yet
68. These are our success metrics. caring shipping teaching }
69. Which of these are you missing? caring shipping teaching }
70. culture technology &
71. culture technology &