← Dive Club 🤿
Loading summary
Transcript38 lines
- [00:00]
A
Let's say that I started this like five years ago. I would have raised some money, like hire 10 people. And we do all, like designs and they refine, like the whole loop. It's much slower. With AI, the speed of this process can be 10x, essentially right for this stage where I'm at, this is kind of the superpower that I have versus all my competitors.
- [00:19]
B
Welcome to Dive Club. My name is Rid, and this is where designers never stop learning. This week's episode is a deep dive into a new video collaboration tool called Flask. But it's not just about the design details. The reason I find this product so inspiring is that it was designed and built by one person, Enrico Tartarati. But what's really special is this dude was a PM before he started working on this. So it's the perfect example of what it looks like to thrive as a generalist builder. Today we're going to go deep into everything that it took to design and build a well crafted product and all of the lessons that Enrico has learned along the way. So let's dive right into what he made.
- [01:05]
A
The core idea of Flask is that creativity cannot be conveyed in a text box. That's the core idea of it. So let me open a random video that we have so it supports both YouTube videos and regular videos that you can upload. So the core idea of this is that, of course, just like any other collaboration tool where we are working together to make a video, like me and my team, or I need to show it to someone else, we want to comment on it, we want to say, oh, this piece sucks. This piece is good. What I was finding myself doing was writing gigantic walls of text trying to explain this and that with words, but it just doesn't work. Imagine trying to convey to someone. Take this mouse. Imagine trying to describe this mouse to someone just with words. It doesn't work. They wouldn't understand. With creativity, you need references, you need to explain complex ideas. So the idea with Flask is that, sure, you can leave your comment, but then you can also go ahead and hit record. And three, two, one. And now I'm recording myself so I can explain to someone a complex idea. So, for example, here in the intro, I want to make it, I don't know, a tiny bit faster and reduce the chromatic aberration on the sides. So I hit enter and Flask is going to automatically capture all the insights from there. And the recording is going to be available right here in the comment, real quick message.
- [02:30]
B
And then we can jump back into it. If you're like me, then you know adding motion to your designs is the easiest way to make them feel premium. The thing is, I'm not a motion designer, but that's why Jitter's new AI Brainstorm feature is a game changer. I just drop in my design and then get instant motion ideas that I can tweak, refine and make my own. It's seriously so easy to animate your work with Jitter. I cannot recommend it enough. Just head to Dive Club Jitter to try it out today. I saw a scroll stopping tweet the other day. The creators of Tailwind are working directly on paper to train the output to be perfect. They even invested in the company. So just think about the possibilities for a second. In the future, you could design something in paper and then just right click and copy the perfect tailwind as if the creators themselves wrote it by hand. Or maybe you take an existing code component and import it into paper to make edits directly on the canvas. This is going to totally change how we Design and deliver UIs for the work web. And it's just another reason why I'm betting big on paper as the next great design tool. You can try it out today. Just head to Dive Club Paper. Okay, now on to the episode. The thing that I find so interesting about you and this product is you're a solo builder with a product background. You've never actually been a professional designer, right? And yet, like this thing looks really good. So can you give us just a quick crash course of your background? But what I'm really interested in digging into is how the heck did you develop this level of taste and refine your visual skills to the point where you're able to do the full end to end design for something like this?
- [04:13]
A
Well, I've always been, you know, that guy. Growing up like always with computers and programming, like a lot of the people, I guess, following this podcast. So I know how to code from a young age. I've never been trained as a like a software engineer to be honest. It's just like I'm passionate about technology. I worked as a product manager at Amazon and at Maze. Maze is one of the biggest user research tools out there. I left that job last year. Since then and on the side of this over the past five years I've also been running my YouTube channel where I talk about the design, engineering and psychology behind the tech that we use every day. So I would say that the design piece comes from, first of all, being always into digital media. Some Way like when I was 15, I was doing, I don't know, after effects, you know, VFX shots, like with me with my crappy camera and trying to do like gunshots and stuff. So a lot of these things kind of translate over. So, for example, knowing how to edit videos or how to do thumbnails with Photoshop, even though it's not the same as, you know, designing an interface from like a tool level or a pixel level, the core taste that you acquire into something, it's kind of the same. A friend of mine is an Italian designer, I took his course, so. But it was very hands on. So there's not a lot of design theory, empathy, a lot of none of that. It's more like, okay, how do you actually, you know, center things, organize things? What is the space in between this and that? You start to get a feel for things. To be honest, the biggest learning experience has been just building it, building it and being exposed to the best in the field, like being exposed to top level, God tier products when it comes to design. Like, for example, in May, I visited Notions Headquarters. I made a video there talking with the designers and the engineers. And it was so cool to go behind the scenes of all the little details and the level of obsession that they go for every detail. So you kind of absorb some of that. You use a new tool. Like, I'm friends with David from Supercut, you had it on the podcast as well. And you use the tool, you're like, oh, this feels good. Let me actually zoom in to every menu and things and understand why do they do this in one way or the other. And then you're thinking, okay, actually my thing kind of sucks now that I see this, so let me go and fix it. So this is.
- [06:30]
B
I've been in that exact place before with Supercut.
- [06:32]
A
Yeah, yeah. So like, you ship your thing and you're happy with it, and then you, you discover things that are at a higher level and then you slowly build up like that. You know, I think it's again, going back to things coming from different angles. Like with YouTube is kind of the same. You know, your first video, you're excited, you're like, oh my God, this is great. It's going to be an amazing million views. And now if I look back at it, it was horrible. But then I'm like, okay, at the moment, I was so proud. And then I watched something else, like, I can, I can integrate something from that, or the intro from that other person or that angle from whatever. And then slowly you kind of build it up. The thing now is that with AI and you know, with the speed at which you can build, the speed of this process can be 10x essentially, right? So if in the past, let's say that I was, I don't know, in a startup that I, that I started this like five years ago, I would have raised some money, like hire 10 people and we do all like designs and they refine, like the whole loop is much, it's much slower. And right now I just was able to iterate much faster. And again, if I see someone that has a cool idea for how to do like menus or dropdowns or whatever in a day, it can be out. And I'm like, okay, now this looks better, this feels better. Being that I'm not this gigantic company, I don't have all the baggage of, oh, like, how are the legacy customer going to feel about it? I don't care. I'm just going to release it and you know, see, see how it is. It's not, it's not going to. This is not sustainable, of course, for when you have like a $100 million a year business, but for this stage where I'm at, this is kind of the superpower that I have versus all my competitors that there are these kind of huge companies. I've shipped a lot of things over the months that turned out to be something that people were like, confused about. And so, okay, I just rolled back the change. The fact that you have such an active early community is also useful because you get immediate feedback like, hey, this is stupid, okay, oh, sorry, I'll roll you back in and find a better way to do it.
- [08:25]
B
Your point about the speed of development with AI is so interesting for someone in your position where you're sweating a lot of these like, interface details kind of for the first time, or at least the first time where you're been responsible for all of them. Advice I've given to younger designers in years past is like, you just gotta get through your first 5, 10, 100 designs because they're undeniably going to suck. You just have to get through the suck in order to get to the point where you actually are making something of high quality. And, and I think that's what's so fascinating to me looking at your work is just the trajectory and the rate at which you've been able to get to something for the first time that is really high quality is, is truly impressive. And one of the things that you mentioned to me off the record, was how David at Supercut did a little critique of your work and kind of just went through the product one time. And I'm wondering if from his feedback, you're able to identify specific ways that you've evolved the lens that you use to evaluate what you're making and maybe even other products too.
- [09:31]
A
Yeah, I think. I mean, there was a fun story. There's like four, I think four employees at Supercar or something like that, and one of them is one of the my engineers that was working with me at MACE in my team. We just randomly stumbled across each other with this co working in Barcelona. And so then for the month I was there, I also got to meet like, them and David and we got started talk. So then we were like, I was about to launch the first version, like the public launch in October, and I asked them. We did a bit of a trading of skills like me for, like, more YouTube production and content for them. And then David took a look. I think he's amazing. Like, he's a way better designer and visual, like, in all aspects than me. And so he took a look at the product and he's like, okay, it looks cool, but it looked like a toy. So I was like, you can still kind of feel and see that it has a bit of this, you know, 3D type of effect, where, for example, like, the top of each border radius is a bit lighter, so it gives like this light from the top type of effect. But it was way more exaggerated in that first version. Looking at it now, I can see that it was a bit tacky, a bit too much, and it's like, okay, it's. I get what you're trying to do here, but it cannot feel too much like a toy. It needs to be like, it's a product that people will use. So we actually sat down and we started typing tailwind classes into it. The thing about taking this kind of feedback is to be able to technically go ahead and understand what the feedback is and how to fix it. We started literally talking about which tailwind classes to add or remove to the CSS of the components to make it look more. And that's what you see now. Like, I have a tailwind class that creates this kind of 3D effect in the subtle way that I want everywhere. So it's like centralized. But now my taste has evolved based on that learning. So now if I. I could never recreate something as bold, let's call it tacky in the way that I. That I did in the first version, because I would be my own judge of That I think going, getting your work out there to the user, a user is never going to say, oh, like your border radius on the top is off. Like, they don't know about that. So I think it's useful to, yes, get it out to users and see if they actually use it, if there's retention. And like, does it make sense for the business? Does the pricing make sense? Is the information architecture correct? Like, do people understand what the product does? And that's one type of feedback, but then also trying to get feedback from the closest person that you have access to. Of course, like, depending on your level, you might be having access to different kind of network, but that can, maybe they're one step ahead of you. That can give you some feedback about, like, hey, like, don't mind about how you use it, just roast it. Like, please. I told him, like, David, please roast it. Don't hold back. Just tell me anything that you see that is wrong, that is like, even small details, I want to get a ton of work from this to do and fix. So I think you need both. And that's, that's the way to grow yourself as well.
- [12:16]
B
You know you mentioned the tailwind classes. Having used the product, I can notice, okay, you have these kind of consistent borders. There's a consistent gradient on the hover states for certain buttons. How far have you went into the systematizing things direction as a solo builder? Like, where do you think that line is?
- [12:34]
A
I tried to do the minimum possible so that things look generally okay. So for example, I don't know, the J and L keys here, they don't have any spacing between them. There's a bunch of details in their UI that are not to the level. And to be honest, this probably, I mean, I'm not sure if this is a full, like perfect circle. This icon I need to check. But you see that I'm not trying to go like pixel peeping on everything. I pick my battles. That's the thing. And for whatever else where I don't pick my battles, I start to systematize. So for example, up until last week, this was its own kind of menu with its own styling. And now I created generic styling for all menus. Like, this is Shedca. And I just created like, I customized the classes. So for example, if I do this, you see that it has this kind of translucent effect and the hover state. And I just say, okay. I just literally tell Claude, okay, take this menu that we built manually like maybe two months ago, and just now we're going to Use this standard default component from ChadCN to just adapt it and there we go. So now this is literally the same. Or if I do this, then again, this is literally the same menu and most of the time you don't need to do any tweaks. So I pick my battles. Like for example here on this part, the comments box, this is where I would spend hours and hours pixel peeping and thinking. Like, for example, I can tell for.
- [14:03]
B
What it's worth, it's nice.
- [14:04]
A
There's a little springy animation and it's been tweaked and it's nice. And this is because this is the components that 80% of the people are going to actually use and interact the most with. So yeah, okay, like the chevron rotates and like, I don't think all the other chevron rotates, but this one does. And is it consistent? Maybe at the moment, no. But here it's important that it's nice or this turns into an axe to close it. Would I do this on every plus button in the app? Probably not. And I don't have like a generic component. I just try to pick my battles and then systematize when you can. Like, for example, I have two types of buttons. Let me see. So this is a secondary button with this kind of gradient hover effect. And it's. There's like a. Also, like when you hold it down, it moves and translates to the bottom. And there's like a primary button as well, which is this. And you'll see it all the way in the ui. So I mean, it doesn't take long to create those. I'm probably going to use a lot of primary and secondary buttons, so makes sense to do it. But then other than that, I have a tailwind class for this kind of 3D border effect which I might use on things that are not a comment, or maybe it's a button, or maybe it's something else here and there. Like here it's used for this indicator of timestamp. And it's just easy for me to have a few things here and there that are standardized but not be too locked to a perfect system. Also, because again, because your taste is going to evolve and the app is going to evolve, you don't want to lock yourself into too much of a rigid system when it comes to things because now you have AI, it's not about, oh, I need to manually update the same thing in 10 places. You can just ask the AI, hey, find all the instances of this and just change it. So I Think there's also less of a need of a super duper standardized design system. But at the same time, the right little pieces of consistency help create a standard look and feel to the app.
- [15:57]
B
I've been designing products every day for the last 15 years, but in the last six months, everything has changed. With AI in the mix, I'm cranking out ideas faster than ever. But none of that matters if I can't get the feedback that I need to get the team aligned. And right now, getting async feedback still kind of sucks. So I'm building the product I've always wanted, and it's called Inflight. I use it every day to share ideas and get feedback from the team. It's totally changing the way that I work, so I'm excited to show you. Right now I'm only giving access to Dive Club listeners, so head to Dive Club Inflight to claim your spot. Can we look at the timeline component? I can already tell that there's like a ton of little interactions and minuscule design details in there. Can you talk about some of the decisions that you've made, some of the intentional ways that you've iterated? I'd love to kind of just use that as an excuse to go, yeah.
- [16:55]
A
This is the timeline. You might need a client or someone that's not familiar with video to use it, but at the same time, you also might have like an editing video professional use it. So you. You want to have something that is powerful, but that you discover how it works because it's slightly different than, than like a standard video player that you discover progressively and it makes sense. So for me, like, okay, if I start to create a comment here, let's say Enrico or like, make this slower, then the comment is going to appear there. Visual, straightforward. I understand what's going on, right? If I add another comment here, let's say that it's like here, and this is important. And this is, I don't know, an audio recording of some kind. Or I might say so here, for example, we want to make it a match cut. Cool. So now I have an audio recording here. I can say this is important. And there we go. I started to create some comments and to add to my timeline, but what happens now is that if I go here and create something, then you can already see that there is no space. So what's going to happen? Let's see. I just create it and now you see that, oh, things have changed. It has zoomed automatically. There's an animation I don't need, like A tutorial to tell me, oh, this is a zoomable thing. It just zoomed. It must be zoomable. That's why there is this plus and these controls are not important because people are going to use them. These are here just because to tell you that, hey, this is something zoomable. So most people are not going to interact with these. It's more like, oh, actually if there's this and this and this. Oh, probably there's some kind of zooming going on here, right? So of course you can use them, but you can use your mouse or your trackpad and you can zoom in and out. I'm with the mouse right now, but you can see that. Okay, now it's zoomed and so I can pan, I can move around and now I can understand like, oh, now I understand what happened.
- [18:53]
B
Right, yeah, the Figma style clustering is nice too. There's so many little things happening in here.
- [18:59]
A
The challenge with this was basically, this is one of the few, let's call them innovations of this, which is all the competitors have, like player play, bar, list of comments. Every single competitor in the space has that. What I wanted to do is like, okay, now you have this as well, which was not in the original version because now people were asking it. So they were so used to it, they're like, okay, I'm just going to add a sidebar. But if you want, this is how you can use it as well, which is all visual. So you can basically interact with it as you would be normally in a video editing timeline. Right? So for example, here, now I have two elements and there's not enough space for them to appear. So what happens is that now there's grouping. This is similar to Figma, where you have comments and you zoom in and out and there's grouping. Now when you group, what happens is if I click on it, it's gonna zoom to the minimum level. There's an algorithm that calculates what is the minimum level of zoom, where both of them are in their expanded state. There's also a second state which is like if I start to zoom out and you see that now they collide. If I take another zoom, one of them is going to be collapsed in this state. And again if I click, it's going to expand to the minimum level to which the timeline is expanded. The grouping system, it took a lot of iterations to get right because there's so many things. Like for example here there's three elements and then two groups can collide as well. And so they're going to be merged in a bigger group. Or a group can collide with a collapse element, or a group can collide with a full element. So there's also a little springy animations where a group is created to give you that idea that they kind of group together. That's been quite complex to do. Also there's different shapes. Like this is a circle. It tells you that it's a different shape than this, which is more similar to an element. So the circle tells you, hey, there's more of one and the rectangle tells you there's only one.
- [20:44]
B
How are you keeping track of all this? How do you make sense of all of these different possible states and build something that is elegant? Is it all happening at once? Do you sit down and map it all out? Is it you add one at a time and play with it and see where it breaks.
- [20:57]
A
It's a lot about playing with it. So when I think of this, I do it of course with the AI, but I know to code, I know it's good. I read all the code, I'm writing like maybe 5% of the code and it's mostly like front end changes. What I care about is that, okay, is the AI planning it or developing it in a crazy stupid way and that I can intervene. So it's mostly about code architecture rather than I don't give a crap about the cleanest code and the most compact. I don't care about that. But I care that the architecture of the code and like, okay, everything is centralized. There is not five functions that do a slightly different thing than one another or the backend architecture is done properly. Like all these things that are important. But so for example here it's a lot about all these little front end tweaks and interactions and mouse versus keyboard versus mouse pad in Trackpad. So I just use it. So I start with an idea of what might be the edge cases here. So what I would usually do in this case is, okay, let's say that now we have to build this expandable timeline. Imagine that we have the list of comments, we have a timeline, we have to create an expanding thing. The first thing I would do is I do research myself. But in the meantime I send off Claude code, which is my main coding model that I use. I send it off to do some research. What is the best? Are there some libraries pre built that already exist that do timeline expansion and contraction? Okay, cool. And then I see, okay, are they viable to implement? Okay, then let's try it. If they are open source, then it's fine. A lot of the times, like in this case, I found that there are some limitations to those. So I'm like, okay, we're going to need to build it from scratch. I ask, okay, like, are there some best practices that we need to build that we need to take into consideration when we are building a system like this? And maybe it's about, okay, like when there's like 200 elements, we don't need to render those outside the viewport because the performance can get lowered and like all these little things that usually the AI can just figure out and get from documentation on the Internet. And you're going to be like, okay, we need this, we need this. This is too, like, we don't care. This is too much of an edge case. Let's take it for later. So it's going to create like a first version. And already in my prompt I can think of some edge cases like, okay, what happens if two things collide? And I tell it, I tell the AI, what do I need to happen in this case? Like, hey, if they collide, then they are grouped together. This is a bit more complex. And then I start to use it and most of the time then I notice the things that are wrong with this. Like, or okay, actually if we are on the corner, if we are on the, on the. Like. One thing is that if I am on the edge here, if I'm all the way to. Let's say that I move this here, you see that now it cannot go past the end. Like now there is an exception so that I can move the indicator, but the comment stays there. And that by the way, affects all the math of everything else. Do I know by heart every line of code behind this? No, I don't, but because the risk is kind of more limited in the sense that it's more of a front end change than like a security backend thing. I'm okay with it. And I just use it until it feels good to me. Use it until I think there's some bug or something weird. So another thing that is kind of more hidden away in this is. Let me see. Okay, so let's go back to a simpler example here. So with the playhead, what can happen is that, okay, I'm in this situation and now the feedback I got from people at the beginning it was more like Figma, where you have this, this bar right here was more like, okay, I create a rectangle and then it's in this kind of plus create mode and then I draw a rectangle. But what all of the people were doing in my user tests was basically taking the comment button. It becomes a plus. And then they were always trying to find the playhead and put it onto the playhead. So at some point I'm like, okay, people just want to create things where the playhead is fine, I'm going to make it simpler. But now, for example, this is an edge case. You have this timeline here. The playhead is not visible in the viewport. So when I hit C, which is my comments shortcut, or I click on it and I focus on the toolbar here, the viewport auto moves so that the playhead is centered. Then like, oh, actually, yeah, I'm creating something here. And there's this pulsating thing which tells me where I'm creating, creating things. And I can tweak it as well. I think, like a lot of the design theory would tell you, oh, you have to think about feedback. You're not going to think about it until you try it and you feel that, oh, I created something but I don't know where. And then you go ahead and fix it. So it's just, it's a lot of, you know, trying it out yourself as you build it and making sure again that you have a high standard for, for all the things that, that you build or another one is. So let's say that I start to zoom in and I have this display head that moves, right? So it's moving, it's moving along. But you notice that the timeline is also slowly moving so that I can just watch for the entire video and don't need to scroll manually to follow the playhead. But an interesting nugget is that this is because one of my users was like, hey, I find myself scrolling all the time to follow my playhead. Can't you just do it automatically, just like Final Cut does? I never use Final Cut. So I just downloaded the trial version and I spotted an interesting thing that Final Cut does, which is that of course when you start to play like, you see that now we start the play with the playhead in this position, like on the edge of this of the video. So if I hit play, the playhead is slowly but surely gonna move to the center because the speed at which the timeline is moving is a bit faster. And so if I now go 2 axis speed, it's gonna do it up until it's exactly in the middle. And now it's gonna stay in the middle and kind of be fixed over there. And same thing like this. If I put it here, you See that it's slowly going back so the speed adjusts to center. It's a small little thing. If I didn't see it in Final Cut, I would never have thought to implement it into flask. But it's like, oh, this is cool. And it's a nice detail that you know, probably most people are not going to notice, but it's cool. And now it's gotten to talk about it in a podcast. So.
- [26:56]
B
Okay, so. So you notice the detail, you want to incorporate it. Maybe you don't remember, but like rough idea. How easy or hard is it for someone like you to then implement that detail with cloud code? Did this take a whole day? Was it pretty close to that?
- [27:10]
A
No, I wouldn't say the hardest things to implement are the boring ones like authentication done properly. Backend stuff like the weeks that I find or where I work the hardest and are the hardest to do is for changes where if I made the change, the product looks exactly the same because I've done some like backend migration or like for example, there was a change where before you would have text type comments and then recording type comments and then screen type comments. So free types of comments. And now for example, if I do a voice note like la la la test and I can also go ahead and in my clipboard take an image, a view and these are all attachments to a comment. And this might look like a small change, but now I need to completely re architect the database, migrate all from the users just to allow this. But now I'm much more flexible because if tomorrow I want to allow, I don't know, like, I don't know, 3D models, I'm not going to do it. But 3D models as attachment, they are just another attachment in the possible like architecture of attachments. So it allows me to be faster later on. So to be honest, like implementing something like this, adaptive playback speed is the easiest thing to do. It's more about noticing that the product needs this small tweak rather than the complexity of implementing it. Now, does the file with the actual code look bigger? Yes, of course. But I'm not trying to optimize for like this leakest code ever. I'm trying to optimize for the most robust and proven architecture on the code side, on the technical side that allows to get a cool experience on the user front end.
- [28:49]
B
My assumption is that's probably the answer that people were wanting to hear anyway, given that it's, you know, designers, people who maybe don't have this robust engineering background, background and that's, at least for me, why I'm so inspired by what you're doing, because, gosh, you've been able to throw the ball incredibly far without a dedicated full stack engineer who's handwriting a bunch of code, you know, so maybe we could even tap into that perspective. You said you wrote about 5% of code, which is maybe 5% more than most designers, given the fact that, you know, since whenever March you've been relying on cloud code heavily, building a lot of code with AI. Are there different tactics you've adapted or things you've learned or ways that you've maybe tweaked your process? I know you mentioned the intentional, like, deep research to find libraries up front. Anything else that aspiring builders could learn from?
- [29:40]
A
I don't write all the code, but I'm very attentive to what Claude writes. And this is where I think, you know, having a bit of a technical background helps. Again, I'm not the best engineer in the world, but I can understand when Claude is doing his thing and writing and explaining to you, like, as it does when it's doing some bullshit stuff like complex implementations, edge cases. That's where I stop it. And I'm like, no, we need to architect it better. So usually if I have to start with my process from the beginning, let's say that I have to implement a new feature or something, a lot of the things are boring and have been solved thousands of times, like, I don't know, authentication, how teams work, like how permissions work for something, or how does a sidebar, how do you resize something? These are all things that have been solved already. They've been solved from a design standpoint and they've been solved from a technical standpoint. Like, how do you architect this? Right? So for example, right now what I'm doing is I need to do one of the boring things, which is re architect all the permissions and what users can and cannot do, depending on, are they guests, are they not, are they admins? And now I'm finding out I sense cloud code on its own research journey. I myself started to do some research and then I send Gemini, which I think the Gemini deep research is very good. Like, okay, what is the best practice? If I think about notion figma, they have very strong, like a very advanced permission. So do everybody follow the same pattern 90% of the time? Yes, because it's what works best and they all kind of converge to that solution like 10 years ago. And there's probably some Wikipedia or some tech blog or Something that explains like, hey, this is the pattern that you follow. You have like, in this case it would be like a table where you have all your roles and all your actions you're trying to do and you match them. And you have whenever an operation, you try to do an operation, you do a check with this table. And so now you're like, oh, okay, that's how the industry does it. So we're gonna do it as well. So the next step is, okay, is there a library that's open source where someone has already done this for me? In this case, let's say that there's not. Okay, so then we're just gonna build it. But now you have an understanding of how the industry does it versus, hey, we need proper permissions for our members. And then Claude is like, okay, I'm just trying to try to do my best, right? It's like saying, I know how to draw, but I'm trying to do impressionism. But then I have never seen an impressionist painting. Right. If this is an already solved problem, then just stick to what works and don't try to innovate. And then just pick your battles. Pick those few things that are really unique to you. For example, the expandable timeline. Okay, that's something that no one else has done in this way. And that's where I'm going to spend my time and make it really mine. But do I want a super custom permission? No, I just want what people are familiar with, what's easy to build, because it's not in my core proposition of having the most advanced permissions in the world. Like 90% of the things you do are like this. They're like being solved by someone before, either technically or design wise. If I make another example, like, do we want to go and build a new way of selecting and creating tags? Right. This is, I'm not ashamed to admit it. It's copied from Notion because they did it so well.
- [32:43]
B
That's where I would look too.
- [32:44]
A
Yeah. So like, okay, you have your list and you can navigate with the keyboard and then I can start to type. And if it's. If I type fsa, it's a filter and then. Or it's a create. Yeah, it's simple, it works. They've done it. People are using Notion already that are probably using Flask. So why do I need to reinvent the wheel here? Unless this is my core thing that I want to do better, then there's no need. So in this case, I didn't copy the technical side of it. I copied the design side of it. Most of the boring technical things, they are again already being solved. In some cases there is a best practice, but it's so complex that you might want to offload it someone else and pay them. Like for example, at the beginning, like, oh, I'm just going to store and process my own videos. That's a company in itself. So especially like If I had 10 engineers that are expert with video processing, okay, I can do it. But at the moment I'm not. Now, if you ask Claude to design, to build this, what it would do is, oh, let me write this from scratch. And I would say, no, let's go and find some developer that has done this, has been solved like thousands of times. And look at that. There's some libraries that do this perfectly. So we're just going to use them and just, you know, there's a documentation, Claude is going to read the documentation and it's going to implement it. And even in my app now, there is one function that is kind of a utility function. And every piece of the app now or in the future that needs a calculation of time ago between two dates or two timestamps it's going to call that. And probably some engineers that are watching this are going to be like, yeah, duh. But this is how you build something that is scalable and hopefully has as little bugs as possible. Or for example, here you see that now if you have this, if you open a folder here, like you preview a flask, it has this sidebar right here, which tells you, okay, this is the asset, these are the comments I can filter. This looks awfully similar to the sidebar inside an individual flask. If I open this one up, would you look at that? It's very similar, so similar that it's literally the same component. There's some different things that happen. Like, this component needs to be rendered in here, but also in the main dashboard. So there's some magic going on to allow that. But I made sure that it's the same component and now I design it. And I design it in a way as well so that, okay, the things that are here make sense both in there and in here. But now we have one centralized component that does both things. And it's not to passion designers, but like having that technical, you know, actually I need to implement it later on makes you, you know, change your perspective. Like now you think, okay, I need, I want to preview something here and I have a page where I have actual information and like actions about my, my flask. In this case. So if I didn't have to implement this, I would be like, oh, let's create a new preview thing that's perfectly optimized for this and it's gonna have a 60% of that and then another one for here. Now that I have to build it, I'm like, wait a second, can I just use the same. Literally the same component, maybe with some conditionals of different things, but turns out, I think yes. So that's how it came to be and how it works like this.
- [35:48]
B
So basically it forces a level of system thinking almost.
- [35:51]
A
Yeah, it forces a level of system thinking. I also think, like, do I really want to implement this like super perfect design that I, that I created for myself, that it's such a pain in the ass because it has so many edge cases, but it's just to make it look a bit more beautiful? Probably not. And that's fine. And that's what gets to the 9010 that I was talking about. Now, is it an excuse to have like a shitty working component which is the main component of your app? No, that's what people look at. That's what people. Oh, this spring animation is cool. If I put a springy animation in some like godforsaken place in the ui, nobody's going to notice it. But the work here, I think is going to pay off because it's the main piece that you're going to interact with.
- [36:26]
B
So I couldn't help but notice you also have a little Figma file going. So can you just talk about what are you doing in Figma versus in code? My assumption is the bulk of it's in code, but there's a lot of stuff in here too. So how do you think about the different tools that you reach for?
- [36:41]
A
Yeah, I use figma so much that I'm on the free plan because with my experience with Maze, I'm like, when I started this, I'm like, okay, I'm just going to design it as my designer would have done at Maze, right? So, okay, let's build all the components with different states. And this has been sitting collecting dust for months because at the beginning I'm like, yeah, let's do all this. And it is helpful at the beginning. But you see that the more I go right on the file, the more messy and random it gets. Like, this is complete chaos because it's. For now it's just me. And maybe if some more people come along, it will become more organized. But figma4b has been mostly useful in two places. One place is very, very high level. Like I need to think about how the redesign of a screen would look like. So for examp. And I do it in a very crappy way, to be honest. Like, let's take the, I don't know, the dashboards here. So, okay, like, let me screenshot how like Google Drive looks like. Or this is the old flask or this is Frame IO, my competitor. This is Figma and I got some inspiration. And then here what I would do is like, this is not like a fully designed ui. This is literally screenshots. So this is a giant screenshot of flask at the moment. And I just blacked out the bottom. Like, oh, what would this look like if it's like a Kanban board? And so then I created some like quick rectangles and this is literally a screenshot. I think you can see the edges a screenshot of flask at the moment because I didn't have a fully up to date Figma file with the latest components as they were in the ui. And I don't care. I just like, you can see that the indicator got cut off here because even this, this is just a screenshot, it's not like a real component. So all I need is how would this more or less feel like if it was a Kanban board? Will look like this. Okay. Then it could be useful or not useful or it might be a good direction to go into. Or not. Or like, yeah, vertical board view. Like what if we have a Kanban that is vertical and it's kind of your scroll? Could it work? I don't know. Let's try and see in five minutes how it's looking. Like, does it need to be perfect also? No. Or like here. Okay. Like this new. This is a bit more refined, but again you see that the flasks don't look anywhere close to the final ones. But I don't care. It's more like, give me the gist of like as a structure. Does this make sense? So this is one way I use it. Like super high level, very rough.
- [39:01]
B
It's like sketching. Almost like you're just like sketching high level IA kind of stuff.
- [39:06]
A
I think this is basically wireframing just with a bit more styling because otherwise I don't understand it's too wireframed. So that's kind of how I think about it. Or to take some random notes. For example, here I was trying to create a component, the component for the recordings, which is what we saw in this component right here, which is the component that we have for all the recordings in Flask, which is the, like, you have it here but you have it also for audio recordings as well. And again, if you were a designer on your own and someone else has a build is like, oh, let's create the perfect video recording component and the perfect audio recording component. I'm like, no, because I know how the backend works and like I architect it in such a way so that they are basically the same thing. It's just one has video and one doesn't. I want one component that can work in a decent way with both some like a waveform to be displayed that makes Sense and a 16 by 9 video preview to be displayed. So I was just trying out with different layouts and how this could be working and this is not pixel perfect to the final one, but I don't care. It's more like, okay, how do I lay them out so that the information kind of makes sense. And on the other end of the spectrum of how I use Figma for this, I actually need some very detailed things to try out. I don't know, for example, this, this is literally the Play bar, the playbar for Flask. So you see that this is kind of my. I decided, oh, this is a cool color gradient. So I'm just going to use it as my kind of signature play bar effect. Right. I just needed an asset and I just, you know, designed the asset in Figma. And then these are my colors that I also use for my like main CTA and stuff. And that's how I got it. Or like, I don't know, at some points there was some gradienting that I needed. So I just create this gradient with some. Yeah, I don't even know what's in here. Like some layer blurs and stuff. And I just, you know, I use Figma to, to create that asset. Or for example, here are the actual Product Hunt images that I used when launching in Product Hunt. Like you need some images, I just create them in Figma and I, I like to use that. Or now I'm toying with the idea of changing the logo to like character so that the character can have like different states based on, oh, things are saved up or they're uploading or they're recording. And so I mean, I'm not the best like character designer, but it's more like, like, would this make even. I'm probably gonna get this redesigned by someone that's actually able to do this properly, but it's more to get a sense of okay, Would this look decent? And just experimenting with these super small details. So let's say that I want to implement this now. I have some SVGs that I can use or I don't know, possibly can animate for this. So that's how I use Figma or like here again this is another example of some wireframing of how the landing page would potentially be looking like it's just a bunch of random stuff. Like whenever I feel the need I just open Figma here for example, there was some exploration on how this component would look like. So we need to record camera, we need to record mic, we need to record video. We have some options like how does this work? Like when it's recording, how does this look like? It's like a 16 by 9 when it's just text, how does this look like and default focus recording.
- [42:19]
B
I get the spectrum now where it's like. Like things kind of almost feel like granular, more graphic design all the way to very high level strategic. Let's just kind of make sure this general direction feels right and then it sounds like basically everything in between. You're just working with cloud code.
- [42:36]
A
Yeah, I mean if there was a way for this to be perfectly synchronized with what's on the. On the actual product, of course it would be great. But yeah, for me it's not that important. Like a lot of the times I just create something quickly in Figma to just take a screenshot and show it to Claude me like, hey, this is the structure that we need. This is the layout that we need for this stage. I think it works well this way. Once you start to get more established and like you have a proper, you know, like design system that's like. I think it makes more sense to organize it. But for this stage, anything more than this to me would feel like I'm wasting time.
- [43:12]
B
Before I let you go. Kind of want to tap into your perspective as someone who one was at Maze also had more of the product background and hear a little bit about how you've approached user research feedback. I would imagine you're at the point now you got enough users where it's probably mostly inbound, but maybe we could go back in time a little bit before you had launched. What were you doing to learn in those early days? How did you structure different research interviews, any tactics that we could pull from in that bucket.
- [43:43]
A
The main challenge of course is finding users from your target audience. And on this that's why like building for yourself for it's very helpful because yeah, I mean I Am a, I'm a YouTube creator. So I just, you know, called up a bunch of my friends that are also YouTube creators. Like, hey, I'm building something. Do you want to get it on a call? Before I launched anything, before I had anything, it was most mostly on understanding. Okay, is, is there a problem here to solve? And if you, if you really want to get the 9010 of user research, go read the mom test. Like all the basics are in there. Just don't try to lead your users, just lead by. Instead of saying what are the main problems that you're facing? Just try to ask, describe to me a normal workflow for you. Like if you're doing videos, okay, just describe me the video process from start to finish and they are going to then tell you, oh, actually here, now that it comes to mind, there's some problems or some weird workflow that I have to do to do X, Y and Z. I will just take the interviews, just take some random notes and just, you know, all the interviews were me, like I was running them so I just could find easily patterns. Just write down, okay, like this is the general behavior of people. This is how they feel about Frame IO or some other current product that they are using for collaborating on video. I would say that it gets easier, but also harder once you build the product because now you have something to show them and they can use it. It's a, It's a lot about again, trying to remove the suggestions that they give you. Like, hey, I would want this feature. Or like this should work in this way. Like, like this is the stuff that you as a builder have to think about. What you really have to ask is why would you want that? What is the end goal that you're trying to get from like having. I don't know, maybe they say they want an API. There are people here that want a flask API. Okay, cool, I noted that. But why do you want that? Like what is the thing you're trying to do here? And then you find out that they're like, oh, actually I want to have like connected to notion and blah blah, blah. Because I just want a place to see all the latest comments from all my videos that I'm working on. Because I'm a, I don't know, supervisor. Cool. So then what you need to build is not an API but a feed of all the most recent comments from the entire workspace. Sometimes you need to just build what people tell you. Like I've been resistant to the idea of having a sidebar of comments for so long. And then people have been telling me to me for so long, and I'm like, okay, fine, let's build it. And now I actually see myself that it was a good idea and actually use it myself. But it's about deeply hearing what they are, like, what their core problem is and not listen to the solution that they are trying to give you just because, you know, like, they're doing their best. Like, they're just a user. And it would be like me trying to tell, you know, a pro race car driver, like, how to turn better on a corner. The problem to solve is just like, let's not crash. So. And also, your early interviewees can become great evangelists for whatever you're building later on. Like, I got to meet so many cool people from those early interviews, and they are still like, like, actively excited about the product and sharing it so you can cultivate those relationships. And right now I'm trying to do, like, I'm at a later stage, but I'm trying to do this in a different way where now I'm trying to onboard some, like, larger teams, and I might not be meeting all the features that they need or, like, so. So now it's more about, okay, right now, I don't have what you're looking for in terms of all the features, but I'm expanding the product and building it. So just jump on board as a customer, and then you're gonna be the partner that will build this together with. So they're going to be the ones that are really wanted to tell you, like, hey, you should build this. You build that, and then you have the job of taking that information, extracting what you. What you should actually build. Sometimes it's the thing you they tell you to build. Sometimes it's something different that solves the problem that they have.
- [47:27]
B
Well, let me go. I'm quite inspired by your journey and how much you've been able to do by yourself and wearing every single possible hat, from storytelling to design to building and product strategy, I think in many ways, you're creating the blueprint that I hope a lot of people watching the show follow. So I appreciate you coming on today and pulling back the curtain.
- [47:46]
A
Thank you. Thank you, Reed. It's been great. And yeah, big fan of the show, so it's great to be here.
- [47:52]
B
Before I let you go, I want to take just one minute to run you through my favorite products, because I'm constantly asked, what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobbing is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now, I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at Dive Club Partners.