Successfully reported this slideshow.
Your SlideShare is downloading. ×

Ustream Annual Report 2013

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Responsive web design
Responsive web design
Loading in …3
×

Check these out next

1 of 65 Ad

Ustream Annual Report 2013

Download to read offline

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/).

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/).

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

Ustream Annual Report 2013

  1. 1. “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
  2. 2. × 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.
  3. 3. × 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
  4. 4. https://docs.google.com/a/ustream.tv/document/d/1Ok03pItdqdwdSyUjAksre2uahBjxHA3E2lr22RmHTWk/edit
  5. 5. OVERVIEW BROADCASTS MOMENTS ACHIEVEMENTS TECH INSIGHTS
  6. 6. BEST PRACTICES Spotify https://www.spotify.com/int/2013/ MailChimp http://mailchimp.com/2012/
  7. 7. http://455u48.axshare.com/one-pager.html
  8. 8. DESIGN
  9. 9. GET OUT OF YOUR COMFORT ZONE
  10. 10. DESIGN RESOURCES 01 Ustream color palette #ffffff #eeece4 #3388ff #539eec #2c3c4c #f28a2e #ffa02d #d349a3 #e166b7 #91b31b #a3cc14 #ff3d23 #ff604c #3fbcb3 #ffdf80
  11. 11. DESIGN RESOURCES 02 Ad-free viewing illustration
  12. 12. DESIGN RESOURCES 03 Ustream beer label LIGHT INDIA PALE ALE 4,8% Diesel
  13. 13. 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
  14. 14. NAVIGATION SECTION HEADER OVERVIEW BROADCASTS MOMENTS ACHIEVEMENTS TECH INSIGHTS SHARE ON
  15. 15. 500 300 100 brief: visual representation of the imaginery DVD stack that is 562 meters tall
  16. 16. THE SLIDE THAT DIDN’T MAKE IT...
  17. 17. THE SLIDE THAT DIDN’T MAKE IT...
  18. 18. THE SLIDE THAT DIDN’T MAKE IT...
  19. 19. THE SLIDE THAT DIDN’T MAKE IT...
  20. 20. 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.
  21. 21. 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! :)
  22. 22. AWWWARDS SITE OF THE DAY FEB 25, 2014
  23. 23. FRONTEND
  24. 24. × 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
  25. 25. × Normal slide × Sticky bg slide × Sticky slide SLIDE TYPES
  26. 26. × Normal slide × Sticky bg slide × Sticky slide SLIDE TYPES
  27. 27. SLIDE TYPES × Normal slide × Sticky bg slide × Sticky slide
  28. 28. × Normal slide × Sticky bg slide × Sticky slide SLIDE TYPES
  29. 29. × 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
  30. 30. × 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
  31. 31. × Measuring when you are done is not an option × scrolling + animating is a hard combo × 36.736px body height × Push the GPU! PERFORMANCE
  32. 32. EPILOGUE
  33. 33. 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.”
  34. 34. 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"
  35. 35. 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"
  36. 36. “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
  37. 37. Thank U

×