Josh Puckett - Crafting interfaces with uncommon care

[00:00] 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 differently than you expect it to. Just going the extra mile is communicating to your user like, I value you, your time, and I care about you. [00:30] the finer details of craft. What I think we should all be trying to push towards now that we have tools that help us like go 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 execute it to a bar that, you know, folks maybe haven't have never seen before. Welcome to Dive Club. My name is Rid and this is [01:00] Puckett, who spent nearly two decades designing products like Wellfront, Dropbox, and helping dozens of startups. And recently, he released Interfacecraft, 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 [01:30] world-class design. If I'm marketing a course about [01:33] you know, uncommon care, really going the extra mile, really, you know, trying to, [01:37] Lean into that. [01:39] 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 [01:51] you know, customize or sign, take away for themselves, that would feel like a fair trade of like, cool, pre-buy this thing that, [01:57] There's really no content for.

And then, great, you get a little token. [02:01] 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 ARC, Browser or, you know, Dropbox 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 this is the flow for Twitter. [02:30] 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 note. So on the off chance that they bought this and signed in, they would see something like this from me. [02:46] That's another example of like, cool, I have a bunch of time with [02:49] AI now that I can like do, why not write 50 messages to folks I know?

And that was the most fun of this for me. It was like, oh yeah, there's all these people I've worked with who have influenced me, who have taught me. It didn't start out like this. When I first started exploring, I was like, what if I just had like five [03:04] 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 [03:13] does it feel good to fidget with cards in this way?

Or like, does it feel a little bit limiting? And 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 for more colors, but just didn't feel quite as exploratory or fidgetability is one attribute that I've tried to imbue in the whole product. Like there are things that feel tactile. You can move with them. You can like select them. Invoice is a real piece of paper that unfolds if you want that. And so this didn't feel quite right.

[03:43] you [03:43] explore these generative graphics on the cards themselves. But then where I ended up going was, well, it should just be an infinite canvas. Once you get in here, you can just scroll any direction. There's only 14 color combinations, which is a lot, but when you present them in this way, it feels like, okay, cool. Yeah. I want to scroll and pick which one is right for me. There's something for everybody, right? There's classic, [04:07] All right, you're a designer, pick black. Or, you know, cool, I want something a little bit more, you know, colorful, right?

And so this is another example of, like, this feels kind of fidgety, like being able to, like, select a card. Cool, that card transforms into what you're actually, you know, doing. So, you know, you can edit your name. [04:24] 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, [04:37] come up with the perfect signature. And I think that's the aspect that really helped people want to share it.

And one reason why this kind of went viral was because in addition to me designing a graphic and you can pick a color, [04:48] 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. Like, OK, all I did was this random course from this rando that I don't know.

[05:06] 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 once the library came out, there's about five weeks. Actually, no, it was almost exactly four weeks. I launched the website on January 13th, a day before my birthday. And then the library opened on February 10th. And so between that time, I was obviously creating the course content and the platform. [05:36] Two things, one, a bit of pressure to like, okay, how do we raise the bar again?

Once you have access to this, how do you actually, one, use that card that I gave you that feels very real and 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. [06:06] 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 com. And if you use the code RID, you can unlock a free month of Framer Pro. There legitimately might not be a tool that the design industry agrees on more than Mobbin. Over 1 million designers from companies like Airbnb, Uber, Headspace, all use Mobbin for [06:36] And it makes sense. It's one of the highest ROI investments that you can possibly make as a designer. I use Mobbin almost every single day to look at real world examples of how different products handle specific UI patterns and flows.

I mean, it's invaluable to my practice and I can't recommend the product enough. So head to club slash Mobbin to check it out today. That's M-O-B-B-I-N. Now on to the episode. [07:06] 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 BowKit that effectively, a better designed version of this configuration panel, that just makes it easy for folks to work in this way, right? I call it either live tuning or parametric visualization.

[07:29] The big idea here is that if I have different... [07:32] graphics, [07:33] These are all driven by some parameters, right? They go into 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, [07:46] You can imagine in Figma, I could have started and tried to design like any of these, you know, 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 kind of using this idea. But the whole thing here is you want to be able to as quickly as possible feel in reality what the result is of your choices. And so this was how I kind of came up with like, all right. [08:12] Here's the one that feels, you know, right for this version. Well, the library opened there four different graphics, and I'll walk through that onboarding. But this was my way of figuring out, like, all right, like, what looks good?

You know, 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 analyzing AI now. So you can be like, hey, cool, computer, go generate, like, a million different permutations for me. [08:41] where it's picking different parameters just randomly that I maybe never would have come up with. And so for some of these different combinations, this one right here, the third one where it's like, [08:53] I wouldn't have done that.

It feels a little bit too heavy to me of the whole thing's [08:57] It'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... [09:04] 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 deeply intimidated by what they're looking at. There's no way that I can make something like that from scratch. 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 [09:34] by a wave function. [09:36] There's obviously some more like... [09:38] 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, [09:46] Create a graphic that is a series of rows where each item within that row has a different opacity that is controlled by [09:56] by a sine wave.

Give me sliders to control the amount of rows, items within a row, range of opacities, and factors of the wave. [10:11] Make the background for the graphic black and the items white. So that's like a pretty rough prompt, right? Like that's just off the dome. It's pretty good though. It's still pretty good. Something that I'm trying to get better at is paying attention to the specific words that drive really good outcomes with AI. So like for me, oh, I haven't been using like sine wave, for instance. That makes total sense.

That is like a little thing I can just take into my practice. And now I can recreate that very, very easily. [10:41] like a way to create like a generative graphic. There's a lot of other ways of doing it, right? You could use like, [10:47] a timestamp. 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 sine 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 a grid where each item has a slightly different opacity and it's dynamic. I bet AI would either use wave functions to drive that, [11:15] or some other thing to get you the result you want, right? And so if you can see [11:20] 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, you know, it'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 it. 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. [11:43] 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, you know, whatever. What's more important there is like your intent and being able to play with the outcome. Right. So here we go. So it's like, all right, [11:57] this was like a one-shot prompt that like, from my perspective, it's pretty loosey-goosey, 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, and for context, I guess for viewers, like, [12:09] This V0 has no awareness of my code repo.

It's just a net new thing from scratch. And so now you can start to play with and see, okay, cool. What does a wave function actually do? Maybe I don't want to let opacity go to zero because that gives me these weird zebra stripes. So maybe there's a higher minimum. Frequency is basically how, imagine an ocean with a series of waves, how tight are those waves, how close are they together? [12:35] 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. [12:49] 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 you can 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... [13:07] you know, I have a color, like an enum for my colors. That's like this palette, put that palette in there, right? Okay. Put in like a random seed so that like the way it 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? Like 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, I was pretty good about inferring [13:37] what specific implementation you need to get that result.

- I appreciate you walking through that because, [13:43] 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. It's the creative process. So I guess I'm curious more to dig into like, [13:58] what you're doing behind the scenes to arrive at this output, because you have this beautiful metaphor and all these different interactions. We talked about 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. [14:14] 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? Well, you have shelves, you know, you have different areas, [14:44] Libraries have events and they also have library cards. That's how access was granted. And so you start thinking down the rabbit hole of what are attributes of this metaphor that I could create. You pretty quickly arrive and like, oh, give everyone a library card. I could have given people maybe an avatar. It's like, cool, here's a dynamical avatar. Maybe they get a coin, like a token or something like that.

But library card both felt authentic to the metaphor and also a highly visual thing. [15:14] let people feel like they were creating theirs. 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. [15:24] 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, [15:33] 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 [15:44] 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 and you're like, OK, cool. There's only like five of that. It's way too big. The way to choose it is like kind of weird. There's just a lot that's like directionally interesting, but not right. And so. [16:08] 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 for that to go. 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. That's a big source of inspiration for me. Thomas Keller or other famous chefs where they are pure designers and artists. [16:38] Thank you. [16:38] 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 and tell 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. [17:01] So that's what I was going for for this, right? Cool. How do you come back to this library? [17:06] 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, you know, once the library opened on February 10th, [17:16] 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 know, you didn't really know. And so the first thing is like, great, here's just a quick, you know, teaser. I wanted you to like read this and like pause. So that's why it's like very minimal. And then I show you your card. So this was, this is like 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, okay, great.

I can just confirm if I want to edit my name or signature, I can do that. But then this third step is like, [17:46] 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, you know, CTA. It'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 as this infinite canvas.

And I wanted to let you go deeper. And so this is just [18:16] There's no labels on them. [18:18] They're super big and chunky. [18:20] And you're like, cool, what does this thing do? Like, I don't know. Like, oh, cool. So as you start to experiment with it, like you get rewarded. And I think all of this is like 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 like 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 [18:48] hue, saturation, and lightness. Apple does a lot of this. Like, they're, I mean, they're operating at another level, the designers and engineers on, like, the photos team, where that whole constraint is also like, well... [18:59] if I gave you Lightroom or if I gave you this... [19:03] Right. [19:04] This is a more fine grain control panel. But to you as a buyer, as a consumer, you don't actually want this. 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, you're like, 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? [19:29] 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. [19:37] is doing a lot of crazy things.

I love that you made an infinity loop. So it's so good. Yeah. There's actually a reason behind it. This is a real thing. This is what I'm calling this is like a Lisa Ju slider. A Lisa Ju curve is a concept in mathematics, basically for mapping values over time. Right. And what it lets you do, one of these is a deep dive on it. One of the things that that lets you do is solve what I'm calling this like three slider problem. [20:07] 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. [20:25] one at a time, right? And again, this is fun. It's fine. But imagine like three different sliders, you know, on... [20:33] this page where I also want you to select the shape of a, of a graphic and the color that would start to overload it like quite a bit.

So how do, 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 dropped out of school. You can just teach yourself things. Right. And so this was one way of exploring like, cool. Hey, [20:57] Claude or whatever, like, how do I, how do I accomplish this end goal? Like, how is there prior art out there in other fields that I can, you know, that I can run with.

Right. And so this shows like what at least a Jew curve is where it is, it is like literally an infinity symbol, but. [21:13] 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. [21:29] But, [21:30] What that does is it gives you all three of the things that we want a user 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, right. [21:48] How do I give a user just one thing to fidget with? [21:51] 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. [22:02] And it has a little bit of like dynamism in it, but by combining them into just one thing that's controlling all of those things, you get some pretty, like if you look at, you know, the graphic up here as I'm sliding this.

[22:15] There's a lot of dynamic... [22:17] versions of it in just a simple kind of small surface area. Like maybe that sounds a little bit heady or like academic, but [22:25] Obviously, some of that is, I think, related to just the idea of math there. But I didn't know about the least and true concept before starting this. What I knew was my intent, which is okay. [22:35] I want to give you three knobs. And from those three knobs, I want it to feel like you can create an infinite amount of [22:42] 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. [22:59] How do I do that? Right. And so one idea is like, oh yeah, we could try this, you know, this Lisa Ju 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 or that framework basically. And it happens, as you noted, 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. [23:25] I might have an intent. [23:26] but I, [23:27] Stumbling upon something like this is just sticking with it, right, and just going with one more iteration. Like I could have designed three beautiful little sliders, you know, to control the wave.

[23:36] but it wouldn't have been as good as this. [23:39] Yeah, you would have had to label them to, you know, like, yeah, exactly. You would have had three sliders. They would have had the label. Whereas this there's like almost an element of mystery. You know, you're like, what is it 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 fidget ability, which is totally the new measuring stick that I'm going to have for stuff like this.

And just not having those labels goes a really long way. [24:05] Yeah. I wish my direction was as clear as 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 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 execute it to a bar that, you know, folks, you know, [24:33] 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. [24:42] One thing I'm inspired, I make furniture, like I kind of woodwork on the side, you know, as many designers do, but I'm in that kind of designer to woodworker pipeline. You know, shakers, they make a lot of different furniture. And one of their kind of 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. [25:12] that as simply 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.

[25:31] And it's very fun to do so. And so really having to be intentional around 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 become a really big part of designing every day for me. Exactly like what you just said. One idea here that I ate from D to ROMs is less but better. And there's this Bruce Lee quote that I think about often. My co-founder, Adam and Kayla, he taught it to me where it's not the daily increase, but the daily decrease.

[26:01] way at the unessential. I think it would be hard for you as a designer to [26:07] edit your work too much. It's like you're cooking a sauce, right? And you're trying to reduce it. You're trying to concentrate flavor and make it thicker. [26:13] You can take it too far in 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 improve and resolve. One that's jumping out to me right now is there's a different height between our toolbar at the bottom and 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. [26:43] not. [26:44] 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, [26:54] 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? [27:24] 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

club slash talent to join today. Okay. Hit this back arrow really [27:54] 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 [28:06] 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 wants to reference on this is Benji from Family.

He's just going to org. He's got a great write-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 like the design and creation of it. [28:33] 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 like 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, I think in terms of maybe front end interfaces that is like, well, in applications where everything's just like a CRUD app.

[28:56] All we're doing is taking content from a database, [28:58] We're viewing it. We're manipulating it. [29:00] And, you know, if you click that button, you get like a pop up. That's cool. Edit your name. [29:04] Done, right? That's like the very unconsidered approach. In this case, it's like, okay, I already have these buttons on screen, right? [29:12] It's very obvious what this one with the arrow that's literally jiggling. Everyone knows what that would do. There's an aspect of this of like... [29:19] 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 OK taking more potential liability from like a usability perspective or accessibility perspective. [29:33] because I know it's a small audience and, [29:36] this is also my thing, right? It's just for me. And so that's like the number one thing is like, well, [29:41] I'm making this the best for what I want it to be. And hopefully that will resonate. And if it doesn't, [29:46] 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 dilute that idea and it's going to be worse, most likely. So in this example, well, when I want to edit the name. [30:04] 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. It's like, [30:15] edit your name down or cancel.

Right. But yeah, [30:18] that would take you out of the flow. And that would also... [30:21] again, weaken the metaphor of like, this is your library card. Everything you need on it is already on it. [30:27] 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 a more fluid way of transitioning the state to what I need. So if I'm making something on the card an input, I need some control to, like, accept that change, right?

But I already have a button, so why don't I just use that button to say done? And, yeah, I've played with probably, I wish, you know, like always, I wish I had kept all the screenshots and permutations. [30:56] 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... [31:10] 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. [31:21] on the card itself, again, to encourage 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, [31:33] I'm changing... [31:34] Well, folks have different names on the author. If you joined in the pre-sale, 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 type to edit, right? This, and again, even looking at this now with fresh eyes, it's like, ah, well, I don't need this label. Like, why do I have done? It should just be a checkmark. That would be like a simpler interface. It should totally just be a checkmark. Yeah. Then you get the center alignment on the area. Exactly. Exactly. Right. And so that's, that's a great example of, I'm a pretty okay designer. [32:04] 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. [32:15] But then I was like, oh, 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. And so then this transitions to like, oh, please sign. [32:27] Then as soon as I start signing, I get more SPAC to Don, right? All of these details communicate to you.

[32:32] As like the member or the user, the customer, Josh really cares like about [32:38] design or about this experience. He is taking the time, whoever made this, right? They have taken the time to really like dial in and think about all of these details. And that builds trust, that builds like perceived value. Your affinity to this product increases because it works just a little bit better or differently than you expect it to. And you can apply that everywhere, right? SaaS products, fintech products, whatever it is, just going the extra mile is communicating to

[33:08] 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. [33:19] I have maybe helped some people and worked at these kind of companies. [33:22] Please, you know, 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 works like you. Well, we haven't even gotten to like. [33:33] 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 a 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, [33:47] You can't. Right. I worked with total happenstance. I happened to be in a in a Slack with Josh Denserville, who'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 in progress of this. And he's like, oh, and it had like some default sounds that were great.

He's like, oh, should we like, do you want to jam on custom sounds? I was like, yes, I didn't know that was a thing. I didn't know you did that. [34:12] 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. I'm like, all right, what if when you drag it, like if you don't drag it enough, you [34:21] there's a threshold for like it goes back, right? Again, encouraging play, encouraging fidget ability.

So Josh created all of 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, [34:44] you're kind of thinking that you have to use it. [34:46] 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 whenever you want. Exactly. Exactly. One of the best onboardings I've ever seen was Mailbox. And so Gentry Underwood is the founder and primary designer of that product. This is over 10 years ago at this point, Dropbox. And that team created like a coin where they gave people who signed up on the waitlist. [35:16] machine that like, you know, you're redeeming your token for access to mailbox. And I had always loved that. That stood out in my memory as like an example of giving someone like a token 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 in New York, right? If you're riding in some way, you put your ticket in the thing. That was like the inspiration for this. I was like, cool. Well, what if you just drag it in? [35:41] And then there's a success sound that plays there and it kind of, [35:46] you know, it goes away. Then this was a whole thing. This is a whole, another thing of like founding members got, I was really fortunate to, to work with, um, partner with friends at Claude or at Anthropic and Vercel to give every founding member like one month of V0 Pro or Claude Pro.

Cause 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. Um, [36:12] But a lot of it is, and it was important to me that folks – [36:15] 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... [36:34] 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 like you could also just scratch off [36:45] And then see, like, 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, okay, one, this a little bit more matches their brand guidelines.

Like, they're, I think, a larger, you know, kind of company. You know, even this is great, but I think the V0 card is, like, just another level, like, above. And so I think somewhere in here I have a, yeah, so I have, like, this is the playground for, like, this card. Well, there's, like, a lot going on here, but it's all kind of reduced. [37:15] like cool from zero to one, like how do you add all these different like layers or how do you composite all these things? [37:20] But I guess the thing to kind of highlight is like, again, [37:23] I don't actually know.

This is a very interactive thing. It's not real light, but it's simulated dynamic light. There's material here. One of the small details on hover is there's this holographic... The Vercel logo is a triangle, so there's this pattern of triangles. It kind of separates. [37:40] Yeah, it's like shifting as you're... [37:44] you know, interacting with it. So that's like one of those small details that like, [37:47] Maybe you don't perceive that in isolation. [37:51] But when you're using this whole thing, like you're you're like, oh, cool. Everyone has seen just like a little cool.

Here's your gift card. It's 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 have done the like, cool. There's a perspective. There's a hologram. But I don't know if anyone has made like a scratch off, you know, card that has like custom. Oh, yeah. You'll notice the zoom in is good here. Like this is a custom brush. [38:16] It's not just like a circle in code. It's like an SVG brush that I created in Figma.

So then it looks more real when you're scratching it off. Right. Yeah. And then Josh created like three, [38:27] Well, first we had just one sound. In the real world, when you're scratching... [38:30] It's not just the same sound over and over. So we actually created three different sounds. [38:35] 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.

[38:48] and you take it to 11, right? What's the best way I can reveal that to someone that feels interactive, it feels fidgetable, [38:55] It feels memorable. There's a lot of surprises, right? Of like, "Oh, cool, it's just a card." And then you hover it, you're like, "Oh, whoa, this is cool." And so this uses an approximation of some of their brand 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 reflection happening, so it feels slightly less physical."

This is actually not maybe minimalism. This is definitely maximalism. But when it all comes together, [39:24] It just feels like a simple, cohesive thing, right, that you get experience as a user. I think that's the balance that... [39:30] is so impressive it's like you know when to show restraint and when to just [39:35] push way past what anyone would conceivably think of. And I think this is like what you're [39:42] 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...

[39:50] The one I kind of lean on the most is like conceptual range and then conceptual depth. Right. So conceptual range is like, what are all the ways like, let's say I want to surprise somebody with a gift of easier 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. [40:09] Number three, there's a box that they open up, right? Or [40:13] There's a piece of paper that they 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, all right, there's obviously pros and cons for all of those different options. [40:26] And then once you have one that feels like it works, if what your goal is is to demonstrate that. [40:31] what I think of as like a bar setting or kind of a world-class level of execution. [40:36] You just have to go deep. I probably spent as much time on this gift card. [40:42] as the whole of onboarding, right? Because... Yeah, that's sick.

[40:45] there's just a lot of different layers to it, like both like literally. And then also in terms of like, [40:52] the interaction of just kind of getting it to feel like what I want. I want to zoom way out. It's really impressive the quality and the... [41:01] 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. This is insane 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, what's the value proposition that [41:20] 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? [41:27] 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. [41:37] It's like we're busy. Maybe we have families or mortgages or just responsibilities. We can't necessarily stay up to pull all-nighters that we used to to have to execute something like this.

I have the technical ability to create everything on this gift card before AI. [41:52] 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. It becomes irrational to... [42:04] 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 automatically. [42:21] instantly or relatively quickly. And so what that means as designers is, okay, those crazy ideas you had, like what if, [42:29] 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, okay, okay, [42:38] I can maybe like rough it out in Figma or maybe like I – [42:42] prototype it in some prototyping app, but unless you're [42:46] 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, okay, 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 is 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 [43:13] 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. [43:28] 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, you know, to reach. Right. So it brings those ideas that used to be like way up there.

It's like, oh, how do you make like a responsive holographic specular highlight? [43:46] thing. How do you make that real? It's like, I mean, I would have 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, oh, wouldn't this be cool if, or like, oh, what if we went further and did [44:00] 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 like, 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. Right. [44:29] That used to take a lot of time, right? I have an idea. Cool. I have to type a bunch of characters into a coding editor, an IDE, and [44:37] Then try to see my output.

If we compress all that time, great. You can make [44:42] What you used to make last week, you can make it more quickly. Again, what do you do with 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? [44:56] Or how do we better manifest and represent our brand, our values in our product? How do we view 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. [45:10] where you should have more time, I think, [45:12] to be able to go deeper on that. And I think designers, for better or worse, we think of ourselves [45:17] in terms of being a designer as the 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 people, [45:28] how much you care and show that level of consideration versus before you just had to tell or you would show with rough again rough facsimiles or artifacts of what something could be versus 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 fully coded you know front-end flow maybe there's mock data [45:49] Maybe it's really in your app.

I don't know. Here's how we could fix it. Like, what do we think? Right. 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 like this moment is it gives like 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 or zany. [46:10] I can just give it to AI and like, cool, it can go do it. Or it can 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... [46:31] 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... [46:42] beyond the obvious thing that AI is going to give you. Do you have any thoughts for that? Yeah. Yeah. There's a great Kanye lyric, old Kanye lyric that I really love, which is something like, you know, [46:53] I've made five beats a day for three summers.

Quantity is a quality of its own, right? 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, right? That is how you start to build your intuition for what works great, what doesn't work great. I think folks often... [47:13] think that maybe what you need to collaborate with AI or get it to do something for you is like more advanced than like what is actually needed. So like this little let's focus on, you know, frame 98,028 here.

This is just showing like if you and I were in the room, this is how we would whiteboard. I'd be like, OK, cool. So like what if, you know, there's two versions of this flow. Sometimes you get like a normal note. Sometimes it's not. [47:43] Cool. So you can shift it. And then cool. What if when you click it, [47:47] The card zooms to center and scales up. All other cards push out and fade, right? This would take any, 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 figma as you get. I guess there's like some auto layout 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 two... [48:16] 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, you know, then you pan around and do this, right?

This was like one of many things I tried. And literally, this is just a 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 like, oh, yeah, there's not much to that. Like, I can do that. I can like literally just sketch out a thing that I want. [48:45] 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. [49:15] Operating? [49:16] 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. [49:24] Or here's like another example of colors, right? It's like, all right, everything on the screen is just me trying to figure out colors. Right. And again, it's super rough. It's messy. And like, [49:33] It's fine now. Even for the 9,828 frame, like, is that an image that you were just putting into Claude? [49:40] Oh, yeah, I literally take this whole thing. [49:42] Command-Shift-C, copy as a PNG, put that in the cloud and be like, cool.

[49:47] Here's a storyboard of like what I want to create controversial statement. I think Figma is still really important. [49:53] 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 is 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 a browser. Right. But the good news and what I love using Figma for 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. [50:23] you know, earlier you mentioned like, ah, well, what are the keywords that like I need to give? [50:27] 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, [50:34] 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 [50:42] The point of that is getting better. Exactly. It's getting better. And also the point is to let you more quickly. [50:47] sketch out alternative ideas, right? The one I showed earlier of like, there's just five parts at the bottom. [50:52] That probably took me five minutes to create that, evaluate it and be like, this isn't it. And then move on to what's next. And so you can zoom out and be like, OK, cool. I've tried 38 different ways of designing this card.

[51:06] 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. [51:18] Make 100 videos and then I'll answer any question that you want. And by the time you make 100 videos, you don't have any more questions anymore. You figured it out just by 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.

[51:34] 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 somebody can get that quote unquote rep. [51:45] in five minutes. That's a heck of a rep in five minutes. That type of rep when we were dealing with an illustrator and hand coding things would take hours. This prototype here, for example, this is the core interaction pattern for the homepage, where it's like, okay, you've got these cards, you click one, they come to center.

I'm like, yeah, it's nice. It's really refined. But [52:08] Literally this right here is how I started... [52:11] like making it. I was not thinking at all about like the visuals. All I wanted to dial in was the interaction. [52:17] And then this prompt, I mean, it's a little bit longer, but if you paste this into like V0, 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 properly.