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/).
DDoS In Oceania and the Pacific, presented by Dave Phelan at NZNOG 2024
Annual report became a startup industry standard
1.
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
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
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.
48.
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! :)
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
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
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