Soapbox is the easiest way to make a video by yourself. It's a Chrome extension that records your webcam and screen at the same time. The result is authentic yet professional, and faster than writing an email.
My favorite design detail is the smooth transitions between video sources, which gives the video a hint of professional production. The transitions lend the video structure which balances out the constraint of it being recorded as a continuous take. The tone is authentic and personal, but the final product is still professional.
This project began as a design exercise with the goal of exploring video creation. I created a simple interactive prototype and brought it to a local user testing event. As I tested internally at Wistia I iterated based on what I learned, and the project picked up steam. An engineer joined me work on a proof of concept, and the result was good enough to justify a larger investment, a team, and a big launch as a new product.
While it's not obvious in the final output, Soapbox's biggest differentiator is speed. The guiding principle of the design is that sending a quick video should be easier and faster than writing an email. To achieve that, I designed the creation and editing flow to maintain a swift forward momentum. That focus is present in little details throughout the product, beginning the moment you open the extension.
Soapbox pops out of the browser with a visible camera stream, audio-feedback indicators, and dashed lines to help you center yourself (which is critical for the view where your webcam sits side-by-side with your screen). Having taken the smallest step - only a single click - you're already getting direct feedback on your directing. Without even realizing it you sit up straighter, adjust your camera angle, and find the best background. You're already on the path forward, building momentum, and the next thing to do is a big, obvious blue button.
That momentum carries through once you're done recording. The tabs for Edit, Customize, and Share break up your work into focused tasks with a linear flow. Though it's possible to go backwards, the interface has a strong bias toward forward progress in the interest of keeping the creation process as quick as possible.
The place where that bais-toward-speed is most obvious is in the Editing process, where you can trim the ends and add transitions, but not cut and splice. By cutting out the linear timeline editor, Soapbox turns a process that can take hours into one that is done in minutes. Of course, getting used to recording yourself in a continuous take has a learning curve. And we all say "umm" and "ahh" more than we want to! But Soapbox videos are about authenticity and speed, and capturing a personable tone that is impossible to achieve with a scalpel and linear timeline editor.
After Editing and Customizing, you're taken to the Share tab where you see a preview of the custom landing page that Soapbox creates for your video, optimized for mobile viewing and customized with a shade of the player color set in the Customize step. The main button on this page copies the URL and a pre-formatted thumbnail image that you can paste right into an email compose window. In that way, the forward momentum carries you right out of the app itself and back to the task that brought you to Soapbox in the first place: quick, polished communication.
This project began as a creative side-project at Wistia to explore the goal of easy video creation. I designed the prototype and branding, pitched the project, and ended up leading a small team of engineers to develop and launch Soapbox. It's a free Chrome extension with thousands of active users making sweet videos. You should try it too!