Josh Puckett - Crafting interfaces with uncommon care

00:00:00What does it look like to demonstrateuncommon care in the way that you designand build an interface? All of thesedetails communicate to you, Josh reallycares like about design or about thisexperience and that builds trust, thatbuilds like perceived value, youraffinity to this product increasesbecause it works just a little bitbetter or differently than you expectedto. Just going the extra mile iscommunicating to your user like I valueyou, your time and I care about you. Howdo you collaborate with AI to nail allthe finer details of craft?>> What I think we should all be trying topush towards now that we have tools[music] that help us like go, you know,further and we can get there faster andwe can explore more surface area and weshould use them for things like this. Soinstead of creating more scope, right?How do we take the limited amount[music] of scope that is reallyessential and just execute it to a barthat, you know, folks maybe haven't havenever seen before. Welcome to Dive Club.My name is Ridd and this is wheredesigners never stop learning.Today's episode is with Josh Puckett whospent nearly two decades designingproducts like Wealthfront, Dropbox andhelping dozens of startups.>> [music]>> And recently he released InterfaceCraft, which is a library of everythingthat he's learned along the way aboutdesigning with uncommon

00:01:15care. So I askedhim to share some of those ideas with ustoday. [music] It's a super practicalconversation with a lot of screensharing and I wanted to start by havinghim walk us through the onboarding flowbecause it is truly world-class design.>> If I'm marketing a course about, youknow, uncommon care, really to go theextra mile, really, you know, trying to>> [music]>> lean into the originality that we cankind of create and express ourselveswith, it was important that onboardingfeels like special, right? So thenthat's where I came up with this idea ofa library card. Like, well, what if Igave everybody a library card that theycould, you know, customize or sign, takeaway for themselves? That would feellike a a trade of like, cool, pre-buythis thing that there's really nocontent for and then great, you get alittle token.The other thing in my mind was like, howdo I take over design Twitter? Like howhow does this go viral in a way thatfeels unique and and you know, there areobviously aspects of onboarding thatother folks have done like Arc browseror you know, Dropbox back in the day.Many onboarding experiences give yousome token,but I haven't seen any really kind oftake over in the way that I want it to.And so there's a combination here of medesigning things, but then also allowingyou to express yourself in the form ofsignature. So, Perfect.>> This is the flow for um

00:02:30you would come from Stripe and then youwould see this, right? For most folks,they see this message. There wassomething I wanted to do for folks Iknew personally where I actually wrotethem a small personalized note. So onthe off chance that they bought this andsigned in, they would see something likethis for me.That's another example of like cool, Ihave a bunch of time with AI now that Ican like do. Want to write 50, you know,messages to folks I know. And that wasthe most fun of this I was like, ohyeah, there's all these people I'veworked with who have influenced me, whohave taught me. It didn't start out likethis. When I first started exploring, Iwas like, what if I just had like fivecards and you can just pick one and thensign it, right? Obviously this prototypeis like super janky. That's fine. Likeall I'm trying to figure out here is themechanics of like,does it feel good to fidget with cardsin this way or like does it feel alittle bit limiting? And what I didn'tlike about this is one, it kind ofcommunicates that there's only fivedifferent cards to pick from. And I hadan idea for more colors, but just didn'tfeel quite as exploratory orfidgetability is one attribute that I'vetried to imbue in the whole product.Like there are things that feel tactile,you can move with them, you can likeselect them. Invoice is a real piece ofpaper that unfolds if you want that. Andso this didn't feel quite right. I mean,they're actually interesting and you cansee I'm starting to explore thesegenerative graphics like

00:03:45on on the cardsthemselves.But then where I ended up going waslike, well, it should just be aninfinite canvas. Like once you get inhere, you could just scroll like anydirection. There's only 14 colorcombinations, which is kind of a lot,but when you present them in this way,it feels like, okay, cool. Yeah, and Iwant to, you know, scroll and like pickone. Which one is right for me? There'ssomething for everybody, right? There'slike classic, all right, you're adesigner, pick black. Or, you know,cool, I want something a little bitmore, you know, colorful, right? And so,this is another example of like thisfeels kind of fidgety, like being ableto like select the card, cool. That cardtransforms into what you're actually,you know, doing.So,you know, you can edit your name.Uh then you can sign your card. And so,this was I think the big reason whythat's a, you know, horrible signature.Uhsome folks shared recordings of themlike trying to sign it, and folks spentlike minutes trying tocome up with the perfect signature. AndI think that's the aspect that reallyhelped people want to share it, and onereason why this kind of went viral wasbecause in addition to me designing, youknow, a graphic, and you could pick acolor, you could express yourself. Maybeyou just want to sign it, or maybe youwant to draw a smiley face, or like apiece of art. Some people drew differentscenes on it. And so, that co-creation,I think, helped it feel more personal topeople, and is what

00:05:00made it kind ofresonate so much of like, okay, all Idid was this random course from thisrando that I don't know,but then I'm already now feeling like akid again, getting to craft and makelike an actual library card. At thispoint, when people had bought, I had nocontent yet. Library didn't exist. WhatI then had to do when once the librarycame out, there's about 5 weeks.Actually, no, it's almost exactly 4weeks. I launched the website on January13th, uh day before my birthday, andthen the library opened on February10th. And so, between that time, youknow, I was obviously creating thecourse content and the platform.And so, once folks came back, I felt twothings. One, a bit of pressure to like,okay, how do we how do we raise the baragain? You know, once you have access tothis, how do you actually want use thatcard that I gave you that feels veryreal and physical? And how do I take iteven further, right? Real quick messageand then we can jump back into it. Ifyou're still designing in Figma andrebuilding in Framer, then you're[music] doing twice the work. WithFramer's design pages, you no longerhave to jump between tools. In the lastpage that I made for the Dive website, Iexplored [music] and built entirely inFramer. You can sketch, iterate,structure, and publish to the web allfrom the same place. [music]Framer isn't just a site builder, it's adesign tool for your entire workflow.You can start creating

00:06:16today for free atframer.com. [music]And if you use the code rid, you canunlock a free month of Framer Pro. Therelegitimately might not be a tool thatthe design industry agrees on more[music] than Mobbin. Over 1 milliondesigners from companies like Airbnb,Uber, Headspace, all use Mobbin fordesign inspiration. [music] And it makessense. It's one of the highest ROIinvestments that you can possibly makeas a designer. I use Mobbin almost everysingle day to look at real-worldexamples of how different productshandle specific UI patterns [music]and flows. I mean, it's invaluable to mypractice and I can't recommend theproduct enough. So, head todive.club/mobbinto check it out today. That's m o b b in. Now, on to the episode. At thispoint, I had already had a lot of ideasfordifferent graphics um that could be onthe cards. Yeah, so this this is aplayground I made coming up with thegraphics themselves. This has sinceevolved in in some ways. I released atool called BowKit that effectively abetter design version of thisconfiguration panel. That just makes iteasy for folks to work in this way,right? Of kind of I call it either likelive tuning or parametric visualization.The big idea here is that

00:07:31if I havedifferent graphics,these are all driven by some parameters,right? They go into some function. Inthis case, it's pretty simple. They'reall generated based off of a wavefunction.And then obviously different kind ofpermutations of what that's driving, butyou can imagine in Figma, I could havestarted and tried to design like N ofthese, you know? Like, "Oh, maybe itshould look like this."But it's like, okay, that would takeforever versus hey, I can just make atool to make this thing. And I thinksome of your other guests have also, youknow, are are kind of using this idea,but the whole thing here is you want tobe able to as quickly as possible feelin reality like what the result is ofyour choices. And so, this was how Ikind of came up with like, "All right,here's the one that feels, you know,right for for this version." When thelibrary opened, there are four differentgraphics, and I'll walk through thatonboarding, but this was my way offiguring out like, "All right, like whatlooks good, you know? Like small,large." There's all sorts of differentcontrols here that I can choose to endup with different graphics themselves.You sometimes you want to see like amillion of them, right? And so, this isthe cool thing about I think me I now.So, you can be like, "Hey, coolcomputer, go generate like a milliondifferent permutations for mewhere it's picking different parametersjust randomly that I maybe never wouldhave come

00:08:46up with, right? And so, forsome of the these differentcombinations, this one right here, thisthird one where it's like like Iwouldn't have done that. It feels alittle bit too heavy to me of like thewhole thingsit's like a tunnel. However, it's superdope, right?>> It's kind of cool. Yeah, it's cool.>> Yeah, it's kind of cool, right?>> You built a design tool that basicallyis perfect for your use case. I'm surethat there is at least some subset ofthe people that are watching this rightnow that are like deeply intimidated bywhat they're looking at, you know? Like,there's no way that I can make somethinglike that from scratch. And maybethey've even seen a few examples oftools, and it still is just really,really daunting. Talk to us a little bitabout what it takes to pull somethinglike this off. What this is is justsimply uh a grid that has differentrows, and within each row, there's anumber of items. The opacity of thatitem is driven by a wave function.There's obviously some more inthere's more detail maybe in there thatwe could go. But in terms of recreatingit with AI or creating it from yourself,you could just say probably something assimple as likecreate a graphic that is a series ofrowswhere each item within that row has adifferent opacity that is controlledby a sine wave.Give me sliders

00:10:01to control like theamount of rows, items within a row,range of opacities, and factors of thewave.Make the background for the graphicblackand make 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 stillpretty good. Something that I'm tryingto get better at is paying attention tothe specific words that drive reallygood outcomes with AI. So like for me,oh, I haven't been using like sine wavefor instance. That makes total sense.That is like a little thing I can justtake into my practice and now I canrecreate that very very easily. Once youknow that idea of like a sine wave islike a way to create like a generativegraphic. There's a lot of other ways ofdoing it, right? You could use like atime stamp. You basically want likechange over time, right? You could goreally deep in that idea or you couldjust think abstractly. Like I don't needto know you as a user don't necessarilyneed to know the math, right? What isthe equation for a sine wave versus acosine wave or or any of that stuff. Allyou want is the intent and you don't youwouldn't even have had to say actuallysine wave. You could have described likeI want a grid where each item has like aslightly different opacity and it'sdynamic. I bet AI would either eitheruse like wave functions to drive that orsome other thing

00:11:17to get you the resultyou want, right? And so if you can seeeither in your mind or you have areference like this is roughly anapproximation of the outcome that Iwant, AI is pretty good about helpingyou get there. And then you know,there's a bunch of tuning, right? Tolike get it.>> Even the tuning though I found I don'tactually have to have the language forit. Like I was playing with a shader theother day and I don't know what thecorrect language is to control theshader and I just said, "Just give meall of the relevant controls." And itgave me a bunch of things that I'd nevereven seen before and they workedperfectly. Yeah, totally. And that'salso a way then to learn, right? Oflike, "Oh, here's how this works. It'sdriven by like a wave function or, youknow, whatever." What's more importantthere is like your intent and being ableto play with the outcome. Right, so herewe go. So it's like, "All right, thiswas like a one-shot prompt that like,from my perspective, it's prettylucid-y, right? Yeah, so it's like, "Allright, cool. It already gave us aninferred like, all right, that's aswitch. I might want to And for context,I guess for viewers, like this V0 has noawareness of my code repo. It's just anet new thing, you know, from scratch,right? And so that now you can start toplay with and see, like, "Okay, cool.What does a wave function like actuallydo, right?" And maybe I don't want tolet opacity go to zero cuz that's thatgives me these weird zebra stripes. Somaybe there's, you know, a higher kindof minimum. Frequency is basically howImagine a notion with a

00:12:32series of waves,how tight are those waves? How close arethey together?Amplitude is basically how big is thewave? Like how how tall is it?And then phase shift is just offsettingthat wave. And so, you know, you don'teven need to know that to be able toplay with this and be like, "Oh, cool,like great. I can make it big. I canmake it small. You can control the speedof it, you know, that feels a little bitmore manic. This feels like, you know,nice and calm." And that's just like thevery first prompt, right? And so you canextrapolate, like, "Cool. Going fromthat to, you know, a playground likethis, all that is is just going a littlebit deeper on like, "Okay, cool. Nowgive me,you know, I have a colorlike a enum for my colors. That's likethe this palette. Put that palette inthere, right? Okay, put in like a randomseed so that like it the wave doesn'tlook exactly the same for every userevery time they visit." And, you know,different things like So gap is a goodone, right? Like this lets you getpretty different results and that'sjust, "Cool. Give me a slider to controlthe space between each item.So, if you just think about like inEnglish, like what is the thing I wantto play with or change or control, thesedays like AI is pretty good aboutinferring what specific implementationyou need to get that result.>> I appreciate you walking through thatbecause it does point at the fact thatlike it's not hard to build these tools.Like you can create almost

00:13:47anything,which then puts the bottleneck more onlike your ability to explore and ideate.That's the creative process. So, I guessI'm curious more to dig into like whatyou're doing behind the scenes to arriveat this output because you have thisthis beautiful metaphor and all thesedifferent interactions. Uh we talkedabout like the visual piece. I kind ofjust want to dig in more to differentaxes of your process. There's so muchthat I want that I have thoughts on oropinions on or that I want to share, andI don't know yet exactly what form thattakes. And so, I I thought that alibrary was a pretty good metaphor forthat because it is inherentlyopen-ended, right? And so, on my desk Ihave a bunch of different books whereit's like, all right, this has nothingto do with the book that's under it, butI have them all in my personal library.So, that was the idea of like the broadmetaphor. And then coming up with like,okay, well, what exists in a library?It's like, well, you have shelves, youknow, you have different areas, you havelike a help desk, you know, librarieshave events, and they also have likelibrary cards. Like that's how accesswasuh you know, it was created. And so, youstart thinking down the rabbit hole oflike, what are what are attributes ofthis metaphor that I could create? Youpretty quickly arrive at like, oh, we'llgive everyone like a library card,right? So, I could have given peoplemaybe like an avatar, right? That'slike,

00:15:02cool, here's your dynamic littleavatar. Maybe they get like a coin, youknow, like a token or something likethat. But library card both feltauthentic to the metaphor and also ahighly visual thing. And again, had thatkey attribute of like, I wanted to letpeople feel like they were creatingtheirs, right? It's for them. It's notjust, hey,welcome, here's your American Expresscard that's the same as everybody else'sAmerican Express card. You get to signit, and you get to make it your own inthat act, right? And so, the prototype Ishowed earlier here, you know, this wasa much earlier starting point of like,okay, I already had this idea on thehomepage of different cards representingthe collections themselves, and thesealready had the graphics in them. Andso, the library cards are just playingon that idea. Like, oh, cool, what if wetook that same concept of differentcolor schemes, different palettes,different graphics,you know, and combine them intosomething that that that you would getas a user. This version though, likethis is horrible, right? Like, you lookat this and you're like, ah, okay, cool,there's only like five of them. It's waytoo big, the way to choose it is likekind of weird. There's just a lot that'slike directionally interesting, but notright. And so, like, the process ofiteration is how you get from like, it'stoo big, this graphic is way toofinicky, when they're animating bydefault, it's like a lot. And this feels

00:16:17like you're picking one of five presetsversus like, oh, it's mine. And that wasenough like, for that to go, you know, Ithink that resonated, but then in termsof coming back to the library, that'slike another first impression. I think alot through the lens of hospitality aswell. Like, that's a big source ofinspiration for me. Thomas Keller or,you know, other famous chefs, where theyare pure designers and artists. All theythink about is, how do I give yousomething that you need, which is just ameal,in a presentation and in an experiencethat you will think about for the restof your life and tell others about. Tome, that's like really the purest formof of design, where they're solving aproblem, which is like, great, you needto eat food, we need to make food foryou, and you pay us for that food. But,they're wrapping it in an experiencethat makes it feel so unique and sodifferentiated. So, that's what I wasgoing for for this, right? Like, cool,how do you come back to this library,use that thing that you that object youalready made, but how do I take it evenfurther? And so, this is the onboardingflow for, you know, once the libraryopened on February 10th,you're sort of coming back, right? Andso you probably had forgotten what yourcard was, maybe, or you had some notionof it, but you know, you didn't reallyknow. And so the first thing is like,great, here's just a quick, you know,teaser. I wanted you to like read thisand like pause. So that's why it's likevery, you know, minimal. And then I showyou your card. So this was

00:17:32this is likemy real card, right? It previously wouldhave looked like this, right? So if Ihad saved that, it would just be likethis. And so you're thinking like, okay,great, I can just confirm if I want toedit my name or signature, I can dothat. But then the stairs that is like,cool. Well, have more fun now. Maybe youwant to pick different colors. And sothis whole experience here is reallydesigned around, again, just like playand letting you fidget with things. Ifyou want to get into the library, cool,click the obvious big black, you know,CTA that's like, come in. Or great, likeexplore the different color options,right? I didn't want to do it in thesame way that I had already done it ofthis infinite canvas. And I wanted tolet you go deeper. And so this is justgreat, like here's the differenthigh-level color combos. Here's somecontrols, you know, there's no labels onthem.They're super big and chunky.And you're like, cool, what does thisthing do? Like, I don't know. Like, oh,cool. So as you start to experiment withit, like you get rewarded. And I thinkall of this is like pretty intuitive,but it also, again, is just trying toencourage you to touch things, likemoving around. This slider is kind ofdoing some Well, both of these slidersare basically kind of magic controlsthat we can like dive into where they'regiving you just one thing to play with,but it's actually manipulating severaldifferent properties at once. And sothis color slider is adjusting

00:18:48hue,saturation, and lightness. Apple does alot of this, like they're I mean,they're operating at another level, uhthe designers and engineers on like thephotos team, where that whole constraintis also like, well,if I gave you Lightroom, or if I gaveyou this,right? This is a more fine-grain controlpanel. But to you as a as a buyer, as aconsumer, like you don't actually wantthis, right? And so you don't want totake the time to be like okay, thisfeels like work. Even if to me it feelslike play, to you you're like why areyou making me do work here? Versus likehey, you want to change the color?Great. Just mess with it. Like there'sdifferent things, you know, try it out.And so, I did have versions where it'slike oh, what if literally there werethree different sliders for hue,saturation, lightness?You can control all of that, but then itstarts to just feel too messy and itdoesn't feel like a simple onboardingflow anymore. This slider as wellis doing a lot of crazy things also.>> it. You made it an infinity loop. So,it's So good. Yeah, there's actually areason behind it. This is a real thing.This is what I'm calling this is like aLissajous slider.A Lissajous curve is a concept inmathematics basically for mapping valuesover time, right? And what it lets youdo, one of these is a deep dive on it.One of the things that that lets you dois solve what I'm calling this likethree slider problem. This

00:20:03is just apreview of like another upcomingresource on basically using wavefunctions in interface designer or ingraphic generation.So, you can see here these are just likequick snapshots of different graphics.And so, if you remember from thatplayground, we're using a wave to drivethe creation of all of these things. So,here's what it looks like letting youplay with the three key parameters oneat a time, right?And again, this is fun. It's fine. Butimagine like three different sliders,you know, onthis page where I also want you toselect the shape of a of a graphic andthe color. That would start to overloadit like quite a bit. So, how do we howdo we solve that, right? How do webasically get like one slider that cancontrol three different values like atone time? Did a bunch of digging. Isuppose I am a math guy and that isinteresting, but I don't have a collegedegree. I dropped out of school. You canjust teach yourself things, right? Andso, this was one of exploring like cool,hey, plotter or whatever. Like how do Ihow do I accomplish this end goal? Likehow is there prior art out there inother fields that I can, you know, thatI can run with, right? And so, thisshows like what a Lissajous curve is,where it is a it is like literally aninfinity symbol, but what it lets youdo,here's a version here that controls it,as your position on this curve

00:21:19changes,it is driving these other two values,right? In this case for frequency andfor, you know, phase.So, it is actually a three-dimensionallike object, basically. But, what thatdoes is it gives you all three of thethings that we want a user to change.frequency, the phase offset, and theamplitude. We can control all of thosewith a single slider, right? And so,that whole idea is basically how do we,for both color and for the parametersdriving the graphic, how do I give auser just one thing to fidget with? Thathas a really dynamic result, right? Interms of like the the expression of whatthey're creating.And so, this did start as like, great,give me a you know, like a frequencyslider. Cool.And it has a little bit of like dynamismin it. But, by combining them into intojust one thing that's controlling all ofthose things, you get some pretty likeif you look at, you know, the graphic uphere as I'm sliding this,there's like a lot of dynamic versionsof it in just a a simple kind of smallsurface area. Like maybe that sounds alittle bit heady or like academic.Obviously, some of that is, I think,related to just the idea of like maththere, but I didn't know about theLissajous concept before starting this,right? What I knew was my intent,

00:22:34whichis okay.I want to give you three like knobs, andI and from those three knobs, I want itto feel like you can create an infiniteamount of different permutations of alibrary card to make it actually feellike yours. Like, cool, I'm going tospend 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 expressyour problem or your goal, right? Like,hey, here's a problem. I want to changethree parameters at one time. How do Ido that, right? And so, one idea islike, oh yeah, we could try this, youknow, this Lissajous fur slider thing."It's like, "Oh, okay." Yeah, I didn'tknow about that, but now I do, and thatis sick. And I've never seen anyonecreate like a component that uses thatprinciple or that framework, basically.And it happens, as you noted, to looklike an infinity symbol, and so it'slike, "Oh, that's perfect, right?" Andthat's that's a good example, I think,of so much of design is just iterationand discovery. I might have an intent,but stumbling upon something like thisis is just sticking with it, right? Andjust going like one more iteration.Like, I could have designed threebeautiful little sliders, you know, forto control the wave, but it wouldn'thave been as good as this. So, Yeah, andyou would have had to label them, too,you know? Like, you would have had threesliders, they would have had a label,whereas this there's like almost anelement of mystery, you know? You'relike,

00:23:49"What is it going to do when Idrag that?" And I love that there's nolabels anywhere else where all of asudden it's like I'm acting almost outof curiosity in a way. Again, that goesback to like your fidgetability, whichis totally the new measuring stick thatI'm going to have for stuff like this,and just not having those labels goes areally long way. Yeah, I wish mydirection was as clear as what you justsaid, right, when I was thinking aboutit, but that captures it so well, a lotof just what design is or what I thinkwe should all be trying to push towardsnow that we have tools that help us likego, you know, further, and we can getthere faster, and we can explore moresurface area.And we should use them for things likethis. So, instead of creating morescope, right, how do we take the limitedamount of scope that is really essentialand just execute it to a bar that, youknow, folks maybe haven't have neverseen before, right? And yeah, there arestill problems with this, like, there'sthings I don't love about it, but Ithink it's pretty great as far as likean execution of that concept. One thingI'm inspired I make furniture, like, Ikind of woodwork on the side, you know,as many designers do, but I'm in thatkind of designer-to-woodworker pipeline.You know, Shakers, they make a lot ofdifferent furniture, and one of theirkind of philosophies in furniture makingis pretty simple. It's just make it aswell as you can and make it as simple asyou can. And I think that sums up somuch of what great design is in a lot ofways, where it's like, yeah, all

00:25:04right,there's three different broad sets ofthings I want you to do, color, specificgraphic, and then choosing the type ofgraphic you want. How do I do that assimply as possible? I love thatprinciple because something that I'mfinding for myself is it's becoming moreimportant to practice restraint as I cando so many different types of thingsquickly for the first time ever. Like Ican animate every single thing on thepage in a way that was previouslyimpossible,and it's very fun to do so. And so,really having to be intentional aroundlike where that line is, where like,okay, this is additive and now it is toomuch. Where is the too much line? It'sbecome a really big part of designingevery day for me. Exactly like what youjust said. One idea here that I put intoRams is like less but better, right? Andthere's this Bruce Lee quote that Ithink about often.My co-founder, Todd Adam Kela, he taughtit to me, where, you know, it's notdaily increase, but the daily decrease.Hack away at the inessential. I think itwould be hard for you as a designer toedit your work too much. It's likeyou're cooking a sauce, right? Andyou're trying to reduce it, you'retrying to concentrate flavor and make itthicker.You can take it too far in, you know, acooking world, but in the design world,I'm not sure that you can.

00:26:19I think thereare still aspects of this that I couldhave simplified or or we could likeimprove and resolve. One that's jumpingout to me right now is like there's adifferent height between our toolbar atthe bottom of these controls. That'skind of bugging me, right? A simpler,more reductionist view would say, okay,let's just have one height for ourcontrols everywhere. And so, I thinkthat practice is one where I seedesigners limit themselves often by justnot, to your point, instead of stickingwith it and saying, okay, I'm going tochoose restraint instead of adding more,adding more things, more surface area,more bells and whistles.How do I take what I have and justdistill it to like its absolute essence?I think that's what makes everything wethink of as great design, great design,is it's just really distilled andconcentrated into what makes it great,right? And everything else that's notimportant, that's a nice-to-have, cutthat, right? And that takes time, forsure.There's one question that I can't stopasking [music] myself. What if companiesapplied to talk to you rather than theother way around? And that question isthe foundation for the all-new DiveTalent Network, and it's [music]working. Like, right now, I'm helpingmany of the most exciting startups thatI know to hire the designers andbuilders who listen to this show. So, if

00:27:34you're curious what might be out there,and maybe you want to get on my list, or[music] maybe you're even looking foryour next design hire, head todive.club/talentto join today.Okay, hit this back arrow reallyquickly. And yeah. Talk to me about how[music] your applying this type ofmental model and really boilingsomething down to the essence of whatyou want and the feeling you're tryingto create. The way that these buttonsmove, moving between these two pages,the hover states, talk to me a littlebit about your process. What are youtrying to create? What are the decisionsthat you made? Yeah, so I think there'sa lot in this little control panel thatI think is commonly understood as likemorphing, like morphing interfaces. Andthe person everyone should reference onthis is Benji from Family. He's If youjust go to benji.org, he's got a greatwrite-up on like I think it's calledFamily Values. Family is a crypto walletthat just has an immense level of detailand care applied in like the design andcreation of it. And this idea hasexisted before Family, but I think Benjicertainly executed it at like a newbest-class level and popularized theidea. Anytime you have these controlslike on a page, they can be changinginto other controls that you need. Andso there's sort of an old school way ofthinking,

00:28:50think in terms of maybefront-end interfaces that is like wellin applications where everything's justlike a crud app, all we're doing istaking content from a database, we'reviewing 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 likethe very unconsidered approach. In thiscase, it's like okay, I already havethese buttons on on screen, right?It's very obvious with this one with thearrow that's literally, you know,jiggling. Everyone knows like what thatwould do. There's an aspect of this oflike primarily this is designers,engineers, people who care aboutexperiences that are signing up for thiscourse. There's also not that many ofthem. So I'm okay taking more potentialliability from like a usabilityperspective or accessibilityperspective, because I know it's a smallaudience and this is also my thing,right? It's just for me. And so that'slike the number one thing is like well,I'm making this the best for when I wantit to be. And hopefully that willresonate. And if it doesn't, I'm finewith it. Again, just a side project.That's important to do in all of yourwork, right? As a designer, like youshould be fighting for what you think isright, not trusting anyone else. Cuz ifyou do, you're going to dilute that ideaand it's going to be worse, most likely.So in this example, well, when I want toedit the name,two things I'm thinking about.

00:30:05One, Ialready have the name on the card. Soit's already there. That's a potentialinput, right? Again, the default thingwould probably be you click this, youget like a dialogue that's like edityour name, done or cancel, right? Butthat would take you out of the flow andthat would also again, weaken the themetaphor of like this is your librarycard. Everything you need on it isalready on it. When you need to edit it,you're directly editing it itself,right?And so yeah, this button transitioningto done, uhthat's just I think a more elegant wayor more fluid way of transitioning thestate to what I need. So if I'm makingsomething on the card and input, I needsome control to like accept that change,right? But I already have a button, sowhy don't I just use that button to saydone? Um and I yeah, I played withprobably uh I wish you know, like alwaysI wish I had kept all the screenshots ofpermutations.Took a little bit to get this right, butthe whole idea is how do I not add moreto the page and how do I actually focusyou and simplify it? So, when you clickto edit name, you can notice here likeI'm fading out the CTA cuz you you needto confirm your input. I'm auto focusingthe input because obviously you're goingto need to type there, so like why don'tI just help you and give you focus. AndI'm also fading out all the other

00:31:20content on the card itself, again toencourage focus. And then the finalthing is like the label here changeslike, okay, maybe someone is confused atthis point, probably not, but if theyare, you know, I'm changingWell, folks have different names, so I'mthe author. If you joined in thepre-sale, you're a founding member. Ifyou joined after, you're just a member.So, this little title changes.And so, why don't we change that too tojust say type to edit, right?This and again, even looking at this nowwith fresh eyes, it's like, ah well, Idon't need this label. Like, why do Ihave done? It should just be a checkmark. That would be a lot simplerinterface.>> just be a check mark. And then you getthe center alignment on the area.>> Exactly, exactly, right? And so, that'sthat's a great example of I'm a prettyokay designer. This was executed to likea pretty high bar and even now we'refinding ways to like improve it, right?So, yeah, same thing with signaturelike, well, I need a way for youOriginally, when you click this, I hadit clear the signature,but then I was like, ah that's actuallyawful cuz that's a destructive buttonthat doesn't look like a destructivebutton. And so, I just added this littlething that's like, all right, if youwant to, you can erase it, right? Andso, then this transitions to like, oh,please sign. Then as soon as I startsigning, it morphs back to done, right?All of these details communicate to youas like the the the member or the theuser the customer,

00:32:36Job should reallycares like about design or about thisexperience. He is taking the time,whoever made this, right? They they havetaken the time to really like dial inand think about all these details andthat builds trust, that builds likeperceived value, your affinity to thisproduct increases because it works justa little bit better or differently thanyou expect it to. And you can apply thateverywhere, right? SaaS products,fintech products, whatever it is.Just going the extra mile iscommunicating to your user like I valueyou, your time, and I care about you.And so everything else now in thisproduct you are starting to associatewith those values. People bought thiswith like nothing on the web page,right? It's just "Hi, I'm Josh. I'mwriting about design. I have maybehelped some people and worked with thesekind of companies.Please, you know, join if you'reinterested, right? So I again wanted toreward people and and give them valueeven before they they get in. And Ithink it worked like you Well, wehaven't even gotten to likeonce you're happy with the card, you getsort of this experience, right? Wherethere's two things happening here. Onelike is there's a little bit of a hintto like, "Okay, drag it down." And thenthe card's moving, right? And so if youdidn't immediately start playing withit, you can, right? I worked withtotal happenstance. I happen to be in ina

00:33:51in a slot with Josh Dunsterville,who's an awesome sound designer {slash}designer like just, you know, anotherone of those people, very talentedpeople on the internet. And I shared awork in progress of this and he's like,"Oh." And it had like some you know,default sounds that were great. He'slike, "Oh, do should we like do you wantto jam on custom sounds?" I was like, "Iyes, I didn't know that was a thing. Ididn't know you did that." I mean, Iknew it was a thing, but I didn't knowJosh did it. And so literally in like aday we're just like jamming on differentsounds of like, "All right, what if whenyou drag it like if you don't drag itenough, there's a threshold for like itgoes back, right?" Again, encouragingplay, encouraging fidgetability. So Joshcreated all these like very He has a awhole write-up on this as well on hiswebsite that people should check out. Alot of sounds that, you know, show youthings. So, this lot also you'll noticelike, okay, we're masking the card whenI drag it in. One of the things I wasthinking is like, okay, if I gave you alibrary card, you're kind of thinkingthat you have to use it, right? It wouldkind of maybe feel a little bit lame ifit's just like, here's your librarycard. Cool. Next screen, you never seethat again.>> it out in settings whenever you want.Exactly. Exactly. One of the beston-boardings I've ever seen was Mailbox.And so, Gentry Underwood was the founderand and primary designer of that thatproduct. This is I mean, over two yearsago at this point in the Dropbox.

00:35:07Andthat team created like a coin where theygave people who signed up on thewaitlist, they gave you like a literal,well, not a literal, but a a digitalcoin that you would take and put intolike a machine that like, you know,you're redeeming your token for accessto Mailbox. And I had always loved that.That that stood out in my memory as likea an example of giving someone like a atoken that that that has functionalvalue. It's not just aesthetic, it's notjust veneer. And so, in this case, it'slike, all right, you scan library cardsor you Sometimes you put them inmachines like in New York, right? Ifyou're riding the subway, you put yourticket in the thing. That was like theinspiration for this. I was like, cool,well, what if you just drag it in?And then, there's a success sound thatplays there and it kind ofyou know, it goes away.Then this was a whole thing This is awhole another thing of like, foundingmembers got I was really fortunate to towork withand partner with friends at Claude or atAnthropic and Vercel to give everyfounding member like one month of V ZeroPro or Claude Pro cuz I wanted folksthat signed up from all over the world.And I really wanted everyone to be ableto use AI. Not everything in this courseor in the library is about AI,but a lot of it is. And it was importantto me that folks could try that. And so,then there's a whole flow of kind ofgiving that like, how do you give themthat in a way that again feelsunexpected, but also feels

00:36:2210 out of 10.I view myself as like a craftsman, aslike an artist, as an engineer, someonewho cares, and I want everything I do tocommunicate that. And so then there's awhole question of, great, how do yougive them those things, right? It'slike, well, we already have a cardmetaphor that we're going to be workingwith here. Like, you have a librarycard.What if like we gave you a literal giftcard that like you could also justscratch offand then see like how many credits youget, right?I I'll admit, unfortunately, one monthof Cloud, this is much more like basic.Right? It's like, okay, one, this is alittle bit more matches their brandguidelines, like they're I think alarger, you know, kind of company. Youknow, this even this is great, but Ithink the V0 card is like just anotherlevel like above. And so I thinksomewhere in here I have a Yeah, so Ihave like this is the playground forlike this card. But there's like a lotgoing on here, but it's all kind ofreduced. And actually in in InterfaceCraft they have a walk-through of likecool from zero to one, like how do youadd all these different like layers orhow do you composite all these things?But I guess the thing to kind ofhighlight is like again,I don't actually know. Like this is avery interactive thing, right? It's notreal light, but it's like simulateddynamic light, there's material here.One of the small details on hover isthere's this holographicThe Vercel logo's a triangle, so there'sa

00:37:37this pattern of triangles>> of separates. Yeah, it's like shifting,right? As you're,you know, interacting with it. So that'slike one of those small details thatlike maybe you don't perceive that inisolation, but when you're using thiswhole thing, like you're you're like,oh, wow, cool. Everyone has seen justlike a little, cool, here's your giftcard, it's static, right? Everyone'sseen that. What is the best thing I canimagine that nobody has seen before,right? And yeah, there's definitelycards, there's a lot of, you know, folkswho've done the like, cool, there's aperspective, there's like a hologram,but I don't know if anyone has made likea scratch-off, you know, card that haslike custom Oh yeah, you'll notice thezoom-in is good here. Like this is acustom brush. It's not just like acircle in code. It's like an SVG brushthat I created in Figma, so then itlooks more real when you're scratchingit off, right? Yeah, and then Joshcreated like three Well, first we hadjust one sound. In the real world whenyou're scratching, it's not just thesame sound over and over. So, weactually created three different sounds.And then your direction of scratch, likeit changes the sound basically. So, itfeels more like you're actuallyscratching it off. This is just anotherexample of like what happens if you takea very simple idea. Cool, you're goingto get credits to be zero.And you take it to 11. Right, like>> Mhm. What's the best way I can revealthat to

00:38:52someone 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'sjust a card and then you hover andyou're like, oh, wow, this is cool. Andso, this uses an approximation of someof the air burning colors, but all ofthese sliders help, you know, change it,right? You just have so many differentproperties you can play with that like,all right, let's turn off a lot of thisstuff to show like, oh, there's not asmuch metallic or like reflectionhappening. So, it feels slightly lessphysical. This is actually not maybeminimalism. This is definitelymaximalism. But when it all comestogether,it just feels like a simple cohesivething, right? That you get to experienceas a user. Well, I think that's thebalance that is so impressive. It's likeyou know when to show restraint and whento just push way past what anyone wouldconceivably think of. And I think thisis like what you're demonstrating righthere, this is what speaks to that levelof uncommon care that you talk about. Idon't know if I have a good or a simpleframework for that, but the one I kindof lean on the most is like conceptualrange and then conceptual depth, right?So, conceptual range is like what areall the ways Like let's say I want tosurprise somebody with a gift of E zerocredits. What are the ways we could dothat? Cool, number one is just a littlegift card that appears. Number two,confetti burst and 25

00:40:08like appears onthe screen. Number three, all right,there's like a box that they like openup, right? Orthere's a piece of paper that theyunfold. And again, I'm just riffing onthese like in real time. You don'tactually have to necessarily design allof those, but thinking about that rangeof like, all right, there's obviouslypros and cons for all of those differentoptions.And then once you have one that feelslike it works, if what your goal is isto demonstratewhat I hope or what I think of as like aa bar setting or like kind of a worldclass level of execution,you just have to go deep. I've probablyspent as much time on this gift card asthe whole of onboarding, right? Becausethere's just a lot of different layersto it. Like both both like literallyum and then also in terms of like, youknow, the interaction of just kind ofgetting it to feel like what I what Iwanted.>> I want to zoom way out. It's reallyimpressive the quality and thetypes of interactions that you'rethinking through. My assumption is thatyou're able to push the quality barmaybe higher than you have been in thepast cuz you've been designing for along time. Like this is insane whatyou've made. So,I'm curious to hear from you when youthink about the value proposition thatdesigners bring to the table,how has your thinking on that evolved inthe last even year

00:41:23of going deep intothese different types of tools andworkflows and explorations? I don'tthink of myself as old, but we arecertainly, you know, we're we're like anolder generation in design. I'm seeing alot of folks sort of get back into thegame, right? Oryou know, we're it's like we're busy andmaybe we have families or mortgages orjust responsibilities, right? We can'tnecessarily stay up to pull all-nightersthat we used to to have to executesomething like this, right? Like I hadthe technical ability to like createeverything on this gift card before AI.However, I don't even know how long itwould have taken me. Like it would havetaken me a lot of time by hand to get tothat same level. And so what that meansis like, well, I'm just not going to doit, right? It becomes irrational to atsome point, right? It's like, well, youhave to ship. You can't spend so muchtime on something, you know? Um there issome limit to like what you can put sortput in as in terms of your input intocreating something. I think what a lotof the coding agents have allowed orunlocked is all of that implementationwork can now be done instantly orrelatively quickly. And so what thatmeans as designers is okay, those crazyideas you had, like what if we made likea holographic scratch-off gift card?That's an idea that like 5 years ago ifyou had said that in a crib asdesigners, you're like, okay,

00:42:38I can maybe like rough it out in Figmaor maybe like I prototype it in someprototyping app, but like unless you'reequally competent as like a truefront-end engineer, you can't take thatidea past like, well, here's like theshape of it, right? Uhversus now you can be like, okay, let mejust spend like, you know, I don't know,4 to 8 hours like trying to implementthat and then refining it, right? Andjust taking it further. And so I thinkthat's what's been unlocked for folkslike me or or many others. There's thatpopular saying, right? Like may your mayyour reach always exceed your grasp. AndI love that and I think about that a lotbecause we should always be aspiring tothings that we can maybe never get to.You know, Plato has this idea of form,right? Like the platonic idea of athing, and I think like my view is wecan never actually get it. We can getclose, but we can't actually create theperfect onboarding, right? Or theperfect feature.>> [snorts]>> That's really hard to do in software orin life, I think in a lot of ways, butwe should always be striving for that,always reaching for that. So what AI hasenabled is like it compresses yourability to, you know, to reach, right?So it brings those ideas that used to belike way up there. It's like, oh, how doyou make like a responsive holographicspecular highlight thing? How do youmake that real? It's like, I mean, Iwould have to spend a lot of time doingthat. Versus now, you can just startlike reach one more level up, right?

00:43:53Andso as designers, you always have thatlittle inkling of like, oh, wouldn'tthis be cool if or like, oh, what if wewent further and did this thing, right?Like we we have that in whatever we'remaking it anytime. That probablyresonates with a lot of listeners. WhatAI lets you do is like, cool, just tryit. Just do it. Right? Maybe you don'tget anywhere, and that's totally fine,but it lets you cover more groundquickly. And so, I think that's what'smost exciting about it and in terms ofthe value prop of what that does fordesigners or even like engineers,founders, like anyone making something,is it gives you back more time fromtranslating your idea to a shippedproduct. That used to take a lot oftime, right? I have an idea, cool. Ihave to like type a bunch of charactersinto like a soft like a coding editor oran IDE,then try to see my output. If wecompress all that time, great. You canmakewhat you used to make last week, you canmake it more quickly. Again, what do youdo with that time? That's where I thinkdesigners are uniquely valuablein terms of being able to really thinkabout and push like, okay, what wouldthe ultimate version of this experiencebe? Or how do we better manifest andrepresent like our brand, our values inour product? How do we imbue thatthroughout? Or how do we better solveour problem or better differentiate andposition in the market? Whatever it is,you have

00:45:08more time now where you shouldhave more time, I think, to be able togo deeper on that. And I thinkdesigners, for better or worse, we thinkof ourselves, in terms of being adesigner, as like the people who carethe most in the room.I'm not sure that's actually true,but let's just run with that idea. Whatit lets you do is like show how much youcare and show that level ofconsideration. Versus before, you justhad to tell or you would show with roughagain, rough facsimiles or artifacts ofwhat something could be. Versus you canjust show up and be like, hey, so youguys know how this one part of ourproduct like it sucks? Everybody'salways complaining about it. Cool. Ijust made this prototype, fully coded,you know, front end flow, maybe there'smock data, maybe it's really in yourapp, I don't know. Um here's how wecould fix it. Like what do we think?Right? That is now reality for everyonewho's a designer, regardless of yourtechnical ability. And so, I thinkthat's the exciting part of like thismoment is it gives like I feel likewhatever natural talent or abilities Ihave, I feel like I have superpowers nowbecause it's like cool. All these ideasI've got that are maybe crazy or zany, Ican just give it to AI and like cool, itcan go do it, right? Or it can start toexplore that for me and then we cancollaborate together in terms of gettingsomething that's great. What about thedesigner who's listening who maybe theydon't have as many reps,

00:46:23maybe they'reslightly earlier in their career andthey're looking for ways to fast trackthe growing of this muscle that is theirconceptual reach. Like if they want tojust be able to reach higher and be ableto imagine ideas that are so beyond theobvious thing that AI is going to giveyou. Do you have any thoughts for thatperson?>> Yeah. Yeah, there's great Kanye lyricold Kanye lyric that I really love whichis something like you know, I made fivebeats a day for three summers. Quantityis a quality of its own, right? And whatyou need to do if you are trying to growthat muscle is just make five beats aday every day for three summers. Justtake a lot of shots at the goal, right?That is how you start to build yourintuition for what works great, whatdoesn't work great. I think folks oftenthink that maybe what you need tocollaborate with AI or get it to dosomething for you is like more advancedthan like what is actually needed. Solike this little let's focus on, youknow, frame 98,028here.>> [laughter]>> This is just showing like if you and Iwere in the room, this is how we wouldwhiteboard, right? I'd be like okay,cool. So like what if you know, there'stwo versions of this flow and sometimesyou get like a normal note, sometimesit's not.

00:47:39What if when you click thisthing or or like what if the way younavigate is you pan around and likecool, so you you can shift it. And thencool, what if when you click it, thecard zooms to center and scales up, allother cards push out and fade, right?This would take any anyone who'swatching could sketch this out at thislevel of fidelity in like five seconds.These aren't even cards. This is justlike almost as raw Figmas you get. Iguess there's like some auto layouthere, but yeah. This like a screenshotof a thing. The only special thing I'mdoing here is I'm applying the muscle ofa separation of concerns. I'm not Idon't care about the visual design. It'srough. It's awful. Literally doesn'tmatter. These actually are too highfidelity. They should just be colorblocks, right? All I'm trying to expressis my idea here for like, okay, well,here's the interaction model. Bydefault, you see this screen and thenyou do you know, then you pan around, dothis, right? This was like one of manythings I tried and literally this isjust the level of like direction thatI'm giving to AI. Maybe to some peopleit's like, wow, this is like arevolutionary idea, right? Like I didn'tknow you could do this, but to othershopefully you're saying like, oh, yeah,there's not much to that. Like I can dothat. I can like literally just sketchout a thing that I want and then cool,go collaborate with V 0 or Cloud Code orwith Codex, whatever,to then try to implement that. There'snot really shortcuts. The only shortcut

00:48:54is like, cool, make a lot of things,right? Try them out. Don't limityourself into thinking like, oh, thismight be just because you might not knowhow to actually create thatimplementation doesn't mean that youcan't use the tools that we all have nowto actually be able to implement it andto try. Again, in retrospect, I wish Ihad done a better job of saving thedifferent snapshots and artifacts, butwhen I'm iterating,it's fast. The level of like quality oflike these cards, it's fine, you know,it's really rough, but I'm just tryingto rough in like, all right, here's likewhat this looks like or here's likeanother example, like colors, right?It's like, all right, everything on thescreen is just me trying to figure outcolors, right? And again, it's superrough, it's messy and like it's fine.No, and even for the 9828frame, like is that that's an image thatyou were just putting into Claude?>> command command shift C, copy as a PNG,put that in the Claude and be like,cool, here's a storyboard of like what Iwant to create. Controversial statement,I think Figma is still really important,but I think what most people use it foris like wrong. The problem with tryingto use it to dial in things at fullfidelity in Figma is Figma's a lie. It'snot your actual code base. Even how itrepresents color and type is differentthan how that is actually going to beimplemented in a browser, right? But thegood news and what I

00:50:09love using Figmafor is stuff like this. Just roughly,cool. What if it did this, right? Andthen give that to an LLM. This is justanother way of communicating your intentto a coding agent or your goal. So youcould describe it in words and so youyou know, earlier you mentioned like,"Ah, well, what are the keywords thatlike I need to give, you know, like acoding agent?" There is some of that,but you can also give it images. Likeyou can paste images in the cloud codeintouh you know, V 0 and it will infer, "Allright, cool. Here you go." And itdoesn't always work. It's not like oneshot, right? But the point of that isn't>> better though.Exactly. It's getting better and alsothe point is to let you more quicklysketch out alternative ideas, right? Theone I showed you earlier of like there'sjust five cards at the bottom. Thatprobably took me 5 minutes to likecreate that, evaluate it, and be like,"Eh, this isn't it." And then move on towhat's next, right? And so you can zoomout and be like, "Okay, cool. I've tried38 different ways of like designing likethis card. Now I know for sure it's oneof these two." It reminds me of a Mr.Beast quote. He talks about the amountof people that ask him for advice onmaking YouTube videos and how hisresponse is always to make 100 videosand then I'll answer any question thatyou want. And by the time you make 100videos, you don't have any morequestions

00:51:24anymore. You figured it outjust by putting in the reps. And it'ssomething that I get excited aboutthinking about this next crop ofdesigners is even your example with thefive cards at the bottom of the page.That's like not that flippant of aninteraction, right? Like it would takesome time to hand assemble that andbuild it and test it out. And nowsomebody can get that quote-unquote repin 5 minutes. That's a heck of a rep in5 minutes, you know? That type of rapwhen we were dealing with theIllustrator and hand coding things wouldtake hours. This prototype here, forexample, like this is the coreinteraction pattern for like thehomepage, 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 Istarted like making it. I was notthinking at all about like the visuals.All I wanted to dial in was theinteraction.And then this prompt, I mean, it's alittle bit longer, but if you paste thisinto like V0, like it'll one shotexactly like this thing, right? And so,that's the level of like, oh man, yeah,you can just in 60 seconds explore aninteraction idea and then explore likeanother one and another one and anotherone. That's really powerful. And so, Ithink that's, you know, maybe if there'slike one takeaway that folks have, Ithink it's that you should be using

00:52:40these new technologies to explore morebroadly and go deeper as a result, notjust try to do more things or otherthings, but take what you have andreally distill it, refine it, again toits essence, and that's how you makesomething great. Josh, this has beenamazing. [clears throat] I've learned alot just watching how you work, andI really, really appreciate you comingon today and pulling back the curtain,giving us a little bit of abehind-the-scenes, talking through someof the ways that you think about whatgood [music] software looks and feelslike. I've enjoyed every minute of itand just want to say thank you.Before I let you go, I want to take just1 minute to run [music] you through myfavorite products because I'm constantlyasked what's in my stack. Framer is howI build websites, Genway [music] is howI do research, Cronola is how I takenotes during Crit, Jitter is how Ianimate my designs, Lovable is how Ibuild my ideas in code, Mobbin is how Ifind design inspiration, Paper is how Idesign like a creative, and Raycast ismy shortcut every step of the way.>> [music]>> Now, I've hand-selected these companiesso that I can do these episodesfull-time. So, by far, the number oneway to support the show is to check themout. You can find the full list atdive.club/partners.