How We Used To, How We Will with Eric Socolofsky Presented live at FITC Toronto 2015 More info at www.fitc.ca/toronto OVERVIEW 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. OBJECTIVE Examine the sources of inspiration and innovation, and the paths from idea to execution. TARGET AUDIENCE People who make things, people who use web services, people with ideas for new products. ASSUMED AUDIENCE KNOWLEDGE Familiarity with web products and user experiences. FIVE THINGS AUDIENCE MEMBERS WILL LEARN 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.

1. @ericsoco
transmote.com
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. where do good things
come from?
trying to find some answers to this question
what processes and culture encourage creation of good things?

3. innovation!
I’ll be using words today like ‘innovation’,

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. 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. Faraday Bicycle by Richard Masoner
…the design and engineering of stylish electric bicycles or…

7. Watercolor Map by Stamen Design
…dreaming up beautiful maps and making them available to anyone for web and print or…

8. Obscura Digital projection, by Exploratorium (Lowell Robinson)
…creating immersive video narratives and projection mapping them onto buildings or…

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. 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. 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. 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. by Ann Poochareon
graduated ITP 2004

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. 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. 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. designing and building physical-digital hybrid interfaces to teach people about geometry,

18. interactive visualizations of ship traffic in San Francisco bay,

19. by Gayle Lairdby Amy Snyder
interfaces for exploring life in the world’s oceans,

20. by Gayle Laird
physical representations of the patterns of the tides visible just outside the windows.

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. …?
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. 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. Game Neverending
to Yahoo!
2003 - 2005
first era of flickr history
[—6:00—]

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. 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. 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. 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. flickr launched to the public

30. by Brandon Giesbrecht
from there, grew very fast, with a ton of features right out of the gate

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. by Steve Rotman
tags
delicious first, flickr right after
people tag photos, others find and tag in kind,
community grows around shared content

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. by etringita
faving
attribution of value in social context

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. 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. 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. drop the vowel. who needs vowels?

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. 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. 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. by Webgrisu
early successes attracted a lot of attention
yahoo bought flickr in march 2005
for the bargain basement price of $30MM

43. Yahoo! to Caterina and
Stewart’s departure
2005 - 2008
brings us to second era
[—15:00—]

44. by r. nial bradshaw
a lot of growth during this period

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. 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. 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. 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. 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 flickr.com/places

50. explore page: curated by
interestingness algorithm
provide high quality and popular photos from each day

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. by Fortune Live Mediaby JD Lasicaby Yahooby Yahoo
troubled times for yahoo: 4 CEOs within 3-1/2 years

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. 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. 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. 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. 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. Making Flickr
awesome again
2012 - present
so, all of this brings us to the modern age…
[—26:00—]

69. by John Fowler
context: as of end of 2014:
10B photos
100MM (unique) users, 7.5MM uploads/day (5000+ per min)

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. 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. 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. 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. by Ismael
Alanso
share and engage community around photos

75. by Eric
Montfort
discover new content

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. 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. 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. 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. 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. computer vision + search team put together this site in response
parkorbird.flickr.com

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. 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. 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. 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. 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. 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. 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, launchnik.com: "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. 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. 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. 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. 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. @ericsoco
transmote.com/talks/fitc-2015
flickr.com/jobs
Thanks. (to you!)
thanks to you in the audience!
please get in touch: @ericsoco (flickr, twitter, vimeo)
slides on transmote
we’re hiring!