Josh Puckett - Crafting interfaces with uncommon care

What does it look like to demonstrate uncommon care in the way that you design and build an interface? All of these details communicate to you. Josh really cares about design or about this experience. And that builds trust, that builds perceived value. Your affinity to this product increases because it works just a little bit better or definitely than you expected to. Just going the extra mile is communicating to your user like I value you, your time, and I care about you. How do you collaborate with AI to nail the finer details of craft? What, I think we should all be trying to push towards now that we have tools that help us go further and we can get there faster. We can explore more surface area and we should use them for things like this. So instead of creating more scope, right, how do we take the limited amount of scope that is really essential and just executed to a bar that folks maybe haven't have never seen before? Welcome to dive club. My name is Rid and this is where designers never stop learning. Today's episode is with Josh Puckett who spent nearly two decades designing products like Wellfront, Dropbox, and helping dozens of startups. And recently he released Interface Craft, which is a library of everything that he's learned along the way about designing with uncommon care. So I asked him to share some of those ideas with us today. It's a super practical conversation with a lot of screen sharing and I wanted to start by having him walk us through the onboarding flow because it is truly world class design. If I'm marketing a course about, you know, uncommon care really to go into the extra mile really, you know, trying to lead into the originality that we can kind of create and express ourselves with. It was important that onboarding feels like special, right? So then that's where I came up with this idea of library cards. Well, what if I gave everybody a library card that they could, you know, customize or sign take away for themselves. That would feel like a fair trade of like cool pre by this thing that there's really no content for and a great you get a little token. The other thing in my mind was like, how do I take over design Twitter? Like how does this go viral in a way that feels unique and you know, there are obviously aspects of onboarding that other folks have done. Like art browser or you know, drop box back in the day, many onboarding experiences give you some token. But I haven't seen any really kind of take over in the way that I wanted to. And so there's a combination here of me designing things, but then also allowing you to express yourself in the form of signature. So perfect. This is the flow for. You would come from stripe and then you would see this right. For most folks, they see this message. There was something I wanted to do for folks I knew personally where I actually wrote them a small personalized. So on the off chance that they bought this and signed in, they would see something like this for me. That's another example of like cool. I have a bunch of time with AI now that I can like do want to write 50 messages to folks I know. And that was the most fun to this for me. Oh, yeah. There's all these people I've worked with who have influenced me. You have taught me. It didn't start out like this. When I first started exploring, I was like, what if I just have like five cards and you can just pick one and sign it, right? Obviously this prototype is like super janky. That's fine. Like all I'm trying to figure out here is the mechanics of like, does it feel good to fidget with cards in this way or like does it feel a little bit limiting. What I didn't like about this is one. It kind of communicates that there's only five different cards to pick from and I had an idea from more colors, but. Just didn't feel quite as exploratory or fidget ability is one attribute that I've tried to and be in the whole product. Like there are things that feel tactile you can move with them. You can like select them. He invoices a real piece of paper that unfolds if you want that. And so this didn't feel quite right. I mean, directly interesting and you can see how starting to explore these generative graphics like on the cards themselves. But then where I ended up going was like, well, it should just be an infinite canvas. Like once you get in here, you can just scroll like any direction. There's only 14 color combinations, which is kind of a lot. But when you present them in this way, it feels like, okay, it goes to cool. Yeah, I want to scroll and pick which one is right from there's something for everybody right there's like classic. All right, you're a designer pick black or cool, I want something a little bit more colorful right. And so this is another example of like this feels kind of fidgety like being able to select the card cool that card transforms into what you're actually doing. So you can edit your name. Then you can sign your card. And so this was I think the big reason why that's a horrible signature. Some folks shared recordings of them like trying to sign it and folks spent like minutes trying to come up with the perfect signature. And I think that's the aspect that really help people want to share it and one reason why this kind of went viral was because in addition to me designing graphic and you can pick a color. You could express yourself maybe you just want to sign it or maybe you want to draw a smiley face or like a piece of art. Some people drew different scenes on it. And so that co creation, I think helped it feel more personal to people. And is what made it kind of resonate so much of like, okay, all I did was this random course from this rainbow that I don't know. But then I'm already now feeling like a kid again getting to craft and make like an actual library card. At this point when people had bought I had no content yet library didn't exist. What I then had to do and what's the library came out. There's about five weeks actually know is almost exactly four weeks. I love to the website on January 13th, a day before my birthday. And then the library opened on February 10th. And so between that time, you know, I was obviously creating the course content and the platform. And so once folks came back, I felt two things. One, a bit of pressure to like, okay, how do we how do we raise the bar again? You know, once you have access to this, how do you actually one use that card that I gave you that feels very real physical. And how do I take it even further, right? Real quick message and then we can jump back into it. If you're still designing in Figma and rebuilding in Framer, then you're doing twice the work. With Framer's design pages, you no longer have to jump between tools. In the last page that I made for the dive website, I explored and built entirely in Framer. You can sketch, iterate, structure, and publish to the web all from the same place. Framer isn't just a site builder. It's a design tool for your entire workflow. And you can start creating today for free at Framer.com. And if you use the code RID, you can unlock a free month of Framer Pro. Their legitimately might not be a tool that the design industry agrees on more than Robin. Over one million designers from companies like MB&B, Uber, Headspace, all use Robin for design inspiration. And it makes sense. It's one of the highest ROI investments that you can possibly make as a designer. I use Robin almost every single day to look at real world examples of how different products handle specific UI patterns and flows. It's invaluable to my practice and I can't recommend the product enough. So head to dive.club/mobbin to check it out today. That's M-O-B-B-I-N. Now onto the episode. At this point, I had already had a lot of ideas for different graphics that could be on the cards. Yeah, so this is a playground I made coming up with the graphics themselves. This has since evolved in some ways. I released a tool called Balkit that effectively, about a design version of this configuration panel. It just makes it easy for folks to work in this way, right? I call it either live tuning or parametric visualization. The big idea here is that if I have different graphics, these are all driven by some parameters, right? They're going to some function. In this case, it's pretty simple. They're all generated based off of a wave function. And then obviously different kind of permutations of what that's driving. But you can imagine in Figma, I could have started and tried to design like end of these. I thought maybe it should look like this. But it's like, OK, that would take forever versus, hey, I can just make a tool to make this thing. And I think some of your other guests have also, you know, are going to using this idea. But the whole thing here is you want to be able to ask quickly as possible feel in reality, what the result is of your choices. And so this was how it came up with like, all right, here's the one that feels, you know, right for this version. Well, the library opened their four different graphics. And I'll walk through that on board. But this was my way of figuring out like, all right, like what looks good, you know, like small, large, there's all sorts of different controls here that I can choose to end up with different graphics themselves. Sometimes you want to see like a million of them, right? And so this is the cool thing about, I think, me, I know. So you can be like, hey, cool, computer, go generate like a million different permutations for me. Where it's picking different parameters, just randomly that I maybe never would have come up with, right? And so for some of the these different combinations, this one right here, the third one where it's like, like I wouldn't have done that. It feels a little bit too heavy to me of like the whole thing's like a tunnel. However, it's super dope, right? It's kind of cool. Yeah, it's kind of cool, right? You built a design tool that basically is perfect for your use case. I'm sure that there is at least some subset of the people that are watching this right now that are like deeply intimidated by what they're looking at. You know, like, there's no way that I can make something like that from scratch. Yeah. And maybe they've even seen a few examples of tools and it still is just really, really daunting. Talk to us a little bit about what it takes to pull something like this off. What this is is just simply a grid that has different rows. And within each row, there's a number of items. The opacity of that item is driven by a wave function. There's obviously some more like, there's more detail maybe in there that we could go, but in terms of recreating it with AI or creating it from yourself, you could just say, probably something as simple as like, "Critographic that is a series of rows where each item within that row has a different opacity that is controlled by a sign way of give me sliders to control the amount of rows, items within a row, range of opacity and factors of the wave. Make the background for the graphic, black, and the items white. That's a pretty rough prompt, right? That's just off the dome. >> Pretty good, though. It's still pretty good. >> It's something that I'm trying to get better at is paying attention to the specific words that drive really good outcomes with AI. So for me, I haven't been using sign wave, for instance. >> Yeah. >> That makes total sense. That is a little thing I can just take into my practice. And now I can recreate that very, very easily. >> What you know that idea of a sign wave is a way to create a generative graphic. There's a lot of other ways of doing it. You could use a time stamp. You basically want change over time. You could go really deep in that idea or you could just think abstractly. I don't need to know you as a user don't necessarily need to know the math. What is the equation for a sign wave versus a cosine wave or any of that stuff? All you want is the intent. And you wouldn't even have had to say actually sine wave. You could have described like, I want to grid where each item has a slightly different opacity and it's dynamic. I bet AI would either use wave functions to drive that or some other thing to get you the result you want. And so if you can see either in your mind or you have a reference like, this is roughly an approximation of the outcome that I want. AI is pretty good about helping you get there. And then there's a bunch of tuning right to like get it. Even the tuning though I found I don't actually have to have the language for like I was playing with a shader the other day. And I don't know what the correct language is to control a shader and I just said, just give me all of the relevant controls. And it gave me a bunch of things that I'd never even seen before and they worked perfectly. Yeah, yeah, totally. And that's also a way then to learn right of like, oh, here's how this works. It's driven by like a wave function or whatever. What's more important there is like, you're intent and being able to play with the outcome. Brett, so here we go. So it's like, all right, this was like a one shot prompt that like from my perspective, it's pretty loose and juicy, right? Yeah, so it's like, all right, cool. It already gave us an inferred like, all right, that's a switch. I might want to, for context, I guess reviewer is like, this V0 has no awareness of my code repo. It's just a net new thing from scratch, right? And so that now you can start to play with and see like, okay, cool. What is a wave function like it actually do, right? And maybe I don't want to let opacity go to zero because that's like it's these weird zebra stripes. So maybe there's, you know, higher kind of minimum. Frequency is basically how, imagine a notion with a series of waves, how tight are those waves, how close are they together? Amplitude is basically how big is the wave, like how tall is it? And then phase shift is just offsetting that wave. And so, you know, you don't even need to know that to be able to play with this and be like, oh, cool, like, great, I can make it big, I can make it small, you can control the speed of it, you know, that feels a little bit more manic. This feels like, you know, nice and calm. And that's just like the very first prompt, right? And so extrapolate, like cool. Going from that to, you know, a playground like this, all that is is just going a little bit deeper. I'm like, okay, cool. Now give me, you know, I had no color, like a enum from my colors. That's like this palette, put that palette in there, right? Okay, put in like a random seed so that like the wave doesn't look exactly the same for every user every time they visit. And, you know, different things like, so gap is a good one, right? This lets you get pretty different results. And that's just cool. Give me a slider to control the space between each item. So if you just think about like in English, like what is the thing I want to play with or change or control, these days like, it's pretty good about inferring what specific implementation you need to get that result. I appreciate you walking through that because it does point at the fact that like, it's not hard to build these tools. Like you can create almost anything, which then puts the bottleneck more on like, your ability to explore and ideate. Yes, the creative process. So I guess I'm curious more to dig into like, what you're doing behind the scenes to arrive at this output because you have this, this beautiful metaphor and all these different interactions. We talked about like the visual piece. I kind of just want to dig in more to different axes of your process. There's so much that I want, that I have thoughts on or opinions on or that I want to share. And I don't know yet exactly what form that takes. And so I thought that a library was a pretty good metaphor for that because it is inherently open-ended, right? And so on my desk, I have a bunch of different books where it's like, all right, this has nothing to do with the book that's under it, but I have them all in my personal library. So that was the idea of like the broad metaphor. And then coming up with like, okay, well, what exists in a library? It's like, well, you have shells, you know, you have different areas, you have like a help desk, you know, libraries have events and they also have like library cards. Like that's how access was, you know, it was granted. And so you start thinking down the rabbit hole of like, what are attributes of this metaphor that I could create? You pretty quickly arrive and like, oh, give everyone like a library card, right? So I could have given people maybe like an avatar, right? It's like, cool, here's your dynamic little avatar. Maybe they get like a coin, you know, like a token or something like that. But library card both felt authentic to the metaphor and also a slightly visual thing. And again, have that key attribute of like, I wanted to let people feel like they were creating theirs, right? It's for them. It's not just, hey, welcome, here's your American Express card that's the same as everybody else's American Express card. You get to sign it and you get to make it your own in that act, right? And so the prototype I showed earlier here, you know, this was a much earlier starting point of like, okay, I already had this idea on the homepage of different cards representing the collections themselves. And these already had the graphics in them. And so the library cards are just playing on that idea. Oh, cool. What if we took that same concept of different color schemes, different palettes, different graphics, you know, and combine them into something that you would get as a user? This version though, like this is horrible, right? Like you look at this, you're like, ah, cool. There's only like five of them. It's way too big. The way to choose it is like kind of weird. There's just a lot that's like, directly interesting but not right. And so the process of iteration is how you get from like, it's too big. This graphic is way too finicky when they're animating by default, it's like a lot. And this feels like you're picking one of five presets versus like, oh, it's mine. And that was enough, like for that to go, you know, I think that resonated. But then in terms of coming back to the library, that's like another first impression. I think a lot through the lens of hospitality as well. But that's a big source of inspiration for me. Thomas Keller or your other famous chefs where they are pure designers and artists. All they think about is how do I give you something that you need, which is just a meal, in a presentation and in an experience that you will think about for the rest of your life until others about. To me, that's like really the purest form of design where they're solving a problem, which is like, great, you need to eat food. We need to make food for you and you pay us for that food. But they're wrapping it in an experience that makes it feel so unique and so differentiated. So that's what I was going for for this, right? Cool. How do you come back to this library? Use that thing that you, that object you already made. But how do I take it even further? And so this is the onboarding flow for, once the library opened on February 10th, you're sort of coming back, right? And so you probably had forgotten what your card was maybe or you had some notion of it, but you didn't really know. And so the first thing is like, great, here's just a quick teaser. I wanted you to read this and pause. That's why it's very minimal. And then I show you your card. So this is my real card, right? It previously would have looked like this, right? So if I had saved that, it would just be like this. And so you're thinking, like, I'll get great. I can just confirm if I want to edit my name or signature, I can do that. But then the third step is like, cool. Well, have more fun now. Maybe you want to pick different colors. And so this whole experience here is really designed around, again, just like play and letting you fidget with things. If you want to get into the library, cool, click the obvious, big, black, CTA. That's like, come in. Or great, like, explore the different color options, right? I didn't want to do it in the same way that I had already done it at this infinite canvas. And I wanted to let you go deeper. And so this is just great. Like, here's the different color combos. Here's some controls. There's no labels on them. They're super big and chunky. And you're like, cool, what does this thing do? I don't know. Oh, cool. So as you start to experiment with it, like you get rewarded. And I think all of this is pretty intuitive. But it also, again, is just trying to encourage you to touch things, like moving around. This slider is kind of doing some-- well, both of these sliders are basically kind of magic controls that we can dive into, where. They're giving you just one thing to play with. But it's actually manipulating several different properties at once. And so this color slider is adjusting hue saturation and lightness. Apple does a lot of this. Like, they're operating at another level. The designers and engineers are like the photos team, where that whole constraint is also like, well, if I gave you Lightroom, or if I gave you this, right, this is a more fine-grained control panel. But to you as a buyer, as a consumer, you don't actually want this, right? And so you don't want to take the time to be like, OK, this feels like work. Even if to me, it feels like play to you. Why are you making me do work here? Versus like, hey, you want to change the color great? Just mess with it. There's different things. Try it out. And so I did have versions where it's like, oh, what if literally there were three different sliders for hue saturation, lightness? You can control all of that. But then it starts to just feel too messy. And it doesn't feel like a simple onboarding flow anymore. This slider as well is doing a lot of crazy things. I love that you made it. You didn't have finished loop. So it's so good. Yeah, there's actually a reason behind it. This is a real thing. What I'm calling this is like a Lisa's Hue slider. A Lisa's Hue curve is a concept in mathematics, basically, for mapping values over time. And what it lets you do, one of these is the deep dive on it. One of the things that that, like, you do is solve what I'm calling this like three slider problem. This is just a preview of like another upcoming resource on basically using wave functions in interface design or in graphic generation. So you can see here these are just like quick snapshots of different graphics. And so if you remember from that playground, we're using a wave to drive the creation of all of these things. So here's what it looks like letting you play with the three key parameters one at a time, right? And again, this is fun. It's fine. But imagine like three different sliders, you know, on this page where I also want you to select the shape of a graphic and the color. That would start to overload it like quite a bit. So how do we solve that, right? How do we basically get like one slider that can control three different values like at one time? Did a bunch of digging. I suppose I am a math guy and that is interesting, but I don't have a college degree. I drop that in school. You can just teach yourself things, right? And so this was one of exploring like cool, hey, cloud or whatever. Like how do I how do I accomplish this end goal? Like how is their prior aren't out there in other fields that I can you know that I can run with, right? And so this shows like what at least as you curve is where yet it is it is like literally an infinity simple, but what it lets you do, here's a version here that controls it as your position on this curve changes. It is driving these other two values, right? In this case for frequency and for you know phase. So it is actually a three dimensional like object basically, but what that does is it gives you all three of the things that we want to use it to change the frequency, the phase offset and the amplitude. We can control all of those with a single slider, right? And so that whole idea is basically how do we for both color and for the parameters driving the graphic, how do I give a user just one thing to fit it with that has a really dynamic result, right? In terms of like the expression of what they're creating. And so this did start as like great, give me a fit you know like a frequency slider cool. And it has a little bit of like dynamism in it, but by combining them into into just one thing that's controlling all of those things, you get some pretty like if you look at you know the graphic here as I'm sliding this, there's like a lot of dynamic versions of it in just a simple kind of small surface area. Like maybe that sounds a little bit heady or like academic obviously some of that is I think related to just the idea of like math there, but I didn't know about the elicidure concept before starting this right? What I knew was my tent, which is okay, I want to give you three like knobs. And from those three knobs, I wanted to feel like you can create an infinite amount of different permutations of a library card to make it actually feel like yours like cool, I'm going to spend time with this. How do I do that? And that's a really good way to use AI I think in terms of you just express your problem or your goal, right? Like hey, here's a problem. I want to change three parameters at one time. How do I do that? Right? And so one idea is like, yeah, we could try this you know this these as you curve slider thing it's like, oh, okay, yeah, I didn't know about that, but now I do and that is sick. And I've never seen anyone create like a component that uses that principle and that framework basically. And it happens as you know, to look like an infinity symbol. And so it's like, oh, that's perfect, right? Yeah. And that's that's a good example. I think of so much of design is just iteration and discovery. I might have an intent, but stumbling upon something like this is just sticking with it, right? And just going like one more iteration like I could have designed three beautiful little sliders, you know, for to control a wave, but it wouldn't have been as good as this. So yeah, we didn't have to label them too, you know, like yeah, exactly. If you would have had three sliders, they would have had label, whereas this there's like almost an element of mystery, you know, you're like, what is that going to do when I drag that? And I love that there's no labels anywhere else where all of a sudden it's like, I'm acting almost out of curiosity. In a way, again, it goes back to like your fidgetability, which is totally the new measuring stick that I'm going to have for stuff like this. And it's not having those labels because a really long way. Yeah, I wish my direction was this glaring. It's what you just said, right? When I was thinking about it, but that captures it so well, a lot of just what design is or what I think we should all be trying to push towards now that we have tools that help us like go, you know, further and we can get there faster and we can explore more surface area. And we should use them for things like this. So instead of creating more scope, right? How do we take the limited amount of scope that is really essential and just executed to a bar that folks maybe haven't have never seen before, right? And yeah, there are still problems with this. Like there's things I don't love about it, but I think it's pretty great as far as like an execution of that concept. One thing I'm inspired, I make furniture like I kind of would work on the side, you know, as many designers do, but I'm in that kind of design into woodwork or pipeline. You know, shakers, they make a lot of different furniture and one of their philosophies in furniture making is pretty simple. It's just make it as well as you can and make it as simple as you can. And I think that sums up so much of what great design is in a lot of ways where it's like, yeah, all right, there's three different broad sets of things I want you to do, color specific graphic and then choosing the type of graphic you want. How do I do that as simple as possible? I love that principle because something that I'm finding for myself is it's becoming more important to practice restraint as I can do so many different types of things quickly for the first time ever like I can animate every single thing on the page in a way that was previously impossible. And it's very fun to do so. And so really having to be intentional around like where that line is, we're like, okay, this is additive and now it is too much. Where is the too much line? It's a really big part of designing every day for me. Exactly. Like what you just said, one idea here that I hate from Deeter Rums is like less but better, right? And there's this Bruce Lee quote that I think about often that my co-founder taught Adam Kale, he taught it to me where, you know, it's not daily increase but the daily decrease, hack away at the end essential. I think it would be hard for you as a designer to edit your work too much. It's like you're cooking a sauce, right? You're trying to reduce it. You're trying to concentrate flavor, make it thicker. You can take it too far in, you know, a cooking world, but in the design world, I'm not sure that you can. I think there are still aspects of this that I could have simplified, or we could like improve and resolve. One that's jumping out to me right now is like there's a different height between our toolbar at the bottom of these controls. That's kind of bugging me, right? A simpler, more reductionist view would say, okay, let's just have one height for our controls everywhere. And so I think that practice is one where I see designers limit themselves often by just not to your point. Instead of sticking with it and saying, okay, I'm going to choose restraint instead of adding more, adding more things, more surface area, more bells and whistles. How do I take what I have and just distill it to like its absolute essence? I think that's what makes everything we think of as great design, great design is it's just really distilled and concentrated into what makes it great, right? And everything else is not important. It's nice to have. Cut that, right? That takes time for sure. There's one question that I can't stop asking myself, what if companies apply 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/talent to join today. Okay, hit this back arrow really quickly and talk to me about how you're applying this type of mental model and really boiling something down to the essence of what you want and the feeling you're trying to create. The way that these buttons move, moving between these two pages, the hover states, talk to me a little bit about your process. What are you trying to create? What are the decisions that you made? Yeah, so I think there's a lot in this little control panel that I think it's commonly understood as like morphing, like morphing interfaces. And the person everyone should reference on this is Benji from family. He's just got a Benji.org. He's got a great run up on like I think it's called family values. Family is a crypto wallet that just has an immense level of detail and care applied in the design and creation of it. And this idea has existed before family, but I think Benji certainly executed it at a new best class level and popularized the idea. Anytime that you have these controls on the page, they can be changing into other controls that you need. And so there's sort of an old school way of thinking in terms of maybe front interfaces that is like, well, in applications where everything's just like a crud app, all we're doing is taking content from a database, reviewing it, we're manipulating it. And if you click that button, you get like a pop up that's like, cool, edit your name, done, right? That's like the very unconsidered approach. In this case, it's like, they already have these buttons on screen, right? It's very obvious what this one with the arrow that's literally jiggling. Everyone knows like what that would do. There's an aspect of this of like, primarily this is designers, engineers, people who care about experiences that are signing up for this course. There's also not that many of them. So I'm okay taking more potential liability from like a usability perspective or accessibility perspective because I know it's a small audience. And this is also my thing, right? It's just for me. And so that's like the number one thing is like, well, I'm making this the best for what I want it to be. And hopefully that will resonate. And if it doesn't, I'm fine with it. Again, just a side project. That's important to do in all of your work, right? As a designer, like you should be fighting for what you think is right, not trusting anyone else. Because if you do, you're going to delete that idea. And it's going to be worse, most likely. So in this example, well, when I want to edit the name, two things I'm thinking about, one, I already have the name on the card. So it's already there. That's a potential input, right? Again, the default thing would probably be you click this, you get like a dialogue that's like, edit your name, download or cancel, right? But that would take you out of the flow and that would also, again, weaken the metaphor of like, this is your library card. Everything you need on it is already on it. When you need to edit it, you're directly editing it itself, right? And so yeah, this button transitioning to done, that's just I think a more elegant way or more fluid way of transitioning the state to what I need. So if I'm making something on the card and input, I need some control to like accept that change, right? But I already have a button, so why didn't I just use that button to say done? And yeah, I played with probably, I wish, like always, I wish I had kept all the screenshots and permutations, took a little bit to get this right. But the whole idea is how do I not add more to the page and how do I actually focus you and simplify it? So when you click to edit name, you can notice here, like I'm fading out this CTA because you need to confirm your input. I'm auto focusing the input because obviously you're going to need to type there. So like why don't I just help you and give you focus? And I'm also fading out all the other content on the card itself, again, to make sure and focus. And then the final thing is like the label here changes. Like, okay, maybe someone is confused at this point, probably not, but if they are, you know, I'm changing, well, folks have different names on the author. If you join in the pre-sell, you're a founding member, if you joined after you're just a member. So this little title changes. And so why don't we change that too to just say time to edit, right? This, and again, even looking at this now with fresh eyes, it's like, oh, I don't need this label. Like why do I have done? It should just be a check mark. Yeah, it's too interfaith. It just be a check mark. Yeah, the center alignment on the area. Exactly, exactly, right? And so that's a great example of it. I'm a pretty okay designer. This was executed to like a pretty high bar. And even now we're finding ways to like improve it, right? So yeah, same thing with signature. Like, well, I need a way for you. Originally, when you click this, I had it clear the signature. But then I was like, ah, that's actually awful because that's a destructive button that doesn't look like a destructive button. And so I just added this little thing that's like, all right, if you want to, you can erase it, right? And so then this transition is like, oh, please sign. Then as soon as I start signing, it gets more spacked and done, right? All of these details communicate to you as like the member or the user or the customer. He is taking the time, whoever made this, right? They have taken the time to really like dial in and think about all these details. And that builds trust, that builds like perceived value. And you comply that everywhere, right? SaaS products, Fintech products, whatever it is, just going the extra mile is communicating to your user like, I value your time and I care about you. And so everything else now in this product, you are starting to associate those values. People bought this with like nothing on the web page, right? It's just, hi, I'm Josh. I'm writing about design. I have maybe helped some people and worked with these kind of companies. Please join if you're interested, right? So again, wanted to reward people and give them value even before they get in. And I think it worked like you, well, we have you've gotten to like, once you're happy with the card, you get sort of this experience, right? Where there's two things happening here. One, like there's a little bit of hint to like, okay, drag it down. And then the card's moving, right? And so if you didn't immediately start playing with it, you can, right? I worked with Total Happens Dance. It happened to be in a, in a Slack with Josh Dusterville. There's an awesome sound designer, slash designer, like just, you know, another one of those people, very talented people on the internet. And I shared a work and progress with this and he's like, oh, and it had like some, you know, default sounds that work, right? He's like, oh, should we, like, do you want to jam on 'cause of sounds? I was like, yes, I didn't know that was a thing. I didn't know you did that. I mean, I knew it was a thing, but I didn't know Josh did it. And so literally in like a day, we're just like, jamming on different sounds, like, all right. What if when you drag it, like, if you don't drag it enough, there's a threshold for like, it goes back, right? Again, encouraging play, encouraging fidgetability. So Josh created all these like, very, he has a whole write up on this as well on his website that people should check out. A lot of sounds that, you know, show you things. So this slot also, you'll notice like, okay, we're masking the card when I drag it in. One of the things I was thinking is like, okay, if I gave you a library card, you're kind of thinking that you have to use it, right? It would kind of maybe feel a little bit lame if it's just like, here's your library card, cool. Next screen, you never see that again. Check it out in settings, whatever you want. Exactly, exactly. One of the best onboardies I've ever seen was mailbox. And so Gentry Underwood was the founder and primary designer of that product. This is my old, and he was going to go at this point, my Dropbox. And that team created like a coin where they gave people who signed up on the wait list. They gave you like a literal, not a literal, but a digital coin that you would take and put into like a machine that like, you know, you're redeeming your token for access to mailbox. And I had always loved that, that, that spit out. My memory is like an example of giving someone like a token that that has functional value. It's not just aesthetic, it's not just veneer. And so in this case, it's like, all right, you scan library cards or you, sometimes you put them in machines like a New York, right? If you're writing the subway, you put your ticket in the thing. That was like the inspiration for this. It's like, cool, well, what if you just drag it in? And then there's a success sound that plays there. And it kind of, you know, it goes away. Then this was the whole thing. This is a whole, another thing of like founding members God, I was really fortunate to work with partner with friends at Claude, Barrett and Thropic and Versel to give every founding member like one month of VZero Pro or Claude Pro. Because I wanted folks that signed up from all over the world. And I really wanted everyone to be able to use AI. Not everything in this course or in the library is about AI, but a lot of it is. And it was important to me that folks could try that. And so then there's a whole flow of kind of giving, like how do you give them that in a way that again, feels unexpected, but also feels 10 out of 10. I view myself as like a craftsman, as an artist, as an engineer, someone who cares. And I want everything I do to communicate that. And so then there's a whole question of great, how do you give them those things, right? And it's like, well, we already have a card metaphor that we're working with here. Like you have a library card. What if like we gave you a literal gift card that you could also just scratch off and then see how many credits you get, right? I'll admit, unfortunately, one month of Claude, this is much more like basic, right? And it's like, OK, one, this is a little bit more matches their brand guidelines. Like they're, I think a larger kind of company. Even this is great, but I think the VZero card is just another level above. And so I think someone here have a-- yeah, so this is the playground for this card. Well, there's a lot going on here, but it's all kind of reduced. And actually in interface graph, they have a walkthrough of like cool from Zero to one. Like how do you add all these different layers or how do you composite all these things? But I guess the thing that kind of highlight is like, again, I don't actually know. This is a very interactive thing, right? It's not real light, but it's like simulated dynamic light. There's material here. One of the small details on hover is there's this holographic, the first cell logo is a triangle. So there's this pattern of triangle. It kind of separates. Yeah, it's like shifty as you're interacting with it. So it's like one of the small details that like maybe you don't perceive that in isolation. But when you're using this whole thing, you're like, oh, cool. Everyone has seen just like a little cool user gift card at static, right? Everyone's seen that. What is the best thing I can imagine that nobody has seen before, right? And yeah, there's definitely cards. There's a lot of folks who've done that like cool. There's a perspective, there's a hologram. But I love anyone who's made like a scratch off card that has like custom, oh yeah, you'll notice the zoom in this gift here, like this is a custom brush. It's not just like a circle in code. It's like an SVG brush that I created in Figma. So it looks more real when you're scratching it off, right? Yeah, then Josh created like three, well, first we had just one sound. In the real world when you're scratching, it's not just the same sound over and over. So we actually created three different sounds. And then your direction of scratch, like it changes the sound basically. So it feels more like you're actually scratching it off. This is just another example of like, what happens if you take a very simple idea? Cool, you're going to get credits to be zero and you take it to 11, right? Like what's the best way I can reveal that to someone that feels interactive, it feels fidgetable, feels memorable. There's a lot of like surprises, right? And like, oh, cool, like it's just, it's just a card and then you hover and you're like, oh, whoa, this is cool. And so this uses an approximation of some of the airbrain colors. But all of these sliders help change it, right? You just have so many different properties you can play with that like, all right, let's turn off a lot of this stuff to show like, oh, there's not as much metallic or like reflection happening. So it feels less physical. This is actually not maybe minimalism. This is definitely maximalism. But when it all comes together, it just feels like a simple cohesive thing, right? That you get to experience as a user. All right, I think that's the balance that is so impressive. It's like you know when to show restraint and when to just push way past what anyone would conceivably think of. And I think this is like what you're demonstrating right here. This is what speaks to that level of uncommon care that you talk about. I don't know if I have a good or a simple framework for that. But the one I kind of lean on the most is like conceptual range and then conceptual death, right? So conceptual range is like, what are all the ways? Like, let's say I want to surprise somebody Thank you. the gift of these your credits. What are the ways we could do that? Cool. Number one, it's just a little gift card that appears. Number two, confetti, burst, and 25 appears on the screen. Number three, there's a box that they open up, or there's a piece of paper the day unfold. And again, I'm just riffing on these in real time. You don't actually have to necessarily design all of those, but thinking about that range of like, there's obviously pros and cons for all of those different options. And then once you have one that feels like it works, if what your goal is is to demonstrate what I hope, or what I think of as like a bar setting, or the kind of a world plus level of execution, you just have to go deep. I probably spent as much time on this gift card as the whole of onboarding, right? Because there's just a lot of different layers to it, like both like literally, and then also in terms of like, you know, the interaction of just kind of getting it to feel like what I want to. I want to zoom way out. It's really impressive the quality and the types of interactions that you're thinking through. My assumption is that you're able to push the quality bar maybe higher than you have been in the past. Because you've been designing for a long time. Like this is insane. Yeah. For what you've made. So I'm curious to hear from you. When you think about the value proposition that designers bring to the table, how is your thinking on that evolved in the last even year of going deep into these different types of tools and workflows and explorations? I don't think of myself as old, but we are certainly, you know, we're like an older generation in design. I'm seeing a lot of folks sort of get back into the game, right? Or, you know, it's like we're busy. Maybe we have families or mortgages or just responsibilities, right? We can't necessarily stay up to pull all nighters that we used to to have to execute something like this, right? Like I have the technical ability to like create everything on this gift card before AI. However, I don't even know how long it would have taken me. Like it would have taken me a lot of time by hand to get to that same level. And so what that means is like, well, I'm just not going to do it, right? It becomes irrational to, at some point, right? It's like, well, you have to ship. You can't spend so much time on something, you know? There is some limit to like what you can sort of put in as in terms of your input into creating something. I think what a lot of the coding agents have allowed or unlocked is all of that implementation work can now be done instantly relatively quickly. And so what that means as designers is, OK, those crazy ideas you had, like what if we made like a holographic scratch off gift card? That's an idea that like five years ago, if you had said that in a crit, as designers, you're like, OK, I can maybe like rough it out in Figma or maybe like I prototyped it in some prototyping out, but like unless you're equally competent as like a true front-end engineer, you can't take that idea past like, well, here's like the shape of it, right? Versus now you can be like, OK, let me just spend like, you know, I don't know, four to eight hours, like trying to implement that and then we're finding it, right? And just taking it further. And so I think that's what's been a lot for folks like me or many others. There's that popular saying, right? Like may your reach always exceed your grasp? And I love that. And I think about that a lot because we should always be inspiring to things that we can maybe never get to. You know, Plato has this idea of form, right? Like the platonic idea of a thing. And I think like my view is we can never actually get it. We can get close, but we can't actually create the perfect onboarding, right? Or the perfect feature. That's really hard to do in software or in life, I think in a lot of ways, but we should always be striving for that, always reaching for that. So what AI has enabled is like it compresses your ability to reach, right? So it brings those ideas that used to be like, way up there of like, oh, how do you make like a responsive holographic, spectacular highlight thing? How do you make that real? It's like, I mean, I want to spend a lot of time doing that. Versus now you can just like reach one more level up, right? And so as designers, you always have that little inkling of like, wouldn't this be cool if, or like, oh, what if we went further and did this thing, right? Like we have that in whatever we're making at any time. That probably resonates with a lot of listeners. What AI lets you do is that cool, just try it. Just do it, right? Maybe you don't get anywhere. And that's totally fine. But it lets you cover more ground quickly. And so I think that's what's most exciting about it. And in terms of the value problem, what that does for designers or even engineers, founders, like anyone making something, is it gives you back more time from translating your idea to a shipped product that used to take a lot of time, right? I have an idea. Cool. I have to like type a bunch of characters into like a like a coding editor and IDE. Then try to see my output. If we compress all that time, great. You can make what you used to make last week. You can make it more quickly. Again, what do you do at that time? That's where I think designers are uniquely valuable in terms of being able to really think about and push, like, OK, what would the ultimate version of this experience be? Or how do we better manifest and represent like brand or values in our product? How do we improve that throughout? Or how do we better solve our problem or better differentiate and position in the market? Whatever it is, you have more time now where you should have more time, I think, to be able to go deeper on that. And I think designers, for better or worse, we think of ourselves in terms of being a designer as to people who care the most in the room. I'm not sure that's actually true. But let's just run with that idea. What it lets you do is like show how much you care and show that level of consideration versus before you just had a tell. Or you would show with rough, again, rough, facsimile user artifacts of what something could be. First, you can just show up and be like, hey, so you guys know how this one part of our product, like it sucks that everybody's always complaining about it. Cool. I just made this prototype. It's fully coded front end flow. Maybe there's mock data. Maybe it's really in your app. I don't know. Here's how we can fix it. What do we think? That is not reality for everyone who's a designer regardless of your technical ability. And so I think that's the exciting part of this moment is it gives-- I feel like whatever natural talent or abilities I have, I feel like I have superpowers now. Because it's like, cool. All these ideas I've got that are maybe crazy. You're as Amy. I can just give it to AI. And like, cool. It can go do it. American start to explore that for me. And then we can collaborate together in terms of getting something that's great. What about the designer who's listening, who maybe they don't have as many reps, maybe they're slightly earlier in their career? And they're looking for ways to fast track the growing of this muscle that is their conceptual reach. Like if they want to just be able to reach higher and be able to imagine ideas that are so beyond the obvious thing that AI is going to give you, do you have any thoughts for that? Yeah. There's a great, premier-old Kanye lyric that I really love, which is something like, you know, I made five beats a day for three summers. Quantity is a quality of its own. And what you need to do if you are trying to grow that muscle is just make five beats a day every day for three summers. Just take a lot of shots on the goal. That is how you start to build your intuition for what works great, what doesn't work great. I think folks often think that maybe what you need to collaborate with AI or get it to do something for you is more advanced of what is actually needed. So this little focus on frame 98,028 over here, this is just showing, if you and I were in the room, this is how we would wipe order it. I'd be like, okay, cool. So what if these two versions of this flow, sometimes you get like a normal note, sometimes it's not. What if when you clip this thing, or like what if the way you navigate is you pan around, like cool, so you can shift it. And then cool, what if when you click it, the card zooms the center and scales up, all of the cards push out and fade, right? This would take anyone who's watching could sketch this out at this level of fidelity in like five seconds. These aren't even cards. This is just like almost as raw figmas you get. I guess there's like some auto lab here, but yeah, there's like a screenshot of a thing. The only special thing I'm doing here is I'm applying the muscle of separation of concerns. I don't care about the visual design. It's rough, it's awful. Literally doesn't matter. These actually are too high fidelity. They should just be color blocks, right? All I'm trying to express is my idea here for like, okay, well, here's the interaction model. By default, you see the screen, then you can then you pan around through this, right? This was like one of many things I tried. And literally this is just the level of like direction that I'm giving to AI. Maybe to some people, it's like, wow, this is like a revolutionary idea, right? Like I didn't know you could do this, but to others, hopefully you're saying like, oh, yeah, there's not much to do that. Like I can do that. I can like literally just sketch out a thing that I want. And then cool, go collaborate with V0 or cloud code or with codex, whatever, to then try to implement that. There's not really shortcuts. The only shortcut is like, cool, make a lot of things, right? Try them out. Don't limit yourself into thinking like, oh, this might be just because you might not know how to actually create that implementation. Doesn't mean that you can't use the tools that we all have now to actually be able to implement it and to try. Again, in retrospect, I wish I had done a better job of saving the different snapshots and artifacts. But when I'm iterating, it's fast. The level of quality of these cards, it's fine. It's really rough, but I'm just trying to rough in. All right, here's what this looks like. Well, here's another example. Colors, right? It's like, all right, everything on this screen is just me trying to figure out colors, right? And again, it's super rough, it's messy and it's fine now. But even for the 9,828 frame, like, is that an image that you were just putting into cloud? Oh, yeah, I literally take this whole thing. Command, Command Shift C, copy as a PNG, put that in the cloud and be like, cool. Here's a store board of like what I want to create. Controversial statement. I think Figma is still really important, but I think what most people use it for is like wrong. The problem with trying to use it to dial in things at full fidelity to Figma is Figma's a lie. It's not your actual code base. Even how it represents color and type is different than how that is actually going to be implemented in the browser. But the good news and what I love using Fiddle4 is stuff like this. Roughly. Cool. What if it did this, right? Then give that to an LLM. This is just another way of communicating your intent to a coding agent or your goal. So you could describe it in words. And so you know earlier you mentioned like, how well, what are the key words that I need to give, you know, like a coding agent. There is some of that, but you can also give it images. Like you can paste images in the cloud code into, you know, V0 and it will infer. All right. Cool. Here you go. And it doesn't always work. It's not like one shot, right? But the point of that is to get better. Exactly. Is getting better and also the point is to let you more quickly sketch out alternative ideas, right? The one I showed earlier of like there's just five cards at the bottom. That probably took me five minutes to like create that. And you evaluate it and be like, ah, this isn't it. And then move on to what's next, right? And so you can zoom out and be like, okay, cool. I've tried 38 different ways of like designing like this card. Now I know for sure it's one of these two. It reminds me of a Mr. Beast quote. And he talks about the amount of people that ask him for advice on making YouTube videos. And how his response is always to make a hundred videos and then I'll answer any question that you want. And by the time you make a hundred videos, you don't have any more questions anymore. Thank you. Now just putting in the reps and it's something that I get excited about thinking about this next crop of designers is even your example with the five cards at the bottom of the page. That's like not that flippant of an interaction, right? Like it would take some time to hand assemble that and build it and test it out. And now some of you can get that quote unquote, rap in five minutes. That's a heck of a rap in five minutes. You know, that type of rap when we were dealing with the illustrator and hand coding things would take hours. This prototype here, for example, like this is the core interaction pattern for like the homepage, right? Where it's like, okay, you've got these cards, you click one to come to center. I'm like, yeah, it's nice. It's really refined, right? But literally this right here is how I started like making it. I was not thinking at all about like the visuals. All I wanted to dial in was seeing a reaction. And then this prompt, I mean, it's a little bit longer. But if you paste this into like V zero, like it'll one shot exactly like this thing, right? And so that's the level of like, oh man, you can just in 60 seconds, explore an interaction idea and then explore like another one and another one and another one. That's really powerful. And so I think that's, you know, maybe if there's like one takeaway that folks have, I think it's that you should be using these new technologies to explore more broadly and go deeper as a result, not just try to do more things or other things, but take what you have and really distill it, refine it again to its essence. And that's how you make something great. Josh, this has been amazing. I've learned a lot just watching how you work. And I really, really appreciate you coming out today and pulling back the curtain, giving us a little bit of a behind the scenes, talking through some of the ways that you think about what good software looks and feels like. I've enjoyed every minute of it. And so as I thank you. 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. Framework is how I build websites. Genway is how I do research. Grenola is how I take notes during crit. Genre 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.