Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How We Used To, How We Will


Published on

How We Used To, How We Will
with Eric Socolofsky
Presented live at FITC Toronto 2015
More info at

The photo-sharing website Flickr has a ten-year history of trying out new things. From its origin as a feature spun off of a massively-multiplayer game, through the dark days of neglect, to its current reincarnation, many different people have advanced new ideas via many different paths.

Which roads are the smoothest and which are full of potholes? Which lead to the most interesting discoveries and which to the staid and expected? Are new ideas the sole province of product teams, or should engineers and designers participate in the process?

In his talk, Eric explores a brief history of Flickr’s long tenure on the Web, and provides a platform from which to examine these questions.

Examine the sources of inspiration and innovation, and the paths from idea to execution.

People who make things, people who use web services, people with ideas for new products.

Familiarity with web products and user experiences.


How to make things with a team.
How to avoid, and avoid being consumed by, office politics.
How to be an engineer with design and product skills.
How to be a designer with engineering and product skills.
How to be a product person with design and engineering skills.

Published in: Design
  • Be the first to comment

  • Be the first to like this

How We Used To, How We Will

  1. 1. @ericsoco How we used to. How we will. i’m eric socolofsky, a FE eng at flickr shawn asked me here to speak about…something gave some thought, decided to focus on something important to me, which is…
  2. 2. where do good things come from? trying to find some answers to this question what processes and culture encourage creation of good things?
  3. 3. innovation! I’ll be using words today like ‘innovation’,
  4. 4. inspiration! and ‘inspiration’, but I want to be sure you understand I don’t mean them in the corporate clip-art kind of way.
  5. 5. Nervous System lamp, by Shapeways More interested in investigating the processes by which we make beautiful, usable objects and experiences Whether it’s generative furniture design, (jessica is here at FITC too!) or…
  6. 6. Faraday Bicycle by Richard Masoner …the design and engineering of stylish electric bicycles or…
  7. 7. Watercolor Map by Stamen Design …dreaming up beautiful maps and making them available to anyone for web and print or…
  8. 8. Obscura Digital projection, by Exploratorium (Lowell Robinson) …creating immersive video narratives and projection mapping them onto buildings or…
  9. 9. Herzog & De Meuron atrium, by rosmary or exploring new materials and designing the buildings themselves, it’s about process and culture and the people who make things.
  10. 10. since i’m working at flickr now, and flickr has such a long history on the internets, thought it would be interesting to examine the processes and culture that have allowed flickr to innovate over the years.
  11. 11. so….who are you? So who are you to tell me about innovation? marked on the program as ‘inspire’ and ‘UX/UI’ tracks, but here’s a front end engineer talking to you… but there’s some other things, too…
  12. 12. background in architecture; design education learned about iterative process and design thinking at the beginning of my education worked for a few years as an architect, then went to grad school
  13. 13. by Ann Poochareon graduated ITP 2004
  14. 14. by Dan Phiffer part of tisch school of the arts, NYU 2-year grad program with broad focus on tech, arts, interaction design brings people in from diverse fields like architecture, fine arts, engineering, dance and music, philosophy and humanities
  15. 15. found out about flickr a few weeks before public launch, feb 2004 stewart contacted me to make some pretty flash things for the alpha FlickrLive been on flickr ever since, as a consistent (if not heavy) user
  16. 16. by Shawn Clover a few years went by in nyc, then i moved out to sf for a gig at the Explo, museum of science, art, and human perception; highly interactive exhibits that demonstrate scientific phenomena worked there for 6 years as exhibit developer
  17. 17. designing and building physical-digital hybrid interfaces to teach people about geometry,
  18. 18. interactive visualizations of ship traffic in San Francisco bay,
  19. 19. by Gayle Lairdby Amy Snyder interfaces for exploring life in the world’s oceans,
  20. 20. by Gayle Laird physical representations of the patterns of the tides visible just outside the windows.
  21. 21. i also created a screen-based interactive that allows visitors to explore the neighborhood of the museum’s new location, through photos posted on flickr that same year, i felt ready to leave explo, and ended up coincidentally? at flickr.
  22. 22. …? wanted to take culture of innovation and iterative design with me When Shawn asked me to speak, decided to speak to that opportunity to learn about how flickr used to do this in the past, and how we will moving forward.
  23. 23. so, took it upon myself to hunt down old-skool and new-school flickereenos alike, ask them for their stories about how things got done. will use flickr history/timeline as scaffold for examining ways of working that encourage new ideas; bring them to users.
  24. 24. Game Neverending to Yahoo! 2003 - 2005 first era of flickr history [—6:00—]
  25. 25. by Julian Fong in the beginning… there was web 1.0. weblogs were a hit. livejournal, blogger, and moveable type were taking the internet by storm. friendster had just launched; myspace and facebook were still a ways off.
  26. 26. by hobvias sudoneighm stewart, caterina, and a handful of other brave souls opened up GNE MMORPG about…being social caterina described it as a “social object”…
  27. 27. by krispijn larrison …“social object”; like board game or team sport, activity to gather around to be social indeed, modern “social software” originated with the communities on GNE that grew into flickr
  28. 28. by Juan Felipe Rubio popular feature of Game Neverending: Flickr Live (sharing photos) photos as social lubricant in realtime chat, to increase community engagement start of movement toward current: social engagement around aesthetic objects
  29. 29. flickr launched to the public
  30. 30. by Brandon Giesbrecht from there, grew very fast, with a ton of features right out of the gate
  31. 31. by Kodak via burnick consumer-level digital photography was super new people making digital artifacts but didn’t know what to do with them a lot of new things, lots of opportunity; core suite of features emerged that heralded the coming of Web 2.0:
  32. 32. by Steve Rotman tags delicious first, flickr right after people tag photos, others find and tag in kind, community grows around shared content
  33. 33. for FEM Business, by Jeroen Mirck sharing (weblogs) some blog software actually instructed users to host images on flickr because no image hosting options existed in blog software at that point
  34. 34. by etringita faving attribution of value in social context
  35. 35. by Dion Hinchcliffe AJAX: change webpage without reload. one of main features of “Web 2.0” Imagine: a web page, with a photo and a title. You click on the title, it turns into an input field; you type a new title. You hit enter. The title is changed. Amaze!
  36. 36. See something or say something by Eric Fischer Flickr Flow by Viegas & Wattenberg first major site to provide public API (aug 2004, few months after launch) make user-generated data available to anyone to play with beautiful visualizations like these, useful apps built on flickr data
  37. 37. by john allspaw by john allspaw by Deadly Pink Rhino pioneered continuous integration: deploy small changes many times/day enabled by practice of devops (popularized by flickr) devs watch graphs like these that describe critical site performance metrics, everyone takes responsibility for uptime and performance
  38. 38. drop the vowel. who needs vowels?
  39. 39. by Pete Prodoehl 1. Prototype possible to build all these early features quickly by prototyping them prototyping started in GNE: quickly built features and handed them to users same process @ explo: get minimal version to museum visitors asap to get a sense of what works and what doesn’t 13:00
  40. 40. by David B. Gleason prototypes built into products by watching users caterina calls this “design by dogpaths” **don’t describe dogpaths** watch how users use prototypes, design them toward those use cases
  41. 41. by eric socolofsky 2. Stay close to your users prototyping and designing like this requires close contact with users easier with small team: staff engagement with every photo in beginning close communication with users creates strong community
  42. 42. by Webgrisu early successes attracted a lot of attention yahoo bought flickr in march 2005 for the bargain basement price of $30MM
  43. 43. Yahoo! to Caterina and Stewart’s departure 2005 - 2008 brings us to second era [—15:00—]
  44. 44. by r. nial bradshaw a lot of growth during this period
  45. 45. 2004 2006 2007 product evolved quickly, from beta to gamma and all the way to loves you but first thing that happened after acquisition was integration, scaling, infrastructure six-month blue sky period for thinking, but not making
  46. 46. by The Library of Congress 3. Downtime downtime is important. need to let mind wander. time for free associations and reshuffling memories; discover new connections during this time, dreamed up a lot of things turned into features about encouraging exploration of growing content
  47. 47. by The Library of Congress the commons on flickr public domain images from institutions around the world first U.S. Lib of Congress; later British Lib, recently Internet Archive Book Images just last month hit 100th institution a real-life rosie the riveter
  48. 48. by Stuart Rankin lots of great geo and maps features features came from the community: tags -> machine tags; machine tags -> geotags led to robust maps with geotagged photos and other geo features
  49. 49. slew of geo features, led largely by dan catt and aaron straup cope places: left lonely but still appreciated by some (googlebot) still there at
  50. 50. explore page: curated by interestingness algorithm provide high quality and popular photos from each day
  51. 51. by Nate Burgos 4. Iteration a lot of these features started as small experiments; pushed them out behind feature flippers, listened to feedback, iterated built new versions based on successes/failures of old; validate ideas exhibit development process @ explo [—19:00—]
  52. 52. by thomas hawk in the meantime, the site grew more mature and more complex ways to display/organize photos: photostream, sets, collections, galleries, group pools ways to communicate with other members: forum, groups, comments, notes, flickrmail
  53. 53. by Roman Boed growth of user-uploaded content: ~10 million in april 2005; 200 million by mid-2006; 2 billion images before end of 2007 200x growth in 2-1/2 years
  54. 54. by National Library of Ireland flickr as caretaker of all this content generated by its users focus on quality, longevity all roles present at product direction meetings: product, design, FE, BE, community
  55. 55. by The Library of Congress 5. Small teams attention to detail and quality from small, cross-functional teams (maybe 4 or 5 people across product, design, engineering, community) mantra of "small teams are able to do bigger things than big teams” easier/more consistent communication, ideas flow quicker, fewer things fall through the cracks.
  56. 56. by kris krüg by Joi Ito stewart and caterina from the beginning caterina went on to start brickhouse (idea incubator); stewart became sole leader
  57. 57. by SMU Central University Library 6. Strong vision people i interviewed credited stewart as strong leader with concrete product ideas & focus, good communicator leader to bring together streams of creativity and passion into cohesive direction difficult to cultivate or seek out, but hold onto it if you find it
  58. 58. by Wes Peck caterina hit the road in june 2008, stewart right after in july. what would become of flickr without this centralizing force?
  59. 59. Caterina and Stewart’s departure to Marissa’s arrival 2008 - 2012 next period in flickr history spans between time caterina and stewart left to time marisa mayer took over as yahoo CEO 22:00
  60. 60. by Kroejsanka Mediteranka troubled times for growing flickr generation shift: along with stewart and caterina, others followed growing lack of attention / resources from yahoo world changing rapidly around flickr (mobile, local, realtime… ->)
  61. 61. by George Agpoon all icons from The Noun Project collection by Phil Goodwin by Richard de Vos during this time: rise of mobile, local, real-time mobile photography no longer a new thing (e.g. instagram, 2010) GPS in phones gave rise to location-based apps (e.g. foursquare, 2009) real-time (e.g. twitter, 2006, but matured from SMS to app 2010)
  62. 62. by Fortune Live Mediaby JD Lasicaby Yahooby Yahoo troubled times for yahoo: 4 CEOs within 3-1/2 years
  63. 63. by Tracy not clear who was sailing the ship, or where the ship was even going; despite turbulence, flickr had already established itself as a place for people who wanted to build great things people stayed because they were passionate about what flickr had been; new people joined because they were passionate about what flickr could become.
  64. 64. by Hafiz Issadeen 7. Passion passion, as represented by lovely slide of passion fruit while it’s not the easiest thing to find, it’s always one of the most valuable drive to create comes from personal interest; bring own ideas to the table ownership of ideas; motivation to maintain quality
  65. 65. as an act of passion, launched code blog, as place to: - think out loud, share ideas with public - connect with other (third-party) flickr developers - display behind-the-scenes and recruit
  66. 66. by Amit Gupta that passion attracted people from outside flickr to experiment flickr bikes: geotagged photos uploaded automatically; accelerometer detects in-motion, nokia n95, solar panels coincidentally by uncommon projects (people from my grad school, ITP)
  67. 67. by possan one danger here: if you have passionate people working without shared vision /strong leadership to coordinate efforts, this “unbridled passion” can lead to a mess, with experiments that are interesting in their own right, but don’t fit into overall product, complicate UX, maintenance despite difficulties, still new things: people tagging; new web uploader; more geo features:
  68. 68. Making Flickr awesome again 2012 - present so, all of this brings us to the modern age… [—26:00—]
  69. 69. by John Fowler context: as of end of 2014: 10B photos 100MM (unique) users, 7.5MM uploads/day (5000+ per min)
  70. 70. by Adam Evans meanwhile: 2B photos per day (20% flickr corpus) across FB, instagram, snapchat, whatsapp, flickr mobile surpasses desktop higher user expectations (UX quality); real competition: exposure, 500px people saying flickr is dead (and yahoo killed it, famously detailed by mat honan)
  71. 71. and yet, people still care: marissa comes on as yahoo CEO in july 2012, and one day later sean bonner launches “dear marissa mayer” gets picked up on and echoed widely in social media
  72. 72. a day after that, we learn that people at flickr still care, too posted this call for help in response marissa did indeed decide to focus on flickr…
  73. 73. by joshnh last couple years there’s been renewed investment in flickr from yahoo reciprocal renewed relationship with yahoo focus on reinvigorating; catching up get flickr to a place where it’s simple to upload, organize, and find your photos
  74. 74. by Ismael Alanso share and engage community around photos
  75. 75. by Eric Montfort discover new content
  76. 76. by Valentina Calà and once again become the “eyes of the world”. stewart came up with motto in 2006… (one more slide here)
  77. 77. by U.N. Photo …”eyes of the world” motto in 2006 to describe being able to see the world through the lenses of the photographers on flickr however, iteration and innovation difficult with fast pace, focus on reviving flickr
  78. 78. by Ruth Hartnup relaid foundation for FE: rebuilt as an isomorphic Node.js SPA in early 2013 modern stack means faster page loads/nav, more flexibility, faster iteration ability to attract top-notch developers interested in new, cutting-edge tech similar rebuilding happening on backend, too early to discuss
  79. 79. by Tambako the Jaguar 8. Agile process we use now is agile development quick explanation: 1-2 week sprints, daily scrum/standup great for plowing through tasks, but *not* great for experimentation no downtime, time for iteration only if baked into estimates
  80. 80. by Randall Munroe / xkcd still, possible to make room for experiments in periphery of agile timeline XKCD comic end of last year easy: use GPS to determine if photo is in a park virtually impossible: determine if photo is of a bird
  81. 81. computer vision + search team put together this site in response
  82. 82. by Bhautik Joshi / Flickr subset of flickr team explicitly devotes time to exploration data science team made “the grid”: access photo pixels and metadata allows us to ask questions like camera usage across flickr (recent blog post)
  83. 83. by Bart Thomee / Yahoo Labs yahoo labs: mission to explore technologies for long term (2-5 years out) regionizr: geo + statistics to create descriptive outlines based on tags photo recs: computer vision + social signals group recs, suggested tags, improving interestingness algo data science and labs teams: projects that straddle disciplines require diverse team
  84. 84. by Ryan Somma 9. Diversity Labs group has diverse backgrounds, skillsets, interests: AI, HCI infoviz, geo, CV ITP does the same; ideas come from friction among different disciplines To achieve diversity, network among multiple disciplines Within team, encourage people to embrace friction, not fight it by embracing… ->
  85. 85. by FraserElliot by embracing successes of past and employing new techniques + technology, we’re growing back into a healthy, mature product now that we’ve rebuilt substantially, a lot of new ideas on the near horizon
  86. 86. by Petras Gagilas 10. Two paths from the conversations i’ve had and from personal experience, i see two distinct paths from which innovative work can arise
  87. 87. by [Alexandre] “deductive innovation”: determine specific goal to achieve, need to address follows linear path to high-probability solution tech industry as example: hundreds or thousands of successful single-purpose apps, each makes some specific task easier or iterates on the previous idea of innovating along a linear path is so pervasive in tech scene that it’s become a caricature
  88. 88. idea of innovating along a linear path is so pervasive in tech scene that it’s become a caricature the world’s first entirely AI startup accelerator, "the uber of..." (pants, cheese, headbands). despite caricature, end results are functional, successful; may not be wildly innovative, tend to be iterations of existing products
  89. 89. by Smithsonian Institution the other way around: instead of a linear path, try lots of quick prototypes; i call this “inductive innovation”: through experimentation and iteration you can arrive at solution with lower probability of solving specific problem but higher probability of generating new use cases and broadening playing field.
  90. 90. by Laura Thorne “inductive innovation” results in emergent behavior. build some tools/toys, put into hands of users, let *them* innovate. tags -> machine tags, geotags, maps/places Flickr as series of experiments in digitally-mediated social interaction that evolved into language of social software on the web
  91. 91. by Derek Bruff depending on your situation, you can choose either path flickr is at an interesting point in time, in which both paths are useful: linear, deductive innovation to get us back on track and back on solid footing; experimental, inductive innovation to invent the future. FULL STOP
  92. 92. Aaron Straup Cope Ayman Shamma Bernardo Hernandez Bertrand Fan Caterina Fake Christopher Berry Chris Martin Dan Catt Daniel Bogan Dunstan Orchard Eric Costello George Oates Heather Champ Markus Spiering Matthew Rothenberg Peter Norby Phil Dokas Ross Harmes Trevor Hartsell Simon Osindero Special thanks to: font: Aller by Dalton Maag trying to find some answers to this question what processes and culture encourage creation of good things?
  93. 93. @ericsoco Thanks. (to you!) thanks to you in the audience! please get in touch: @ericsoco (flickr, twitter, vimeo) slides on transmote we’re hiring!