October 2020

stream.new

An open-source project, stream.new is a tool to upload or record a video and get a shareable link to stream it.

Front-facing camera recording screenshot

Building something fast, free, and open source.

Initial Team:

Development: Dylan Jhaveri

Design: Me

There wasn't much direction for this project besides taking advantage of the `.new` top level domain we had acquired. We wanted to make something that we could "dogfood" internally at Mux using our video API and something we could open source externally. We came up with a very simple problem statement that would help explain our why: "As developers, we wanted a fast, frictionless way to share screencasts, desktop recordings, meetup talks, etc. that did not include much overhead and where playback would JustWork™ for anyone with a link."

minimalistic homepage with large text and a few buttons
webpage with a CTA for recording from your webcam
webpage with the front facing camera live and ready to record

Transitioning the viewer to "theater mode" while the video was preparing.

My design goal from the start was to keep this as lightweight as possible but we wanted it to be a pleasant experience. The most awkward point in the flow was transitioning the user from `upload` to `waiting for player ready`. We could figure out progress on the upload process but the API didn't tell us progress on the preparing stage. We did however have a cap on the video upload size so I ran some simple tests to get a sense of the time range most users would have to wait for. I then decided to do a full screen, fade-to-black for the background and use mix-blend-mode for the logos/text css so they would change with the background. The slow timing made it very subtle and it didn't feel jarring even if your video was a bit early or a bit late. The final state (when your video is ready) results in a dark "theater mode" background that gives a nice viewing experience.

animation of a video file being dropped onto the page and it uploading

Drag-and-drop upload state

large 'preparing' text with the background shifting to dark/theater mode

Video preparing state

webpage with a dark background and a video ready to play

Coming soon: a small logo update

From the start this was meant to have a very basic, "undesigned" feel. The logo was literally just an asterisk but it worked in a contemporary, modern way. With the product gaining more popularity we wanted something a little more ownable but still keep the minimal aesthetic. I came up with the four dots logo mark that, when static, resembled the play button triangle. The dots were also an easy element to make dynamic in fun ways like loading states.

stream.new text with a logo mark containing four dots in the shape of a triangle, with a mobile screenshot next to it
stream.new text with a spinning asterisk on the right

Initial stream.new logo

stream.new text with a logo mark containing four dots in the shape of a triangle pulsating

Upcoming stream.new logo