Transcript
0: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. Marvin, thanks for joining us. >> Thank you for having me. >> 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:33 >> I feel like the process itself hasn't really changed. It's still extremely iterative and and sequenced out. There's a lot of There's a lot of iterations and variations in the work in and of itself, but the tooling has has definitely shifted a lot from tools like Figma and working with aesthetic layouts into more of an AI-driven workflow, where I'll I'll use Figma as a scratch pad for some of the ideas I have, but then very quickly that'll transcend into into 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 it's it's it's definitely more of a world now that that in includes tools like like like Codex and and and Claude Code and 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 more to like AI tools in in general.
1:34 >> And how much of that workflow is is AI driving a lot of the process and how much of it is you the human? >> 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 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 and and 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 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 into a multitude of almost like subtasks that then you can feed to the to the agent bit by bit.
2:28 And then it's a it's a it's a back and forth. >> And it sounds like a lot of what you're describing is that your role is actually to be the editor. >> 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 hand-crafted 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:53 >> And so, you the human are still responsible for the ultimate final output and making sure that it meets your bar. >> Always. >> But you have all these tools now to be able to get there way faster. >> 100%. I mean, AI has definitely raised raised the ceiling for all of us, but it's it's it's it's not a crafter. It it it can execute complexity and and and technology that I couldn't I couldn't handwrite code. It 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 and to steer AI into the right direction.
3:22 >> 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. >> I work with a team of very talented designers. We've been there for the last year and between between us we basically run an initiative at the company to redesign and 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 and admin dashboards we we look at and 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 exciting last year.
4:10 >> Yeah, it's it's actually really interesting cuz Shopify is like two decades old or something at this point, right? >> 20 years old. >> 20 years old, and so we are >> 21, I think, actually. >> Yeah, we're in a new era now. AI is changing a lot of things, and and it sounds like a lot of the work that you're doing is is actually to modernize and bring it into a modern era, which is through design, but also the experience itself, right? Like, what is the design team in your in your product design studio actually work on there? Are you just, you know, in Figma and canvases and designs and passing them off to engineers, or or what is the design function like that that you manage there?
4:44 >> 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, paradoxic sectors of the company, but they work really well together. 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 like incredible to to see.
5:40 And a lot of that actually translates very nicely back into the mobile app, and is up-leveling 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 via the interface. >> 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 and talk through where that came from.
6:10 >> Yeah, Molly was the a studio, a design studio in Brooklyn that I was running together with J Tal, my studio partner. We ran the studio for about 2 years before joining Shopify and and integrating the studio into Shopify. >> And you had some huge clients that you worked with during that time. >> Yeah, we worked we worked a lot with with Collins and Apple and Google. And also a lot of smaller clients, too. It was 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 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-focus stints with these clients.
6:55 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 we were doing while we were while we were running our studio. >> cool. There's little details here. The animations are very organic. And even as each screen changes, the 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, but it's something that you sort of intuitively feel something is happening here, right?
7:24 >> We we we we got this idea basically just from the ambient lighting behind behind TVs that are mounted on walls. And I think J Tal, and this was pre-AI, basically duplicated the video and had it like blur it out in the background so that it would match the rhythm of of what's going on on the screen. And it and it works really nice. And I think what we but but before this 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:52 It feels like a thunder or something. And it it kind of at least for us it always felt like people were like 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. And then you scrolled into the real, 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.
8:19 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 it 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, and everything is progressively disclosed. So you never overwhelm the user with too much content in general.
8:52 >> What are some of the ways that that you accomplish that? >> I mean, I can just go through some of the work. This was a project we did with with with the agency Collins. We worked with them for I think over a year on this on this website. And as you can see, even as you're scrolling through the home page here, each section of the home page is a chapter that as you as you as you interact with the website can lead you into further exploration. So this is one of my favorite sections here. This is the the bookshelf. These are basically all of the case studies from Collins.
9:21 >> Even go back and and hover over those elements again. The way they bounce feels different than what you typically see. >> Yeah. Yeah. >> Talk about how you made that. This was you didn't use AI tooling to do this. You hand crafted these, right? >> Yes. Well, in this case I will I will say this was very much design and engineering partner together. I would lay something like this out in Figma and 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 on like the bounce animation for instance. Like all these books have to level up on top of each other and then basically 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 dilutes 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 when they scroll through these kind of websites.
10:19 >> that matter? Like you have a person who's supremely talented, whose entire job on this project was to make the tab interaction. And it's very easy for anybody to go, well, just throw a tab. Tabs exist. You can get that for free in 5 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 and and have them focus just on that one interaction?
10:45 >> There's multiple different ways to answer that, but I think especially for this studio because they work on design themselves. Like this is a branding studio. 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 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.
11:26 We try to do the same level of care and and craft at Shopify. >> Talk about the decision then to sell your design studio to Shopify and to come join them and and how that process 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. >> Tobi at the beginning at some point last year basically said, "We're entering a new era and that future needs to be designed."
11:55 And 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 road." 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.
12:15 It's a founder-led, engineering-led organization 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 that we're building for our merchants and that's beautiful to see 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 or Spencer the illustrator, we also wanted to have a larger impact and and and and see if our strategy would hold up on interface paradigms with millions of users versus the the few users I guess that would scroll around the Spencer website.
12:53 >> Right. And so it's a different set of challenges. The design studio work that you did was create a new site or something to 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:20 >> So I will say basically for now our studio exclusively operates within Sidekick which is the AI infrastructure layer of Shopify. 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 in in in our road map.
14:00 and it's and it just it requires a lot of a lot of experimentation. Honestly, like up-leveling the interface was easy for us because we've really talented designers who rebuild parts of the interface in Figma 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 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 using the current the current technology to just simulate it all and generate prototypes. Where in the past 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.
14:56 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 because the tooling is just allowing us to to do that. And that's that's making it a lot easier to get buying 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 get a whole team rallied around an idea.
15:26 >> Could you show us some of the the work that you guys have been building at Shopify? >> This is basically a a a redesign and facelift of our current admin experience with a with a new with a new home home design and an overall an overall facelift of basically the entire product which we've been working on at the moment. I think one of the more interesting things that we've been exploring right now is just how Sidekick and the merchant interact with each other. We have this concept of suggestion Sidekick suggestions on on the home feed. These suggestions are 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 and we can show those to the user and then as the user interacts 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 re- rewrite the description of of your of your product. Here's the here's the here's the suggestion 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 it into context versus having the user click through click through the interface. At the end of the day, there's a world where a a merchant can spend a lot more time on the home surface and use Shopify 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 design team is building all of these 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 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 same demo and the same language.
17:45 >> Yeah. >> and it's just a beautiful way to to to to share ideas and and and context. >> You said designers are building this in here. A lot of times designers are designing and they're not building but 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 live data live experiences 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 >> Yep.
18:17 >> 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. >> 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 repository. Having said that though AI has definitely gotten to the point now where as designers we are highly empowered 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:58 >> Mhm. >> You can zoom into any part here and they're 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 Michael Spicer and J Tall working on this project together and you can just see the evolution of like as we're going through the like as we're going through ideas and like trying out new things. These are These are too heavy and too expensive to test in code. We don't want to test this 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 in the in 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. 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.
19:50 Here's an example of a side project I've been working on 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 a 2x3 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, I had to wait until the asset was all the way back in its position and set 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 it 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 good example of of of how at least myself personally I'm I'm using I'm using Figma more. it's more of a scratch pad to like map out ideas and I give those ideas to Codex. 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. I I 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.
21:29 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 commands and then you can put those components back together.
21:55 >> Yeah, just show us how you did that here cuz so to be clear, you had a bunch of images >> and videos. >> and videos of of actual grass. >> Yeah. >> And then you wanted to create a shader 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. >> 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.
22:38 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 all where we landed where we ended up now. 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 as 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.
23:19 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. 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. 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 in into the grass blades.
23:45 Yeah, these started to look like bushels a little bit and which which felt more realistic and then over here we 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. >> Right. >> Basically, I fed this back into into AI and it and it understood, oh, okay. So, there's there's a an underlying structure and a map that has different depths and heights and if I can 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 reference 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:29 >> Right. >> This was all unlocked via Josh to me at a lunch the other day where he kind of like we installed DialKit into this demo because he looked at this and 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 217,000 different grass blades, but they only differ by like 0.7 0.8. So, we were like, okay, let's just build a toggle for it so that we can see it ourselves.
24:56 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 I had implemented was completely wrong and and and skewed. So, I couldn't get to my outcome anyway because I had misinterpreted something five prompts ago that I didn't know about anyway. Dial kit kind of unpack 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 what I really wanted to see and if if you know the the length here is longer than 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 movement. You can see it 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.
25:51 And these are things that I think before AI I I I couldn't do. I just I I might have had these ideas but I but 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 the design role right now. And 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:13 >> 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. >> Yeah. >> 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.
26:38 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. >> Yeah. >> Which I guess is where the name dial kit comes from. So yeah, maybe tell us more about DialKit 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: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. They have a little prompt for it. You can just plug it into to whatever you're working on. I have another project that I can quickly show. This is just another version of DialKit. in the specific in the specific project where I was manipulating a a carousel. This is inspired by Mike Matas. He's a design leader at at Luv 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 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 my own of of of the own Frankenstein that I created here with 91 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. you need to be able to to to always expose those kind of those kind of values.
28:27 >> 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. >> Yes. >> And so, what is the role of the designer and and maybe even non-designers? How should they be thinking about design? Yeah, 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 or designers that are maybe trying to figure out like could I start a company or could I actually build the product?
29:03 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 in being able to up-level the way that they use AI to create higher quality design? >> 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 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out.
29:34 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 want it 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 of from from save it or cosmos of something that you that that you think looks really beautiful. Show it a color palette and 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 the tool. I think that's that's that's that's really important and for designers specifically, my trick or what I always learn 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 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 and decompile how how this thing is put together. that teaches me how to be a better manager and how to be a better collaborator and be a better team member and I think that's how we should be be be treating these tools.
30:43 >> Yeah, that's that's great advice. 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. >> Should we review some websites? Yeah, I'd love to. Let's do it. >> All right, let's do it. >> For sure. >> First up, we've got Nstack. So, let's see. Okay, so >> this is Nstack, 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:18 >> 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 ex- explore these. And yeah, I mean, you 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. >> 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.
31:40 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 it this for. And maybe, literally, you can use it for anything, but I feel like sometimes it's helpful, like what do you want the user to do when they hit this? >> 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. 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 >> -huh.
32:09 >> of Nstack 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 I don't know what to do when I look at it, >> Yeah.
32:30 >> basically. I don't know what to look at first. >> Yeah. Yeah, do I click these icons? Do I go in the Slack-like thing? Do I go in the chat interface? >> Am I texting and talking to the chat here? >> Yeah. >> Why am I called Mark? >> Yeah, you're Mark, I guess. >> 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 the introduction and the headline and and what do I want the user to read and take away?
32:55 >> Yeah. >> 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, there's a it's it's it's very whimsical and and feels kind of retro, which is nice. >> Yeah, 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.
33:19 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 >> Yeah. >> 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 are calling Yeah, it's like general engineering, marketing, get started. What is the one that they want us to focus on first?
33:48 >> Someone once said this to me. It's like often times when we build websites, we focus on one thing on that website and we make that really well and we we we we build the whole narrative around that one thing. On Collins, it definitely felt more like the books the book stack was something that we we were proud of and wanted to show off. And that and that is the heart of of of the website is 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 Nstech, I would be I was 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:26 And that's kind of what's happening here to next thing. There's a lot of things screaming for attention. >> Yes. >> It's the opposite of progressively disclosing information. >> 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 Yeah. 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." But it still feels maybe like we need a little bit more context to figure out what exactly we should be doing here.
34:57 >> Agree. >> N stack. Thank you. All right, let's take a look at Skill Sync. Free local-first Mac app that carries your memory and skills across every agent and teammate. >> That's nice. Yeah. I mean, at least it's clear I think what what the company does. >> Yeah, okay. >> Yeah. >> So it's got skills and they sync. >> Yeah. >> >> Yeah, I mean, it it it it's in dark mode. the fonts are I I would say are very small. The difference between Skill Net as basically the logo and the first paragraph below it, there's a lot of percentages in in the typography. few heights here that I that I that I think we could we we could skew in a little bit. They they feel a little off in in my opinion. And again, there's there's a lot of very dense information.
35:39 >> Mhm. >> and often times to what we were just saying about N stack, 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 it'll require a lot of actual reading of all of these features to kind of understand what's going on. >> I'm curious your take on this. so what they've got here is they've got basically a bunch of sidebar tabs that are trying to show off different features. And you, I feel like have an interesting approach on tabs cuz all those sliders that you make, they're effectively like tabs, right? It's just you have the affordance of knowing that there are multiple of them and you can see multiple at a time.
36:18 >> Yeah. >> 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. And so, you have to assume that whatever is hidden behind all of them, 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:40 >> 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 Skill Synch can do for you. You can do X, Y, and Z. Those are the three things you show off. All of those are tappable.
37:08 They lead you into potentially sheets or 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. That's what that requires like a deeper understanding of your feature set and and and then more condensing those down into principles and rules and main kind of like points.
37:35 And then you can rally or bring more information under each of those kind of pillars. 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 an a whole exercise and like well, what's the one thing you do? >> Yeah. >> If it's sinking skills, let's only talk about that and make that really cool and show that off and then get people to use the product as quickly as possible. So, I mean it's also interesting like we just hit the bottom of the page.
38:04 >> Yeah. >> It's not very tall. >> Yeah. Yeah. >> And so, I think users are comfortable scrolling. And so, if there is important information that is hidden behind a lot of these feature tabs here, just break them out and like make the page longer. It's okay. People can scroll longer rather than compressing it and hiding everything. >> Exactly. >> And the other trap that I see a lot of people falling into with with the 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? 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, the 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.
38:50 >> 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. There's lots of things here, but they don't actually help my understanding of the point that it's trying to make. >> 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 specialize in information graphics. And maybe that actually becomes because it's well explained just a core part of the Skill Sink brand identity.
39:31 >> Mhm. >> It's like, "Oh, this is one thing that" I remember working with Gemini a few years ago and there was this animation with 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. And that animation was it basically just explained exactly the capabilities of the model. >> Mhm. >> 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 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:25 And I think yeah, for Skill Sink 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 and and 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. >> Cool. Thank you, Skill Sink. >> Thank you very much.
40:45 >> 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 >> Bird sort. >> Bird sort. >> Okay, so these are games that we can play. >> I think. >> Okay. How do we play? Got a bunch of birds. We got some sound that's playing now. Let's maybe go >> Let's go from let's try something else.
41:18 >> Start button. We're fighting this wolf, I guess. >> That's enough. >> So we've got this call out here which it's interesting. You know, it it says create describe your game idea, right? When you click into it. What's interesting is there was no copy under the title Instaplay. And so we we were up to ourselves to try to figure out how to orient around this page. >> Yes. >> And the first thing that we did is we saw all the visual games.
41:52 >> Yeah. >> All the screenshots of them. >> Yeah. >> And so we jumped right to that. >> Yes. >> 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. >> Yes. >> 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. >> And and again it goes back to your example from from earlier. It's like, what is the one thing we want to use it to take away when they land on the page?
42:17 Is it exploring the 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 sign-up page, which no one's going to do if they haven't seen their created game. >> Right. >> So, you have to come up you have to cough up enough credits for to try to like onboard people into the product.
42:35 That's the cost of acquisition of one user. By the way, that matrix is extremely important. It's probably obviously what what what they're what they're thinking about. But that cost of acquisition can't be continue with Google. >> Right. >> 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 >> to actually use it.
42:54 >> you put in a prompt, you submit it, and it takes you to this screen asking you to sign in. >> Yeah. >> And the problem is we don't know if this is good. And so >> example, obviously, where it would also you could build out a really cool interactive carousel here, and each game has almost like 10 seconds of like a reel. >> Yeah. >> 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 and to all of these different like universes. I think what they're trying to show with these with these covers is just like, "Look, with InstaPlay, you can do a lot of stuff."
43:35 >> Mhm. >> I don't even think we need to be able to play all of these different games if the call to action is to create our own game and be game designers ourselves. >> 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 got to sign up or then you got to create your account.
43:56 >> And and here also, look, so you have create, my games, for you, explore. 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 sign-up. 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.
44:15 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 explore 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 explore page is taking the input field away from you. >> Mhm. >> 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:41 >> Yeah. >> How do they interact with the product? >> 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 home page. I thought it was going to take me to another game or do something else. >> can be misconstrued as an error really quickly. >> 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:05 >> Exactly. >> But, this is super cool. You can imagine just getting people to put in a prompt and creating a game just like the racing game you were just doing. People could play with this for hours. And you just got to get people to that value of creating the game and experiencing something. >> 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 hack for these guys. And and I think there's a lot of Yeah, there's a lot of value in in in this kind of work. So, props to them.
45:31 >> Yeah. Nice job, Insoflight. Okay, next up we have Mintlify, the knowledge infrastructure agents build on. Self-updating documentation for startups, enterprises, and agents. >> Right. >> Cool. I'm obviously very familiar with Mintlify. it's an incredible company. it's been growing really quickly and is a product that tons of YC companies and other dev tools use. >> Yeah. >> Yeah, this >> It's a beautiful website. >> Yeah, this this looks very professional. It looks like something that is trustworthy.
46:00 >> It's straightforward. >> Clean. >> Clean. >> Yeah. They They They're very nice compositions with color and typography and spacing and line heights. >> 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 said. >> I I think because it's it's it's it's being reductive in exactly the correct ways and it's showing only the things that are actually necessary to show.
46:25 It's got a very clean headline, a small paragraph underneath, the get 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 would 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 It feels like it's it's it's helping you think it's some kind of a network or something. It It feels like they're very they're very cautious and careful with what they're building and it's kind of some kind of an infrastructure intelligence layer.
46:59 I I know I know about logo walls, but at least this logo wall is very well put together, which is kind of nice. >> It's 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 via seeing Microsoft and Anthropic and Ax and Coinbase are their users as well. >> With so many tools flooding the market, you need that kind of proof point to be like, okay, well, if Spotify's 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.
47:43 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. yeah, again here it's kind of like I'm not sure if you if you need that.
48:07 It's very hard to read put on top of your existing setup. >> Yeah, and that that actually seems like a very important point that you would want people to know. You can control who has access. You can build on top of your existing setup. 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:28 >> Exactly. And then you have to just and then you have to differentiate between like how much and how 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 a really simple to use carousel. I can swipe through it.
48:48 The colors are the colors are 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 blue it's a blue artifact here. Like that feels really nice to kind of scroll through and see. >> branded. >> Yeah. Although these colors are too close together. So, they kind of they kind of I would have used a different color for this one here.
49:11 But overall it's it's really nice. Maybe like a gray or >> I'd probably this maybe more the AT&T blue, but this image I would maybe use a different image. >> That's probably correct. Yeah. Yeah, but overall I mean very clean, very very trustworthy. >> 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 and things that you build. >> section of the home page 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 home page because apparently that's what we're deeming the most important parts. The product features, our 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 to that. 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.
50:23 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. >> Yeah, it's interesting. It's a lot more breathable. >> Yeah. >> It feels like there's less going on here versus some of the other ones that we look at.
50:45 >> There's still a lot of content, but it's spaced out and distributed across the page. >> 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 >> Yeah. >> than the things that have lots of time or lots of competing elements 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. It's much harder to figure out what needs to be edited out.
51:16 >> Because that conversation is just much harder to have with a team. Everyone's competing. Everyone wants their functionalities or their features to be on the page and you have to curate 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 it's hard to do, but it's it pays off when when done correctly. >> Yeah, this is excellent. Great work, Netlify. Okay, next up we have Netlify.
51:44 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. >> 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.
52:16 There's 1 2 3 4 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 you have the paragraph and you have to put all of the important information into that paragraph. You can't keep adding headlines to it and and making the user read all of those different points.
52:39 >> The first thing that jumped out at me is the two placeholder elements in the headline, and I find that to be disorienting. >> Yes. >> It's one thing if you have one and it's changing cuz then you can anchor yourself on we do this for this type of person and this type of person and 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, >> Yeah.
53:03 >> 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 rather than the negative. >> their own studio to make a video of Nullify and put that on the website and we watch that first?
53:25 >> Yeah. It'd prove their point, right? People don't read all of this, so >> would I want to read any of this anyways? Just show us a video of what you do. The There's a carousel here that I think just basically shows off the product, so let's click >> Right. I assume these are examples of their animations. >> can't click into one of them. You have to use the the the icon. That's not good. this card needs to be tappable, obviously.
53:43 >> Mhm. You look at this and you want to you want to click into it. >> Every year, thousands of warehouse workers get injured. >> Okay, so it's like an instructional animation video. >> Most of those incidents are completely preventable and warning devices. >> The video looks well made. And the thing that we want to do here though, which is interesting tying back to a lot of the the carousels that that you've created in those past projects that you showed, is I'm exploring a lot of their work.
54:11 >> Yeah. >> And when I click into the one, it comes full screen, 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 cuz I want to see the depth and variety of what they can create. >> Exactly. >> And it's kind of hard to do that right now.
54:28 >> Yeah. None of these are tappable. I can't open them up a full screen. It's like you have to like use all of the you have to use all of the the little buttons here. You can't scroll. You can't skip through them. >> Yeah. I would want it to zoom up, not the full width and take over everything, but like 90% or something. >> me what's going on. And then I can start swiping through all of them. And maybe right underneath show me like that actual company.
54:51 >> Right. >> Maybe these are all actually case studies. So like, as they open up, you could open these up in really nice sheets that with a like a depth. So like the 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. >> Yeah. >> What's the construction company, bit of a case study. That could also almost lead you to like customer stories or success stories. These are obviously the the demos they're they're showing off of 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 a conciser headline that doesn't jump around between two things happening at the same time.
55:28 >> Yep. >> And yeah, that >> And now we get into the platform. >> Well, exactly. Now we're getting into the >> Now they're describing like, oh yeah. Oh, the platform. Here, go up just a a little bit here. >> Oh, sorry. >> another video. Yeah, 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:50 >> To explain what it is that they're doing. >> 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? >> Show me what the product does. And if I'm into that, then show me the results. >> Yep. I also notice it's it's scroll jacking here. >> Yeah. >> Which drives me crazy.
56:07 >> I agree. >> cuz 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 >> I I I think I wanted to I want to take the time here on on this podcast to talk about scroll jacking in general and scroll manipulation on websites. 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:33 >> Yep. >> That is exactly what we're talking about earlier with interruptible interfaces. Apple has pioneered this for decades, and their software and their hardware is 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 in 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 going to perceive or digest this content.
56:59 >> Yep. >> That's almost an arrogant way of going about it. I always feel like I want to be as as as as as unobstructive as possible and be as as as polite as I enter the room. Diderot would always say, "Enter politely and quietly when you when you walk into the room." >> It it will also as users, this is not the only website we've ever used. >> Exactly. >> We're used to scrolling on probably hundreds of thousands, maybe millions of other websites.
57:21 >> on our phones. >> Yeah, and on phones, and and we get used to the sensitivity and the precision with which we scroll, and when something changes that, it you have to reorient yourself to try to find what you're looking for and it becomes a distraction. >> And it just becomes it becomes sluggish. Like I'm I'm trying to pause on this piece of content, but the animation's kind of still playing. So, now I'm you trying to use the trackpad to counter that animation and it's it's making me uncomfortable. Like I got I 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:53 >> Yep. >> 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 full-screen video player that the only way to exit out is with the escape with the escape button. >> overall, the videos seem very very well done. >> The videos seem great. >> 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:20 >> Yeah. And I think if that's if if if this is improving the health and safety of Adidas or that construction company, then Nullifysting is doing a great job. And that's and that's and that's the product they're selling. >> Awesome. Thank you, Nullify. Okay, next up we have Instinct. building the lunar future today. Okay. So, we got a moon. >> We've got >> building the lunar future and we've got some kind of satellite that's floating around.
58:44 >> Yeah. It's nice. It's very immersive. >> Mhm. >> I think it's very safe to say that these guys are working on space technology. >> >> What gave you that idea? >> 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. It'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. that's not totally impossible to do now with AI.
59:21 So, there's something there's something around that that I would that I I add to this to to build a we call them show stopper 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. >> Yeah. >> I feel like that's a that's an awesome moment to show to show something like that off. >> Yeah. I I think this this is very well done because right off the bat we knew exactly what this was. And the animation here of like showing it in 3D, it could have just been a 2D it could have been a photo.
59:49 >> Yes. >> You know, that they superimposed but there's something about that that draws our attention to like oh this is actually the thing that they're building. >> 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 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 a serif font on the website is is a nice touch. I will say for 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.
60:26 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. >> Yeah. >> but let's let's dive further in. >> Yeah, so now they get more specific. Instinct is building the lunar lander for today's space industry. So launch, cruise, land. >> Yeah. I think that's it's it kind of explains what's what's going on.
60:48 >> That's really cool that when you hover over it you see it. I mean the first one I did I couldn't really tell what's happening there. >> I don't really This doesn't really look like a launch to me. >> Oh, there we go. Okay, you just had to sit with it for a while. So maybe they can get to that faster. >> Way faster. Attention span in general is decreasing. >> Like that's what was cool about the second one is as soon as you hover it takes off.
61:08 >> 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 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.
61:30 I don't think everybody immediately understands that's the moon and then you're slowly coming closer to it. I think that what you're actually waiting for is this moment, right? You want to see >> Yeah. Yeah, there you go. You see the shadow getting bigger. >> That's it. That's what I want to see. >> Yeah. >> I wouldn't even show any of the >> Yeah, should have just been that. >> It should have just been this. 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.
61:49 >> Yep. >> And again 1 2 3 3 3 like the three of us nice as well. On mobile this really quickly turns into a nice carousel. So very very easy to translate this into mobile. Again primal strategy that J tell and me 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 off technology, show off the company, show off news and careers.
62:17 Don't make me use the navigation at the top. These are all elements that you can bring into the homepage. >> Right. >> 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 and and readable. But let's let's click through some of the pages. >> Yeah, that's cool. >> Yeah, technology >> Okay, so what I like about this >> Yeah.
62:40 >> it's it looks like it's real video and so it makes me feel like this is real. >> I mean this this is real. >> Yeah. >> They're they're they're real. 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. >> They're building this. Yeah. I think again great example there is 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 you're on the homepage again. Like that interaction pattern would work really nicely here.
63:17 >> is >> super cool and you're relying on people to click on the technology page in order to see any of that. >> 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 >> It doesn't match the the quality and the style of the rest of the pages. >> No, not at all. And I think very important for for Instinct to remember here you can use the the serif for the headline.
63:39 That becomes a stylistic element of the overall art direction for your branding. You don't use it for any of the 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 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.
64:03 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 can you build these components. >> I think my takeaway is you got to release carousel >> We have a carousel kit actually that Yes, Prevolus has been working on called Blossom Carousel. >> Yeah. >> And Blossom Carousel is basically a 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 and on GitHub so any founders or any entrepreneurs who are watching the show, you can >> Yeah, this is great. Everybody should use this. Instantly your carousels will get way better.
64:39 >> Exactly. >> Awesome. >> Awesome Instinct. Thank you. >> great work Instinct. Awesome. That does it for this designer view. Marvin thank you so much for being on. >> 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 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 want to look a little bit under the hood. We we went for 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.
65:12 >> 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, 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. Bye, guys.