At the beginning of 2014 we published the most exciting metrics and accomplishments from Ustream's last year, in the form of an extremely æsthetical website, called annual report. We presented this slide deck on a company tech talk event, it's about the workflow we used when putting together the annual report. Presentation graphical layout made by Peter Juhasz (http://www.jepegrafik.com/).

2. “WE DEFINITELY
SHOULD DO
SOMETHING LIKE
THIS.”
Brad Hunstable
12 / 11 / 13
“I want a video with
the product team
singing and dancing -
its so powerful. I will
play ukelele. Lets
discuss first thing
tomorrow.”
“now thats a f**king
annual report:
https://www.airbnb.com
/annual/
keep scrolling”
Jordan Meyer
2 / 7 / 13
Gyula Feher
12 / 19 / 13

3. × Annual report became a startup industry standard: "everyone" has it, we should also -
Mailchimp, Airbnb, Twitter, Spotify, Last.fm, Wistia, Kickstarter.
× It's a kind of product that declared to be very important by everyone,
but finally done by no-one.
× But once accomplished, it's a huge success (at least we hoped).
IT ALL STARTED A YEAR AGO,
WITH THAT EMAIL THREAD.

4. × Kick-off on Dec 17th.
× Let's do some extra work in the busiest time of the year!
× Fields that were involved: BI, PR, product, marketing, mobile, PHP, TA,
infra, network operations, content monitoring, legal.
× The whole company was really proactive and helpful. The last piece of data
came in on Jan 10th which was quite quick despite the circumstances.
DEEP DIVE INTO USTREAM DATA

6. https://docs.google.com/a/ustream.tv/document/d/1Ok03pItdqdwdSyUjAksre2uahBjxHA3E2lr22RmHTWk/edit

7. OVERVIEW BROADCASTS MOMENTS ACHIEVEMENTS TECH INSIGHTS

8. BEST PRACTICES
Spotify
https://www.spotify.com/int/2013/
MailChimp
http://mailchimp.com/2012/

9. http://455u48.axshare.com/one-pager.html

10. DESIGN

11. GET OUT OF YOUR COMFORT ZONE

12. DESIGN
RESOURCES
01
Ustream color palette
#ffffff #eeece4 #3388ff #539eec #2c3c4c
#f28a2e #ffa02d #d349a3 #e166b7 #91b31b
#a3cc14 #ff3d23 #ff604c #3fbcb3 #ffdf80

13. DESIGN
RESOURCES
02
Ad-free viewing
illustration

14. DESIGN
RESOURCES
03
Ustream beer label
LIGHT INDIA PALE ALE
4,8%
Diesel

15. THE DESIGN WORKFLOW
× 17 slides, each has it’s own visual idea
× Structure: responsive, parallax, one-pager. Responsive?
× Designing took a little more than one week for two designers
× Keeping the visual consistency was a key element
× Creating assets, review animations

16. NAVIGATION
SECTION HEADER
OVERVIEW BROADCASTS MOMENTS ACHIEVEMENTS TECH INSIGHTS SHARE ON

19. 500
300
100
brief: visual representation of the imaginery DVD stack that is 562 meters tall

43. THE SLIDE THAT DIDN’T MAKE IT...

44. THE SLIDE THAT DIDN’T MAKE IT...

45. THE SLIDE THAT DIDN’T MAKE IT...

46. THE SLIDE THAT DIDN’T MAKE IT...

47. to ustream /ju:striːm/
1. verb — to broadcast a live video over
the internet using Ustream
Season 6, episode 3
The episode where the verb
»to ustream« went mainstream.

49. WHAT DID WE LEARN?
× We need more time (as in an ideal world)
× Mobile/tablet versions is a must
× This product can’t be an MVP, no time for iterations, first impression rules
× Very useful project to extend our visual assets for the brand
× We love working on projects like this! :)

50. AWWWARDS
SITE OF THE DAY
FEB 25, 2014

51. FRONTEND

52. × It’s not a usual parallax site
× slides with different states
× each slide has its own behaviour
× what happens if we would like to develop it in parallel with more devs?
FIRST QUESTIONS
ON THE FRONTEND SIDE

53. × Normal slide
× Sticky bg slide
× Sticky slide
SLIDE TYPES

54. × Normal slide
× Sticky bg slide
× Sticky slide
SLIDE TYPES

55. SLIDE TYPES
× Normal slide
× Sticky bg slide
× Sticky slide

56. × Normal slide
× Sticky bg slide
× Sticky slide
SLIDE TYPES

57. × no library
× every slide knows when to act
× shared event system for every slide type
× special scroll handlers with percentage of appearance
× automatic animations based on HTML attributes
SLIDE INTERFACE

58. × Hi momentum scroll! Bye momentum scroll!
× Chrome was a piece of cake
× The tricky backface visibility and preserve-3d
× Lack of repaint during touchmove on Mobile
× Fast solution on mobile devices, and old browsers
DEVICE SPECIFIC
ROCK&ROLL

59. × Measuring when you are done is not an option
× scrolling + animating is a hard combo
× 36.736px body height
× Push the GPU!
PERFORMANCE

60. EPILOGUE

61. TAKEAWAYS
FROM AL GORE'S NOSE
Buying a stock photo of Greenland is a piece of cake,
but you can get in trouble with Al Gore's nostrils
“this current AG photo, he looks like he's scowling”
“We searched through our files and the ones we
sent are truly the best we have.”

62. TAKEAWAYS
FROM AL GORE'S NOSE
Sometimes we don't even own the rights
of our "own" content.
"need artist, label and concert promoter approval"

63. TAKEAWAYS
FROM AL GORE'S NOSE
TV stars are a complete mess.
"talent like Aziz Ansari (Park & Recreation)
have approval rights over any use of their
image and name"

64. “Guys,
This is awesome, you've
set the bar pretty
freakin high :)”
Joellen Ferrer
1 / 31 / 14
“This is super cool.
I'm gonna put it on
a loop at our front
reception desk too!”
“one of the best things
I've ever seen on the
internet.”
Lee Payne
1 / 31 / 14
David Gibbons
3 / 13 / 14

65. Thank U