The New Full-Stack Designer

Marvin Schwaibold leads the product design studio at Shopify, where his team is rethinking some of the company’s most important products for the AI era. Before Shopify, he co-founded the design studio Molly, working with companies including Apple and Google and building a reputation for highly crafted, interactive design. In this episode of Design Review, Marvin joins YC’s Aaron Epstein to show how AI has changed his process, from using Figma as a scratchpad to building working prototypes directly with tools like Codex. He explains why designers are becoming more like editors, how AI is making them more full-stack, and why taste and judgment matter even more when the tools can build almost anything. Then they review viewer-submitted websites and break down how hierarchy, motion, typography, and restraint can make a product feel more intentional.

• 0:00Speaker 00

  Today, I'm joined by Marvin Schwaibold, who leads the product design studio at Shopify. He'll give us a behind the scenes look at his process, where we'll see how he's using the latest AI tools to bring his designs to life, then review some viewer submitted websites. Welcome to another episode of Design Review.

• 0:24Speaker 00

  Marvin, thanks for joining us.

• 0:25Speaker 01

  Thank you for having me.

• 0:26Speaker 00

  Before we get into your work at Shopify, I'd love to hear more about your process and the tools that you're using today to design with AI.

• 0:33Speaker 01

  I feel like the process itself hasn't really changed. It's still extremely iterative and sequenced out. There's a lot of iterations and variations in the work in and of itself, but the tooling has definitely shifted a lot from tools like Figma and working with aesthetic layouts into more of an AI-driven workflow, where I'll use Figma as a scratchpad for some of the ideas I have, but then very quickly that'll transcend into like real demos that I can use. And then I only piggyback back into Figma from time to time if I need to lay something out or explain something to AI. But it's definitely more of a world now that includes tools like Codex and Claude Code

• 1:18Speaker 01

  and being in terminal a lot, and just getting to an output that I can use and test on my phone or computer a lot faster. And that becomes like a really fun, still very iterative cycle, but we've definitely moved away from the canvas more to AI tools in general.

• 1:34Speaker 00

  And how much of that workflow is AI driving a lot of the process? And how much of it is you, the human?

• 1:40Speaker 01

  I think it's a lot of me, the human, driving AI to do a lot of the heavy lifting for me. But there's a lot of quality controls, decision making, that are all up to the designers. We're in the driving seat, and we're actually more than ever now in a position where the output isn't the issue anymore. It's us being extremely selective about what we go forward with and what we work with. So it's a lot more curating what AI is creating, and that is a continuous like just back and forth with AI. I feel like AI is extremely capable of getting a lot of things done that we needed to do, as long as you understand the complexity of what it is that you're working on, and you're able to break that down into a multitude of almost like subtasks

• 2:25Speaker 01

  that then you can feed to the agent bit by bit. And then it's a back and forth.

• 2:30Speaker 00

  And it sounds like a lot of what you're describing is that your role is actually to be the editor.

• 2:34Speaker 01

  We're more the editors now than ever before, which is, I think, fun. That's great. I mean, that was always the role, but getting to the point of editing just took a lot of like handcrafted design that we would do in Figma, and just more and more of that can be now sped up and extrapolated with AI tooling.

• 2:53Speaker 00

  And so you, the human, are still responsible for the ultimate final output and making sure that it meets your bar.

• 2:58Speaker 01

  Always.

• 2:59Speaker 00

  But you have all these tools now to be able to get there way faster.

• 3:02Speaker 01

  A hundred percent. I mean, AI has definitely raised the ceiling for all of us, but it's not a crafter. It can execute complexity and technology that I couldn't handwrite code. It can write code, but it doesn't know what looks good and what looks bad. And that's for me to decide and to steer AI into the right direction.

• 3:22Speaker 00

  I've been a big fan of your work for a long time. So maybe first just start off and tell us about the product design studio at Shopify and what you guys do there.

• 3:30Speaker 01

  I work with a team of very talented designers. We've been there for the last year. And between us, we basically run an initiative at the company to redesign and touch the most important surfaces we have. So from anything related to Sidekick, which is our AI infrastructure layers that basically manage our entire admin, to the mobile app, which we call the Green App, and everything from admin and admin dashboards we look at and work with. Quite recently have been working with a lot of new AI infrastructure that the engineering teams have built for us. And yeah, it's just been a really exciting last year.

• 4:10Speaker 00

  Yeah, it's actually really interesting because Shopify is like two decades old or something at this point, right?

• 4:15Speaker 01

  Twenty years old.

• 4:16Speaker 00

  Twenty years old. And so we are, yeah, we're in a new era now where AI is changing a lot of things. And it sounds like a lot of the work that you're doing is actually to modernize and bring it into a modern era, which is through design, but also the experience itself, right?

• 4:31Speaker 01

  Yeah.

• 4:31Speaker 00

  What is the design team and your product design studio actually work on there? Are you just in Figma and canvases and designs and passing them off to engineers? Or what is the design function like that you manage there?

• 4:44Speaker 01

  At least at the moment, there's almost like two parts of this big initiative that we're taking. Part of the organization of the design team has redesigned the entire admin experience. This redesign starts in Figma and with polishing interfaces and bringing that into the web. And the other part of the organization, the Sidekick team of Shopify, is working on automating and manipulating a lot of the Shopify interfaces via the chat, so that you can use chat, Sidekick, or AI infra to basically manage your store and automate a lot of what it means to be a merchant online. And that's like they're basically two almost controversial, paradoxical sectors of the company, but they work really well together.

• 5:29Speaker 01

  So you're building really beautiful new UI, but you're also using new UI to basically generate AI infra and AI workflows. And that's incredible to see. And a lot of that actually translates very nicely back into the mobile app and is upleveling the mobile experience as well. It's a lot more conversational and a lot more talking to Sidekick about your business than having to manipulate your business via the interface.

• 5:54Speaker 00

  Yep. And previously, before joining Shopify, you were building your own product studio with Molly. And you have incredible motion and animations and interactions there that I always found to be really inspiring. And maybe you can show us some of that and talk through where that came from.

• 6:10Speaker 01

  Yeah, Molly was a studio, a design studio in Brooklyn that I was running together with Jaitel, my studio partner. We ran the studio for about two years before joining Shopify and integrating the studio into Shopify.

• 6:23Speaker 00

  And you had some huge clients that you worked with during that time, right?

• 6:25Speaker 01

  Yeah, we worked a lot with Collins and Apple and Google, and also a lot of smaller clients too. It was honestly a broad mix of web design and product design and a lot of content strategy and hierarchy for clients as well when it came to their websites. And because we were a small studio, it also allowed us to have extremely close relationships with our clients. We would meet clients weekly for many weeks and use these projects at Molly as like very high-focused stints with these clients. So we never took on more than two or three clients at a time to stay really focused. Here's just a reel of some of the work we were doing while we were running our studio.

• 7:05Speaker 00

  And so, there's little details here. The animations are very organic.

• 7:09Speaker 01

  Yeah.

• 7:10Speaker 00

  And even as each screen changes, the gradient and the shadow behind it changes to match the color of the background that I think a lot of people maybe wouldn't pick up on.

• 7:20Speaker 01

  Yeah.

• 7:20Speaker 00

  But it's something that you sort of intuitively feel that something is happening here, right?

• 7:24Speaker 01

  We got this idea basically just from the ambient lighting behind TVs that are mounted on walls. And I think Jaitel, and this was pre-AI, basically duplicated the video and had it like blurred out in the background so that it would match the rhythm of what's going on on the screen. And it works really nice. And I think before the sentence, it used to just say Molly is a design studio in Brooklyn, and there was just the gradient at the bottom that was kind of like vibrating.

• 7:51Speaker 00

  Right, I can see a change in there.

• 7:52Speaker 01

  It feels like a thunder or something.

• 7:53Speaker 00

  Yeah.

• 7:54Speaker 01

  And it kind of, at least for us, it always felt like people were inclined to scroll into it. So we didn't even have to show them any of the work, but we kind of hinted at it.

• 8:01Speaker 00

  Yeah.

• 8:02Speaker 01

  And then you scrolled into the reel. And yeah, the rest are just very nice and simple carousels. But yeah, you can see here, this was some of the work we were doing with our studio. And I think some of the patterns you were referring to, we used to call the system, we call the system Primal. It's a way to just basically understand content on a website, digest content on a website. And for us, it was a very structured way of digesting when clients came to us with a lot of information for their websites. We helped them build that into a system on the website that allowed users to explore. To us, always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention. Everything is just one layer away,

• 8:46Speaker 01

  and everything is progressively disclosed. So you never overwhelm the user with too much content in general.

• 8:52Speaker 00

  What are some of the ways that you accomplish that?

• 8:54Speaker 01

  I mean, I can just go through some of the work. This was a project we did with the agency Collins. We worked with them for, I think, over a year on this website. And as you can see, even as you're scrolling through the homepage here, each section of the homepage is a chapter that as you interact with the website can lead you into further exploration. So this is one of my favorite sections here. This is the bookshelf. These are basically all of the case studies from Collins.

• 9:21Speaker 00

  Even go back and hover over those elements again. The way they bounce feels different than what you typically see.

• 9:27Speaker 01

  Yeah.

• 9:28Speaker 00

  Talk about how you made that. This was, you didn't use AI tooling to do this. You handcrafted these, right?

• 9:35Speaker 01

  Yes. Well, in this case, I will say this was very much design and engineering partnered together. I would lay something like this out in Figma and try to understand the spacing and the size and the colors and the rows and all of that. And then I would hand it off to someone like Jesper, who would then work on like the bounce animation, for instance. Like all these books have to level up on top of each other. And then basically...

• 10:00Speaker 01

  Land one more time as the last book kind of lands on top of it. And that has to feel very organic because if that feels bouncy and organic, then it eludes at the idea of, oh, it's a book, it's a bookshelf, that's that's alive. And those things, I think while they are seemingly unimportant, are exactly the kind of little moments people pick up. Um, when they scroll through these kind of websites.

• 10:19Speaker 00

  Why does that matter? Like you have a person.

• 10:21Speaker 01

  Yeah.

• 10:21Speaker 00

  Who's supremely talented, whose entire job on this project was to make the tab interaction.

• 10:27Speaker 01

  Yeah.

• 10:27Speaker 00

  And it's very easy for anybody to go, well, just throw a tab. Tabs exist, you can get that for free in five seconds and then move on to the next thing. Why did you feel like it was important enough to spend somebody's dedicated time before AI could do this? Certainly, um, and and have them focus just on that one interaction.

• 10:45Speaker 01

  There's multiple different ways to answer that, but I think especially for the studio, because they work on design themselves, like this is a branding studio.

• 10:51Speaker 00

  Mm hmm.

• 10:51Speaker 01

  I think the clients coming to the website are looking for those kind of Easter eggs. They want to know that if I hire this agency or if this agency takes this much detail to produce a website of that quality, what kind of Easter eggs are they going to put into our projects? When we work with them. And when they pick our color palette, maybe they're going to come up with a system behind it, rather than just picking five colors that they like, because that's the level of of dedication it takes to go really deep. It's a way to, in a way, almost also to show off and be and and and show the level of craft and detail that you can bring to any piece of or any part of the interface. We try to do the same uh level of care and uh and craft that Shopify.

• 11:29Speaker 00

  Talk about the decision then to sell your design studio to Shopify.

• 11:35Speaker 01

  Yeah.

• 11:35Speaker 00

  And to come join them and and how that process um has has been different for you, being at a large public company and, you know, leading a product studio internal there versus the work that you were doing here when you were independent.

• 11:47Speaker 01

  Toby, at the beginning, at some point last year, basically said, um, we're entering a new era and that future needs to be designed. Um, and that that was basically it. He's like, I want to design, I want to design for the future and I need to hire good designers who can help me paint a picture. And when we see that picture, we'll we'll know what it is and we can and we can, we can go down that route. And I think that was the, that's the mandate at Shopify, like design is very much more in the foreground. It's a very honest organization that's very self-aware. It's a founder-led, engineering-led organization. Um, and design hasn't always played the role that it's playing now. Design is very much helping shape the narrative of where the company is going and the level of craft and pride we're taking towards the tooling and the software that we're building for our merchants. And that's beautiful to see.

• 12:30Speaker 01

  And that was one of the reasons we wanted to join because we felt while we were having fun designing websites for other studios like Collins um, or Spencer, the illustrator, we also wanted to have a larger impact and and and and see if our strategy would hold up uh on interface paradigms with uh millions of users um versus the the few users, I guess, that would scroll around the Spencer website.

• 12:53Speaker 00

  Right, and so it's a different set of challenges.

• 12:54Speaker 01

  It's a different set of challenges, yes.

• 12:55Speaker 00

  The design studio work that you did was create a new site or something to um display work or work on a product or something like that. Talk about how it's different now. Shopify has millions of users and there's a lot of money at stake with every design decision and interaction that you work on. And what is your process like now being this internal design studio? And and how do you interface with the rest of the organization? And and how do you interface with users especially too?

• 13:20Speaker 01

  So I will say, basically for now, our studio exclusively operates within Sidekick, which is the AI infrastructure layer of Shopify.

• 13:29Speaker 00

  Mm hmm.

• 13:29Speaker 01

  Um, the whole team works extremely close with the rest of the design organization. And it's a very beautiful like interplay, which is, I think, in general, how these studios work or how this works more successfully. I've been in positions in also previous careers where if you're more isolated, it's always more difficult to ingest into the company and and have a large impact in in the company. I think at the moment, we're very ingrained in the current workflows and ingrained in the timelines and uh in in in our roadmap. Um, and it's and it and it just, it requires a lot of, a lot of experimentation, honestly, like upleveling the interface was easy for us because we have really talented designers who rebuilt parts of the interface in Figma.

• 14:12Speaker 01

  And then using AI, we're we're able to port that over into very tangible prototypes extremely quickly. And as we all know, prototypes are a million times more useful than any PRD document you can write. Those spread around the company like wildfire. And if Toby sees a prototype that he likes, then we can go off and build that. And I feel with um some of the AI mutations work we've been looking at at Shopify, we can show some of that later. It feels the same, we have ideas in our head and it's extremely easy for us right now. Um, using the current, the current technology to just simulate it all.

• 14:46Speaker 00

  Yeah.

• 14:46Speaker 01

  And generate prototypes.

• 14:47Speaker 00

  Yeah.

• 14:47Speaker 01

  Where in the past, um, at Molly, a lot of the work we were doing was was by hand. Our sheets were designed by hand, all the animations were done by our developers. Our direction might have been my idea, but other than that, there's like a thousand counterparts that you have to interact with. Right now, I'm seeing one-off armies or or teams of two going off and and and doing the work of many. Um, because the tooling is just allowing us to to do that.

• 15:11Speaker 00

  Yeah.

• 15:12Speaker 01

  And that's um, that's making it a lot easier to get by in. Because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to um, get a whole team rallied around an idea.

• 15:26Speaker 00

  Could you show us some of the the work that you guys have been building at Shopify?

• 15:29Speaker 01

  This is basically a a redesign and facelift um of our current admin experience. Um, with a with a new with a new home, home design, uh, and an overall, an overall facelift of basically um the entire product, which we've been working on um at the moment. I think one of the more interesting things um that we've been exploring right now is just um how Sidekick and the merchant interact with each other. We have this concept of suggestions, Sidekick suggestions on on the home feed. These suggestions are uh brought to the merchant by us. We've identified opportunities and benefits that the merchant could do inside of their ecosystem, inside of of their of their of their universe.

• 16:13Speaker 01

  Um, and we can show those to the user. And then as the user interacts um with these suggestions, we basically kick off a conversation with Sidekick. We can directly manipulate the admin dashboard for the user and we can show show those changes to a user. So we're showing a user right here. We think you should rewrite or rewrite the description of of your of your product. Here's the, here's the, here's the suggestion um that we think you should do. You can publish these changes and basically through a conversation with Sidekick, you've directly manipulated your store. And it's, the concept is more, can we bring UI to the user and into the into into context versus having uh the user click through, click through the interface?

• 16:56Speaker 01

  At the end of the day, um, th- there's a world where a a merchant can spend a lot more time on the home surface and use Shopify a- as as a dashboard to delegate and interact with with Sidekick and have Sidekick directly manipulate the store. Right now, what you're looking at is is is still a prototype environment. This is, there's a Dev UI panel inside here and basically we are, we're building all of these, the the the design team is building all of these um changes and and demos and and and and ideas right into the interface here so we can just test and build on top of it.

• 17:28Speaker 00

  Mm hmm.

• 17:29Speaker 01

  And it's, it's become this beautiful process where once a demo is at a point where we kind of all align, everybody branches off and builds a version of something that they think that that brings value. And then we all come back together and it actually lives all inside the same, the the same demo and the same link.

• 17:45Speaker 00

  Yeah.

• 17:45Speaker 01

  Um, and it's just a beautiful way to to to to share ideas and and context.

• 17:49Speaker 00

  You said designers are building this.

• 17:52Speaker 01

  Yeah.

• 17:52Speaker 00

  In here, a lot of times designers are designing and they're not building. But uh it's in in Shopify and your team and you, you are building a lot of the stuff that you are designing so that you can test it, so you can prototype it, so you can see it on live uh live data, live experiences.

• 18:08Speaker 01

  Yeah.

• 18:08Speaker 00

  And that's a huge part of of nailing it and building something useful and making sure that it's great. What was your evolution from, you know, designing in Figma?

• 18:16Speaker 01

  Yeah.

• 18:17Speaker 00

  To now you are not just designing, but you're actually creating it out into the world to be able to test it and doing that full loop yourself?

• 18:24Speaker 01

  In this specific case, admin has a a playground that we build. Inside of that playground, we test. That's not production code and that wouldn't be allowed back into the main GitHub repo of Shopify into like our main um repository. Having said that, though, um, AI has definitely gotten to the point now where as designers, we are highly empowered

• 18:43Speaker 00

  Mm hmm.

• 18:43Speaker 01

  uh and capable to to visualize any idea that we want to get our idea across. In a previous world, that that just wasn't possible. We we looked at the at at the Collins website earlier. A lot of that work in Figma, when we worked on it, still looks like, still looks like this.

• 18:58Speaker 00

  Mm hmm.

• 18:58Speaker 01

  You can zoom into any part here and there are like highly detailed Figma screens that that that we're designing through. And this is an ideation process. I think this is a mixture of me, um, Michael Speicher and J. Tell working on this project together. And you can just see the evolution of like as we're going through the inter, like as we're going through ideas and like trying out new things. These are, the the, these are too heavy and too expensive to test in code. We don't want to test this um in code right now because it would require an engineer to take a look at it and build it for us. So we test it all in Figma. Figma is the playground and the and the world we we were building everything in. We we were building it on desktop and then we were translating it to mobile. And all of this had to be stress tested out in Figma first for a very long time before we would go and and bug the engineering team.

• 19:42Speaker 01

  A lot of the way I'm talking to AI or I'm still using Figma at the moment is I can get really far with a very broad sketch. Here's an example of um a side project I've been working on um over the weekend, which I can go into into detail a bit. But one of the things I wanted to build out for this For this project was a two by three overview of these grass studies and these videos I took. And the interaction here is you can open up any one of these videos and you can drag down to to close them. And it works, works the same in the in the simulator. I I I explained this, I I I described this to AI. And and and I was working in Codex and Codex built this out for me. But the interaction wasn't interruptible. So every time I clicked on an asset and pulled it down,

• 20:27Speaker 01

  I had to wait until the asset was all the way back in its position and sat down before I was able to tap on another image. And that's just not how you want to use this pattern. You, this has to be very responsive, very quickly. Otherwise, you'll get very annoyed with the interface very fast. So I just went into into Figma and kind of drew out very rudimentary, simple boxes like when, when you click on the box, red comes up, you can swipe it away. If as you're swiping away, you click on blue, blue now comes up. And you can click that away and you do it with green. And I think that's just like a a good example of of of how at least myself personally, I'm I'm using, I'm I'm using Figma more. It's more a scratchpad to like map out ideas and I give those ideas to Codex.

• 21:10Speaker 01

  And I and I use the scratchpad A because it's easier for me to to decompile something. But also, it's actually easy for Codex to decompile it if it sees it visually. It interprets that image, I think, similar to how I interpreted it. At least it understood what I was doing and how I was thinking about the motion. I couldn't articulate it via via text or voice, but I could draw it out. There's two parts of this that I think are important to call out. I think number one, Codex and all the current AI software is is and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing. And you have to be able to take a a concept or or something more complicated like the shader and break it down into all its little components. You have to be able to understand those components and then you can put those components back together.

• 21:55Speaker 00

  Yeah, just show us how you did that here, because so to be clear, you had a bunch of images.

• 22:00Speaker 01

  And videos.

• 22:01Speaker 00

  And videos of of actual grass.

• 22:04Speaker 01

  Yeah.

• 22:04Speaker 00

  And then you wanted to create a shader.

• 22:06Speaker 01

  Yes.

• 22:06Speaker 00

  That looked identical to that, but you could control and function like a shader. And so talk about how like the different elements and what you had to go through to actually get that to look lifelike.

• 22:16Speaker 01

  I have a few screenshots here. Again, this is a good example of how I use of how I use Figma. So I fed the video into into into Codex for the first time and just explained it. My, the the the project and the process that I was, I wanted to go through, take the video, turn this into a shader. I want the shader running, running in the web. And I want you to be as as as meticulous as you can, be very pixel perfect. Grab all the colors, make sure that you're using the same hex codes, understand each part of the image and then try to recreate that. And it went off and said, no problem. I got you. And it came up with this, which obviously doesn't look at at all where we landed, where we ended up now.

• 22:50Speaker 00

  Yeah.

• 22:50Speaker 01

  But then the process from here was I would screenshot this and my original, my original video. I would open up ChatGPT and I gave it to another agent there. I explained that agent exactly what I was doing as well. I said, why is the other agent not understanding what I'm trying to get to? And that ChatGPT then helped me kind of like, understand my own process, like, well, you have to explain to it where the light is coming from and what what shadows you're using. And maybe break the image actually down into like six parts and have it do each one of those individually and put that back together. And as I was kind of thinking about all of these different things, like I was trying to come up with, how could I become very clear with the with with AI and explain to it exactly what it was actually looking at?

• 23:30Speaker 01

  So one of the tricks I used was I went into ChatGPT and I had it render basically a topographical map of the underlying structure. A AI, as I was going through this, I was, it was kind of getting closer and you could see that, you know, it was painting more pixels into into the grass blades. And these started to look like bushels a little bit, and which which felt more realistic. And then over here, I was like, okay, we're getting somewhere here now. This doesn't look, this doesn't look terrible anymore. But I kind of figured out it doesn't understand that there's, it's not a flat layer underneath. These are little hills.

• 23:59Speaker 00

  Right.

• 23:59Speaker 01

  Basically, I fed this back into into AI and it and it understood, oh, okay. So there's, there's a an underlying structure on a map that has different depths and heights. And if I can re-render the grass on top of those, on top of that infrastructure or of that structure in general, it'll be much easier for for me to to create the scene. And that kind of worked really well. And, you know, in this, in this prototype, you can actually buy, there's a binary toggle to turn the grass on or off. And you can actually play with the terrain quite a bit here as well.

• 24:29Speaker 00

  Right.

• 24:29Speaker 01

  This was all unlocked via Josh to me at a lunch the other day where he kind of like, we installed Dial Kit into this demo. And because he looked at this, he's like, this looks pretty good, but you should look at the length of the grass blades. I was like, whoa, okay, that's true. So I asked, I asked Codex like, hey, how many, how many grass blade variations do we have? And it said, we have about two hundred and seventeen thousand different grass blades, but they only differ by like point six, point seven, point eight. So we were like, okay, let's just build a toggle for it so that we can seed ourselves. I don't want to have to go back and forth with the interface and and chat about this. Expose the underlying structure. Exposing the underlying structure would also show me where I had made mistakes. The original version of the terrain map that it had implemented was completely wrong and skewed.

• 25:11Speaker 01

  So I couldn't get to my outcome anyway, because AI had misinterpreted something five prompts ago that I didn't know about anyway. Dial Kit kind of unpacked that for me. But then in general, you can just mess with a few of these values and they kind of help like bring, bring some of this. Like they they they help visualize what what I really wanted to see. And if if, you know, the the length here is longer and then you, you can, you can introduce more wind. This was something I wanted to to test and see how, how crazy I could get with the, with the wind moving. You can see it gets a little wild. But yeah, I think this is just a small example of a little bit of like, a fun project just to try and like see how far can you get with with the tools? And and these are things that I think before AI, I I I couldn't do.

• 25:56Speaker 01

  I just, I I might have had these ideas, but I, but I, but I wasn't allowed or or able to execute on them. And I think that's just in general what's changing with a lot of the, with with the design role right now. Anyway, like it's, it's, it's, designers are becoming more full stack, as are engineers and PMs. It goes, it goes, it goes in every which way.

• 26:13Speaker 00

  Yeah, there's no limitations now, right? And actually, this is one of the, one of the common patterns that we've been seeing a lot. Creating prototypes and then creating little widgets that allow you to control different variables in them to to be able to test it really easily and get it right.

• 26:29Speaker 01

  Yeah.

• 26:29Speaker 00

  And previously, it wouldn't have been worth anybody's time to do that. You would just, you know, maybe play with variables in code or something until you got it and then you'd call it good. And that would take way longer or you wouldn't even spend the time doing it. Now it's so easy to create new little software tools to be able to control these variables and test things and dial it in perfectly.

• 26:48Speaker 01

  Yeah.

• 26:48Speaker 00

  Which I guess is where the name Dial Kit comes from.

• 26:51Speaker 01

  Yeah.

• 26:51Speaker 00

  So yeah, maybe tell us more about Dial Kit here. So this is a product that makes it really easy to create and then tweak a lot of these variables in whatever project you're working on, right?

• 27:01Speaker 01

  Exactly. So, so, yeah, that's, that's, that's basically exactly how it works. You can just run npm run via via his website that he has a little prompt for it. You can just plug it into to whatever you're working on. I I have another project that I can quickly show. This is just another version of Dial Kit. In the specific, in the specific project where I was manipulating a carousel. This is inspired by Mike Mattis. He's a design leader at at Love From. And and his portfolio carousel works in this way. And I wanted to see, like, there's so much nuance in the way that carousel works and the way you can drag down an artifact. And when you let go of that artifact, the way basically almost like energy ripples out from that, from that specific artifact and triggers a

• 27:47Speaker 01

  a collision effect with the other artifacts left and right. Building out this, the side panel here right now helped me basically look under the hood of of my own, of of of the own Frankenstein that I created here.

• 27:59Speaker 00

  Yeah.

• 27:59Speaker 01

  With ninety one prompts. And it just helps you dial in some of these, some of these different, some of these different parameters that are really important, like pull, pull, boost means the faster I drag this down, the stronger, the stronger the boost is. You want to play around with that toggle a little bit. It can't feel too intimidating or too or too strong. Otherwise, the, otherwise the whole system just feels off. And I know when it feels off, but the back and forth with chat just doesn't work.

• 28:22Speaker 00

  Yeah.

• 28:22Speaker 01

  And you need to be able to to to always expose those kind of, those kind of values.

• 28:27Speaker 00

  It seems like a lot of, all the projects that we've looked at here and a lot of what you're describing is just having, setting an unreasonably high bar. And now we have the tools to actually be able to meet it much faster than it would have taken before.

• 28:41Speaker 01

  Yes.

• 28:41Speaker 00

  And so what is the role of the designer? And and maybe even non-designers, how should they be thinking about design? A lot of the audience that watches this are maybe founders of early startups that that maybe feel like they're engineers but don't have a design bone in their body.

• 28:57Speaker 01

  Yeah.

• 28:57Speaker 00

  Or designers that are maybe trying to figure out like, could I start a company or could I actually build the product?

• 29:03Speaker 01

  Yeah.

• 29:03Speaker 00

  I'm so used to, you know, designing in Figma and passing it off to somebody, maybe where where you guys have been in the past. How should they think about themselves and being able to uplevel the way that they use AI to create higher quality design?

• 29:17Speaker 01

  A lot of the way I keep thinking about AI in general is just, it's an infinitely patient collaborator and and and teammate. Codex won't get mad at me if I need ninety one approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out. But so my, my, my, my advice to to to everybody is like, and it sounds kind of silly, but like tinker with the tooling. Like, you can go in and just describe what you wanted to do. And when you see a result, like, don't give up, just just explain to that this is not how you envision it. Send it a website where you really like the carousel animation or give it a screenshot from from Save It or Cosmos of something that you, that that you think looks really beautiful.

• 29:55Speaker 01

  Show it a color palette that it should start to copy for you and just keep going back and forth and back and forth and kind of shaping your narrative together with with with the tool. I think that's, that's, that's, that's really important. And for designers specifically, my trick or what I always learned was just like, just try to copy. Like even now, I'm I'm trying to imitate this, this carousel animation that's been around for for quite a while. Because now I have an infinitely patient teacher and and friend that I can build it with. And and so now I can look under the hood and that's, you know, I'm doing that in my own time, on my own weekend without bugging any of the engineers. Because it's my experiment and I want to understand and and decompile how how this thing is put together. And that teaches me how to be a better manager and how to be a better collaborator and be a better team member.

• 30:40Speaker 01

  And I think that's how we should be be treating these tools.

• 30:43Speaker 00

  Yeah, that's, that's great advice.

• 30:45Speaker 02

  YC's next batch is now taking applications. Got a startup in you? Apply at ycombinator.com/apply. It's never too early and filling out the app will level up your idea. Okay, back to the video.

• 30:59Speaker 00

  Should we review some websites?

• 31:00Speaker 01

  Yeah, I'd love to. Let's do it.

• 31:01Speaker 00

  Yeah, let's do it.

• 31:02Speaker 01

  For sure.

• 31:02Speaker 00

  First up, we've got N-Stack. So let's see, okay.

• 31:07Speaker 01

  Yeah, there you go.

• 31:08Speaker 00

  This is N-Stack, the only AI workspace you'll need, one powerful agent, one intuitive desktop workspace and every tool you need to handle any task. Okay.

• 31:18Speaker 01

  I mean, I think right off the bat, I would say one thing that's very nice about it is the fact that they're emulating, obviously, the desktop in general. So it feels like you're on a desktop and I think you can probably use these and explore these. And yeah, I mean, I think what's nice about this is like, you're basically just in their product already and you're and you're using their product.

• 31:33Speaker 00

  Yeah. I think I'm a little confused about what to use it for, though. It's like, it's an AI, the only AI workspace you'll need, it's one desktop, every tool you need to handle any task. And it's hard when it's so broad to figure out what should I use this for? And maybe literally you can use it for anything.

• 31:50Speaker 01

  Yeah.

• 31:50Speaker 00

  But I feel like sometimes it's helpful, like, what do you want the user to do when they hit this?

• 31:54Speaker 01

  Yeah, I mean, to your point right now, like, from a visual perspective, it's very overloading, right? You have a lot of content in the sidebar.

• 32:01Speaker 00

  Yep.

• 32:01Speaker 01

  You have this chat history here that you can kind of scroll through. Then it seems like you have some sort of an interface here, but also kind of the main messaging of Enstack sits right over here. It's hard for me to figure out exactly what to focus on first. My German graphic design professor would always say when we were making posters in school, where I was studying typography. And he would always say that this poster doesn't dictate. It's not dictatish. It means there's nothing in this poster right now that is drawing my attention. Like, I don't know what to do when I look at it.

• 32:29Speaker 00

  Yeah.

• 32:30Speaker 01

  Basically.

• 32:30Speaker 00

  Yeah.

• 32:30Speaker 01

  I don't know what to look at first.

• 32:31Speaker 00

  Yep. Yeah, do I click these icons? Do I go in the Slack like thing? Do I go in the chat?

• 32:36Speaker 01

  Am I texting the chat and talking to the chat here?

• 32:38Speaker 00

  Yeah.

• 32:39Speaker 01

  Why am I called Mark?

• 32:39Speaker 00

  Yeah, you're Mark, I guess.

• 32:40Speaker 01

  I'm Mark now. I think feedback here, which would be nice, which probably would be like, some of the, some of the clutter here, I would almost collapse and make it more around the introduction and the headline and what do I want the user to read and take away?

• 32:55Speaker 00

  Yeah.

• 32:55Speaker 01

  And maybe a simple way into a very quick demo of the tool or of the software offering would be really, would be really important. But at least it's, you know, it's, it's, it's very whimsical and feels kind of retro, which is nice.

• 33:08Speaker 00

  Yeah, and there's always, usually, or there should be, one specific goal that is like the primary goal or the primary KPI or the, the main thing you want a user to do when they hit the site. I'm not sure what it is here. Maybe it's like get started, maybe it's talk to this agent. But whatever it is, there's so many other things that are pulling your attention and distracting you from whatever it is the main goal is that they want the user to do. And maybe the get started button is the, is the primary CTA, but they have these other buttons over here.

• 33:35Speaker 01

  Yeah.

• 33:35Speaker 00

  That were more in the middle that, that looked exactly like those buttons. And so now there's multiple buttons that have the same color and are calling, yeah, it's like general engineering, marketing, get started.

• 33:46Speaker 01

  Yeah.

• 33:46Speaker 00

  What is the one that they want us to focus on first?

• 33:48Speaker 01

  Someone once said this to me, it's like, oftentimes when we build websites, we focus on one thing on that website and we make that really well. And we, we, we, we built the whole narrative around that one thing. On Collins, it definitely felt more like the books, the book stack was something that we were proud of and wanted to show off.

• 34:05Speaker 00

  Yeah.

• 34:05Speaker 01

  And that, and that is the heart of, of, of the website is a lot of the visual work. And I felt there was an easy way to navigate into that page. And then you can spend a lot of time there because it's easy to use. As Enstack, I would be, I would, I would be asking myself, what is the, what is the one thing I can rally around and get people to, to, to look at and do? And if they only take one thing away, it's better than trying to do everything at the same time.

• 34:26Speaker 00

  Yep.

• 34:26Speaker 01

  And that's kind of what's happening here.

• 34:28Speaker 00

  Yeah.

• 34:28Speaker 01

  To next thing, there's a lot of things screaming for attention.

• 34:30Speaker 00

  Yes.

• 34:31Speaker 01

  And it's the opposite of progressively disclosing information.

• 34:33Speaker 00

  Yes, and, and maybe as, as a positive, one thing that I think is probably good that they do is they're trying to drop you right in the product. I, I assume this is actually how the product functions.

• 34:42Speaker 01

  Yeah.

• 34:42Speaker 00

  And they're not trying to, you know, tell you about the product and then get you to click a bunch of things and sign up and stuff. They're like, if the aha moment is people just starting to use the product, let's just get people into the product as early as possible.

• 34:52Speaker 01

  Yeah.

• 34:52Speaker 00

  But it still feels maybe like we need a little bit more context to figure out what exactly we should be doing here.

• 34:57Speaker 01

  Agreed.

• 34:58Speaker 00

  Enstack, thank you. All right, let's take a look at SkillSync, free local first Mac app that carries your memory and skills across every agent and teammate.

• 35:08Speaker 01

  That's nice, yeah. I mean, at least it's clear, I think, what, what the company does. That's cool.

• 35:13Speaker 00

  Okay.

• 35:13Speaker 01

  Yeah.

• 35:14Speaker 00

  So it's got skills and they sync.

• 35:15Speaker 01

  Yeah.

• 35:17Speaker 01

  Yeah, I mean, it, it, it's in dark mode. The fonts are, I would say, are, are very small. The difference between SkillNet as basically the logo and the first paragraph below it, there's a lot of percentages in, in the typography height here that I, that I, that I think we could, we could skew in a little bit. They, they feel a little off in, in, in my opinion. And again, there's, there's a lot of very dense information. And oftentimes to what we were just saying about Enstack, it's actually, as soon as you start to abstract some of the functionalities and features, but still stay, stay very detailed like they're doing here, it becomes very hard to understand exactly what it does. Like, it'll require a lot of actual reading of all of these features to kind of understand what's going on.

• 35:57Speaker 00

  I, I'm curious to your take on this. So what they've got here is they've got basically a bunch of sidebar tabs.

• 36:04Speaker 01

  Yeah.

• 36:04Speaker 00

  That are trying to show off different features. And you, I feel like have an interesting approach on tabs. Because all those sliders that you make, they're effectively like tabs, right?

• 36:13Speaker 01

  Yeah.

• 36:13Speaker 00

  It's just, you have the affordance of knowing that there are multiple of them and you can see multiple at a time.

• 36:18Speaker 01

  Yeah.

• 36:19Speaker 00

  And I feel like the trap that a lot of people fall into a lot of times with tabs like these is people, users usually will not click on all of the tabs and explore them all.

• 36:27Speaker 01

  Yeah.

• 36:27Speaker 00

  And so you have to assume that whatever is hidden behind all of them.

• 36:30Speaker 01

  Yeah.

• 36:30Speaker 00

  Nobody will ever see. How do you think about that? And what, how can they encourage people to explore this more and get more information rather than burying everything behind tabs?

• 36:40Speaker 01

  There's this rule I always have, like, you can't put more than seven, seven lines of text on a, on a slide if you're presenting work. Like, you have to come up with almost rules and constraints of how many features you want to show off. Like, a good example, I think I would use a three up component here. I would take all of these features, I would compress this information down and try to understand what are the top three things that SkillSync can do for you. You can do X, Y, and Z. Those are the three things you show off. All of those are tappable, they lead you into potentially sheets or a view transition into, into more information. And then you, you have more context behind. Since it's very flat and broad, you're kind of like a mile wide, but like only an inch deep. You don't really know what you're, what you're really looking at.

• 37:23Speaker 01

  That's what that requires, like, a, a, a deeper understanding of your feature set and, and then more condensing those down into principles and rules.

• 37:32Speaker 00

  Yep.

• 37:32Speaker 01

  And main kind of like points. And then you can rally or bring more information under each of those kind of pillars.

• 37:40Speaker 00

  Yep.

• 37:41Speaker 01

  And that'll help the users understand the flow of the website better and how to navigate it. And it's also better for the founders. I feel like if, if I was still running my studio and we were working with this company right now, there would be a whole exercise in like, well, what's the one thing you do?

• 37:54Speaker 00

  Yeah.

• 37:55Speaker 01

  If it's syncing skills, let's only talk about that.

• 37:57Speaker 00

  Yeah.

• 37:57Speaker 01

  And make that really cool and show that off and then get people to use the product as quickly as possible.

• 38:01Speaker 00

  So I mean, it's also interesting, like, we just hit the bottom of the page.

• 38:04Speaker 01

  Yeah.

• 38:04Speaker 00

  It's not very tall.

• 38:05Speaker 01

  Yeah, yeah.

• 38:06Speaker 00

  And so I think users are comfortable scrolling.

• 38:09Speaker 01

  Yeah.

• 38:09Speaker 00

  And so if there is important information that is hidden behind a lot of these feature tabs here.

• 38:14Speaker 01

  Yeah, yeah.

• 38:14Speaker 00

  Just break them out and like make the page longer. It's okay, people can scroll longer rather than compressing it and hiding everything.

• 38:21Speaker 01

  Exactly.

• 38:21Speaker 00

  And the other trap that I see a lot of people falling into with, with AI tools now is because it's so easy to, you know, create a different like image or animation, like, these are actually animations, right?

• 38:34Speaker 01

  Yeah.

• 38:34Speaker 00

  For every single one of these, they spit out a bunch of these and they've, they've all got the hallmarks of, you know, the very small text and, you know, this animation. Like, no human would spend the time and go like, oh, we need a little dot that goes from these corners and program that and everything. But it doesn't mean it's actually adding value to what they're doing. And so this, I think, is when you're talking about, you need to curate and set the bar and make sure it's communicating the right things.

• 38:58Speaker 01

  Yeah.

• 38:59Speaker 00

  There's lots of things here, but they don't actually help my understanding of the point that it's trying to make.

• 39:03Speaker 01

  I fully agree. And I feel like that, that's again, something where you need to work and hire the right people with the right skill sets to do the, to help you do the, the job. Like, AI definitely can help you probably put this whole website together, but when it comes to abstracting these features into illustrations, might not be the worst idea to work with an illustration designer who's done this before and who specializes in information graphics. And maybe that actually becomes, because it's well explained, just a core part of the SkillSync brand identity. It's like, oh, there's this one thing that, I remember working with Gemini a few years ago and there was this animation, like a braid, like basically they were showing the model and all of these different things that Gemini had. And they all came together and built like this helix.

• 39:45Speaker 01

  And that animation was, it basically just explained exactly the capabilities of the model. And that turned into a very thin line and then it said Gemini. And that was an animation that a lot of people worked on who are much more talented than me for a very long time. And then later, a lot of really good engineers translated that into a scrollable animation for the website. And it just like, that kind of sold it. And then you were in the product and you were using it, but that was, that was the memory of, like, that piece of motion was just ingrained in my memory and really explained exactly what the model was doing. Sometimes being a little more artistic and abstract actually goes a really long way.

• 40:25Speaker 01

  And I think, yeah, for SkillSync, I could definitely see, there's a million different patterns and a million visual examples of how to, of how to show that off. And you can be a lot more, like, just craftful and graphical about how, of how you just, how you design that on, on the website. So that would be my feedback to, to, to, to these guys.

• 40:43Speaker 00

  Cool. Thank you, SkillSync.

• 40:44Speaker 01

  Thank you very much.

• 40:45Speaker 00

  Okay, next up, we got Instaplay. So let's see. So I'm seeing a bunch of featured, I can't tell if these are movies or games. So it says design something that.

• 40:57Speaker 01

  Bird sort?

• 40:58Speaker 00

  Bird sort.

• 40:59Speaker 01

  Okay, so these are games that we can play?

• 41:00Speaker 00

  Games.

• 41:01Speaker 01

  I think.

• 41:03Speaker 00

  Okay. How do we play? Got a bunch of birds, we got some sound that's playing now.

• 41:14Speaker 00

  Let's maybe go.

• 41:16Speaker 01

  Let's go for, let's try something else.

• 41:18Speaker 00

  Start button.

• 41:25Speaker 00

  We're fighting this wolf, I guess.

• 41:28Speaker 01

  That's enough.

• 41:30Speaker 00

  So we've got this call out here, which is interesting. You know, it says, create, describe your game idea, right? When you click into it. What's interesting is there was no copy under the title Insta Play. And so we had, we were up to ourselves to try to figure out how to orient around this page. And the first thing that we did is we saw all the visual games.

• 41:52Speaker 01

  Yeah.

• 41:52Speaker 00

  All the screenshots of them. And so we jumped right to that.

• 41:55Speaker 01

  Yes.

• 41:56Speaker 00

  And so we missed the fact that actually the primary purpose here is for us to be able to just create our own games on the fly.

• 42:02Speaker 01

  Yes.

• 42:03Speaker 00

  And so I think a line of text could help with that. Or some type of call out that makes that the prompt box more prominent.

• 42:10Speaker 01

  And again, it goes back to your example from, from earlier. It's like, what is the one thing we want the user to take away when they land on the page? Is it exploring the, the multitudes of, of games that have already been created on this platform? Or is it the fact that we can create our own games? Creating our own games actually leads you to a signup page, which no one's going to do if they haven't seen their created game.

• 42:29Speaker 00

  Right.

• 42:29Speaker 01

  So you have to come up, you have to cough up enough credits to try to like onboard people into the product. That's the cost of acquisition of one user, by the way. And that metrics is extremely important. It's probably obviously what, what they're, what they're thinking about. But that cost of acquisition can't be, uh, continue with Google.

• 42:45Speaker 00

  Right.

• 42:45Speaker 01

  It has to be whatever I just asked it to do. It has to spit it out perfectly and I have to be able to try it one or two more times. And if that works, I might be inclined to actually.

• 42:53Speaker 00

  Yeah. So you put in a prompt, you submit it and it takes you to this screen asking you to sign in.

• 42:58Speaker 01

  Yeah.

• 42:58Speaker 00

  And the problem is, we don't know if this is good.

• 43:00Speaker 01

  And this is a great example, obviously, where I would also, you could build out a really cool interactive carousel here. And each game has almost like 10 seconds of like a reel playing rather than just seeing these static, these static assets right now. I don't know what's behind it. So I don't know what I'm looking at. This is a great example. You could probably get Codex to tap into each one of these, screen recorded and replace that as the thumbnail, at least maybe on hover states. And it kind of will bring maybe more interactivity and dynamism into all of this, into all of these different like universes. I think what they're trying to show with these, with these covers is just like, look, with Insta Play, you can do a lot of stuff. I don't even think we need to be able to play all of these different games.

• 43:37Speaker 00

  Yeah.

• 43:38Speaker 01

  If the call to action is to create our own game and be game designers ourselves.

• 43:42Speaker 00

  Right. And so if that is the primary call to action, that is not what we did first. And then you probably want to actually create the game for people so that they can play with it. And then if they want to save it or come back to it later, or share it with anybody, then you gotta sign up or then you gotta create your account.

• 43:56Speaker 01

  And, and here also, look, so you have create my games for you explorer. No one knows what any of that means, by the way. But if you click on any of them, like my game, for instance, again, it leads you to a signup. Like if you're not signed up to this page, you shouldn't even see my games probably, right? Like, and have the ability to tap into something that then will lead you to sign in again. For you leads me back to the game I was just on, which I don't know if that makes a lot of sense. And explorer is basically the page we're already on. You're already exploring on home. I don't even think that needs to be a new button. The only thing you've done now on the explorer page is taking the input field away from me. So now I can't, I can't create a game anymore. So there's a few things there in the hierarchy where I would really think very like, put yourself in the position of someone coming to your website for the first time. Who has no idea what it is that you're building or selling.

• 44:41Speaker 00

  Yeah.

• 44:41Speaker 01

  How do they interact with the product?

• 44:43Speaker 00

  It was also interesting because you went into the game and we were like, okay, we're done with this one. I want to get back. It wasn't obvious to me that you do the fast forward icon to get back to the homepage. I thought it was going to take me to another game or do something else.

• 44:56Speaker 01

  It can be misconstrued as an arrow really quickly.

• 44:58Speaker 00

  Right. And so it's interesting, you actually clicked the back button to get back. Because there was no obvious home to go back to.

• 45:05Speaker 01

  Exactly.

• 45:06Speaker 00

  But this is super cool. You can imagine, um, just getting people to put in a prompt and creating a game, just like the racing game you were just doing.

• 45:13Speaker 01

  Yeah.

• 45:13Speaker 00

  People could play with this for hours and you just gotta get people to that value of creating the game and experiencing something.

• 45:20Speaker 01

  Once you've created that game and you're proud of what you created, being able to share that with your friends is probably a really nice growth fact for these guys. And, and I think there's a lot of, yeah, there's a lot of value in, in this kind of work. So, um, props to them.

• 45:31Speaker 00

  Yeah. Nice job, Insta Play. Okay. Next up, we have Mintlify, the knowledge infrastructure agents build on. Self updating documentation for startups, enterprises and agents.

• 45:42Speaker 01

  Right.

• 45:42Speaker 00

  Cool. Um, I'm obviously very familiar with Mintlify. It's an incredible company. Um, it's been growing really quickly and is a product that tons of YC companies and other dev tools use.

• 45:53Speaker 01

  Yeah.

• 45:54Speaker 00

  Yeah, this.

• 45:55Speaker 01

  It's a beautiful website.

• 45:56Speaker 00

  Yeah, this, this looks very professional.

• 45:58Speaker 01

  Yeah.

• 45:58Speaker 00

  It looks like something that is trustworthy.

• 46:00Speaker 01

  It's straightforward.

• 46:01Speaker 00

  Clean.

• 46:02Speaker 01

  Clean.

• 46:02Speaker 00

  Yeah.

• 46:03Speaker 01

  They, they, the very nice compositions with color and typography and spacing and line heights.

• 46:08Speaker 00

  Yeah. So let's drill, let's drill down to like, why do we feel that way? What are the, what are the specific elements of this page that make us feel like this is very clean and professional and all those things that we're saying?

• 46:17Speaker 01

  I, I think because it's, it's, it's, um, it's being reductive in exactly the correct ways. And it's showing only the things that are actually necessary to show. It's got a very clean headline, a small paragraph underneath that gets started button is very prominent. It's showing off some kind of a dashboard. You can kind of understand, okay, this is probably where, where the documentation would live and where the documentation would get updated. The, the graphic in the background is actually is adding to the vibe rather than taking away from it. It's, it's subtle and in the background, it feels, um, it, it feels like it's, it's, it's helping you think it's some kind of a network or something. It feels like they're very, they're very cautious and careful with what they're building and some kind of an infrastructure intelligence layer.

• 46:59Speaker 01

  I, I never know about logo walls, but at least this logo wall is very well put together, which is kind of nice.

• 47:04Speaker 00

  A lot of really big credible companies, which builds a lot of social proof, which seems to be something like, you know, we, we have that, this vibe of like professional, trustworthy. And part of that is communicated, uh, via seeing Microsoft and Anthropic and X and Coinbase are their users as well.

• 47:21Speaker 01

  With so many tools flooding the market, you need that kind of proof point to be like, okay, well, if Spotify is using it, maybe we should actually look at it. And then I think this is just a great example of like, they're abstracting UI and feature capabilities into something very cohesive and something really nice and art directed. That feels, you know, interesting to, to, to look at. I would say maybe the, the, the headlines here for these cards are a little bit too small. If I look at all of them right now, with the background color being the same, I'm kind of looking at none of them. And they're reusing, they're reusing that, that kind of braided animation in the background. And that's kind of losing its magic if you, if you keep, if you keep kind of reusing it all over the place. So I would actually say less is more here and the headlines could be a little bit larger.

• 48:04Speaker 01

  Yeah. Again, here it's kind of like, I'm not sure if you, if you need that. It's very hard to read, built on top of your existing setup.

• 48:10Speaker 00

  Yeah. And that actually seems like a very important point that you would want people to know.

• 48:14Speaker 01

  Yeah.

• 48:14Speaker 00

  You can control who has access. You can build on top of your existing setup.

• 48:17Speaker 01

  Exactly.

• 48:18Speaker 00

  But it's super easy to miss it because the screenshot takes up a lot more of the space. There's this animation that is drawing your attention away from this headline that is actually really important and buried at the bottom.

• 48:28Speaker 01

  Exactly. And then you have to just, and then you have to differentiate between like, how much and, and like, how much information is the visual that you added actually giving the user versus the copy that you could add to it? And, and that balance, I think is a little off here, but overall very beautiful. These are just nice. Like these are, these are, this is a really simple to use carousel. I can swipe through it. The colors are, the colors are, are, are mapped to the, to the photography. I think that's something that people don't get credit for enough. Like this is, this is great and really well done. It's Manhattan. It's the blue sky. It's Coinbase. It's a blue, it's a blue artifact here. Like that feels really nice to kind of scroll through and see.

• 49:04Speaker 00

  They're very branded.

• 49:04Speaker 01

  Yeah. Although these colors are too close together. So they kind of, they kind of, um, I would have used a different color for this one here.

• 49:10Speaker 00

  Yeah.

• 49:11Speaker 01

  But overall it's, it's really nice. Maybe like a gray or.

• 49:14Speaker 00

  I'd probably, this is maybe more the AT&T blue, but this image I would maybe use a different image.

• 49:18Speaker 01

  That's probably correct. Yeah. Yeah. But overall, I mean, very clean, very, very trustworthy.

• 49:24Speaker 00

  There's a lot of space between the sections too, which is, I, I know that is a technique that you use a lot on, on your designs and things that you build.

• 49:32Speaker 01

  Section of the homepage is basically the first chapter of all the child pages. So a lot of the times what we would do when we were designing for clients is like, if you are talking about products, solutions, resources and pricing, then those are the four, the four main parts of your homepage. Because apparently that's where we're deeming the most important parts. The product features are solutions, the resources and the pricing. As you scroll through the, through the website, those four components show up in exactly that order from most important to least important. Because of scroll depth, like people drop off as they scroll through the page. So important content has to sit obviously at the top. And then each one of these sections should lead me in to, um, to that.

• 50:14Speaker 01

  So if I click on, so theoretically I would have had a whole section for product right here on the homepage. And then from there you could, you could click into products. Products, by the way, actually should probably have a, have a, have a homepage itself because there are so many, many products. But yeah, overall it's, it's, it's well designed and it's, it's simple. Looks like they took time and care to make this website, which is nice to see.

• 50:37Speaker 00

  Yeah. It's interesting. Um, it's a lot more breathable.

• 50:40Speaker 01

  Yeah.

• 50:41Speaker 00

  It feels like there's less going on here versus some of the other ones that we look at.

• 50:45Speaker 01

  There's still a lot of content, but it's spaced out and distributed across.

• 50:48Speaker 00

  It has its, everything has its own space, which helps the user know what to focus on at any one time, rather than feeling like there's lots of things that are trying to draw their attention. And it's interesting how you describe that as like, this actually took more time.

• 51:01Speaker 01

  Yeah.

• 51:01Speaker 00

  Than the things that have lots of time or lots of, uh, competing elements.

• 51:05Speaker 01

  Yeah.

• 51:05Speaker 00

  Because it, it actually takes work and curation to figure out what are the things that we actually want to keep. It's easy to throw everything.

• 51:13Speaker 01

  Exactly.

• 51:14Speaker 00

  It's much harder to figure out what needs to be edited out.

• 51:16Speaker 01

  Because that conversation is just much harder to have with the team. Everyone's competing. Everyone wants their functionalities or their features to be on the page. And you have to cure it and make a decision and, and, and reduce, which is the job of any designer, like reduce complexity and show one piece at a time. And, and, and, and drive narrative that way. It's, uh, it's hard to do, but it's, it pays off when, when done correctly.

• 51:38Speaker 00

  Yeah. This is excellent. Great work, Mintlify. Okay. Next up, we have Nullify. So your users don't read your docs, your patients don't read your manuals, your employees don't read your content. Nullify turns your docs and ideas into narrated animated videos. Make them yourself in minutes or have our studio team make them for you. For teams who need more video than they have time to make. Okay.

• 52:03Speaker 01

  I think right off the bat, being a typography designer, I would say there's a headline, there's a paragraph, and there's almost like a smaller version of the paragraph underneath in a different font size. And then there's the book a demo button and the start free button. There's one, two, three, four, potentially five font sizes right in the viewport here, disregarding all of the logos and the banner and the banner here in the corner. That it's just a lot going on from that perspective. You can have a headline and then you you have the paragraph and you have to put all of the important information into that paragraph.

• 52:34Speaker 00

  Yep.

• 52:35Speaker 01

  You can't keep adding headlines to it and making the user read all of those different points.

• 52:39Speaker 00

  The first thing that jumped out at me is the two placeholder elements in the headline. And I find that to be disorienting.

• 52:47Speaker 01

  Yes.

• 52:47Speaker 00

  It's one thing if you have one and it's changing because then you can anchor yourself on we do this for this type of person and this type of person, this type of person. But with two elements changing, it's like the user is changing and the the like docs or manuals or whatever. And then it sounds like it's actually like a video thing.

• 53:03Speaker 01

  Yeah.

• 53:03Speaker 00

  Which was I would not have gotten from the headline at all. And so I think what they're trying to say is like, hey, people don't read these documents and PDFs and stuff like that. So you need videos so that they pay attention to stuff. But I feel like they need to say they do videos that convert better, kind of like the positive of what they do.

• 53:20Speaker 01

  Could they make a video, could they use their own studio to make a video and nullify and put that on the website and we watch that first?

• 53:25Speaker 00

  Yeah, they prove their point, right? People don't read all of this.

• 53:28Speaker 01

  Exactly. We're not going to read any of this anyway, so just show us a video of what you do. There's a carousel here that I think just basically shows off the product, so let's.

• 53:35Speaker 00

  Right, I assume these are examples of their animations.

• 53:38Speaker 01

  You can't click into one of them, you have to use the the icon, that's not good. And this card needs to be tapable, obviously. You look at this and you wanna you wanna click into it.

• 53:47Speaker 02

  Every year, thousands of warehouse workers get injured.

• 53:50Speaker 00

  Okay, so it's like an instructional animation video.

• 53:53Speaker 02

  Most of those incidents are completely prevented and warning devices.

• 53:57Speaker 01

  The video looks well made.

• 53:59Speaker 00

  And the thing that we want to do here, though, which is interesting tying back to a lot of the the carousels that you've created in those past projects that you showed, is I'm exploring a lot of their work.

• 54:11Speaker 01

  Yeah.

• 54:11Speaker 00

  And when I click into the one, it comes fullscreen. And then I figure out like, okay, how do I minimize X this out? And what I really want to do is I want to have it zoom in so I can see it play. And then I want to be able to keep jumping to the other ones because I want to see the depth and variety of what they can create.

• 54:26Speaker 01

  Exactly.

• 54:26Speaker 00

  And it's kind of hard to do that right now.

• 54:28Speaker 01

  Yeah, none of these are tapable, I can't open them up fullscreen. It's like you have to like use all of the you have to use all of the the little buttons here.

• 54:36Speaker 02

  The vaccine is injected into the upper arm muscle.

• 54:39Speaker 00

  I would want it to zoom up, not the full width and take over everything, but like ninety percent or something.

• 54:45Speaker 01

  Just enough to show me what's going on and then I can start swiping for all of them.

• 54:48Speaker 00

  Yep.

• 54:48Speaker 01

  And maybe right underneath, show me like that actual company.

• 54:51Speaker 00

  Right.

• 54:51Speaker 01

  And maybe these are all actually case studies. So like as they open up, you could open these up in really nice sheets that with like a depth. So like the rest of the the page pushes back, sheet comes up, you can see the video at the top. Maybe there's a description of what that video is for.

• 55:05Speaker 00

  Yep.

• 55:05Speaker 01

  What's the construction company, bit of a case study? That could also almost lead you into like customer stories or success stories. These are obviously the the demos they're they're showing off of of past clients that have worked with them. So there should be more focus on those videos, less, I think, on on on the on the logo banner ad here. A conciser headline that doesn't jump around between two things happening at the same time.

• 55:28Speaker 00

  Yep.

• 55:31Speaker 01

  And yeah, that.

• 55:31Speaker 00

  And now we get into the platform.

• 55:33Speaker 01

  Well, exactly, now we're getting into the product.

• 55:34Speaker 00

  Now they're describing like, oh, yeah, oh, the platform here, go up just a little bit here.

• 55:38Speaker 01

  Oh, sorry.

• 55:41Speaker 00

  So you make the video, upload a doc, a blog post or an idea and get a narrated animated video in minutes. Edit it just by chatting. I feel like that's what I need all the way up here at the top.

• 55:50Speaker 01

  To explain what it is that they're doing.

• 55:51Speaker 00

  Yeah, because right off the bat, I don't even know if this is for me. And so how many people do they lose that would be ideal customers but can't even figure out that this is for them?

• 55:58Speaker 01

  Show me what the product does, and if I'm into that, then show me the results.

• 56:02Speaker 00

  Yep, I also know it's it's scroll jacking here.

• 56:05Speaker 01

  Yeah.

• 56:05Speaker 00

  Which drives me crazy.

• 56:07Speaker 01

  I agree.

• 56:08Speaker 00

  Because it it feels less responsive to the scroll that I'm trying to do. It it it takes a while to ramp up to the speed rather than just moving.

• 56:14Speaker 01

  I want to take the time here on this podcast to talk about scroll jacking in general and scroll manipulation on websites.

• 56:21Speaker 00

  Yep.

• 56:21Speaker 01

  Smooth scrolling on websites is a disaster in the industry. And I feel like you you use the native scroll on websites and don't hinder the speed at which a user wants to interact with the content of your website.

• 56:33Speaker 00

  Yep.

• 56:33Speaker 01

  That is exactly what we were talking about earlier with interruptible interfaces.

• 56:36Speaker 00

  Yep.

• 56:37Speaker 01

  Apple has pioneered this for decades and their software and their hardware is is proof of that. You want interruptible software because our thought patterns are interruptible. You might think something and click on something else. And you would never want to get a user into into into a an environment where they have to smooth scroll or scroll jack through the content because that's the way you think they are gonna perceive or digest this content.

• 56:59Speaker 00

  Yep.

• 56:59Speaker 01

  That's almost an arrogant way of going about it. I always feel like I want to be as as as as unobstructive as possible and be as as polite as I enter the room. Dieter Rams would always say, enter politely and quietly when you when you walk into a room.

• 57:12Speaker 00

  It will also, as users, this is not the only website we've ever used.

• 57:16Speaker 01

  Exactly.

• 57:17Speaker 00

  We're used to scrolling on probably hundreds of thousands, maybe millions of other websites.

• 57:21Speaker 01

  Usually on our phones.

• 57:22Speaker 00

  Yeah, and on phones. And and we get used to the sensitivity and the precision with which we scroll. And when something changes that, you have to reorient yourself to try to find what you're looking for and it becomes a distraction.

• 57:33Speaker 01

  And it just becomes it becomes sluggish, like I'm I'm trying to pause on this piece of content. But the the animation is kind of still playing, so now I'm trying to use the track back to counter that animation and it's it's making me uncomfortable. Like I don't I don't want to have to scroll like that. And then since the tap targets here are really difficult, you have to hit these these tiny buttons.

• 57:53Speaker 00

  Yep.

• 57:54Speaker 01

  It's it's it's a bit complicated. At the end of the day, they just have multiple different carousels on this website. All with video players behind it that open up in a fullscreen video player. But the only way to exit out is with the escape, with the escape button.

• 58:07Speaker 00

  Overall, the videos seem very, very well done.

• 58:09Speaker 01

  The videos seem great.

• 58:11Speaker 00

  Yeah, and just getting people into those and being able to see more of them and experience them and understand the case studies behind them seems to be the thing that will convert people.

• 58:20Speaker 01

  Yeah, and I think if that's if if if this is improving the health and safety of Adidas or that construction company, then Nullify is doing is doing a great job.

• 58:28Speaker 00

  Yep.

• 58:28Speaker 01

  And that and that's and that's the product they're selling.

• 58:30Speaker 00

  Awesome. Thank you, Nullify. Okay, next up, we have Instinct, building the lunar future today. Okay, so we got a moon. Building the lunar future and we've got some kind of satellite that's floating around.

• 58:44Speaker 01

  Yeah, it's nice, it's very immersive. I think it's very safe to say that these guys are working on space technology.

• 58:51Speaker 00

  What gave you that idea?

• 58:53Speaker 01

  Aerospace technology, so already there, kudos. I think, you know, to to go back into like AI world for a second, this is a great example of I think you can very easily get an LLM to to to make you kind of like a a 3D version or a WebGL version of a moon that you can put on this website that kind of is interactable with the cursor. That's something that I would that I would probably add to this page. Both of these elements are actually things that I would render in 3D and then have as live objects on the page. And that's not totally impossible to do now with AI. So there's something there's something around that that I would that I would add to this to to build a we call them showstopper components. So like when you have one or two components on the website that really like take all of your attention and like really draw you into what's going on.

• 59:35Speaker 00

  Yeah.

• 59:35Speaker 01

  I feel like that's a that's an awesome moment to show to show something like that off.

• 59:39Speaker 00

  Yeah, I I think this this is very well done because right off the bat, we knew exactly what this was.

• 59:44Speaker 01

  Yeah.

• 59:44Speaker 00

  And the animation here of like showing it in 3D, it could have just been a 2D, it could have been a photo.

• 59:49Speaker 01

  Yes.

• 59:50Speaker 00

  You know, that they superimpose, but there's something about that that draws our attention to like, oh, this is actually the thing that they're building.

• 59:55Speaker 01

  The moon is a photo here in the background, so that's the thing that I was reacting to. But yeah, you're you're totally right. Also, nice use of of of the font. I feel like a lot of the websites right now are working in a very safe, considered space with a sans serif. And having the courage to like try to wield a serif font on the website is is a nice touch. I will say on that note, the logo itself, the font here and this typography here are all different and kind of competing. And then there's a lot of color in the logos down here, including your lovely logo. And I feel like it's almost drawing too much attention away from the actual message. And in this case, there's only one message, it's nice and reductive, but you you have space to add one more piece of meta content here that maybe talks more about what your what your company does and what you're building.

• 1:00:36Speaker 00

  Yeah.

• 1:00:36Speaker 01

  But let's let's dive further in.

• 1:00:39Speaker 00

  Yeah, so now they get more specific. Instinct is building the lunar lander for today's space industry, so launch, cruise, land.

• 1:00:44Speaker 01

  Yeah, I think that's it's it kind of explains what's what's going on.

• 1:00:48Speaker 00

  That's really cool that when you hover over it, you see it. I mean, the first one, I couldn't really tell what's happening there.

• 1:00:54Speaker 01

  I don't really, this doesn't really look like a launch to me.

• 1:00:57Speaker 00

  Oh, there we go. Okay, you just had to sit with it for a while, so maybe they can get to that faster.

• 1:01:01Speaker 01

  Way faster. Attention spam in general is decreasing.

• 1:01:04Speaker 00

  Half a second. Like that's what was cool about the second one is as soon as you hover, it takes off.

• 1:01:08Speaker 01

  Exactly. I think that's a very good piece of piece of feedback here. Like the moment you hover over this, this this thing should open up. There's a world where you could have them all play at the same time because they're very concise moments. It's just the launch, it's just cruise, it's just land and they can actually all play in very in in in quick looping videos. And you could probably get the point across even faster. And the the land video, it doesn't really get the point across.

• 1:01:30Speaker 00

  Yeah.

• 1:01:30Speaker 01

  I don't think everybody immediately understands that's the moon and then you're slowly coming closer to it. I think that like what you're actually waiting for is this moment, right? You want to see.

• 1:01:37Speaker 00

  Yeah, there you go, you see the shadow getting bigger.

• 1:01:40Speaker 01

  That's it, that's what I want to see.

• 1:01:41Speaker 00

  Yeah.

• 1:01:42Speaker 01

  I wouldn't even show any of the other stuff.

• 1:01:43Speaker 00

  It should have just been that.

• 1:01:44Speaker 01

  It should have just been this.

• 1:01:44Speaker 00

  Yeah.

• 1:01:45Speaker 01

  It should be that, this scene, and then this, but with the with the top open. And that's all you need to do here.

• 1:01:49Speaker 00

  Yep.

• 1:01:49Speaker 01

  And again, and then one, two, three, three, three, like the three up is nice as well. On mobile, this really quickly turns into a nice carousel, so.

• 1:01:56Speaker 00

  Yep.

• 1:01:57Speaker 01

  Very very easy to translate this into mobile.

• 1:02:01Speaker 01

  Again, primal strategy that Jaitel and me, like our school of thought on this would always be, you have technology, company, news, careers, merge. If these are the things that you deem as important for your business, those are the chapters on the homepage. Show of technology, show of the company, show of news and careers. Don't make me use the navigation at the top. These are all elements that you can bring into the homepage. And from there, using very simple sheets, sheets, you can just transition into any pieces, any piece of that content and it'll make that whole, it'll make this whole thing feel way more digestible and readable. But let's click through some of the pages.

• 1:02:38Speaker 00

  Yeah, that's cool.

• 1:02:38Speaker 01

  Yeah, technology.

• 1:02:39Speaker 00

  Okay, so what I like about this,

• 1:02:40Speaker 01

  Yeah.

• 1:02:40Speaker 00

  it's, it looks like it's real video. And so it makes me feel like this is real.

• 1:02:45Speaker 01

  I mean, this is real.

• 1:02:46Speaker 00

  Yeah, it's not like a bunch of renderings and, you know, it's hard to tell, is this real? Is this just like a plan that they have? And it's like, no, they're actually doing the thing.

• 1:02:55Speaker 01

  They're building this, yeah. I think, again, great example, there's on, there's not that much information on the technology section. This whole video could have been a piece of content on the homepage that says, explore our technology. You tap into it, you open up a new component like this, you scroll through it. And when you, when you scroll back out, you're on the homepage again. Like that interaction pattern would work really nicely here.

• 1:03:17Speaker 00

  And this is super cool. And you're relying on people to click on the technology page in order to see any of that.

• 1:03:22Speaker 01

  Exactly. We're getting a little sloppy here with the, with the cover images here. I think there's a lot of stuff going on with.

• 1:03:27Speaker 00

  It doesn't match the, the quality and the style of the rest of the pages.

• 1:03:30Speaker 01

  No, not at all. And I think very important for, for Instinct to remember here, you can use the serif for the headline. That becomes a stylistic element of the overall art direction for your branding. You don't use it for any of the body copy or paragraph copy. Those are sans serif, that's a sans serif font. So these, this, this information here and this information here, I would use something like Instrument or just like a, a normal sans serif font, like a, like an Inter or something that works really well here. We were looking at carousels earlier, like this carousel doesn't drag, this carousel doesn't swipe with the trackpad. This whole carousel only works if I interact with these buttons. That's definitely not the way I would, you, you build these components.

• 1:04:12Speaker 00

  I think my takeaway is you gotta release Carousel Kit.

• 1:04:15Speaker 01

  We have a Carousel Kit actually that Jesper Voss has been working on called Blossom Carousel.

• 1:04:19Speaker 00

  Yeah.

• 1:04:20Speaker 01

  And Blossom Carousel is basically, this carousel swipes and scrolls and it comes in a multitude of different variations and versions. It comes as stacks on mobile. This is free to use and on GitHub. So any founders or any entrepreneurs who are watching the show, you can.

• 1:04:36Speaker 00

  Yeah, this is great. Everybody should use this. Instantly, your carousels will get way better.

• 1:04:39Speaker 01

  Exactly.

• 1:04:40Speaker 00

  Awesome.

• 1:04:40Speaker 01

  Awesome, Instinct, thank you.

• 1:04:42Speaker 00

  Great work, Instinct. Awesome. That does it for this design review. Marvin, thank you so much for being on.

• 1:04:47Speaker 01

  Thank you so much for having me. It's so lovely to be here. It's nice to be in San Francisco. It's just like, yeah, the energy here is unmatched. Y Combinator is awesome. The office here is sick. I like, I'm so glad that you guys asked me to be on the show. And it's just, it's nice to get to sit with like-minded people who just wanna look a little bit under the hood. We, we went through some of that work and I think, yeah, thank you for letting me, letting me show a little bit of my workflow. And it's awesome to see all these, all these companies coming, coming up with so much innovative new work.

• 1:05:12Speaker 00

  Yeah, well, it was amazing to see the behind the scenes of your work and really get into your, your mind and how you think about how you set the bar and level it up with not just the visuals, but a lot of the interaction and how users actually experience the work that you do. So, yeah, thank you so much for sharing it with us. And that does it for this episode of Design Review. We'll see you on the next one.

• 1:05:33Speaker 01

  Bye, guys.