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
2. None

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
6. None

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

33. None

34. clear

35. None

36. +160kb

37. Incentivized coworkers

38. None

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

55. None
56. None
57. None

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
63. None

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
65. None

66. “...we’ve mobilized the Interactions feature in the Activity Feed, which

    wasn’t previously mobilized.” (yet
67. None

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 &