May 2020

Mux Website

Mux builds video products for developers. We did a design refresh to the homepage to give a visual demo of the video API.

Homepage of mux.com showing code and devices

A video company should have video on its homepage

Team:

Development: Matt McClure, Dylan Jhaveri

Marketing: Bonnie Pecevich

Design: Me

Mux makes it really easy for developers to add video to their apps and websites. Borrowing some philosophy from Stewart's Butterfield's We Don't Sell Saddles Here–we were selling *video* to developers, not just a video API. The old homepage didn't have a video element unless you ran the API demo halfway down the page. We wanted to change that with a new design.

The first problem we ran into: we didn't have a lot of video content ourselves. We did however have some really amazing customers building video into their apps. The original design direction for the hero was to feature these customer stories (and have their video content playing)

A website with multiple device types and aspect ratios, each featuring a different customer video

Unused direction A: Multiple device types and aspect ratios, each featuring a different customer video

A website with a carousel of customer videos and devices

Unused direction B: Customer Carousel w/ video playing and devices in the background

Developer first (i.e. let's show code first)

Getting customer content was going to be challenging and there was concern about not leading with code. Having only customer videos made it feel too much like a generic video platform and less obvious that we were a developer focused company. There was a push to feature code right away in the hero and demonstrate the simplicity of the API.

Code in a terminal displayed with devices playing video in overlapping windows

We wanted something similar to this video ad I created in After Effects but we wanted an accessible, web-friendly React-based animation instead.

Prototyping it in Figma

I worked closely with two of our engineers to design and develop this interactive demo. Given the complexity of this new direction I started with a figma prototype to get a feel for timing and to get feedback from the engineers and marketing on the hero sequence.

Pairing on the Code

You can read about the dev side of the hero sequence here. Once they got the canvas up and running I jumped in to fine tune the easings and transitions. We did a lot of collaborative tinkering in the code to keep performance costs down and hit a good lighthouse score.