Loading summary
Transcript87 lines
- [00:00]
Rid
How is AI changing the way that we collaborate with engineers?
- [00:04]
Andy Madrick
I took the directory that this was in in the playground, fed it to an LLM and said, make this work in production. And it one shotted it and did it like perfectly, was like flawless. The engineer Rob and I were both like, this is so sick. I now have the skills using these tools to do most of the front end and then ship PRs that I can get really high quality reviews from these folks on what are the best
- [00:28]
Rid
designers doing to own that last mile of craft in COD?
- [00:32]
Andy Madrick
These LLMs are not very good at the last mile of design. And that's still like our superpower. It needs to be our superpower. Our engineers will bring it all the way, like up to 80 to 90%. And then it's up to us as designers to just own the outcome is what we say here at Notion. And I think we have no excuse anymore to not be responsible for those changes that we want to see.
- [00:54]
Podcast Host
Welcome to Dive Club.
- [00:55]
Rid
My name is Rid and this is
- [00:57]
Podcast Host
where designers never stop learning.
- [01:00]
Rid
This week's episode is with Andy Madrick, who's leading the design of Notion Meeting notes. We're going to do a deep dive into his workflow with AI and all of the ways that it's changing what collaboration looks like at Notion.
- [01:14]
Podcast Host
It's a super practical conversation with a
- [01:17]
Rid
lot of screen sharing and we're going to start with a behind the scenes look at how Andy designed one of Notion's most viewed interfaces.
- [01:25]
Andy Madrick
At Notion, we have our make with Notion conference every where we announce certain features. The end product touchpoint for that is always a modal. We announce everything via this big modal that you see on the top left that announces all the features that we are excited about this year. And that Notion, I don't know if it's so much a rite of passage, but it's like, who wants to build this mode? There's a ton of eyeballs on it. Ivan is very involved, which is so cool because I started on this a month after I started Notion and then I got to work with Ivan every day. It is awesome.
- [01:58]
Podcast Host
That's awesome. What does it take to actually go from zero to this modal that is celebrated and that everybody's going to see?
- [02:04]
Andy Madrick
We have this modal, you know, this is what we ended up getting to our final, most polished version. We were really excited about it. We thought it had a lot of visual, like intrigue, you know, make with Notion. It's really exciting. Ivan was talking with Alan Kay, two heroes of mine at the same place. But to get started on this, we just jammed on a lot of different iterations. And for me personally, what was really nice is I was working with a really great PM who's also named Ivan here at Notion. He was able to kind of triage a lot of this stuff for me, and I got to just build. So I started out just creating a bunch of different iterations, right? So I have this guy, but then I have like a million different ones in parallel, jamming on all of them, more or less fidgeting in tandem.
- [02:50]
Podcast Host
Are these mockups like, are you doing this in Figma or are you building?
- [02:54]
Andy Madrick
So this is. This is all in Figma. So my workflow is. I do a lot of pixel pushing in Figma still. I'm showing you slides right now because I'm a bit of a control freak. And so when it comes to, like, crafting things like this, I'm pretty fast in Figma still. I'm actually migrating more and more toward my initial prototypes or my initial explorations being in code. But at this point, this was like, September of 2025. I'm still doing a lot of Figma. So I do all these iterations in figma, and then instead of just sharing, like, Figma links with a bunch of people, I create this prototype in our prototype playground, which is like a very lightweight version of our notion code base, where I just mock these up in code. And now I have a bunch of different versions that I can send out to whoever is interested in seeing this. So it's a lot easier for sharing, right? Like, I have this all in one space. Click through. I can just send a URL to folks they can look through.
- [03:52]
Rid
Never in a million years did I think my design workflow would change so drastically in the last few months. And a big part of it is Paper's new Snapshot tool. It's a Chrome extension that lets you copy any component or element from your live website and then paste it directly into Paper as editable layers.
- [04:11]
Podcast Host
So all the time, I'll grab something
- [04:12]
Rid
from Prod, have Claude immediately, immediately spin it up six different ways on Paper's Canvas, and then when I'm ready to send a concept back to Claude, it's seamless because Paper's Canvas uses real HTML and css. That workflow feels a lot like the future of design to me. And you can start doing this today. Just head to Dive Club Paper to try it out. People are getting answers from tools like ChatGPT and Perplexity a lot more than they're Clicking on Google lately. So if your site isn't AI readable, then you're losing, losing visibility that you can't see in your analytics. So Framer just launched a free AEO tool which shows you how these AI systems read and understand your website. So in 10 seconds it can scan your site, score it on AEO readiness surface. What's hurting your visibility? I ran it on the Dive Club website and I only got a 50 out of 100. But thankfully framer gives me the exact steps that I need to take to fix it.
- [05:11]
Podcast Host
So.
- [05:11]
Rid
So definitely take a minute to use Framer's new AEO scanner on your website. You can head to framer.com aeo to get started.
- [05:20]
Podcast Host
Now onto the episode.
- [05:21]
Andy Madrick
What happened from here is that people start deciding what they like, what they don't like. We started to find that this was the motif that we started to gravitate towards. Right, we have the nosy faces on the left with some kind of asset on the right, and we're like, okay, we're getting close to what we want. So I go in Figma, refine it a little, and then I go back into our prototype playground and I create an additional prototype that uses that motif. And then I allow other people to edit this however they want. So instead of someone giving me feedback on a Figma file, I'm able to like allow a certain level of customizability here. And then different folks at Notion are able to go in, click around, you know, change the titles, change the number of assets here, change the section headers, whatever, and then they can take screenshots and send it back to me. And then we're all like co designing together. But it's kind of like the home screen on your iPhone where you can drag stuff around and drop stuff how you want it to be. But at the end of the day, you're still like on Apple's Rails and it's still like, okay, I'm in this world that's a little curated and opinionated.
- [06:33]
Podcast Host
I love this because I was just talking to a designer who is having so much difficulty collaborating with content teams again, because when it was in Figma, somebody could just click and just edit the text. And for a content designer, there's so much value in being able to write within the context of where it would exist. And yet they're doing everything in code now. And so they didn't have this. Really, really cool what you built here.
- [06:54]
Andy Madrick
Building this was, was really pretty simple. I took the Chrome from our sidebar and I was like, hey, we need to make these text inputs that are linked to the, the content on the screen. And I think at the time I was using composer 1.5 or maybe it was composer 1 at the time and it handled this no problem.
- [07:14]
Podcast Host
That's cool. I have not seen something like this before. It makes total sense to me.
- [07:19]
Andy Madrick
Oh, cool. Nice. So then we got feedback from Ivan, CEO Ivan, and he said I was jamming with him one day. He's like, make it feel like a video game. And he started pulling things around and we got into Figma and he's like, I want the nosy faces to be off the screen, like off the modal. Like I want this to feel like I'm playing a video game and I got like a prize or something like that. Make it really exciting. So then it's like, okay, a little bit back to the drawing board. But that's like the fun part of this, right? We took all these pieces, moved them around a little bit, and then I was thinking about, like, how would I, how would I animate this and what would it look like and feel like? For me, I'm showing this screenshot because I still like doing a little bit of animation in figma. I don't do a lot, but like I said, I'm a control freak. I feel like Figma still gives me a little bit of an ability to control things in a deterministic way. So I did a little bit of prototyping in figma, like very little. I never make click through prototypes in figma, but I will make really simple things like this. It's like, well, if this face does that, then the text moves like this. And for someone like me who's been using Figma for years, this is a lot of the time can be faster than code. I've been doing front end for, let's say 10 years when I started doing this. Figma is still a lot faster. But now these, these coding tools are getting so good that like the speed is starting to increase. So like at the time this is faster for me than figma. But then I'm starting to sketch out like what this animation should look and feel like. And instead of telling an LLM, I want the nosy face here to move to the this pencil, nosy to move to the right and shrink and then fade out and then this will move in. I've had a lot of success sketching keyframes, taking screenshots and just feeding it to Nello and it rocks. Computer vision is so good these days. So I start polishing the UI a little bit here and it's like, okay, we've got a composition we really like. I'm going to get into the nitty gritty even more. I'm going to show like, okay, I want the text to move with the nosy faces. And then I'm going to show like, okay, this is step one, two, three. But I want them to move in this direction. So again, I'm taking screenshots of this and feeding it to composer. And then I get really, really nitty gritty.
- [09:42]
Podcast Host
Oh, this is super granular.
- [09:44]
Andy Madrick
Yeah, I mean, like, I think with a lot of this motion design stuff, coding tools are so good at executing it, but you have to be very, very descriptive about what you want. Otherwise you're going to be fighting these things for like hours and you're going to be pulling your hair out, going in circles. So for me, it's like a picture is literally worth a thousand words. And so, like, I can just do this make like, okay, here's what nosy is going to do. At the end, it's going to come back over here and I'm going to label what state this. And then like we, we come out the other side and we actually have something that works in code. This wasn't one shot. It's like you have to refine it over time. But, like, the animation actually, like worked really well. And what was really, really cool is when I, when I go and I speak with our engineers who are working on this, it's like, how do we translate this from simple playground code to production code? All I did was, was I took the directory that this was in in the playground, fed it to an LLM and said, make this work in production. And it one shotted it and did it like perfectly. The animation was like flawless. Like, like it was so simple. The engineer Rob and I were both like, this is so sick. And then I tell Max, our head of product, about that. He's like, this is so sick that we can do this. Right.
- [11:01]
Podcast Host
I feel like that's kind of the dream setup for so many teams. But you kind of. We're still in this phase where everybody has to build it out of the box right now. But like, what you just des or you have like the lightweight prototype playground. I'm assuming it's probably even more than the 8020 of notion. Like you really get the front end that you can kind of play with.
- [11:18]
Rid
And then that translation step, like if
- [11:20]
Podcast Host
it's anything even close to a one shot, like what you just described Is it feels like the ideal workflow for teams kind of everywhere. It's really, really cool to see your process even involving the canvas too. Like, that full pipeline is neat. It's neat.
- [11:34]
Andy Madrick
We have to build our own workflows for each other in these organizations. Giving people the tools to make really strong decisions is the strongest thing for us, right? Like, we, as designers, we can do that, right? So we can, we can create these prototypes that give people enough freedom to involve them in the process, but also, like relying on our own training as designers to set some rules up, be opinionated. We ended up actually, like, we had a hedge, right? And so we had to build three different versions of this because internally we're like, this new modal variant is really sick, but it could be confusing to people. Why is it a square? Modals aren't usually square. Like, we were worried that it might not convert super well. So when it came to ship this thing, we had to be like, okay, we need one with three heads. We need one with four heads. That doesn't like, animate as, like, interestingly. And then we had, you know what I call the safe version on the right, where it's like, here's our nosy faces and some kind of video playing on the right. And when it came to ship it, we had statsic gates for each one. And we were watching these really intensely. We shipped all three at the same time. We're seeing which one would convert the best. And I always love to ask you, rid were to guess which one of these converted the most, like the highest, what would be your guess?
- [12:52]
Podcast Host
I really want it to be the one on the left, but I'm nervous that you're going to say the safe one.
- [12:58]
Andy Madrick
Well, before I tell you, I want to say like, Ivan. And then our, our head of product, Max, had a bet and they're like, okay, let's bet like 500 bucks on which one's going to win. And I was like, well, we can't bet money. Let's bet like a G. And they. They both. So Ivan bet on the one that you bet or on the forehead version, and Max bet on the three. But I, I hate to say that the safe one did.
- [13:18]
Podcast Host
Yeah, I knew it. I knew it. I was like, almost dreading the reveal.
- [13:24]
Andy Madrick
The, the. The thing about it, the thing about it that my hypothesis. Look at the size of the buttons, man. Like, one had a huge button, the other had like tiny buttons. So we sweat the details on this for like a month, right? And then it just turns out like it's probably just the size of the button. Could you just made this button bigger? It would have, but yeah, that's, that's that little digression.
- [13:45]
Podcast Host
Oh, that's good. Well, I appreciate you giving a little behind the scenes of the workflow and it's fun to see the full end to end process for a product that I use every day. Like, that's always one of my favorite parts of even doing this podcast. You touched a little bit on like showing how you made it so people can like edit the content inside of the modal, that kind of a thing. I'm wondering if maybe there's another layer that we can go into around just given this shift. You know, you talked about how it's a little bit faster to do things on the front end. Now you're moving toward code, maybe starting code more often. How's that changing the way that you are collaborating with the team when you can't just, you know, hop into a Figma file and spotlight someone anymore?
- [14:30]
Andy Madrick
If I'm working on a really big, like reframe, which we're doing right now at Notion is like we're rethinking a really big foundational concept at Notion. And I could just go into figma and redesign every single screen and like give feedback on that. But I found that it's so much faster to just spin up a crude representation of Notion with an LLM that allows people to click around and feel all these new proposals that we're making. So the bigger the feature, the more likely I am to start in code. But if it's a smaller thing like a modal or polish, visual polish or something like that, I find Figma to still be really helpful. And like, personally I'm long on Figma because you can just directly manipulate everything with your hand, you know, your mouse. But I still feel like it's an extension of me rather than like feeding an LLM or writing some front end. And so if it's a tight feature or visual polish, like I said, I'm going to get into Figma, sketch something out and then share that with the team. But like I said, if it's something really big, like we'll just sketch out, like have an LLM, sketch out all these different flows and then we can evaluate and work through those together. Essentially the collaboration part of things, it's more about. And this is a question that's come up a lot lately, you really have to suss out what the people you're working with, like how they want to work with you. And there's no one size fits all answer. If I'm working with an engineer who really doesn't want to work on the front end, and this person just is obsessed with doing the deep dive on the back end and making this thing efficient and performant, I now have the skills using these tools to do most of the front end and then ship PRs that I can get really high quality reviews from these folks on and kind of share the work in that way. Right. Like, these titles are kind of breaking down a lot, but if I'm working with a team and they have bandwidth to just fly on the front end, I can build a crude prototype or even like quick Figma mocks and then we go in and we can iterate on the code together, even take screenshots, redline stuff. And then sometimes like, the source of truth is it's kind of like floating out there and it's more like, well, we wanted to, you know, polish this thing. We didn't put it in figma, but it looks good in code. So, like, let's take a screenshot and that's our source of truth. And I think you'd be surprised how many Figma files in notion are just screenshots of the product. And then like a little chunk of it is a new Figma frame over the top.
- [17:04]
Podcast Host
So, yeah, I did my share of screenshotting Prod and drawing something over it. But also I'm a bit of a control freak when it comes to a design file too. So I was almost always had like, this is the source of truth, or at least a really good representation of what is in prod and it's neatly organized. And I would almost feel this, this lack or FOMO when I knew that a piece of the design was not up to date with what is in Prod. And now that is just completely went out the window. Like, there's basically no documentation that lives in the canvas. The only time is like, I'll use like the paper Chrome extension to just like copy a component from Prod and paste it in. Like, yeah, maybe you can kind of get there. But the source of truth has entirely shifted to production code. And my canvas is now the messiest that it has ever been in my entire career. And it was freaking me out for a little bit, but I totally settled into it now where it's like, I just don't really care what's in the canvas anymore.
- [17:59]
Andy Madrick
That's what everyone says when you're applying to a job as a designer. It's like, what is the number one skill we will look for dealing with ambiguity, right? Like, how do we live in this world where everything's changing and how the roadmap might be nebulous and you might be like, grasping at different, you know, objectives and things like that. And I think to your point, I honestly want you to teach a lesson on how to use paper because I'm following your journey with that. I'm like, I feel like I'm in the stone Age sometimes. But, yeah, you just have to be cool with looking at the thing that users are going to actually see and obsessing over that artifact and making sure whatever form of iteration on that takes, make sure that is going to be 100% and that figma. And these mocks, they're just reference tools. At the end of the day, they have to be accessible by your team and they have to know what they're looking at.
- [18:55]
Podcast Host
But I know the answer is it depends. But I want to go a little bit deeper just to understand how often you, as someone, your job title is just designer, right? You're not a design engineer or anything. Okay. So given that, how often are you actually responsible for some element or some piece of the front end that is shipping on a given feature? Like, is code just a better prototyping tool? Are you owning the front end at all? Or, you know, how often is it just pure mocks? Like, because I'm kind of experiencing that too right now, where it feels like every single project has to be completely ad hoc, where I message the engineer and I'm like, how do you want to work on this one? Because we're all just kind of figuring it out. So can we get one level more specific in terms of how the concrete deliverables change for you project to project, and roughly what the spread is?
- [19:43]
Andy Madrick
For the majority of our projects, I would say our engineers take things to 80%. Some will go 100% if there's bandwidth. But I think that what I've found, my personal workflow here at Notion is I think our engineers will wire everything up, make it very performance, make it actually work. But then it looks like we call like the TEMU version of the product. Right. It's like it's not 100% there.
- [20:11]
Podcast Host
Yeah.
- [20:11]
Andy Madrick
And so what we can do is parallelize the work where I can come in and make itty bitty PRs for just visual polish and finish that last mile. Right. These LLMs are not very good at the last mile of design. And that's still like our superpower. It needs to be Our superpower, our engineers will bring it all the way, like up to 80 to 90%. And then working at a company like Notion, where we are obsessed with craft and taste and delivering a very well boxed tool, well packaged tool, that's up to us as designers to just own the outcome. Is what we say here at Notion. Like it's just on us. If it's not going to get done, then someone has to do it right. And I think we have no excuse anymore to not be responsible for those changes that we want to see. And at the end of the day, these artifacts are extensions of us. I'm on a tangent now, but like these digital artifacts are extensions of our work and our practice and we have the ability now to just own how that gets delivered. So yeah, the answer to your question is most of the time for me, I'm picking up the last 20, or let's say 5 to 20% of the front end work. And I'm not doing a lot of building features from scratch, I'm not building a lot of wiring things up, but I am doing a lot of animation, a lot of visual design, and just anything that an LLM can be really good at if I'm very descriptive and have the language to tell it what to do.
- [21:46]
Podcast Host
So is it safe to say then that if your process is going to start in code, given something larger, where you want to have an LLM just scaffold a bunch of different concepts, all of that is going to be throw away. That's not going to be much of a handoff. At some point you're just going to be like, okay, this is what we're going to do. The engineer is going to probably start from scratch and then you're going to come in again at the end. Does that feel correct or is there situations where that doesn't apply?
- [22:11]
Andy Madrick
I think that's it exactly. But, but I, I wouldn't say that necessarily that, that initial, like scaffolding work, the big prototyping that you're doing, like, even if it's a massive prototype, I think, like the, the classifying that as throwaway work, I don't know, it might be a misnomer because at the end of the day, like, I don't think I'd want anyone to build the app I use every day, just one shotting it with claw. Right. I would want a very thoughtful team of engineers to do what they do and go to town on it. And then the work that I put together, it was just a different medium of putting something on campus.
- [22:47]
Podcast Host
I kind of want to hang out here for a second. So top of mind for me. I know, really deep, but it's so. It's challenging. Like I'm experiencing this too. There's just so many different sequencing ideas to play with and like, when do you insert yourself and what do you own and who actually ships the thing? And because I'm right now, like before we jumped on this call, I have a TEMU version of something and I'm doing the exact same thing that you're describing. Like, I'm probably the last, like maybe 15% and I'm owning everything about the front end.
- [23:14]
Rid
I'm going to be the last person
- [23:15]
Podcast Host
that touches this code too. Like before this goes out the door, I'm the one that's owning every single piece of the ux, how it feels, how it looks, and I love that. That is a little bit more cut and dry for me. Where it gets trickier is, you know, yesterday I'm doing a prototype where I'm going to introduce an entirely new visual primitive that doesn't exist in the code. And, and I have no idea if it's even going to be good. It's the whole point I'm prototyping to explore it. I want to send it to people, I want to have them use it, record themselves playing with it and give me feedback. Then it gets a little bit trickier because I can get 80% of that prototype wired up using the production code base perfectly.
- [23:50]
Rid
But then there's like one schema level
- [23:51]
Podcast Host
change and one or two little mutators that have to be added. And I don't really want to go down there if I don't have to. I'm just trying to make a quick prototype. So now I'm making something that is maybe 50% mock data. Feels real enough, but like, it's obviously not production ready, but the visuals are pretty good, you know, like the engineer definitely does not want to have to start over on this. And so now we've kind of flipped the sequencing a little bit where it's like, hey, I've built the scaffold, it's good. Can you just get the data layer to work on the back end? And there's so many different pros and cons and it's just keeps changing. But I don't know how much you're like experimenting with that type of stuff, but it's, it's really changes the process depending on when and how you insert yourself when you're playing in code.
- [24:38]
Andy Madrick
Selfishly, I'm curious, has that been resolved. Like, how do you like working that?
- [24:43]
Podcast Host
I think it goes back to what you were saying where you almost have to message the engineer, have an understanding of who they are too and just like, how do you want to handle this thing? You know? And I, I don't have a good answer yet. I'm. I'm actively exploring a lot of things, which is why I was kind of seeing what you're thinking about because I'll give one other shift that I've noticed in my own practice and you can tell me if this resonates or sparks other ideas too. But like when we are building a smaller feature that the goal is to actually put something out the door most of the time. Like if it's just front end code, like it's, it's good, you know, like we're not, it's not hard to make good UI based code as soon as it touches anything else. More strategic is where it gets iffy. I've sent some PRs where the engineer is like the fundamental premise of how you built this is wrong. Like, why am I looking at a code diff right now? Like, the fundamental approach that you took is wrong. And it doesn't matter how many little Claude and Codex reviews you had, this is wrong. So now more of the review is actually shifting to planning mode rather than the code itself, where I will like go through a planning mode, get an idea of what I want to do, and then I'll just send that as an MD file. The engineer will review that. If the plan looks good, he can mostly trust that like this is going to not destroy things. You know, like everything else is designed at this point that I, I'm starting to do that a little bit more. But this is why I was bringing it up and why I'm talking way more than I normally do. Because like, I'm really trying to figure this out right now because I don't know what to do.
- [26:13]
Andy Madrick
We're all in this state where you start talking about this. I'm like, give me, give me, like,
- [26:17]
Podcast Host
give me the same.
- [26:19]
Andy Madrick
I want to steal these. I want to steal this. One thing that I found personally is like what I'm going to tell an LLM to do, like an agent to do in our production code base. I don't know a lot of the language that I need to use to get it to do the right thing for me. Right. Like, I'm just not a software engineer by trade. These like agents can be really good at acting as translation layers. So like I could build something that like just absolutely sucks in production code base, but man, it looks so good. And then what I found is like, we can do that and then an engineer can build like the actual feature and then instead of throwing away all the work that we did is like, have an agent be like, okay, I have this feature, I built it, I'm a designer. It sucks, but it looks so sick. And then we have a engineers feature that's like so performant, but it's the TEMU version of this. Can you keep all the functionality of the engineer's version and give it all the styling that I have here? And I think that can get you so much closer than I think, like our intuition says it because like all of a sudden, like it just is. It doesn't have to translate anything. It already has the front end code. It just has to apply the right values to the right things. And so even on the make with Notion model that we did, that was a totally different code base. Right? Like Notion doesn't use Tailwind or shadcn, but the code base I built that in used both. And this was like six months ago with I think it was Opus 4.5. It crushed it. It did it in one shot. So like, that's surprising.
- [28:00]
Podcast Host
I wouldn't have expected that.
- [28:01]
Andy Madrick
I mean, at the end of the day, It's CSS and JavaScript and Opus in particular and Claude in general. Really, really great at front end. Composer really great at front end. Right. Like, and they're only getting better every day. One of the reasons why I've really enjoyed using Cursor is because their harness is incredible. And I just know if I, if I have Composer do a front end feature, I'm like ultra confident that it's going to do a really good job at that. Right. Rather than me hacking in like clock code and trying to like find my way to the right thing. I think there are these tools where you can kind of use them as scaffolds and there's a bunch of pre work that already went in there that I can just kind of steal from and vibe with.
- [28:41]
Podcast Host
Essentially it's the first time somebody's actually said that to me where maybe the harness from Cursor is making front end a little bit easier. So I'm just sitting with it as somebody who. I used Cursor six months ago, but I'm still in Conductor, which I know you've recently abandoned me and went back to Cursor, so it's hard to keep up.
- [29:01]
Andy Madrick
Today in your conversation with Brian Lover, he was Very astute and said, we cannot get tribal about about these tools. Right? We just have to use the right tool at the right moment. I'm still driving with Conductor every now and then. I think it's an amazing tool, but I think for the past month or so, one of the designers at Notion here was like, have you tried cursor 3.0 cursor glass? I was like, no, dude, I am a Conductor life. Like I'm never going to turn and then I open up cursor and I'm like, holy shit. And like, of course, like Rio made it. Like the team over there is just like so good composer. Such a fun model to jam with. And then, you know, they have work trees, they have multi agent workflows. Something about Cursor that I'm loving these days is plan mode. So I have like whatever model, make a plan, creates an MD file and then it renders it really, really beautifully. And it even includes things like mermaid charts and things like that where I'm like, oh, as a visual person, this is a beautiful representation of what you're going to do.
- [30:06]
Podcast Host
Yeah, that's cool.
- [30:07]
Andy Madrick
And it's all in one frame, right? I've got my browser window, my terminal there. If I want to run it in the cloud, I have a VM there and I can just shut my laptop, go do my thing. I know Conductor's working on the same thing as a designer. Seeing Cursor just absolutely. They're cooking with gas over there, like really, really sick. And I feel like we have beautiful to create beautiful tools and I think that that's like a feedback loop and it's always inspiring to see people who are creating these things are so creative and interesting. It just adds another layer of inspiration.
- [30:42]
Rid
There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent network. And it's working. Like right now I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and maybe you want to get on my list, or maybe you're even looking for your next design hire head to Dive club slash Talent to join today.
- [31:15]
Podcast Host
Can we talk about the last mile piece? Maybe the last mile is as big as 20%, which in that case that's a lot. You know, 20% of the design, really, the front end, like that's a lot. So I guess I'm kind of curious. When you are prompting, I'm assuming there's some. You're actually like getting into the code and writing CSS in cursor. I would also assume there's still a decent amount of prompting too. So in the prompting category, how much of this. I guess there's like this spectrum, right? On one end of the spectrum is you are creating granular diagrams in Figma to describe exactly what you want. Like you were showing with the modal animation on the other end. This is allowing for a little bit of wiggle room with AI where maybe I'm intentionally going to not be as descriptive because I kind of just want to see what comes out. How often are you moving between different parts of that spectrum? How do you think about landing the plane on some of the finer front end details?
- [32:13]
Andy Madrick
Right now when I started using Conductor, I got really freaked out because I was not looking at code 24 7, right. And I think this is part of their mission, right? They want people to not use, to like not write code. Because I was writing a lot of front end code before Conductor and still just working in cursor and doing, you know, tab complete, all this, all these different like manual coding methods. But now like if I'm doing the last, let's say 20 to 15% of a feature, I let the LLM build it and I get it to where I want it to be. And I'm not trying to fight it and do a bunch of stuff manually while it's working. And then once it gets it to where I want it to be, I just look at a lot of diffs. Okay, what did it do here? What did it do there? And some of the advice that I tell a lot of folks who are asking about these exact kind of workflows is like your PRs as a designer and not a, an engineer who's got all the training of an engineer, your PR should be very, very small and manageable. If you're not comfortable reviewing the code yourself or writing the code yourself. I think the rule of thumb here is that if you are expecting someone to put more time into reading something like a PR than you put into making it, there's a mismatch of, of work being performed, right? And that goes for like writing docs and stuff too. I want to finesse the shit out of this five line pr. And so then it's so small and easy to ship that I can review it and know like this isn't going to cause problems and I give it to an engineer. They're like, okay, cool. Stamp, boom out the door. We have to break the work into like manageable chunks. Like five lines is not very realistic. But 100 line PR, that's my general advice of like, don't five code a bunch of stuff and send an engineer a 500 line PR that you didn't even review yourself. Because then it's just like an awkward conversation, right? You're like, they're like, hey, what's up with this pr, man? And it's like, you tell me, man. I just kind of like, had some fun.
- [34:17]
Podcast Host
This conversation's hitting a little bit too close to home right now.
- [34:21]
Andy Madrick
No, same for me. I learned these things the hard way. Right.
- [34:24]
Podcast Host
I'm going to go one level deeper on the beginning part of that answer where you talked about how you kind of just get the initial thing onto the page with the model. How much of your goal with that initial thing is exactly what you were picturing in your mind versus do you ever kind of just see what happens a little bit? Like, is that part of your practice? And the reason I ask is because I was looking at your modals with the animation with the little notion faces. I built something very similar yesterday, and it was just for a website little feature card. Not as complex because I was able to fade out the edges with a little bit of like a CSS mask. So I kind of got to play in easy mode a bit. But I didn't really actually have that much in my head. I knew I wanted something to cycle through these logos, but I kind of was like, I just wanted to move horizontally and fade out at the edges and that's it. And I very intentionally did not give any more intent there because I kind of just wanted to see. To see if it would take me a different direction. Is that part of your practice at all? Like, do you think that way or is it very much so, Like, I see the thing, let's build the thing.
- [35:29]
Andy Madrick
That is 1,000% of my process. Like, okay, cool. I think a year and a half ago when I was at Tome Lightfield, that was when I first started using Claude as a collaborative partner. And less so, like, Claude code and like the front end that it's writing, but just like asking Claude questions about, hey, I built this feature. I have it in figma. What do you think about this? My favorite thing about working in Notion is you're just surrounded by really creative, super, super articulate people, but sometimes they're not available. And like last year I was like the only designer right So I have to like use these tools in a different way. I love seeing what Claude, which has indexed the entire Internet, comes up with and how it evaluates my work. I don't think it's going to like give me spot on advice every time, but it'll generate a lot of alternate ideas. I'm like, oh my God, I never thought about doing it that way. And then when it comes to your point too, about making something while like having something surprise you and then being like, okay, cool. I think one thing that I've really enjoyed is that working at a company like notion, there's a lot of like one off components. And we like made this menu its own kind of thing. Like we made a menu item its own menu item style, but our code base has an entire like really robust menu system. What if we just built that like, and I'll just ask Claude, I'm like, okay, we need to like remake this menu, for instance. I want to use the design system as much as I can and it'll put things together in a way that I'm like, oh my God, like we had all the pieces here. We were just like using legacy code for so long and now we have this fresh version of it. We didn't even have to like do anything. Now it's more performant, it looks better, it's more in line with like what we've been jamming on recently. So like all the way from the initial sketching version, and this is, I was using like Claude artifacts a lot. Like, show me what your version of this chart would look like and it'll create something with like a million gradients and like a million tags and it looks like a jelly bean factory. Right? You're like, oh my gosh. But then, you know, we can, you can kind of like trim it down to something that you'd actually be comfortable shipping.
- [37:46]
Podcast Host
I'm totally stealing Jelly Bean Factory. I like that a lot. Like immediately multiple UIs just popped into my head that I'm like, yes, that's exactly how to describe that. Yeah, let's talk about this piece then. Because I think creating wiggle room for Claude or whatever codecs is only valuable if you're able to push back what you're going to get that is generic because it can combine things in unique ways. But like it's still going to be generic, it's still going to be boring visually, emotion wise, kind of almost everything. And so how do you think about that a little bit? Maybe we could talk to a designer who is potentially slightly earlier in their career where, you know, we used to
- [38:22]
Rid
say, like, do a bunch of copy
- [38:23]
Podcast Host
work, make every single visual by hand. And now it's like, well, you don't really do that as often. And so in some ways, I think maybe I have some concern that we lose the practice of what makes for great visual design and what allows you to be creating things that are differentiated. Show restraint. So how do you think about the way to consistently push past what AI is going to give you out of the box?
- [38:47]
Andy Madrick
There is no shortcut to having taste or developing like a high craft, high velocity practice. I think that with AI, we have shortcuts to creating a lot of things. But at the end of the day, it comes back to discovering and learning the language of visual design through repetitions, understanding. Like you said that you use the word restraint, which is like the perfect word. We as designers, our job now with limitless UI out there is how do we take it and make a restrained version of this, where form follows function and we're avoiding decoration for decoration's sake. And so I think my boring answer to you is like, do a lot of visual design. Talk to a lot of people. If there's someone you really respect as a designer, ask them about how they developed their eye, about their taste, what are they looking at, what movies are they watching, like, what books, like, what art books do they like? I think for me, in a previous life where I was working in architecture, everyone's portfolio looked exactly the same. It's like, hero shot, chunk of text, whatever. And it's because online there's just a bunch of portfolios that you can look at and get inspiration from. And I was like, I don't want mine to look like that. And I, at the time, I was like taking a painting class in school and I was looking at a lot of art books and the way that these art books like represented the work and the way that they chunked up the grid and like the really restrained text is all about the work. Just show the work, full bleed. And I was able to create something really just by copying. And so to your point about like, we don't like copy a UI pixel for pixel as much anymore. I still tell people that's a worthwhile exercise. It's less so about, you know, doing a static frame pixel for pixel. But like, the linear sidebar logic is really interesting because if you minimize the window past a certain point, it'll automatically hide itself and the window kind of refactors and reflows and then as you expand it Back and forth, you see, it's really elegant interaction. And so instead of like remaking that in every instance of itself, how can you like redesign that interaction pattern? And how do you learn from like the easing curve of something that's good? How do you know, like, what are the breakpoints that they're using? We have like best practices for all this stuff. But I think all the great people, all the great designers are taking like this common knowledge advice and passing it through their filter of ultra taste and like putting something out into the world and getting into the nitty gritty and understanding like the keyframes of a certain animation, it still is worthwhile to me.
- [41:28]
Podcast Host
I know. I like that a lot actually. Like recreating interactions. You need the visual design foundation in all worlds. But recreating interactions is one of the best ways to practice. And even as you're talking, it's reminding me like something that I've started paying attention to more is where are the best products? Not using any interactions. Where are instant transitions applied? Because especially, you know, your mental model where you're talking about, you know, I'm working on these bite sized PRs, which is very much so for me too. Like, I basically own every P3 bug, right? It's like when you're just staring at a single P3 bug, it's really easy to just make that thing immaculate, man. Every little detail is so dialed in and perfect and moves and it's gorgeous. But then you run the risk of zooming out and you realize again, every single piece of the interface is overcooked. Because I've been looking at things in isolation and now I can control all of those interaction details.
- [42:22]
Andy Madrick
That's right, yeah.
- [42:23]
Podcast Host
Where does linear skip it? Where do they do just instant transitions? Because the pendulum swung almost too far in the opposite direction. I can feel that for myself. And I'm sure people listening feel that as well.
- [42:33]
Andy Madrick
That's another thing, like when I'm looking at or doing like a portfolio review, it's a young designer and it's like it's harder than ever to get a design job these days. And so you got to stand out. And I see so many portfolios where I'm like, holy, like you did so much here. Like you've got an animation here and this button does that and you've got a whole section on this. And at the end of the day, the best way to stand out is to show your best work and to show your best work, like, let it speak for itself, the decoration, for decoration sake. No one Wants that, right? Like I don't need to see an interactive version photo of you on vacation or something like that. Like you just show me what you made last week. Micro animations and animations in general, like they're whole can of worms and like you could teach a whole class, right? There's books written on it. But I think the default is like what does this thing look like with no decoration, with the same size typeface, with no animations. Take that. It's like, okay, where can I add a little flourish of delight here? And how does that help the user instead of detract away from what they're trying to do with the stuff? It.
- [43:37]
Podcast Host
I know you have a course where you're thinking about a lot of these things, everything from like the tooling perspective, but also training this visual eye and all the reps and everything that's put into and everything that goes into that process. So before I get to the final couple questions, I'm curious if you could just share a little bit more for people who do want to go deeper, just who's it's for, what they can expect to get out of it kind of thing.
- [43:59]
Andy Madrick
So the course is called Craft at Speed. Right. And, and the whole thing is about like, even though there are no shortcuts to becoming a really, really strong designer, there are some really high leverage things that you can learn as a designer or a PM or an engineer, someone trying to get into tech. There are really high leverage things that you can learn that can train your eye and instantly make something that's like, you know, let's say a 40% on the visual scale to a 80%. Right. I was thinking about typography and composition and all these different things and it's like there's actually some, what I think are objective principles of good design. And I'm trying to just like share the knowledge that I've, I've gained over the years into that course. And then when it comes to like learning about these things, the best way to learn them deeply is to actually do them. So rather than like teach everyone how to use cloud code, it's like I just show what does my workflow look like on a day to day basis. It's like a two pronged course. Developing a visual understanding and being able to put that into practice and then using all these skills to actually like create an artifact yourself. And you'll leave the class with a new portfolio, website or a, a feature that you want to push to production and you and I can work on that and jam on that a little bit. And we could talk about these itty bitty PRs and things like that. And the whole goal is to just build up the foundation of what it means to be a designer today. Being able to ship high craft, tasteful things using cutting edge, bleeding edge tools essentially. And then, you know, I'm there to give a lot of feedback. We work as a class and I try to lead critique sessions. I think a lot of folks who are designers critique is really kind of intimidating, right? Totally. So I just want to set it up where it's like, hey, as designers are, one of the things that we can do that's going to benefit us the most is working as a jazz band. Right. Sharing our work with people, let people take it a certain way and developing that thick skin so that we can just take the best idea and run with it, no matter where it comes from. And sometimes the brutal truth is like, hey, this thing isn't really good yet, but you have the tools and we can help you get there. So yeah, the course does a little bit of like, it's like a crash course on being one of these titleless designers at a company like notion these days.
- [46:21]
Podcast Host
Speaking of transformation experiences, I want to call back to something that you said to me the last time we talked where you said how working at Tome felt like you came out of the other side feeling like a 10x designer. So I'm curious, for your own journey, what was that transformation that happened for you?
- [46:40]
Andy Madrick
So Tome was, was the highest of taste product out there on the market and it was like a slide deck AI generation presentation tool right when these tools started coming along and it was like an 80 person company. And then when I joined, it actually collapsed into like a 12 person company and we pivoted from presentation tools to actually a totally different market of being an aicr. And so we still had our founders, Henry and Keith, who are like bleeding edge, high taste individuals and we're building this new tool. And so for me there, like I was the only product designer. We had a really, really excellent creative director. His name's Alex Cannon. And like myself, Alex. And then Henry, one of the co founders, Henry Liriani, who his baby was Facebook messenger forever. And then he built Tome. It was just us three in a room every day for three hours talking about the work that we were doing. What that did for me is it forced me to be able to articulate why I made the decisions that I made based when I was creating something. I'm in a room like talk, talk about like imposter syndrome. It's like, I'm in a room with these heavy hitters.
- [47:56]
Podcast Host
Yeah.
- [47:56]
Andy Madrick
And I make something. And they're like, why did you choose to do that? I'm like, bro, it looked really cool. And they're like, I think Henry's word was. It's like graphic design theater. Like, you can't do something for the sake of doing. And so you have to explain the work and you have to, like, dig into first principles. Like, why did you do that thing the way you did it? And it made me so much more. Like, it gave me a meta awareness of my process. And so it's like, well, I want this to look a certain way. Why are you putting everything in a card? Like, uncontain it. Just present the information, use space instead of lines. All these like, very like, base level UI tricks that automatically make your work better. But at the end of the day, it's just like the taking away of all these things that we layer on top of our work. Because I think a lot of the time it's like here in a room with really great designers, you like, you want to over design the product. I think it's like the midwint chart of like, the really great designers just do less, right? And so I think like, just three hours a day for a year of just like really intense crits. Sometimes I came out of it, I feel so good. I'm like, like, Henry loved my work today. Like, I'm gonna go home and I'm gonna have a beer and celebrate. Other days I. It'd be like a five hour day because I did not, I did not. I did so bad. And I'd be like, oh my God. And I'm at the office to like midnight, like reworking something. So having those opportunities, like, critical feedback's intimidating. It's scary. Putting ourselves out there is vulnerable, like, but at the end of the day, it is the best possible thing that you can do as a creative in any field, really, to level up your work.
- [49:37]
Podcast Host
Well, maybe as a parting question, I'd love to learn just a little bit more about your experience at Notion, because I think you're coming up kind of getting close to a year now. You started working on Notion meeting notes. That culture is so incredible, right? Like, I've always looked up to that group of people and the designers. Just the quality of product that's come out for years now. So are you able to reflect on your journey so far and see ways that being in that environment has continued to grow and shape you?
- [50:04]
Andy Madrick
As a designer, the saying like, if you're the smartest person in the room, you're in the wrong room. And I feel like, like any room I go to in notion, I'm like, okay, I'm in the right room because that person's here and that person. And like I, I sit right next to one of our design engineers, Cole Bemis. And then I got Brian Lovin, you know, two desks away and then I got all these like just the most like talent dense row over here in the world. And I think that like just on a day to day basis, the small habits you pick up from other people. Kathy, our designer, is so, so good at collaborating with other people. And I watch her and how she brings other people into the process at all times. And then like Ken Chen, he's the best designer I've ever met who can look at something that you've been working on for six months. You're like, oh, I just needed to be perfect. But it's not working. He'll look at it and he'll be like, oh well, that one thing is off. If you do that, the whole thing's going to be good. You're like, oh my God, oh my God. And it's just so nice. But it all starts at the top end. Notion. And Ivan and Simon, our co founders are like, Ivan, he freaks me out because not only is he the most tasteful, timeless designer at the company, he's also extremely, an extremely good engineer. And Simon, our other co founder, is on constantly on the bleeding edge of using these tools to build different things and things like that. So I came in here like the first time I interviewed here, I didn't get the job. And so the second time I interviewed I was like, I'm going to make sure they don't regret this decision. Right. And so I just try to like take everything that I'm learning day to day, put it into my workflow. It's such a wonderful place to be because there's always some new thing we're going to build and we have so many customers that use our product in so many different ways that the possibilities are endless. It's the most ambiguous place I've ever worked because of that. We have such broad range of work and it's just a blast and, and doing something hard every day. You go home at night and you're tired and you're like, oh my God, like, how am I going to do this again tomorrow? But like, the work is so interesting, fun, that just keeps you coming back and just keep chewing on it more and more.
- [52:12]
Podcast Host
Well, I'm grateful that you took the time to come on today and give us a little glimpse into this workflow. It's very clear that you think deeply about this stuff, that you care about it. And so it's just, man, we're in a time right now where it's so helpful to riff and experiment, but then have these moments where we can just kind of, like, share notes. Hey, what are you doing? What's working? What's. You know? So I really appreciate you kind of bringing your notepad today with us, and it's great hanging. Andy. Thank you.
- [52:37]
Andy Madrick
Thank you. R. This is. This is amazing. And I'm going to keep stealing ideas from you, so keep them coming.