Descript is a tool that helps people tell better stories. It's an audio and video editor that works more like a text editor than a traditional timeline editor. The best way to get a sense for how it works is to see it in action. So check this out.
I recorded this video right here in Descript. Everything I'm saying has been transcribed, so I can actually just use that transcription to edit my video. If I don't like a section, I can just delete it.
Transcription to edit my video. If I want to change a word, I can just rewrite it.
My video. If I want to switch a word, I can just rewrite it. It's pretty cool.
This is what the app looked like. When I joined Descript The product had evolved scrappily with just one designer for the first few years of the company. And as a result, it's designed foundation was unstable. Our information architecture was all over the place. Our timeline tools were across the app from the timeline itself. There was no color system to speak of. So the app was littered with unidentifiable, hex values. There was no grid system or design element componentization And as a result of the sum of all of these design problems, the app just felt hackily built. I joined as Descript's second designer. And in rapid succession, we hired a third with this sudden increase in design capacity, our fledgling team agreed that it was the right moment to craft a simple, scalable design system to serve as a strong foundation for the evolution of our product. This was of course not a solo effort. Escha Jordi and I, the three designers collaborated closely to bring this redesign to life.
So we started from a completely blank canvas. We decided on an eight pixel grid because it plays really nicely with all of the different standard type sizes, and because it's more flexible at small sizes than a 10 pixel system. We chose inter for our typeface because it's optimized for text dense digital interfaces like ours. We set our 12 point inter in a 16 pixel bounding box so that no matter how you stack or space, it, it always sits on an eight pixel grid. Then we built our icon system, starting with feather icons and open source library, and then building over a hundred new custom icons to express any and every concept within our product. I want to pause here because these three primitives. Spacing typography and iconography serve as the foundation for every other more complex component throughout the app. In essence, this is our design system. From here, you can see how we nest these primitives to build towards more complex components So here, If you take two labels and icons, you add eight pixels of spacing between the content and the bounds, and then divide that spacing to allow for a hover state. You've got a little menu. This is just one of the many components that we designed and built all from those three primitives. And then we compose these complex components together into our interface.