Loading summary
Transcript62 lines
- [00:00]
A
What does it look like to demonstrate Uncommon Care in the way that you design and build an interface?
- [00:06]
B
All of these details communicate to you. Josh really cares, like about design or about this experience 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. Just going the extra mile is communicating to your user like, I value you, your time and I care about you.
- [00:28]
A
How do you collaborate with AI to nail the finer details of craft?
- [00:32]
B
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.
- [00:53]
A
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 Wealthfront, 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.
- [01:31]
B
If I'm marketing a course about, you know, Uncommon Care, really going the extra mile, really, you know, trying to lean 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. Like, 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. Buy this thing that there's really no content for and then great, you get a little token. The other thing in my mind was like, how do I take over design? Twitter, like, how, 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 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 file. So on the off chance that they bought this and signed in, they would see something like this from me. That's another example of, like, cool. I have a bunch of time with AI now that I can, like, do. Why not write 50, you know, 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 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? 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, invoices, a real piece of paper that unfolds, if you want that. And so this didn't feel quite right. I mean, directionally interesting. And you can see I was 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, cool. Yeah. And I want to, you know, scroll and, like, pick one. Which one is right for me? There's something for everybody. Right? There's, like, classic. 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 the card. Cool. That card transforms into what you're actually doing. So, you know, 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 helped people want to share it. And one reason why this kind of went viral was because in addition to me designing, you know, a 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 rando 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 when 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, 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 and physical. And how do I take it even further? Right?
- [05:49]
A
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. 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@framer.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 Mobin. Over 1 million designers from companies like Airbnb, Uber, Headspace all use Mabin 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 Mobin 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 Dive Club Mobin to check it out today. That's M O B B I n
- [07:03]
C
Now onto the episode.
- [07:05]
B
At this point, I had already had a lot of ideas for different graphics that could be on the cards. Yeah, so this, this is a playground I made coming up with the graphics themselves. This has since evolved in. In some ways. I released a tool called BOW Kit that effectively a better designed version of this configuration panel that just makes it easy for folks to work in this way. Right. Of kind of. I call it either like live tuning or parametric visualization. The big idea here is that if I have different graphics, these are all driven by some parameters, right. That 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 you can imagine in Figma, I could have started and tried to design n of these. Maybe it should look like this, but it's like, okay, 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 like what the result is of your choices. And so this was how I kind of came up with like, all right, here's the one that feels, you know, right for, for this version when the library opened, there are 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, I think AI now 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, this 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. It's like a tunnel. However, it's super dope. Right?
- [09:00]
C
It's kind of cool. Yeah, it's.
- [09:02]
B
Yeah, it's kind of cool, right?
- [09:03]
C
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. And maybe they've even seen a few examples of tools, and it still is just really, really daunting. Talk to us a about what it takes to pull something like this off.
- [09:25]
B
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, create a graphic that is a series of rows where each item within that row has a different opacity that is controlled by a sine wave. Give me sliders to control, like, the amount of rows, items within a row, range of opacities and factors of the wave. Pick 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.
- [10:21]
C
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. Yeah, 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:40]
B
Once you know that idea of, like, a sine wave is like a way to create, like, a generative graphic, there's a lot of other ways of doing it. Right. You could use, like, a timestamp. You basically want, like, change over time. Right. You could go really deep in that idea, or you could just think abstractly, like, I don't need to know. You as a user don't necessarily need to know the math. Right. 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 don't. You wouldn't even have had to say, actually, sine wave. You could have described, like, I want a grid where each item has like a slightly different opacity and it's dynamic. I bet AI would either either use like wave functions to drive that or some other thing to get you the result you want. Right? 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, you know, there's a bunch of tuning, right. To like get it.
- [11:30]
C
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 the shader.
- [11:38]
A
And I just said, just give me
- [11:39]
C
all of the relevant controls. And it gave me a bunch of things that I'd never even seen before. And they worked perfectly.
- [11:43]
B
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, 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, 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 reviewers like this V0 has no awareness of my code repo. It's just a net new thing from scratch. Right. And so now you can start to play with and see like, okay, cool. What does a wave function actually do? Right? 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 kind of minimum Frequency is basically how. Imagine an ocean 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 don't even need to know that to be able to play with this and be like, oh, cool, great, I can make it big, I can make it small. You can control the speed of it. That feels a little bit more manic. This feels nice and calm. And that's just 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 on like, okay, cool. Now give me, 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 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? 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, AI is pretty good about inferring what specific implementation you need to get that result.
- [13:41]
C
I appreciate you walking through that because it does point at the fact that,
- [13:45]
A
like, it's not hard to build these tools.
- [13:46]
C
Like, you can create almost anything, which then puts the bottleneck more on, like, your ability to explore and ideate. And it's 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.
- [14:13]
B
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, was granted. And so you start thinking down the rabbit hole of like, what are, 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? That's like, cool. Here's your dynamical 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 highly visual thing and again had 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. Like, oh, cool. What if we took that same concept of different color schemes, different palettes, different graphics fix, you know, and combine them into something that. That you would get as a user. This version, though, like, this is horrible, right? Like, you look at this and you're like, okay, 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, directionally 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. Like, that's a big source of inspiration for me. Thomas Keller, or 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 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. So that's what I was going for for this, right? Like, 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, you know, once the Library opened on February 10, 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, you know, 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, 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, you know, 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 of this infinite canvas. And I wanted to let you go deeper. And so this is just great. Like, here's the different high level color combos. Here's some controls. You know, there's no labels on them. They're super big and chunky and you're like, cool. What does this thing do? Like, I don't know. I'm 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, 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, 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, if I gave you Lightroom or if I gave you this, right? This is a more fine grain control panel. But to you as a, as a buyer, as a consumer, like, you don't actually want this, right? And so you don't want to take the time to be like, okay, this feels like work. Even if to me, it. 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. Like, there's different things, you know, 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 also.
- [19:40]
C
I love that you made it an infinity loop, so it's so good.
- [19:43]
B
Yeah. There's actually a reason behind it. This is a real thing. This is what I'm calling. This is like a Lisa Jupe slider. A Lisa Juke 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. 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 1 at a time, right? And again, this is fun. It's fine. But imagine like three different sliders on 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, Claude. Or whatever, like, 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 Elisa Jew curve is where. Yeah, it is. It is like literally an infinity symbol. 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 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, how do I give a user just one thing to fidget with that has a really dynamic result, right. In terms of the expression of what they're creating? And so this did start as, like, great, give me a, 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 up 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 at least a Drew concept before starting this, right. What I knew was my intent, which is, okay, I want to give you three, like, knobs. And from those three knobs, I want it 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, 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, ah, that's perfect, right?
- [23:20]
C
Yeah.
- [23:20]
B
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. 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 would have had to label them too.
- [23:42]
C
You Know, like, yeah, exactly.
- [23:43]
A
You would have had three sliders. They would have had label.
- [23:45]
C
Whereas this, there's, like, almost an element of mystery. You know, you're like, what is it gonna 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, that goes back to, like, your fidgetability, which is totally the new measuring stick that I'm gonna have for stuff like this. And just not having those labels goes a really long way.
- [24:06]
B
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, 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 execute it to a bar that, you know, 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 woodwork on the side. You know, as many designers do that, 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. How do I do that as simply as possible?
- [25:14]
C
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,
- [25:26]
A
like, I can animate every single thing
- [25:28]
C
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 has become a really big part of designing
- [25:45]
B
every day for me. Exactly like what you just said. One idea here that I ape from D to roms is like, less but better, right? And there's this Bruce Lee quote that I think about often. My co founder taught it to Adam Michaela. He taught it to me. Where, you know, it's not the daily increase, but the daily decrease. Hack away at the inessential. 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? And you're trying to reduce it. You're trying to concentrate flavor and make it thicker. 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. 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 that's not important. That's nice to have cut that right. That takes time for sure.
- [27:13]
A
There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent network. And it's working. Like right now, I'm helping many of the most exciting startups that I know to hire the designers and builders who
- [27:33]
C
listen to this show.
- [27:35]
A
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.
- [27:47]
C
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?
- [28:10]
B
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. If you just go to benji.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. And this idea has existed before Family, but I think Benji certainly executed it at like 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, think in terms of maybe front end 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. We're viewing it, we're manipulating it and you know, 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, okay, I already have these buttons on, on screen, right? It's very obvious what this one with the arrow, that's literally, you know, 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 dilute 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 1. 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 done or canceled. 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 don't I just use that button to say done. And yeah, I played with probably. I wish, you know, 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, 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 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, you know, I'm changing. Well, folks have different names, so I'm the author. If you join 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 time 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 check mark. That would be like a simpler interface.
- [31:55]
C
Just be a check mark. Yeah, you get the center alignment on the area.
- [31:58]
B
Exactly, exactly. Right. And so that's, that's a great example of 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 transitions to like, oh, please sign. Then as soon as I start signing, get more spac to do, right? All of these details communicate to you as, like, the member or the user, the customer. Josh really cares, like, about design or about this experience. He is taking the time, whoever made this, right, they. 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 your user, like, I value you, 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 webpage, right? It's just, hi, I'm Josh. I'm writing about design. I have maybe helped some people and worked at these kind of companies. Please, you know, join if you're interested, right? So I again, wanted to reward people and give them value even before they. They get in. And I think it worked. Like, you. Well, we haven't even 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, it's. 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, you can't. Right. I've worked with total happenstance. I happened to be in. In a. In a slack with Josh Dunsterville, 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, you know, default sounds that weren't 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. 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 of 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, eh, here's your library card. Cool. Next screen. You never see that again.
- [34:53]
C
Yeah, check it out in settings whenever you want.
- [34:55]
B
Exactly, exactly. One of the best onboardings I've ever seen was Mailbox. And so Gentry Underwood was the founder and primary designer of that. That product. This is over 10 years ago at this point at Dropbox. And that team created like, a coin where they gave people who signed up on the waitlist. They gave you like, a literal. Well, 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 stood out in my memory is like an example of giving someone like a. A token that. 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 in New York, right? If you're riding the subway, 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 and then there's a success sound that plays there and it kind of, you know, it goes away, then this was a whole thing. This is a whole nother thing of, like, founding members got. I was really fortunate to work with and partner with friends at Claude or at Anthropic and Vercel to give every founding member, like, one month of V0Pro 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 that. 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 like 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 kind of 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 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, this even. This is great. But I think the v0 part 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. 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 to kind of highlight is like, again, I don't actually know. Like, 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 Vercel logo is a triangle. So there's this pattern of triangles.
- [37:39]
C
It kind of separates.
- [37:40]
B
Yeah, it's like shifting, right. As you're, you know, interacting with it. So that's like one of those small details that, like, maybe you don't perceive that in isolation, but when you're using this whole thing, like, you're. You're like, oh, wow, 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 for? Right? And yeah, there's definitely cards. There's a lot of, you know, folks who've done the, like, cool. There's a perspective. There's like 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. 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. 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? Of, like, oh, cool. Like, it's just. 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 brain and colors. But all of these sliders help, you know, 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 slightly 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.
- [39:29]
C
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, yeah, 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.
- [39:46]
B
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 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 v0 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, like, appears on the screen. Number three. All right, there's, like, a box that they, like, open up, right? Or 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. 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 like kind of a world class 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, what I wanted.
- [40:56]
C
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 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?
- [41:28]
B
I don't think of myself as old, but we are certainly, you know, we're, 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, we're, it's like we're busy. Maybe we have families or mortgages or just responsibilities, right. We can't necessarily stay at the pull all nighters that we used to to have to execute something like this, right? Like I had 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 COD agents have allowed or unlocked is all of that implementation work can now be done instantly or relatively quickly. And so what that means as designers is, okay, 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, okay, I can maybe like rough it out in Figma or maybe like I prototype it in some prototyping app. 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, okay, let me just spend like, you know, I don't know, four to eight hours like trying to implement that and then refining it, right, and just taking it further. And so I think that's what's been unlocked for folks like me or many others. Is that popular saying, right? Like, may your, May your reach always exceed your grasp. And I love that and I think about that a lot because we should always be aspiring 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, you know, 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 specular highlight 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 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 prop of what that does for designers or even like 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, an 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 with that time? That's where I think designers are uniquely valuable in terms of being able to really think about and push. Like, okay, what would the ultimate version of this experience be? Or how do we better manifest and represent, like, our brand, our values in our product? How do we imbue 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 or 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, like, 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 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. Everybody's always complaining about it. Cool. I just made this prototype fully coded, you know, front end flow. Maybe there's mock data. 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, I can just give it to AI and, like, cool. It can go do it right. Or it can start to explore that for me, and then we can collaborate together in terms of getting something that's great.
- [46:20]
C
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?
- [46:47]
B
Yeah, yeah. There's a great Kanye, 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, 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. Like, just take a lot of shots on goal, right? 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, like, more advanced than, like, what is actually needed. So, like, this little. Let's focus on, you know, frame 98028 over here. This is just showing, like, if you and I were in the room, this is how we would whiteboard, right? I'd be like, okay, 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. What if when you click this thing? Or like, what if the way you navigate is you pan around and like, cool. So you can shift it and then. Cool. What if when you click it, 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'm. 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, you know, then you paint around, do 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 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 and then, cool, Go collaborate with V0 or with 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 into. 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, like, quality of like these cards, it's fine, you know, it's really rough, but I'm just trying to rough in like, all right, here's like, what this looks like. Or here's like another example, like 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, it's fine now.
- [49:35]
C
And Even for the 9828 frame, like, is that. That's an image that you were just putting into cloud?
- [49:41]
B
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 storyboard 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 of 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 a browser. Right? But the good news and what I love using figma for is stuff like this. Just rough, like, cool. What if it did this right? And 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, ah, well, what are the keywords that like, 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 getting better, though. Exactly. It's 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, 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.
- [51:09]
C
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. 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. That's like, not that flippant of an interaction, right?
- [51:38]
A
Like, it would take some time to
- [51:40]
C
hand assemble that and build it and test it out. And now somebody can get that quote unquote rep in five minutes. That's a heck of a rep in five minutes. You know, that type of rep when we were dealing with the Illustrator and hand coding things would take hours.
- [51:56]
B
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, they come to center and 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 the interaction. 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? So that's the level of like, oh, man. Yeah. 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.
- [52:54]
C
Josh, this has been amazing. I've learned a lot just watching how you work and I really, really appreciate you coming on 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 just want to say thank you before
- [53:13]
A
I let you go. I want to take just one minute to run you through my favorite product products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research, Granola is how I take notes during crit Jitter is how I animate my designs, Lovable is how I build my ideas in code, Mobin is how I find design inspiration. Paper is how I design like a creative and Raycast is my shortcut every
- [53:42]
C
step of the way.
- [53:43]
A
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.