The New Full-Stack Designer

新全栈设计师的崛起 Marvin Schwaibold 阐述了 Codex 和 Claude Code 等 AI 编程工具如何将设计师转变为全栈构建者，使他们能够通过实时交互原型而非静态 Figma 原型或书面 PRD 进行快速迭代。他详细介绍了自己在 Shopify 工作中的工程与美学实践突破，包括为 Sidekick 构建对话界面、通过 DialKit 暴露实时 GUI 参数，以及逆向工程复杂的物理交互效果。在后半部分，Schwaibold 与主持人 Aaron Epstein 对五家初创公司的网站进行了点评，强调了核心产品设计准则：单目标页面的清晰度、以渐进式呈现取代功能堆砌、采用原生可中断滚动而非滚动劫持，以及用直接生动的产品演示取代被动式缩略图。 随着 OpenAI Codex 和 Claude Code 等终端工具让草稿级 Figma 想法能够快速直接转化为交互式代码原型，设计师的角色正演变为全栈策划者。 (0:00) 在内部沙盒环境中运行的交互式代码原型，在促成管理层达成共识方面，明显比静态 PRD 文档和详尽的响应式 Figma 原型更有效。 (13:20) 将编程智能体与 DialKit 等运行时 GUI 工具相结合，能够实现物理参数的实时调节，克服基于对话的交互循环在微调动画方面的局限性。 (26:29) 落地页必须避免滚动劫持和隐藏的标签页组件，优先采用单一明确的视觉锚点、原生触控板手势输入以及渐进式呈现。 (56:06)

Modern AI code-generation tools have dissolved the traditional divide between design and engineering, shifting the designer's primary role from drawing static screens to curating, editing, and tuning live, interactive prototypes. From Static Mockups to Interactive Code Environments (0:00) Marvin Schwaibold, lead of Shopify's product design studio, describes a shift away from polishing static canvases in Figma toward generating live code with terminal-driven assistants like OpenAI Codex and Claude Code. Figma now primarily functions as an initial scratchpad or a spatial diagramming tool to explain layout and state logic when textual prompts to coding agents fail. By moving rapidly into interactive code, designers can evaluate touch responses directly on phones or computers, turning small teams or solo practitioners into self-directed units that produce work once requiring entire departments. Direct Manipulation and Algorithmic Tuning (22:16) Because AI models can write complex code but lack intrinsic aesthetic judgment, the craft hinges on decompiling complex problems into manageable subtasks. Schwaibold illustrates this with a procedural grass shader challenge: achieving realistic organic depth required prompting ChatGPT to act as a reasoning partner to decompile real footage into lighting, shadows, and an underlying topographical height map for Codex. To refine dynamic behaviors without getting stuck in lengthy prompting loops, Schwaibold uses tools like DialKit to expose internal variables directly on the interface, allowing real-time adjustment of parameters like blade heights, wind velocity, and collision boost. Prototypes Over PRDs in Large Organizations (13:20) At Shopify, operating within CEO Tobi Lütke's mandate to design the platform's future era, Schwaibold's studio pairs graphical interface redesigns with the Sidekick conversational AI layer. Operating directly inside working prototypes rather than drafting abstract product requirement documents (PRDs) allows the team to demonstrate tangible, live software that secures leadership buy-in and accelerates development. The studio experiments in segregated internal playgrounds, surfacing proactive Sidekick suggestion cards directly on the merchant admin dashboard so store owners can edit catalog content inline through AI dialogue without traversing complex navigation menus. The Discipline of Reduction and Information Hierarchy (31:04) Reviewing diverse startup landing pages, Schwaibold and host Aaron Epstein emphasize that clarity requires severe editorial discipline. Overloading interfaces with equal visual weight, such as Nstack's multi-pane desktop metaphor or Nullify's shifting headlines and multiple type sizes, disorients visitors. Schwaibold advocates structuring pages into progressive 'chapters' where top-level concepts introduce deeper documentation or functional sheets, applying constraints like a maximum of seven lines per slide or grouping capabilities into a concise three-pillar layout rather than hiding core features behind unclicked sidebar tabs. Interruptible Physics and Native Motion Mechanics (56:06) Schwaibold argues that software should mirror interruptible human thought patterns, strongly criticizing practices like scroll jacking and artificial smooth scrolling as disrespectful to user control. Interfaces must respond instantly to input rather than trapping visitors in predetermined animation curves or multi-second hover delays. Pointing to examples like the handcrafted Collins bookshelf interaction, responsive media sheets, and Jesper Landberg's open-source Blossom Carousel, Schwaibold highlights that smooth, native trackpad swiping and fluid physics are essential markers of high-craft software. Generative tooling dramatically accelerates code production, but high-quality digital experiences still depend on human restraint, structured hierarchy, and respectful, interruptible interaction design.

Shopify产品设计工作室负责人Marvin Schwaibold在Y Combinator的访谈中指出，AI代码生成工具正在消除设计与工程的实现壁垒，使设计师从静态画布绘制者转变为把控审美、以可交互代码原型驱动产品的“全栈设计师”。 从Figma画布走向实时代码原型 (0:00) Schwaibold指出，AI编程工具（如OpenAI Codex和Claude Code）彻底改变了其个人设计工作流。以往设计复杂微交互或响应式页面时，设计师必须在Figma中耗费数周手动测试各类极端情况，因为请求工程师写代码验证的想法成本过高。如今，Figma退居为初始草稿本或向AI传递空间逻辑与状态机的视觉媒介，而主要的原型验证直接在终端驱动的交互式代码环境中完成，能够在手机和电脑上即时测试活体输出。Schwaibold强调，AI具备强大的技术执行力并解决了产出数量的瓶颈，但它缺乏内在的审美意识与手艺。设计师的职责由此转变为严苛的策展人与编辑，核心在于将复杂任务拆解成子任务，并引导AI走向正确的审美方向。 Shopify的AI原生界面与原型驱动文化 (13:20) 在Shopify内部，Schwaibold的团队同时推进传统管理后台界面重构与Sidekick对话式AI基础设施。在新的后台首页设计中，系统不再强迫商家在多层级导航菜单中翻找，而是主动将优化建议（如重写效果欠佳的商品描述）推送到动态卡片流中，商家通过Sidekick上下文对话即可直接在内联预览中完成修改并发布。Schwaibold表示，在Shopify这类工程师导向的组织中，“可交互原型比任何PRD文档有用一百万倍”。团队直接在隔离的内部代码操场中构建并高频测试带有内置开发控制板（Dev UI）的原型，一旦CEO Tobi Lütke看到高度共鸣的活体原型，便能迅速打通落地生产的路径，以往需要整个部门完成的工作现在往往由单人或两人团队即可实现。 参数可视化与多智能体协作实践 (22:16) 在尝试将真实草地视频重构成浏览器WebGL着色器的实验中，Schwaibold通过ChatGPT对Codex的输出进行诊断，识别出AI将地面误设为平面，进而生成地形高度图以让Codex沿起伏轮廓渲染出约21.7万根草叶。为了克服单纯聊天调参的不精确性，团队直接在Web演示中引入DialKit控制面板，将草叶高度、风速及地形图开关等底层变量外置为滑块与开关进行实时物理调试。在另一个参考自Mike Matas的轮播交互中，Schwaibold在91次提示词迭代的基础上，借助DialKit滑块实时感受并校准“拉动推进力”（pull boost）等碰撞物理参数。Schwaibold与主持人Aaron Epstein认为，这种利用轻量工具直接操作GUI参数调试代码原型的模式，消除了人际协作的沟通阻力，将AI化作了一位不知疲倦、可承受近百次尝试的耐心理想队友。 落地页设计的克制、章节架构与可中断交互 (31:04) 在对Nstack、SkillSync、Instaplay、Mintlify、Nullify与Instinct等网站的实际评审中，Schwaibold与Epstein提炼出一系列界面设计规范。首先，落地页必须克制并建立单点核心层级，避免元素平铺竞争注意力；Mintlify通过得当的留白、配色映射与极简结构树立了权威感，而Instaplay在首屏隐藏了核心的提示词生成游戏入口，并在未提供任何生成输出前强制弹出Google登录墙，被Schwaibold指为获客转化的重大失误。其次，Schwaibold主张“首页即各子页面第一章”的章节式架构，提倡使用包含深度的卡片抽屉（Bottom Sheets）或轻量展开，而非将信息生硬隐藏在用户极少逐个点击的侧边栏标签中。最后，两人强烈抨击了剥夺浏览器原生滚动的“劫持滚动”（Scroll Jacking）与僵硬的弹窗陷阱，强调软件必须遵循Dieter Rams般的克制礼貌，符合类似苹果系统的“物理可中断性”（Interruptibility），并建议初创公司采用如Jesper Landberg开发的开源Blossom Carousel，以支持触控板原生滑动、拖拽与惯性滚动的流畅交互。 本期讨论表明，生成式工具让微交互与高保真代码原型的制作门槛大幅降低，但技术易用性也加剧了无意义AI装饰和排版混乱的问题。全栈设计师的真正竞争壁垒不再是像素绘制或代码敲写，而是基于物理规律与用户直觉的交互还原度、信息架构的删减克制力，以及指导AI协作的高标准审美把控。

[28:27] Marvin Schwaibold: 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. [13:20] Marvin Schwaibold: And as we all know, prototypes are a million times more useful than any PRD document you can write. [48:43] Marvin Schwaibold: Each section of the home page is basically the first chapter of all the child pages. [11:47] Tobi Lütke: We're entering a new era and that future needs to be designed. [43:01] Marvin Schwaibold: 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.

[0:00] Today, I'm joined by Marvin Schwaibold, [0:02] who leads the product design studio at [0:04] Shopify. He'll give us a [0:05] behind-the-scenes look at his process, [0:07] >> [music] [0:07] >> where we'll see how he's using the [0:09] latest AI tools to bring his designs to [0:11] life, then review some viewer-submitted [0:13] websites. Welcome to another episode of [0:15] Design Review. [0:24] Marvin, thanks for joining us. [0:25] >> Thank you for having me. [0:26] >> Before we get into your work at Shopify, [0:28] um I'd love to hear more about your [0:30] process and the tools that you're using [0:31] today to design with AI. [0:33] >> I feel like the process itself hasn't [0:35] really changed. It's still extremely [0:37] iterative uh and and sequenced out. [0:40] There's a lot of There's a lot of [0:41] iterations and variations in the work in [0:44] and of itself, but the tooling has has [0:45] definitely shifted a lot from tools like [0:48] Figma uh and working with aesthetic [0:50] layouts uh into more of an AI-driven um [0:53] workflow, where I'll I'll use Figma as a [0:55] scratch pad for some of the ideas I [0:57] have, um but then very quickly that'll [1:00] transcend into into into like real demos [1:02] that I can use, and then I only [1:04] piggyback back into Figma from time to [1:06] time if I need to lay something out or [1:07] explain something to AI, but it's it's [1:10] it's it's definitely more of a world now [1:12] that uh that in includes tools like like [1:15] like Codex and and and Claude Code and [1:18] and being in terminal a lot and just [1:20] getting to an output that I can use and [1:22] test on my phone or computer a lot [1:24] faster, uh and that becomes like a [1:26] really fun still very iterative cycle, [1:28] but we've definitely moved away from the [1:30] canvas um more to more to like AI tools [1:33] in in general. [1:34] >> And how much of that workflow is is AI [1:37] driving a lot of the process and how [1:38] much of it is you the human? [1:40] >> I think it's a lot of me the human [1:42] driving AI to do a lot of the heavy [1:44] lifting for me, um but there's a lot of [1:46] um quality controls, decision-making [1:49] um that are all that are all up to the [1:50] designers. We're in the driving seat, uh [1:53] and we're actually more than ever now in [1:54] a position where the output isn't the [1:56] issue anymore, it's us being extremely [1:58] selective about what we go forward with [2:02] and and and and what we work with. So, [2:04] it's a lot more curating what AI is [2:06] creating and that is a continuous [2:07] [clears throat] [2:08] like just back and forth [2:10] with AI. I feel like AI is extremely [2:12] capable of getting a lot of things done [2:14] that that we needed to do as long as you [2:17] understand the complexity of what it is [2:19] that you're working on and you're able [2:20] to break that down into [2:22] into a multitude of almost like subtasks [2:25] that then you can feed to the to the [2:26] agent bit by bit. [2:28] And then it's a it's a it's a back and [2:29] forth. [2:30] >> And it sounds like a lot of what you're [2:31] describing is that your role is actually [2:32] to be the editor. [2:34] >> We're more the editors now than ever [2:35] before, [2:37] which is I think fun. That's great. I [2:38] mean, that was always the role, but [2:41] getting to the point of editing just [2:42] took a lot of like hand-crafted design [2:45] that we would do in Figma and just more [2:47] and more of that can be now [2:50] sped up and extrapolated with AI [2:52] tooling. [2:53] >> And so, you the human are still [2:55] responsible for the ultimate final [2:56] output and making sure that it meets [2:58] your bar. [2:58] >> Always. [2:59] >> But you have all these tools now to be [3:01] able to get there way faster. [3:02] >> 100%. I mean, AI has definitely raised [3:04] raised the ceiling for all of us, but [3:06] it's it's it's it's not a crafter. It it [3:08] it can execute complexity and and and [3:12] technology that I couldn't I couldn't [3:14] handwrite code. It it can write code, [3:16] but it doesn't know what looks good and [3:18] what looks bad and that's for me to [3:20] decide and to and to steer AI into the [3:22] right direction. [3:22] >> I've been a big fan of your work for a [3:24] long time. So, maybe first just start [3:25] off and tell us about the product design [3:28] studio at Shopify and what you guys do [3:29] there. [3:30] >> I work with a team of very talented [3:31] designers. We've been there for the last [3:33] year and between between us we basically [3:37] run an initiative at the company [3:40] to redesign and and touch the most [3:42] important surfaces we have. So, from [3:45] anything related to Sidekick, which is [3:46] our AI infrastructure layers that [3:49] basically manage our entire admin to the [3:51] mobile app, which we call the green app, [3:54] and everything from admin and and admin [3:56] dashboards we we look at and and work [3:59] with. Quite recently have been working [4:01] with a lot of new AI infrastructure [4:04] that the engineering teams have built [4:06] for us, [4:07] and yeah, it's just been a really [4:09] exciting exciting last year. [4:10] >> Yeah, it's it's actually really [4:11] interesting cuz Shopify is like two [4:13] decades old or something at this point, [4:15] right? [4:15] >> 20 years old. [4:16] >> 20 years old, and so we are [4:17] >> 21, I think, actually. [4:18] >> Yeah, we're in a new era now. AI is [4:20] changing a lot of things, and and it [4:21] sounds like a lot of the work that [4:22] you're doing is is actually to modernize [4:25] and bring it into a modern era, which is [4:28] through design, but also the experience [4:30] itself, right? Like, [4:31] what is the design team in your in your [4:33] product design studio actually work on [4:34] there? Are you just, you know, in Figma [4:37] and canvases and designs and passing [4:39] them off to engineers, or or what is the [4:41] design function like that that you [4:43] manage there? [4:44] >> At least at the moment, there's almost [4:45] like two parts of this big initiative [4:47] that we're taking. Part of the [4:49] organization of the design team has [4:51] redesigned the entire admin experience. [4:54] This redesign starts in Figma and with [4:56] polishing interfaces and bringing that [4:58] into the web, and the other part of the [5:00] organization, the Sidekick team of [5:02] Shopify, is working on automating and [5:06] manipulating a lot of the Shopify [5:08] interfaces via the chat, so that you can [5:11] use chat, Sidekick, or AI infra to [5:14] basically manage your store and automate [5:16] a lot of what it means to be a merchant [5:19] online. And that's like they're [5:20] basically two [5:22] almost [5:24] controversial, paradoxic [5:26] sectors of the company, but they work [5:28] really well together. So, you're [5:29] building really beautiful new UI, but [5:31] you're also using new UI to basically [5:34] generate um AI infra and AI workflows, [5:37] and that's like incredible to to see. [5:40] And a lot of that actually translates [5:41] very nicely back into the mobile app, [5:44] and is up-leveling the mobile experience [5:46] as well. It's a lot more conversational [5:48] and a lot more talking to Sidekick about [5:50] your business than having to manipulate [5:52] your business via via the interface. [5:54] >> Yep. And previously, before joining [5:56] Shopify, you were building your own [5:58] product studio with Molly, and you have [6:00] incredible motion and animations and [6:02] interactions there that I always found [6:04] to be really inspiring. And [6:06] maybe you can show us some of that and [6:08] and talk through where that came from. [6:10] >> Yeah, Molly was the a studio, a design [6:12] studio in Brooklyn that I was running [6:13] together with J Tal, my studio partner. [6:16] We ran the studio for about 2 years [6:18] before joining Shopify and and [6:21] integrating the studio into Shopify. [6:23] >> And you had some huge clients that you [6:24] worked with during that time. [6:25] >> Yeah, we worked we worked a lot with [6:27] with Collins and Apple and Google. And [6:29] also a lot of smaller clients, too. It [6:31] was it was honestly a broad mix of web [6:33] design and product design and a lot of [6:34] content strategy and hierarchy for [6:36] clients, as well, when it when it came [6:38] to their websites. And [6:40] because we were a small studio, it also [6:42] allowed us to have extremely close [6:44] relationships with our clients. We would [6:46] meet clients weekly for many weeks and [6:49] use these projects at Molly as like very [6:52] high-focus stints with these clients. [6:55] So, we never took on more than two or [6:56] three clients at a time to stay really [6:58] focused. Here's just a reel of some of [6:59] the work we [7:00] we were doing um [7:02] um while we were while we were running [7:04] our studio. [7:05] >> cool. There's little details here. [7:07] The animations are very organic. [7:10] And even as each screen changes, the the [7:14] gradient and the shadow behind it [7:16] changes to match the color of the [7:17] background that I think a lot of people [7:19] maybe wouldn't pick up on, but it's [7:20] something that you sort of intuitively [7:22] feel something is happening here, right? [7:24] >> We we we we got this idea basically just [7:27] from the ambient lighting behind behind [7:29] TVs that are mounted on walls. [7:31] And I think J Tal, and this was pre-AI, [7:34] basically duplicated the video and had [7:35] it like blur it out in the background so [7:38] that it would match the rhythm of of [7:40] what's going on [7:41] on the screen. And it and it works [7:43] really nice. And I think what we but but [7:44] before this sentence it [7:46] used to just say Molly is a design [7:48] studio in Brooklyn, and there was just [7:49] the gradient at the bottom that was kind [7:50] of like vibrating. [7:52] It feels like a thunder or something. [7:54] And it it kind of at least for us it [7:55] always felt like people were like [7:56] inclined to scroll into it. So we didn't [7:58] even have to show them any of the work, [8:00] but we kind of hinted at it. [8:02] And then you scrolled into the real, and [8:04] yeah, the rest are just [8:06] very nice and simple carousels, but [8:09] yeah, you can see here this was some of [8:10] the work we were doing [8:12] with our studio. And I think some of the [8:13] patterns you were referring to [8:15] um [8:16] we used to call the system we call the [8:17] system primal. [8:19] It's a way to just basically understand [8:21] content on a website, digest content on [8:23] a website. And for us it was a very [8:25] structured way of digesting when clients [8:28] came to us with a lot of information for [8:29] their websites. We helped them build [8:31] that into a system on the website that [8:33] allowed users to explore. To us it [8:36] always felt like the way we would build [8:38] websites, and you would flow through the [8:39] website, felt more like you were [8:41] exploring the website than the website [8:43] was demanding your attention. Everything [8:45] is just one layer away, and everything [8:47] is progressively disclosed. So you never [8:50] overwhelm the user with too much content [8:51] in general. [8:52] >> What are some of the ways that that you [8:53] accomplish that? [8:54] >> I mean, I can just go through some of [8:55] the work. This was a project we did with [8:58] with with the agency Collins. We worked [9:00] with them for I think over a year [9:03] on this on this website. And as you can [9:05] see, even as you're scrolling through [9:07] the home page here, each section of the [9:09] home page is a chapter that as you as [9:12] you as you interact with the website can [9:14] lead you into further exploration. So [9:16] this is one of my favorite sections [9:17] here. This is the the bookshelf. These [9:19] are basically all of the case studies [9:20] from Collins. [9:21] >> Even go back and and hover over those [9:23] elements again. The way they bounce [9:25] feels different than what you typically [9:27] see. [9:27] >> Yeah. Yeah. [9:28] >> Talk about how you made that. [9:30] This was you didn't use AI tooling to do [9:33] this. You hand crafted these, right? [9:35] >> Yes. Well, in this case I will I will [9:37] say this was very much design and [9:38] engineering partner together. I would [9:40] lay something like this out in Figma [9:43] um and and try to understand [9:45] um the spacing and the size and the [9:47] colors and the rows and all of that. And [9:49] then I would hand it off to someone like [9:51] Jesper um who would then work on on like [9:54] the bounce animation for instance. Like [9:55] all these books have to level up on top [9:56] of each other and then basically [10:00] land one more time as the last book kind [10:02] of lands on top of it and that has to [10:03] feel very organic because if that feels [10:05] bouncy and organic then it dilutes at [10:07] the idea of oh, it's a book. It's a [10:09] bookshelf that's that's alive. And those [10:10] things I think while they are seemingly [10:14] unimportant are exactly the kind of [10:16] little moments people pick up um when [10:18] they scroll through these kind of [10:19] websites. [10:19] >> that matter? Like you have a person [10:21] who's supremely talented, whose entire [10:24] job on this project was to make the tab [10:26] interaction. And it's very easy for [10:28] anybody to go, well, just throw a tab. [10:31] Tabs exist. You can get that for free in [10:32] 5 seconds and then move on to the next [10:34] thing. Why did you feel like it was [10:35] important enough to spend somebody's [10:37] dedicated time before AI could do this [10:40] certainly [10:41] um and and have them focus just on that [10:44] one interaction? [10:45] >> There's multiple different ways to [10:46] answer that, but I think especially for [10:48] this studio because they work on design [10:49] themselves. Like this is a branding [10:51] studio. I think the clients coming to [10:53] the website are looking for those kind [10:55] of Easter eggs. They want to know that [10:56] if I hire this agency or if this agency [10:59] takes this much detail to produce a [11:02] website of that quality, what kind of [11:04] Easter eggs are they going to put into [11:05] our projects when we work with them? And [11:07] when they pick our color palette, maybe [11:09] they're going to come up with a system [11:10] behind it rather than just picking five [11:12] colors that they like because that's the [11:13] level of of dedication it takes to go [11:16] really deep. It's a way to [11:18] in a way almost also to show off and and [11:20] be and and and show the level of craft [11:21] and detail that you can bring to any [11:24] piece of or any part of the interface. [11:26] We try to do the same uh level of care [11:28] and uh and craft at Shopify. [11:29] >> Talk about the decision then to sell [11:32] your design studio to Shopify and to [11:35] come join them and and how that process [11:38] has has been different for you being at [11:41] a large public company and you know, [11:43] leading a product studio internal there [11:45] versus the work that you were doing here [11:46] when you were independent. [11:47] >> Tobi at the beginning at some point last [11:49] year basically said, [11:51] "We're entering a new era and that [11:53] future needs to be designed." [11:55] And that was basically it. He's like, "I [11:57] want to design I want to design for the [11:59] future and I need to hire good designers [12:01] who can help me paint a picture and when [12:03] we see that picture we'll we'll know [12:04] what it is and we can and we can we can [12:06] go down that road." And I think that was [12:08] the that's the mandate at Shopify like [12:09] design is very much more in the [12:11] foreground. It's a very honest [12:13] organization that's very self-aware. [12:15] It's a founder-led, engineering-led [12:17] organization [12:18] and design hasn't always played the role [12:19] that it's playing now. Design is very [12:21] much helping shape the narrative of [12:23] where the company is going and the level [12:24] of craft and pride we're taking towards [12:26] the tooling and the software that that [12:28] we're building for our merchants and [12:29] that's beautiful to see and that was one [12:30] of the reasons we wanted to join because [12:32] we felt while we were having fun [12:34] designing websites for other studios [12:36] like Collins [12:37] or Spencer the illustrator, we also [12:39] wanted to have a larger impact and and [12:42] and and see if our strategy would hold [12:44] up uh [12:45] on interface paradigms with millions of [12:47] users [12:49] versus the the few users I guess that [12:51] would scroll around the Spencer website. [12:53] >> Right. And so it's a different set of [12:54] challenges. [12:55] The design studio work that you did was [12:57] create a new site or something to [13:00] display work or work on a product or [13:01] something like that. Talk about how it's [13:03] different now. Shopify has millions of [13:06] users and there's a lot of money at [13:07] stake with every design decision and [13:10] interaction that you work on and what is [13:12] your process like now being this [13:13] internal design studio and and how do [13:15] you interface with the rest of the [13:17] organization and and how do you [13:18] interface with users especially too? [13:20] >> So I will say basically for now our [13:22] studio exclusively operates within [13:26] Sidekick which is the AI infrastructure [13:28] layer of Shopify. Um the whole team [13:30] works extremely close with the rest of [13:32] the design organization, and it's a very [13:34] beautiful like interplay, which is I [13:36] think in general how these studios work [13:39] or how this works more successfully. [13:41] I've been in positions in also previous [13:43] careers where [13:45] if you're more isolated, it's always [13:47] more difficult to [13:49] ingest into the company and and have a [13:50] large impact in in the company. I think [13:52] at the moment we're very ingrained in [13:55] the current workflows and ingrained in [13:56] the timelines and uh in in in our road [13:59] map. Um [14:00] and it's and it just it requires a lot [14:02] of a lot of experimentation. Honestly, [14:04] like up-leveling the interface was easy [14:07] for us because we've really talented [14:09] designers who rebuild parts of the [14:11] interface in Figma and then using AI, [14:14] we're we're able to port that over into [14:16] very tangible prototypes extremely [14:18] quickly. And as we all know, prototypes [14:21] are a million times more useful than any [14:22] PRD document you can write. Those [14:25] spread around the company like wildfire. [14:27] And if Toby sees a prototype that he [14:29] likes, then we can go off and build [14:31] that. And I feel with um some of the [14:34] AI mutations work we've been looking at [14:36] at Shopify, we can show some of that [14:37] later. It feels the same. We have ideas [14:39] in our head, and it's extremely easy for [14:41] us right now um using the current the [14:43] current technology to just simulate it [14:45] all and generate uh prototypes. Where in [14:48] the past um at Molly, a lot of the work [14:51] we were doing was was by hand. Our [14:53] sheets were designed by hand. All the [14:54] animations were done by our developers. [14:56] Our direction might have been my idea, [14:57] but other than that, there's like a [14:59] thousand counterparts that you have to [15:00] interact with. Right now, I'm seeing [15:03] one-off armies or or teams of two going [15:07] off and and and doing the work of many [15:09] um because the tooling is just allowing [15:11] us to to do that. And that's um [15:13] that's making it a lot easier to get [15:15] buying because I can show up with a [15:16] prototype and get people's attention [15:19] faster than I can if I have an idea and [15:21] I have to [15:23] um get a whole team rallied around an [15:25] idea. [15:26] >> Could you show us some of the the work [15:27] that you guys have been building at [15:28] Shopify? [15:29] >> This is basically a a a redesign and [15:31] facelift um of our current uh admin [15:34] experience um with a with a new with a [15:37] new home home design uh and an overall [15:39] an overall facelift of basically um the [15:42] entire product [15:43] which we've been working on um at the [15:45] moment. I think one of the more [15:47] interesting things um that we've been [15:49] exploring right now is just um [15:52] how Sidekick and the merchant interact [15:54] with each other. We have this concept of [15:57] suggestion Sidekick suggestions on on [15:59] the home feed. These suggestions are uh [16:01] brought to the merchant by us. We've [16:04] identified [16:05] opportunities and benefits that the [16:07] merchant could do inside of their [16:09] ecosystem inside of of their of their of [16:11] their universe um [16:13] and we can show those to the user and [16:15] then as the user interacts um with these [16:18] suggestions, we basically kick off a [16:19] conversation with Sidekick. We can [16:22] directly manipulate the admin dashboard [16:25] for the user and we can show show those [16:27] changes to a user. So, we're showing a [16:30] user right here. We think you should [16:32] rewrite or re- rewrite the description [16:34] of of your of your product. Here's the [16:37] here's the here's the suggestion um that [16:39] we think you should do. You can publish [16:40] these changes and basically through a [16:43] conversation with Sidekick, you've [16:45] directly manipulated your store and it's [16:47] the concept is more can we bring UI to [16:49] the user and into the into it into [16:52] context versus having um the user click [16:54] through click through the interface. At [16:56] the end of the day, um [16:58] there's a world where uh a a merchant [17:01] can spend a lot more time on the home [17:02] surface and use Shopify uh as as a [17:05] dashboard to delegate and interact with [17:07] with Sidekick and have Sidekick directly [17:10] manipulate the store. Right now, what [17:11] you're looking at is is is still a [17:12] prototype environment. This is there's a [17:14] dev UI panel inside here and basically [17:16] we are we're building all of these [17:19] the design team is building all of these [17:21] changes and and demos and and and and [17:25] ideas right into the interface here so [17:27] we can just test and build on top of it [17:29] and it's it's become this beautiful [17:30] process where once a demo is at a point [17:33] where we kind of all align everybody [17:35] branches off and builds a version of [17:38] something that they think that that [17:39] brings value and then we all come back [17:41] together and it actually lives all [17:42] inside the same the same demo and the [17:44] same language. [17:45] >> Yeah. [17:45] >> Um and it's just a beautiful way to to [17:47] to to share ideas and and and context. [17:49] >> You said designers are building this in [17:52] here. A lot of times designers are [17:54] designing and they're not building but [17:57] it's in in Shopify and your team and you [17:59] you are building a lot of the stuff that [18:01] you are designing so that you can test [18:03] it so you can prototype it so you can [18:04] see it on live [18:06] live data live experiences and that's a [18:08] huge part of of nailing it and building [18:10] something useful and making sure that [18:12] it's great. What was your evolution from [18:15] you know designing in Figma [18:16] >> Yep. [18:17] >> to now you are not just designing but [18:19] you're actually creating it out into the [18:21] world to be able to test it and doing [18:22] that full loop yourself. [18:24] >> In this specific case admin has a a [18:26] playground that we build inside of that [18:28] playground we test that's not production [18:30] code and that wouldn't be allowed back [18:32] into the main GitHub repo of Shopify [18:34] into like our main [18:36] repository. Having said that though [18:39] AI has definitely gotten to the point [18:40] now where as designers we are highly [18:42] empowered and capable to to visualize [18:45] any idea that we want to get our idea [18:47] across in a previous world that that [18:49] just wasn't possible. We we looked at [18:50] the at at the Collins website earlier a [18:52] lot of that work in Figma when we worked [18:56] on it still looks like still looks like [18:57] this. [18:58] >> Mhm. [18:58] >> You can zoom into any part here and [19:00] they're like highly detailed Figma [19:02] screens that that that we're designing [19:04] through and this is an ideation process. [19:06] I think this is a mixture of me [19:09] Michael Spicer and J Tall working on [19:11] this project together and you can just [19:13] see the evolution of like as we're going [19:14] through the like as we're going through [19:16] ideas and like trying out new things. [19:18] These are These are too heavy and too [19:20] expensive to test in code. We don't want [19:22] to test this [19:23] um in code right now because it would [19:25] require an engineer to take a look at it [19:26] and build it for us. So, we test it all [19:28] in Figma. Figma is the playground in the [19:30] in the world we we were building [19:32] everything in. We we were building it on [19:33] desktop and then we were translating it [19:35] to mobile, and all of this had to be [19:36] stress tested out in Figma first for a [19:39] very long time before we would go and [19:41] and bug the engineering team. A lot of [19:43] the way I'm talking to AI or I'm still [19:45] using Figma at the moment is I can get [19:48] really far with a very broad sketch. [19:50] Here's an example of um a side project [19:53] I've been working on um over the weekend [19:55] which I can go into into detail a bit, [19:57] but one of the things I wanted to build [19:58] out for this for this project was a a [20:00] 2x3 overview of these grass studies and [20:03] these videos I took. Um and the [20:05] interaction here is you can open up any [20:07] one of these videos and you can drag [20:08] down to to close them. Um [20:11] and it works works the same in the in [20:12] the simulator. Um I I I explained this I [20:16] I I described this to AI uh and and and [20:19] I was working in Codex, and Codex built [20:20] this out for me. Um but the interaction [20:23] wasn't uh interruptible. So, every time [20:25] I clicked on an asset and pulled it [20:27] down, I had to wait until the asset was [20:29] all the way back in its position and set [20:31] down before I was able to tap on another [20:34] image, and that's just not how you want [20:35] to use this pattern. You This has to be [20:38] very responsive very quickly, otherwise [20:40] you'll get very annoyed with the [20:41] interface [20:42] very fast. So, I just went into into [20:44] Figma and kind of drew out very [20:46] rudimentary simple boxes like when when [20:48] you click on the box, red comes up. You [20:51] can swipe it away. If as you're swiping [20:53] it away, you click on blue, blue now [20:55] comes up. And you can click that away [20:56] and you do it with green. And I think [20:58] that's just like a good example of of of [21:00] how at least myself personally I'm I'm [21:02] using I'm using Figma more. Um it's more [21:05] of a scratch pad to like map out ideas [21:08] and I give those ideas to Codex. Um, and [21:10] I and I use the scratchpad A because [21:11] it's easier for me to to decompile [21:13] something, but also it's actually easy [21:15] for Codex to decompile it if it sees it [21:17] visually. It interprets that image, I [21:19] think similar to how I interpreted it. I [21:22] I at least it understood what I was [21:23] doing and how I was thinking about the [21:24] motion. I couldn't articulate it via via [21:27] text or voice, but I could draw it out. [21:29] There's two parts of this that I think [21:30] are important to call out. I think [21:32] number one, Codex and all the current [21:34] um, AI software is is and the models are [21:37] extremely capable at creating anything. [21:39] You can use these tools to make anything [21:40] that you want, but you have to know what [21:42] you're doing and you have to be able to [21:44] take a a concept or or something more [21:46] complicated like the shader and break it [21:48] down into all its little components. You [21:50] have to be able to understand those [21:52] commands and then you can put those [21:53] components back together. [21:55] >> Yeah, just show us how you did that here [21:56] cuz so to be clear, you had a bunch of [21:59] images [22:00] >> and videos. [22:01] >> and videos of of actual grass. [22:04] >> Yeah. [22:04] >> And then you wanted to create a shader [22:06] that looked identical to that, but you [22:08] could control and function like a [22:10] shader. And so talk about how like the [22:12] different elements and what you had to [22:13] go through to actually get that to look [22:15] lifelike. [22:16] >> I have a few screenshots here. Again, [22:17] this is a good example of how I use of [22:19] how I use Figma. So, I fed the video [22:22] into into into Codex for the first time [22:24] and just explained it my the the the [22:26] project and the process that I was I [22:27] wanted to go through. Take the video, [22:29] turn this into a shader. Um, I want the [22:31] shader running running in the web um, [22:33] and I want you to be as as as meticulous [22:35] as you can. Be very pixel perfect. Um, [22:38] grab all the colors. Make sure that [22:39] you're using the same hex codes. [22:41] Understand each part of the image and [22:42] then try to recreate that. And it went [22:44] off and said, "No problem. I got you." [22:45] and it came up with this, which [22:47] obviously doesn't look at all where we [22:49] landed where we ended up now. Um, but [22:51] then the process from here was I would [22:53] screenshot this and my original my [22:56] original video. I would open up ChatGPT [22:59] and I gave it to another agent there. I [23:01] explained that agent exactly what I was [23:03] doing as well as why is the other agent [23:05] not understanding what I'm trying to get [23:06] to. And that [23:07] ChatGPT then helped me kind of like [23:09] understand my own process like, well, [23:11] you have to explain to it where the [23:12] light is coming from and what what [23:13] shadows you're using and maybe break the [23:15] image actually down into like six parts [23:17] and have it do each one of those [23:18] individually and put that back together. [23:19] And as I was kind of thinking about all [23:21] of these different things like I was [23:23] trying to come up with how could I [23:24] become very clear with the with with AI [23:27] and explain to it exactly what it was [23:28] actually looking at. So, one of the [23:30] tricks I used was I went into ChatGPT [23:33] and I had it render basically a [23:34] topographical map of the underlying [23:36] structure. [23:37] AI as I was going through this I was it [23:40] was kind of getting closer and you could [23:41] see that you know, it was painting more [23:43] pixels into in into the grass blades. [23:45] Yeah, these started to look like bushels [23:46] a little bit and which which felt more [23:48] realistic and then over here we I was [23:50] like, okay, we're getting somewhere here [23:51] now. This doesn't look This doesn't look [23:53] terrible anymore. But I kind of figured [23:55] out it doesn't understand that there's [23:56] it's not a flat layer underneath. These [23:58] are little hills. [23:59] >> Right. [24:00] >> Basically, I fed this back into into AI [24:02] and it and it understood, oh, okay. So, [24:04] there's there's a an underlying [24:06] structure and a map that has different [24:07] depths and heights and if I can render [24:09] the grass on top of those [24:11] on top of that infrastructure or of that [24:13] structure in general, it'll be much [24:15] easier for for me to to create the scene [24:17] and that kind of worked really well and [24:20] you know, in this in this prototype [24:21] reference you can actually buy there's a [24:23] binary toggle to turn the grass on or [24:24] off and you can actually play with the [24:27] terrain quite a bit here as well. [24:29] >> Right. [24:29] >> This was all unlocked via Josh to me [24:32] at a lunch the other day where he kind [24:34] of like we installed DialKit into this [24:36] demo because he looked at this and like [24:37] this looks pretty good, but you should [24:39] look at the length of the grass blades. [24:40] I was like, whoa, okay, that's true. So, [24:42] I asked I asked Codex like, hey, how [24:44] many how many grass blade variations do [24:46] we have? And it said we have about [24:48] 217,000 different grass blades, but they [24:51] only differ by like 0.7 0.8. So, we were [24:53] like, okay, let's just build a toggle [24:54] for it so that we can see it ourselves. [24:56] I don't want to have to go back and [24:58] forth with the interface and and chat [24:59] about this. Expose the underlying [25:02] structure. [25:03] Exposing the underlying structure would [25:04] also show me where I had made mistakes. [25:07] The original version of the terrain map [25:08] that I had implemented was completely [25:09] wrong and and and skewed. So, I couldn't [25:12] get to my outcome anyway because I had [25:14] misinterpreted something five prompts [25:16] ago that I didn't know about anyway. [25:18] Dial kit kind of unpack that for me. But [25:20] then in general you can just mess with a [25:22] few of these values and they kind of [25:24] help like bring bring some of this like [25:26] they they they help visualize what what [25:29] I what I really wanted to see and if if [25:30] you know the the length here is longer [25:32] than you you can you can [laughter] [25:33] introduce more wind. This was something [25:35] I wanted to to test and see how [25:37] how crazy I could get with the [25:39] with the wind movement. You can see it [25:40] it gets a little wild. But yeah, I think [25:42] this is just a small example of a little [25:45] bit of like [25:46] a fun project just to try and like see [25:49] how far can you get with with the tools. [25:51] And these are things that [25:53] I think before AI I I I couldn't do. I [25:56] just I I might have had these ideas but [25:58] I but but I but I wasn't allowed or or [26:00] able to execute on them. And I think [26:02] that's just in general what's changing [26:03] with a lot of the with the design role [26:05] right now. And anyway like it's it's [26:07] it's designers are becoming more full [26:09] stack. As are engineers and PMs. It goes [26:12] it goes it goes in every which way. [26:13] >> There's no limitations now, right? And [26:15] actually this is one of the [26:17] one of the common patterns that we've [26:19] been seeing a lot. Creating prototypes [26:21] and then creating little widgets that [26:24] allow you to control different variables [26:26] in them to to be able to test it really [26:28] easily and get it right. [26:29] >> Yeah. [26:29] >> And previously it wouldn't have been [26:30] worth anybody's time to do that. You [26:32] would just you know maybe play with [26:34] variables in code or something until you [26:36] got it and then you'd call it good. [26:38] And that would take way longer or you [26:39] wouldn't even spend the time doing it. [26:41] Now it's so easy to create new little [26:43] software tools to be able to control [26:45] these variables and test things and dial [26:47] it in perfectly. [26:48] >> Yeah. [26:48] >> Which I guess is where the name dial kit [26:50] comes from. So yeah, maybe tell us more [26:52] about DialKit here. So, this is a [26:54] product that makes it really easy to [26:57] create and then tweak a lot of these [26:59] variables in whatever project you're [27:01] working on, right? [27:01] >> Exactly. So, so yeah, that's that's [27:04] that's basically exactly how it works. [27:05] You can just run npm run via via his [27:08] website. They have a little prompt for [27:09] it. You can just plug it into to [27:11] whatever you're working on. I have [27:13] another project that I can quickly show. [27:15] This is just another version of DialKit. [27:17] Um [27:17] in the specific [27:19] in the specific project where I was [27:22] manipulating [27:23] um a a carousel. Um [27:27] This is inspired by [27:28] Mike Matas. He's a design leader at at [27:30] Luv From, and and his portfolio carousel [27:32] works in this way, and I wanted to see [27:34] like there's so much nuance in the way [27:36] that carousel works and the way you can [27:38] drag down an artifact, and when you let [27:40] go of that artifact, the way basically [27:42] almost like energy ripples out from that [27:44] from that specific artifact and triggers [27:46] a [27:47] a collision effect with the other [27:48] artifacts left and right. Building out [27:50] this the side panel here right now [27:52] helped me basically look under the hood [27:55] of my own of of of the own Frankenstein [27:58] that I created here with 91 prompts, and [28:00] it just helps you dial in some of these [28:02] some of these different some of these [28:03] different parameters that are really [28:05] important like pull pull boost means the [28:07] faster I drag this down, the stronger [28:09] the stronger the boost is. You want to [28:11] play around with that toggle a little [28:12] bit. It can't feel too intimidating or [28:15] too or too strong. Otherwise, the [28:16] otherwise, the whole system just feels [28:18] off. And I know when it feels off, but [28:20] the back and forth with chat just [28:21] doesn't work. Um you need to be able to [28:24] to to always expose those kind of those [28:27] kind of values. [28:27] >> It seems like a lot of all the projects [28:29] that we've looked at here and a lot of [28:31] what you're describing is just having [28:33] setting an unreasonably high bar, and [28:36] now we have the tools to actually be [28:38] able to meet it much faster than it [28:40] would have taken before. [28:41] >> Yes. [28:41] >> And so, what is the role of the designer [28:44] and and maybe even non-designers? How [28:46] should they be thinking about design? [28:47] Yeah, a lot of the audience that watches [28:49] this are um maybe founders of early [28:52] startups that that maybe feel like [28:54] they're engineers, but don't have a [28:55] design bone in their body or um [28:58] designers that are maybe trying to [28:59] figure out like could I start a company [29:01] or could I actually build the product? [29:03] I'm so used to, you know, designing in [29:05] Figma and passing it off to somebody [29:06] maybe where where you guys have been in [29:08] the past. How should they think about [29:10] themselves in being able to um up-level [29:13] the way that they use AI to create [29:15] higher quality design? [29:17] >> A lot of the way I keep thinking about [29:19] AI in general is just it's an infinitely [29:22] patient [29:23] collaborator and and and teammate. Codex [29:26] won't get mad at me if I need 91 [29:29] approaches at getting the animation [29:30] correct. If I had done that with my [29:32] engineer, they would probably flip out. [29:34] But so my my my my advice to to to [29:36] everybody is like and it sounds kind of [29:38] silly, but like tinker with the tooling. [29:40] Like you can go in and just describe [29:42] what you want it to do and when you see [29:43] a result, [29:45] like don't give up. Just just explain to [29:47] that this is not how you envision it. [29:48] Send it a website where you really like [29:49] the carousel animation or give it a [29:51] screenshot of from from save it or [29:53] cosmos of something that you that that [29:54] you think looks really beautiful. Show [29:55] it a color palette and that it should [29:57] start to copy for you and just keep [29:59] going back and forth and back and forth [30:00] and kind of shaping your narrative [30:02] together with [30:03] with the tool. I think that's that's [30:05] that's that's really important and for [30:07] designers specifically, my trick or what [30:09] I always learn was just like just try to [30:10] copy. Like even now, um I'm I'm trying [30:13] to imitate this this carousel animation [30:16] um that's been around for for quite a [30:18] while because now I have an infinitely [30:20] patient teacher and and friend that I [30:22] can build it with um and so now I can [30:25] look under the hood and that's you know, [30:26] I'm doing that in my own time on my own [30:29] weekend without bugging any of the [30:30] engineers because it's my experiment and [30:32] I want to understand and and and [30:33] decompile how how this thing is put [30:35] together. Um that teaches me how to be a [30:36] better manager and how to be a better [30:38] collaborator and be a better team member [30:40] um and I think that's how we should be [30:42] be be treating these tools. [30:43] >> Yeah, that's that's great advice. YC's [30:45] next batch is now taking applications. [30:48] Got a startup in you? Apply at [30:50] ycombinator.com/apply. [30:53] It's [music] never too early, and [30:54] filling out the app will level up your [30:56] idea. Okay, back to the video. [30:59] >> Should we review some websites? Yeah, [31:00] I'd love to. Let's do it. [31:01] >> All right, let's do it. [31:02] >> For sure. [31:02] >> First up, we've got Nstack. [31:06] So, let's see. Okay, so [31:08] >> Uh, this is Nstack, the only AI [31:10] workspace you'll need. One powerful [31:12] agent, one intuitive desktop workspace, [31:14] and every tool you need to handle any [31:16] task. Okay. [31:18] >> I mean, I think right off the bat I [31:19] would say one thing that's very nice [31:20] about it is the fact that they're [31:21] emulating, obviously, the desktop in [31:23] general. So, it feels like you're on a [31:25] desktop, and I think you can probably [31:27] use these and ex- explore these. And [31:28] yeah, I mean, you I think what's nice [31:30] about this is like you're basically just [31:31] in their product already, and you're and [31:32] you're using their product. [31:34] >> Yeah. [31:34] >> Um [31:34] >> I think I'm a little confused about what [31:36] to use it for, though. It's like it's an [31:38] AI The only AI workspace you'll need. [31:40] It's one desktop, every tool you need to [31:42] handle any task. And it's hard when it's [31:44] so broad to figure out what should I use [31:46] it this for. And maybe, literally, you [31:48] can use it for anything, but I feel like [31:50] sometimes it's helpful, like what do you [31:52] want the user to do when they hit this? [31:54] >> Yeah. I mean, to your point right now, [31:56] like from a visual perspective, it's [31:58] very overloading, right? You have a lot [32:00] of content in the sidebar. You have this [32:02] chat history here that you can kind of [32:03] scroll through. Then it seems like you [32:05] have some sort of an interface here, but [32:07] also kind of the main messaging [32:09] >> Uh-huh. [32:09] >> of Nstack um sits right over here. It's [32:12] hard for me to figure out exactly what [32:14] to focus on first. My German graphic [32:16] design professor would always say when [32:17] we were making posters in school where [32:19] I was studying typography, and he would [32:21] always say that this poster doesn't [32:22] dictate. It's not dictatish. It means [32:25] there's nothing in this poster right now [32:26] that is drawing my attention. Like I I [32:28] don't know what to do when I look at it, [32:29] >> Yeah. [32:30] >> basically. I don't know what to look at [32:31] first. [32:31] >> Yeah. Yeah, do I click these icons? Do I [32:33] go in the Slack-like thing? Do I go in [32:35] the chat interface? [32:37] >> Am I texting and talking to the chat [32:38] here? [32:38] >> Yeah. [32:39] >> Why am I called Mark? [32:39] >> Yeah, you're Mark, I guess. [32:40] >> I'm Mark now. [32:42] I think feedback here, which would be [32:43] nice, which probably would be like [32:45] some of the some of the clutter here I [32:47] would almost collapse and make it more [32:49] around the the introduction and the [32:52] headline and and what do I want the user [32:54] to read and take away? [32:55] >> Yeah. [32:55] >> And maybe a simple way into a very quick [32:57] demo of the tool [32:59] or of the software offering would be [33:01] really would be really important. But at [33:03] least it's you know, there's a it's it's [33:05] it's very whimsical [33:06] and and feels kind of retro, which is [33:08] nice. [33:08] >> Yeah, there's always [33:10] usually or there should be one specific [33:12] goal that is like the primary goal or [33:14] the primary KPI or the the main thing [33:16] you want a user to do when they hit the [33:17] site. I'm not sure what it is here. [33:19] Maybe it's like get started, maybe it's [33:20] talk to this agent. But whatever it is, [33:22] there's so many other things that are [33:24] pulling your attention and distracting [33:25] you from whatever it is the main goal is [33:27] that they want the user to do. And maybe [33:30] the get started button is the is the [33:32] primary CTA, but they have these other [33:34] buttons over here [33:35] >> Yeah. [33:35] >> that were more in the middle that that [33:38] looked exactly like those buttons. And [33:39] so now there's multiple buttons that [33:40] have the same color and are are calling [33:43] Yeah, it's like general engineering, [33:44] marketing, get started. What is the one [33:47] that they want us to focus on first? [33:48] >> Someone once said this to me. It's like [33:50] often times when we build websites, we [33:52] focus on one thing on that website and [33:54] we make that really well and we we we we [33:57] build the whole narrative around that [33:59] one thing. [34:00] On Collins, it definitely felt more like [34:02] the books the book stack was something [34:03] that we we were proud of and wanted to [34:04] show off. And that and that is the heart [34:06] of of of the website is is a lot of the [34:08] visual work. And I felt there was an [34:11] easy way to navigate into that page and [34:13] then you can spend a lot of time there [34:14] because it's easy to use. As Nstech, I [34:16] would be I was I would be asking myself, [34:18] what is the what is the one thing I can [34:19] rally around and get people to to to [34:21] look at and do? And if they only take [34:23] one thing away, it's better than trying [34:25] to do everything at the same time. [34:26] And that's kind of what's happening here [34:28] to next thing. There's a lot of things [34:29] screaming for attention. [34:30] >> Yes. [34:31] >> It's the opposite of progressively [34:32] disclosing information. [34:33] >> Yes. And and maybe as as a positive, one [34:36] thing that I think is probably good that [34:37] they do is they're trying to drop you [34:39] right in the product. I I assume this is [34:41] actually how the product functions Yeah. [34:42] and they're not trying to, you know, [34:44] tell you about the product and then get [34:45] you to click a bunch of things and sign [34:46] up and stuff. They're like, "If the aha [34:48] moment is people just starting to use [34:49] the product, let's just get people into [34:50] the product as early as possible." But [34:53] it still feels maybe like we need a [34:54] little bit more context to figure out [34:56] what exactly we should be doing here. [34:57] >> Agree. [34:58] >> N stack. Thank you. All right, let's [35:00] take a look at Skill Sync. [35:02] Free local-first Mac app that carries [35:05] your memory and skills across every [35:06] agent and teammate. [35:08] >> That's nice. Yeah. I mean, at least it's [35:10] clear I think what what the company [35:11] does. [35:12] >> Yeah, okay. [35:13] >> Yeah. [35:14] >> So it's got skills and they sync. [35:15] >> Yeah. [35:16] >> [laughter] [35:17] >> Yeah, I mean, it it it it's in dark [35:19] mode. Um, the fonts are I I would say [35:22] are very small. The difference between [35:24] Skill Net as basically the logo and the [35:26] first paragraph below it, there's a lot [35:28] of percentages in in the typography. few [35:30] heights here that I that I that I think [35:31] we could we we could skew in a little [35:33] bit. They they feel a little off [35:35] in in my opinion. And again, there's [35:37] there's a lot of very dense information. [35:39] >> Mhm. [35:40] >> Um, and often times to what we were just [35:41] saying about N stack, it's actually as [35:44] soon as you start to abstract some of [35:45] the functionalities and features but [35:47] still stay stay very detailed like [35:49] they're doing here, it becomes very hard [35:50] to understand exactly what it does. Like [35:53] it it'll require a lot of actual reading [35:55] of all of these features to kind of [35:56] understand what's going on. [35:57] >> I'm curious your take on this. Um, so [35:59] what they've got here is they've got [36:02] basically a bunch of sidebar tabs that [36:04] are trying to show off different [36:05] features. And you, I feel like have an [36:08] interesting approach on tabs cuz all [36:10] those sliders that you make, they're [36:11] effectively like tabs, right? It's just [36:14] you have the affordance of knowing that [36:15] there are multiple of them and you can [36:17] see multiple at a time. [36:18] >> Yeah. [36:19] >> And I feel like the trap that a lot of [36:20] people fall into a lot of times with [36:21] tabs like these is people users usually [36:24] will not click on all of the tabs and [36:26] explore them all. And so, you have to [36:28] assume that whatever is hidden behind [36:29] all of them, nobody will ever see. How [36:32] do you think about that? And what How [36:33] can they encourage people to explore [36:35] this more and get more information [36:38] rather than burying everything behind [36:39] tabs? [36:40] >> There's this rule I always have like you [36:41] can't put more than [36:43] seven seven lines of text on a on a [36:45] slide if you're presenting work. Like [36:47] you have to come up with almost rules [36:49] and constraints of how many features you [36:51] want to show off. Like a good example I [36:53] think I would use a three up component [36:55] here. I would take all of these [36:57] features. I would compress this [36:58] information down and try to understand [37:00] what are the top three things that Skill [37:02] Synch can do for you. You can do X, Y, [37:04] and Z. Those are the three things you [37:06] show off. All of those are tappable. [37:08] They lead you into potentially sheets or [37:10] or a view transition into into more [37:11] information. And then you you have more [37:13] context behind. Since it's very flat and [37:16] broad, you're kind of like [37:18] a mile wide but like only an inch deep. [37:20] You don't really know what you're what [37:22] you're really looking at. That's what [37:23] that requires like [37:25] a deeper understanding of your feature [37:28] set and and and then more condensing [37:30] those down into principles and rules and [37:32] main kind of like points. [37:35] And then you can [37:36] rally or bring more information under [37:39] each of those kind of pillars. [37:41] And that'll help the users understand [37:43] the flow of the website better and how [37:45] to navigate it. [37:46] And it's also better for the founders. I [37:48] feel like if if I was still running my [37:50] studio and we were working with this [37:51] company right now, there would be an a [37:52] whole exercise and like well, what's the [37:53] one thing you do? [37:54] >> Yeah. [37:55] >> If it's sinking skills, let's only talk [37:56] about that and make that really cool and [37:58] show that off and then get people to use [38:00] the product as quickly as possible. So, [38:01] I mean it's also interesting like we [38:03] just hit the bottom of the page. [38:04] >> Yeah. [38:04] >> It's not very tall. [38:05] >> Yeah. Yeah. [38:06] >> And so, I think users are comfortable [38:08] scrolling. And so, if there is important [38:10] information that is hidden behind a lot [38:12] of these feature tabs here, just break [38:15] them out and like make the page longer. [38:17] It's okay. People can scroll longer [38:18] rather than compressing it and hiding [38:20] everything. [38:21] >> Exactly. [38:21] >> And the other trap that I see a lot of [38:23] people falling into um with uh with the [38:26] AI tools now is because it's so easy to, [38:29] you know, create a different like image [38:31] or animation. Like these are actually [38:33] animations, right? Um for every single [38:35] one of these, um they spit out a bunch [38:37] of these and they've they've all got the [38:39] hallmarks of, you know, the very small [38:40] text and um you know, the this animation [38:44] like no human would spend the time and [38:45] go like, "Oh, we need a little dot that [38:47] goes from these corners." and program [38:49] that and everything. [38:50] >> But it doesn't mean it's actually adding [38:51] value to what they're doing. And so this [38:54] I think is when you're talking about you [38:55] need to curate and set the bar and make [38:57] sure it's communicating the right [38:58] things. There's lots of things here, but [38:59] they don't actually help my [39:01] understanding of the point that it's [39:02] trying to make. [39:03] >> I fully agree. And I feel like that [39:05] that's again something where um you need [39:08] to work and hire the right people with [39:10] the right skill sets to do the to help [39:12] you do the the job. Like AI definitely [39:15] can help you probably put this whole [39:16] website together, but when it comes to [39:18] abstracting these features into [39:20] illustrations, might not be the worst [39:22] idea to work with an illustration [39:23] designer who's done this before and who [39:24] specialize in information graphics. And [39:26] maybe that actually becomes because it's [39:28] well explained just a core part of the [39:30] Skill Sink brand identity. [39:31] >> Mhm. [39:31] >> It's like, "Oh, this is one thing that" [39:33] I remember working with Gemini a few [39:35] years ago and there was this animation [39:37] with like a braid. Like basically they [39:39] were showing the model and all of these [39:41] different things that Gemini had and [39:42] they all came together and built like [39:44] this helix. And that animation was it [39:46] basically just explained exactly the [39:48] capabilities of the model. [39:50] >> Mhm. [39:50] >> And that turned into a very thin line [39:51] and then it said Gemini. And that was an [39:53] animation that a lot of people worked on [39:55] who are much more talented than me for a [39:56] very long time. And then later a lot of [39:59] really good engineers translated that [40:01] into a scrollable animation for the [40:02] website. And it just like that kind of [40:04] sold it. And then you were in the [40:06] product and you were using it, but that [40:08] was that was the memory [40:10] like that piece of motion was just [40:11] ingrained in my memory and really [40:13] explained exactly what the model was [40:15] doing. Sometimes being a little more [40:17] artistic and abstract actually goes a [40:20] really long way. [40:25] And I think yeah, for Skill Sink I could [40:26] definitely see [40:27] there's a million different patterns and [40:29] a million visual examples of how to of [40:31] how to show that off and you can be a [40:32] lot more [40:34] like just craftful and and and and [40:36] graphical about how of how you just how [40:38] you design that on on the website. So [40:40] that would be my feedback to to to to [40:42] these guys. [40:43] >> Cool. Thank you, Skill Sink. [40:45] >> Thank you very much. [40:45] >> Okay, next up we got Instaplay. [40:48] So let's see. [40:50] So I'm seeing a bunch of featured I [40:52] can't tell if these are movies or games. [40:54] So it says design something that [40:57] >> Bird sort. [40:58] >> Bird sort. [40:59] >> Okay, so these are games that we can [41:00] play. [41:01] >> I think. [41:03] >> Okay. [41:04] How do we play? [41:06] Got a bunch of birds. We got some sound [41:07] that's playing now. [41:14] Let's maybe go [41:16] >> Let's go from let's try something else. [41:18] >> Start button. [41:25] We're fighting this wolf, I guess. [41:28] >> That's enough. [41:30] >> So we've got this call out here which [41:32] it's interesting. You know, it it says [41:34] create describe your game idea, right? [41:36] When you click into it. What's [41:38] interesting is there was no copy under [41:40] the title Instaplay. And so we we were [41:44] up to ourselves to try to figure out how [41:46] to orient around this page. [41:47] >> Yes. [41:48] >> And the first thing that we did is we [41:49] saw all the visual games. [41:52] >> Yeah. [41:52] >> All the screenshots of them. [41:54] >> Yeah. [41:54] >> And so we jumped right to that. [41:55] >> Yes. [41:56] >> And so we missed the fact that actually [41:58] the primary purpose here is for us to be [42:00] able to just create our own games on the [42:01] fly. [42:02] >> Yes. [42:03] >> And so I think a line of text could help [42:05] with that or some type of call out that [42:07] makes that the prompt box more [42:10] prominent. [42:10] >> And and again it goes back to your [42:11] example from from earlier. It's like, [42:13] what is the one thing we want to use it [42:15] to take away when they land on the page? [42:17] Is it exploring the the the multitudes [42:19] of of games that have already been [42:20] created on this platform, or is it the [42:22] fact that we can create our own games? [42:24] Creating our own games actually leads [42:25] you to a sign-up page, which no one's [42:27] going to do if they haven't seen their [42:28] created game. [42:29] >> Right. [42:29] >> So, you have to come up you have to [42:30] cough up enough credits for to try to [42:32] like onboard people into the product. [42:35] That's the cost of acquisition of one [42:36] user. By the way, that matrix is [42:38] extremely important. It's probably [42:40] obviously what what what they're what [42:41] they're thinking about. But that cost of [42:43] acquisition can't be uh continue with [42:45] Google. [42:45] >> Right. [42:45] >> to be whatever I just asked it to do, it [42:48] has to spit it out perfectly, and I have [42:49] to be able to try it one or two more [42:50] times. And if that works, I might be [42:52] inclined to actually [42:53] >> to actually use it. [42:54] >> you put in a prompt, you submit it, and [42:56] it takes you to this screen asking you [42:57] to sign in. [42:58] >> Yeah. [42:58] >> And the problem is we don't know if this [43:00] is good. And so [43:01] >> example, obviously, where it would also [43:03] you could build out a really cool [43:04] interactive carousel here, and each game [43:07] has almost like 10 seconds of like a [43:09] reel. [43:09] >> Yeah. [43:10] >> Rather than just seeing these static [43:12] these static assets right now. I don't [43:13] know what's behind it, so I don't know [43:14] what I'm looking at. This is a great [43:16] example. You could probably get Codex to [43:17] tap into each one of these, screen [43:19] recorded, and replace that as the [43:21] thumbnail, at least maybe on hover [43:22] states. And it kind of will bring maybe [43:24] more interactivity and dynamism into all [43:26] of this and to all of these different [43:27] like universes. I think what they're [43:29] trying to show with these with these [43:31] covers is just like, "Look, with [43:33] InstaPlay, you can do a lot of stuff." [43:35] >> Mhm. [43:35] >> I don't even think we need to be able to [43:36] play all of these different games if the [43:38] call to action is to create our own game [43:40] and be game designers ourselves. [43:42] >> Right. And so, if that is the primary [43:43] call to action, that is not what we did [43:45] first. And then you probably want to [43:47] actually create the game for people so [43:49] that they can play with it, and then if [43:50] they want to save it or come back to it [43:52] later or share it with anybody, then you [43:53] got to sign up or then you got to create [43:55] your account. [43:56] >> And and here also, look, so you have [43:58] create, my games, for you, explore. No [44:00] one knows what any of that means, by the [44:01] way. But if you click on any of them, [44:03] like my game for instance, again it [44:05] leads you to a sign-up. Like, if you're [44:07] not signed up to this page, you [44:09] shouldn't even see my games probably, [44:10] right? Like, and have the ability to tap [44:12] into something that then will lead you [44:13] to sign in again. [44:15] Um for you leads me back to the game I [44:17] was just on, which I don't know if that [44:18] makes a lot of sense. And explore is [44:21] basically the page we're already on. [44:22] You're already exploring on home. I [44:24] don't even think that needs to be a new [44:25] button. The only thing you've done now [44:26] on the explore page is taking the input [44:28] field away from you. [44:29] >> Mhm. [44:29] >> So, now I can't I can't create a game [44:31] anymore. So, there's a few things there [44:33] in the hierarchy where I would really [44:34] think very like put yourself in the [44:36] position of someone coming to your [44:37] website for the first time who has no [44:39] idea what it is that you're building or [44:40] selling. [44:41] >> Yeah. [44:41] >> How do they interact with the product? [44:43] >> also interesting because you went into [44:45] the game and we were like, "Okay, we're [44:47] done with this one. I want to get back." [44:48] It wasn't obvious to me that you do the [44:50] fast forward icon to get back to the [44:53] home page. I thought it was going to [44:54] take me to another game or do something [44:56] else. [44:56] >> can be misconstrued as an error really [44:58] quickly. [44:58] >> Right. And so, it's interesting you [45:00] actually clicked the back button to get [45:02] back because there was no obvious home [45:04] to go back to. [45:05] >> Exactly. [45:06] >> But, this is super cool. You can imagine [45:08] just getting people to put in a prompt [45:10] and creating a game just like the racing [45:12] game you were just doing. People could [45:14] play with this for hours. And you just [45:17] got to get people to that value of [45:18] creating the game and experiencing [45:20] something. [45:20] >> Once you've created that game and you're [45:22] proud of what you created, being able to [45:23] share that with your friends is probably [45:24] a really nice growth hack for these [45:25] guys. And and I think there's a lot of [45:27] Yeah, there's a lot of value in in in [45:29] this kind of work. So, um props to them. [45:31] >> Yeah. Nice job, Insoflight. Okay, next [45:33] up we have Mintlify, the knowledge [45:36] infrastructure agents build on. [45:38] Self-updating documentation for [45:39] startups, enterprises, and agents. [45:42] >> Right. [45:42] >> Cool. Um I'm obviously very familiar [45:45] with Mintlify. Uh it's an incredible [45:46] company. Um it's been growing really [45:48] quickly and is a product that tons of YC [45:51] companies and other dev tools use. [45:53] >> Yeah. [45:53] >> Um Yeah, this [45:55] >> It's a beautiful website. [45:56] >> Yeah, this this looks very professional. [45:58] It looks like something that is [45:59] trustworthy. [46:00] >> It's straightforward. [46:01] >> Clean. [46:02] >> Clean. [46:02] >> Yeah. They They They're very nice [46:04] compositions with color and typography [46:06] and spacing and line heights. [46:08] >> Yeah, so let's drill let's drill down to [46:09] like why do we feel that way? What are [46:11] the what are the specific elements of [46:13] this page that make us feel like this is [46:15] very clean and professional and all [46:16] those things that we said. [46:17] >> I I think because it's it's it's um it's [46:19] being reductive in exactly the correct [46:21] ways and it's showing only the things [46:23] that are actually necessary to show. [46:25] It's got a very clean headline, a small [46:27] paragraph underneath, the get started [46:28] button is very prominent. It's showing [46:30] off some kind of a dashboard. You can [46:32] kind of understand, okay, this is [46:33] probably where where the documentation [46:35] would live and where would the [46:36] documentation would get updated. The The [46:39] graphic in the background is actually is [46:41] adding to the vibe rather than taking [46:43] away from it. It's it's subtle and in [46:44] the background. It feels [46:48] It feels like it's it's it's helping you [46:49] think it's some kind of a network or [46:51] something. It It feels like they're very [46:52] they're very cautious and careful with [46:54] what they're building and it's kind of [46:55] some kind of an infrastructure [46:56] intelligence layer. [46:58] Um [46:59] I I know I know about logo walls, but at [47:01] least this logo wall is very well put [47:02] together, which is kind of nice. [47:03] >> It's a lot of really big credible [47:05] companies, which builds a lot of social [47:06] proof, which seems to be something like [47:09] you know, we we have that this vibe of [47:11] like professional, trustworthy, and part [47:13] of that is communicated [47:15] uh via seeing Microsoft and Anthropic [47:18] and Ax and Coinbase are their users as [47:21] well. [47:21] >> With so many tools flooding the market, [47:23] you need that kind of proof point to be [47:25] like, okay, well, if Spotify's using it, [47:26] maybe we should actually look at it. And [47:28] then I think this is just a great [47:29] example of like they're abstracting UI [47:32] and feature capabilities into something [47:33] very cohesive and something really nice [47:35] and art directed that feels, you know, [47:37] interesting to to to look at. I would [47:39] say maybe the the the headlines here for [47:41] these cards are a little bit too small. [47:43] Um if I look at all of them right now [47:45] with the background color being the [47:46] same, I'm kind of looking at none of [47:48] them. And [47:49] they're reusing they're reusing that [47:52] that kind of braided animation in the [47:53] background, and that's kind of losing [47:55] its magic if you if you keep if you keep [47:57] kind of reusing it all over the place. [47:59] So, I would actually say less is more [48:00] here and the headlines could be a little [48:02] bit larger. [48:03] Um yeah, again here it's kind of like [48:06] I'm not sure if you if you need that. [48:07] It's very hard to read put on top of [48:09] your existing setup. [48:10] >> Yeah, and that that actually seems like [48:11] a very important point that you would [48:13] want people to know. You can control who [48:14] has access. You can build on top of your [48:16] existing setup. [48:17] But it's super easy to miss it because [48:20] the screenshot takes up a lot more of [48:22] the space. There's this animation that [48:23] is drawing your attention away from this [48:25] headline that is actually really [48:26] important and buried at the bottom. [48:28] >> Exactly. And then you have to just and [48:29] then you have to differentiate between [48:30] like how much and how and like how much [48:33] information is the visual that you added [48:35] actually giving the user versus the copy [48:36] that you could add to it. And and that [48:38] balance I think is a little off here, [48:40] but overall very beautiful. [48:43] These are just nice. Like these are [48:44] these are this is a a really simple to [48:46] use carousel. I can swipe through it. [48:48] The colors are the colors are are are [48:50] are mapped to the to the photography. I [48:53] think that's something that people don't [48:54] get credit for enough. Like this is this [48:56] is great and really well done. It's [48:58] Manhattan. It's the blue sky. It's [48:59] Coinbase. It's blue it's a blue artifact [49:01] here. Like that feels really nice to [49:02] kind of scroll through and see. [49:04] >> branded. [49:04] >> Yeah. Although these colors are too [49:06] close together. So, they kind of they [49:08] kind of [49:09] I would have used a different color for [49:10] this one here. [49:11] But overall it's it's really nice. Maybe [49:13] like a gray or [49:14] >> I'd probably this maybe more the AT&T [49:16] blue, but this image I would maybe use a [49:18] different image. [49:18] >> That's probably correct. Yeah. [49:21] Yeah, but overall I mean very clean, [49:23] very very trustworthy. [49:24] >> There's a lot of space between the [49:26] sections, too. Which is I I know that is [49:28] a technique that you use a lot on on [49:30] your designs and and things that you [49:32] build. [49:32] >> section of the home page is basically [49:34] the first chapter of all the child [49:37] pages. So, a lot of the times what we [49:39] would do when we were designing for [49:41] clients is like if you are talking about [49:43] products, solutions, resources, and [49:45] pricing, then those are the four the [49:47] four main parts of your home page [49:50] because apparently that's what we're [49:51] deeming the most important parts. The [49:53] product features, our solutions, the [49:55] resources, and the pricing. As you [49:57] scroll through the through the website, [49:58] those four components show up in exactly [50:01] that order from most important to least [50:03] important because of scroll depth. Like [50:05] people drop off as they scroll through [50:06] the page. So important content has to [50:08] sit obviously at the top. And then each [50:10] one of these sections should lead me in [50:12] to to that. So if I click on So [50:15] theoretically, I would have had a whole [50:17] section for product right here on the [50:19] homepage. And then from there you could [50:21] you could click into products. [50:23] Products, by the way, actually should [50:24] probably have a have a have a homepage [50:26] itself because there are so many many [50:28] products. But yeah, overall it's it's [50:31] it's well designed and it's [50:32] it's simple. Looks like they took time [50:34] and care to make this website, which is [50:36] nice to see. [50:37] >> Yeah, it's interesting. [50:39] It's a lot more breathable. [50:40] >> Yeah. [50:41] >> It feels like there's less going on here [50:43] versus some of the other ones that we [50:45] look at. [50:45] >> There's still a lot of content, but it's [50:46] spaced out and distributed across the [50:48] page. [50:49] >> its everything has its own space, which [50:51] helps the user know what to focus on at [50:53] any one time rather than feeling like [50:55] there's lots of things that are trying [50:56] to draw their attention. And it's [50:57] interesting how you describe that as [50:58] like this actually took more time [51:01] >> Yeah. [51:01] >> than the things that have lots of time [51:03] or lots of competing elements because it [51:06] it actually takes work and curation to [51:09] figure out what are the things that we [51:11] actually want to keep. It's easy to [51:12] throw everything. It's much harder to [51:14] figure out what needs to be edited out. [51:16] >> Because that conversation is just much [51:18] harder to have with a team. Everyone's [51:19] competing. Everyone wants their [51:21] functionalities or their features to be [51:22] on the page and you have to curate and [51:24] make a decision and and and reduce, [51:26] which is the job of any designer. Like [51:28] reduce complexity and show one piece at [51:31] a time and and and and drive narrative [51:34] that way. It's it's hard to do, but it's [51:37] it pays off when when done correctly. [51:38] >> Yeah, this is excellent. Great work, [51:40] Netlify. Okay, next up we have Netlify. [51:44] So your users don't read your docs, your [51:46] patients don't read your manuals, your [51:49] employees don't read your content. [51:50] Nullify turns your docs and ideas into [51:52] narrated animated videos. Make them [51:55] yourself in minutes or have our studio [51:57] team make them for you. For teams who [51:59] need more video than they have time to [52:01] make. [52:02] Okay. [52:03] >> I think right off the bat, being a [52:04] typography designer, I would say there's [52:07] a headline, there's a paragraph, and [52:08] there's almost like a smaller version of [52:11] the paragraph underneath in a different [52:12] font size, and then there's the book a [52:14] demo button and the start free button. [52:16] There's 1 2 3 4 potentially five font [52:20] sizes right in the viewport here, [52:22] disregarding all of the logos and the [52:23] banner and the banner here in the [52:25] corner. That It's just a lot going on [52:27] from that perspective. You can have a [52:29] headline and then you you you have the [52:30] paragraph and you have to put all of the [52:32] important information into that [52:34] paragraph. You can't keep adding [52:36] headlines to it and and making the user [52:38] read all of those different points. [52:39] >> The first thing that jumped out at me is [52:41] the two placeholder elements in the [52:43] headline, and I find that to be [52:46] disorienting. [52:47] >> Yes. [52:47] >> It's one thing if you have one and it's [52:49] changing cuz then you can anchor [52:50] yourself on we do this for this type of [52:52] person and this type of person and this [52:53] type of person, but with two elements [52:54] changing it's like the user is changing [52:57] and the the like docs or manuals or [53:00] whatever. And then it sounds like it's [53:01] actually like a video thing, [53:03] >> Yeah. [53:03] >> which was I would not have gotten from [53:05] the headline at all. And so I think what [53:06] they're trying to say is like, "Hey, [53:08] people don't read these documents and [53:09] PDFs and stuff like that, so you need [53:11] videos so that they pay attention to [53:13] stuff." But I feel like they need to say [53:15] they do videos that convert better, kind [53:18] of like the positive of what they do [53:20] rather than the negative. [53:21] >> their own studio to make a video of [53:23] Nullify and put that on the website and [53:24] we watch that first? [53:25] >> Yeah. It'd prove their point, right? [53:27] People don't read all of this, so [53:29] >> would I want to read any of this [53:30] anyways? Just show us a video of what [53:31] you do. The There's a carousel here that [53:33] I think just basically shows off the [53:34] product, so let's click [53:35] >> Right. I assume these are examples of [53:37] their animations. [53:38] >> can't click into one of them. You have [53:39] to use the the the icon. That's not [53:41] good. Um this card needs to be tappable, [53:43] obviously. [53:43] >> Mhm. You look at this and you want to [53:45] you want to click into it. Um [53:47] >> Every year, thousands of warehouse [53:49] workers get injured. [53:50] >> Okay, so it's like an instructional [53:52] animation video. [53:53] >> Most of those incidents are completely [53:55] preventable and warning devices. [53:57] >> The video looks well made. [53:59] And the thing that we want to do here [54:00] though, which is interesting tying back [54:02] to a lot of the um [54:04] the carousels that that you've created [54:06] in those past projects that you showed, [54:07] is [54:08] I'm exploring a lot of their work. [54:11] >> Yeah. [54:11] >> And when I click into the one, it comes [54:13] full screen, and then I figure out like, [54:14] okay, how do I minimize, X this out? And [54:17] what I really want to do is I want to [54:19] have it zoom in so I can see it play, [54:21] and then I want to be able to keep [54:22] jumping to the other ones cuz I want to [54:23] see the depth and variety of what they [54:25] can create. [54:26] >> Exactly. [54:26] >> And it's kind of hard to do that right [54:27] now. [54:28] >> Yeah. None of these are tappable. I [54:29] can't open them up a full screen. It's [54:31] like you have to like use all of the you [54:33] have to use all of the um the little [54:35] buttons here. You can't scroll. You [54:37] can't skip through them. [54:38] >> Yeah. [54:39] I would want it to zoom up, not the full [54:41] width and take over everything, but like [54:44] 90% or something. [54:45] >> me what's going on. And then I can start [54:47] swiping through all of them. And maybe [54:49] right underneath show me like that [54:50] actual company. [54:51] >> Right. [54:52] >> Maybe these are all actually case [54:53] studies. So like, as they open up, you [54:55] could open these up in really nice [54:56] sheets that with a like a depth. So like [54:58] the the rest of the the page pushes [55:00] back, sheet comes up, you can see the [55:02] video at the top, maybe there's a [55:03] description of what that video is for. [55:05] >> Yeah. [55:05] >> What's the construction company, bit of [55:07] a case study. That could also almost [55:08] lead you to like customer stories or [55:09] success stories. These are obviously the [55:11] the demos they're they're showing off of [55:13] of of past clients that have worked with [55:15] them. So, there should be more focus on [55:17] those videos, less I think on on on the [55:22] um on the logo banner ad here, uh a a [55:24] conciser headline that doesn't jump [55:26] around between two things happening at [55:27] the same time. [55:28] >> Yep. [55:29] >> Um [55:31] And yeah, that [55:31] >> And now we get into the platform. [55:33] >> Well, exactly. Now we're getting into [55:34] the [55:34] >> Now they're describing like, oh yeah. [55:36] Oh, the platform. Here, go up just a a [55:37] little bit here. [55:38] >> Oh, sorry. [55:39] >> another video. Um [55:41] Yeah, so you make the video, upload a [55:42] doc, a blog post, or an idea, and get a [55:44] narrated animated video in minutes. Edit [55:46] it just by chatting. I feel like that's [55:48] what I need all the way up here at the [55:50] top. [55:50] >> To explain what it is that they're [55:51] doing. [55:52] >> Yeah. Because right off the bat, I don't [55:53] even know if this is for me. And so, how [55:54] many people do they lose that would be [55:56] ideal customers, but can't even figure [55:58] out that this is for them? [55:58] >> Show me what the product does. And if [56:00] I'm into that, then show me the results. [56:02] >> Yep. I also notice it's it's scroll [56:04] jacking here. [56:05] >> Yeah. [56:05] >> Which drives me crazy. [56:07] >> I agree. [56:07] >> Um cuz it it feels less responsive to [56:10] the scroll that I'm trying to do. It it [56:12] it takes a while to ramp up to the speed [56:13] rather than [56:14] >> I I I think I wanted to I want to take [56:15] the time here on on this podcast to talk [56:17] about scroll jacking in general and [56:19] scroll manipulation on websites. Smooth [56:21] scrolling on websites is a disaster in [56:24] the industry, and I feel like you you [56:26] use the native scroll on websites and [56:28] don't hinder the speed at which a user [56:31] wants to interact with the content of [56:32] your website. [56:33] >> Yep. [56:33] >> That is exactly what we're talking about [56:35] earlier with interruptible interfaces. [56:37] Apple has pioneered this for decades, [56:38] and their software and their hardware is [56:40] is is proof of that. You want [56:42] interruptible software because our [56:44] thought patterns are interruptible. You [56:45] might think something and click on [56:46] something else, and you would never want [56:48] to get a user into in into into a an [56:51] environment where they have to smooth [56:53] scroll or scroll jack through the [56:54] content because that's the way you think [56:56] they are going to perceive or digest [56:58] this content. [56:59] >> Yep. [56:59] >> That's almost an arrogant way of going [57:01] about it. I always feel like I want to [57:02] be as as as as as unobstructive as [57:05] possible and be as as as polite as I [57:07] enter the room. [57:08] Diderot would always say, "Enter [57:09] politely and quietly when you when you [57:11] walk into the room." [57:12] >> It it will also as users, um this is not [57:15] the only website we've ever used. [57:17] >> Exactly. [57:17] >> We're used to scrolling on probably [57:19] hundreds of thousands, maybe millions of [57:21] other websites. [57:21] >> on our phones. [57:22] >> Yeah, and on phones, and and we get used [57:24] to the sensitivity and the precision [57:26] with which we scroll, and when something [57:28] changes that, it you have to reorient [57:30] yourself to try to find what you're [57:31] looking for and it becomes a [57:32] distraction. [57:33] >> And it just becomes it becomes sluggish. [57:35] Like I'm I'm trying to [57:38] pause on this piece of content, but the [57:41] animation's kind of still playing. So, [57:42] now I'm you trying to use the trackpad [57:43] to counter that animation and it's it's [57:46] making me uncomfortable. Like I got I I [57:47] don't I don't want to have to scroll [57:49] like that. And then since the tap [57:50] targets here are really difficult, you [57:51] have to hit these these tiny buttons. [57:53] >> Yep. [57:53] >> Um it's it's it's a bit complicated. At [57:56] the end of the day, they just have [57:57] multiple different carousels on this [57:59] website, all with video players behind [58:01] it that open up in a full-screen video [58:02] player that the only way to exit out is [58:04] with the escape with the escape button. [58:06] >> Uh overall, the videos seem very very [58:09] well done. [58:09] >> The videos seem great. [58:11] >> Yeah, and just getting people into those [58:12] and being able to see more of them and [58:15] experience them and understand the case [58:17] studies behind them seems to be the [58:18] thing that will convert people. [58:20] >> Yeah. And I think if that's if if if [58:22] this is improving the health and safety [58:23] of Adidas or that construction company, [58:25] then Nullifysting is doing a great job. [58:28] And that's and that's and that's the [58:29] product they're selling. [58:30] >> Awesome. Thank you, Nullify. Okay, next [58:33] up we have Instinct. [58:35] Uh building the lunar future today. [58:37] Okay. So, we got a moon. [58:41] >> We've got [58:41] >> building the lunar future and we've got [58:43] some kind of satellite that's floating [58:44] around. [58:44] >> Yeah. It's nice. It's very immersive. [58:46] >> Mhm. [58:46] >> Um I think it's very safe to say that [58:48] these guys are working on space [58:49] technology. [58:51] >> [laughter] [58:51] >> What gave you that idea? [58:53] >> Aerospace technology. So, uh already [58:55] there kudos. I think um you know, to to [58:57] go back into like AI world for a second, [58:59] this is a great example of I think you [59:01] can very easily get an LLM to to to make [59:04] you kind of like a a 3D version or a [59:07] WebGL version of a moon that you can put [59:08] on this website that kind of is [59:10] interactable with the cursor. It's [59:11] something that I would that I would [59:12] probably add to this page. Both of these [59:14] elements are actually things that I [59:15] would render in 3D and then have as live [59:17] objects on the page. Um that's not [59:19] totally impossible to do now with AI. [59:21] So, there's something there's something [59:23] around that that I would that I I add to [59:25] this to to build a we call them show [59:27] stopper components. So like when you [59:28] have one or two components on the [59:29] website that really like take all of [59:31] your attention and like really draw you [59:34] into what's going on. [59:35] >> Yeah. [59:35] >> Um I feel like that's a that's an [59:36] awesome moment to show to show something [59:38] like that off. [59:39] >> Yeah. I I think this this is very well [59:41] done because right off the bat we knew [59:43] exactly what this was. And the animation [59:45] here of like showing it in 3D, it could [59:47] have just been a 2D it could have been a [59:49] photo. [59:49] >> Yes. [59:50] >> You know, that they superimposed but [59:51] there's something about that that draws [59:52] our attention to like oh this is [59:53] actually the thing that they're [59:54] building. [59:55] >> The moon is a photo here in the [59:56] background so that's the thing that uh I [59:58] was reacting to but yeah, you're you're [59:59] totally right. Also nice use of [60:01] of the font. I feel like a lot of the [60:02] websites right now are working in a very [60:04] safe considered space with a sans serif [60:06] and um [60:08] having the courage to like try to wield [60:09] a a serif font on the website is is a [60:12] nice touch. I will say for on that note, [60:14] the logo itself, the font here and this [60:16] typography here are all different and [60:17] kind of competing. And then there's a [60:19] lot of color in the logos down here [60:21] including your lovely logo and I feel [60:22] like it's almost drawing too much [60:24] attention away from the actual message. [60:26] And in this case, there's only one [60:27] message it's nice and reductive but you [60:29] you have space to add one more piece of [60:31] meta content here that maybe talks more [60:33] about what your what your company does [60:35] and what you're building. [60:36] >> Yeah. [60:36] >> Um but let's let's dive further in. Um [60:39] >> Yeah, so now they get more specific. [60:40] Instinct is building the lunar lander [60:42] for today's space industry. So launch, [60:44] cruise, land. [60:44] >> Yeah. I think that's it's it kind of [60:46] explains what's what's going on. [60:48] >> That's really cool that when you hover [60:50] over it you see it. I mean the first one [60:52] I did I couldn't really tell what's [60:54] happening there. [60:55] >> I don't really This doesn't really look [60:56] like a launch to me. [60:57] >> Oh, there we go. Okay, you just had to [60:58] sit with it for a while. So maybe they [60:59] can get to that faster. [61:01] >> Way faster. Attention span in general is [61:03] decreasing. [61:04] >> Like that's what was cool about the [61:05] second one is as soon as you hover it [61:07] takes off. [61:08] >> Exactly. I think that's a very good [61:09] piece of piece of feedback here. Like [61:10] the moment you hover over this this this [61:12] thing should open up. There's a world [61:14] where you could have them all play at [61:15] the same time because they're very [61:16] concise moments. It's just the launch, [61:19] it's just cruise, it's just land and [61:20] they can actually all play in very [61:22] in quick looping videos and you could [61:24] probably get the point across even [61:25] faster and the the land [61:28] video it doesn't really get the point [61:29] across. [61:30] I don't think everybody immediately [61:31] understands that's the moon and then [61:32] you're slowly coming closer to it. I [61:34] think that what you're actually waiting [61:36] for is this moment, right? You want to [61:37] see [61:37] >> Yeah. Yeah, there you go. You see the [61:38] shadow getting bigger. [61:40] >> That's it. That's what I want to see. [61:41] >> Yeah. [61:42] >> I wouldn't even show any of the [61:43] >> Yeah, should have just been that. [61:44] >> It should have just been this. It should [61:45] be that this scene and then this but [61:46] with the with the top open and that's [61:48] all you need to do here. [61:49] >> Yep. [61:49] >> And again [61:51] 1 2 3 3 3 like the three of us nice as [61:53] well. On mobile this really quickly [61:55] turns into a nice carousel. So very very [61:57] easy to translate this into mobile. [62:01] Again [62:02] primal strategy that J tell and me our [62:04] school of thought on this would always [62:05] be you have technology, company, news, [62:08] careers merge. If these are the things [62:10] that you deem as important for your [62:11] business, those are the chapters on the [62:13] homepage. Show off technology, show off [62:15] the company, show off news and careers. [62:17] Don't make me use [62:18] the navigation at the top. These are all [62:20] elements that you can bring into the [62:21] homepage. [62:22] >> Right. [62:22] >> And from there using very simple sheets [62:24] sheets you can just transition into any [62:26] pieces any piece of that content and [62:28] it'll make that whole it'll make this [62:30] whole thing feel way more digestible and [62:33] and and readable. But let's let's click [62:36] through some of the pages. [62:38] >> Yeah, that's cool. [62:38] >> Yeah, technology [62:39] >> Okay, so what I like about this [62:40] >> Yeah. [62:40] >> it's it looks like it's real video and [62:43] so it makes me feel like this is real. [62:45] >> I mean this this is real. [62:46] >> Yeah. [62:46] >> They're they're they're real. It's not [62:47] like a bunch of renderings and you know [62:50] it's hard to tell is this real? Is this [62:52] just like a plan that they have and it's [62:54] like no, they're actually doing the [62:55] thing. [62:55] >> They're building this. Yeah. [62:57] I think again great example there is on [62:59] there's not that much information on the [63:01] technology section. This whole video [63:03] could have been a piece of content on [63:04] the homepage that says explore our [63:06] technology. You tap into it, you open up [63:09] a new component like this, you scroll [63:11] through it and when you when you scroll [63:12] back out you're you're on the homepage [63:14] again. Like that interaction pattern [63:15] would work really nicely here. [63:17] >> is [63:17] >> super cool and you're relying on people [63:19] to click on the technology page in order [63:21] to see any of that. [63:22] >> Exactly. We're getting a little sloppy [63:24] here with the with the cover images [63:25] here. I think [laughter] there's a lot [63:26] of stuff going on with [63:27] >> It doesn't match the the quality and the [63:29] style of the rest of the pages. [63:30] >> No, not at all. And I think very [63:33] important [63:34] for for Instinct to remember here you [63:36] can use the the serif for the headline. [63:39] That becomes a stylistic element of the [63:41] overall art direction for your branding. [63:43] You don't use it for any of the the body [63:45] copy or paragraph copy. Those are sans [63:47] serif. That's a sans serif font. So [63:50] these this this information here and [63:52] this information here I would use [63:54] something like instrument or just like a [63:56] a a normal sans serif font like a like [63:58] an inter or something that works really [63:59] well here. We were looking at carousels [64:01] earlier like this carousel doesn't drag. [64:03] This carousel doesn't swipe with the [64:05] trackpad. This whole carousel only works [64:07] if I interact with these buttons. [64:09] That's definitely not the way I would [64:11] you can you build these components. [64:12] >> I think my takeaway is you got to [64:14] release carousel [64:15] >> We have a carousel kit actually that [64:17] Yes, Prevolus has been working on called [64:19] Blossom Carousel. [64:20] >> Yeah. [64:20] >> And Blossom Carousel is basically um a [64:23] this carousel swipes and scrolls and it [64:25] comes in a multitude of different [64:27] variations and versions. It comes as [64:28] stacks on mobile. Um this is free to use [64:31] and and on GitHub so any founders or any [64:34] entrepreneurs who are watching the show, [64:35] you can [64:36] >> Yeah, this is great. Everybody should [64:37] use this. Instantly your carousels will [64:39] get way better. [64:39] >> Exactly. [64:40] >> Awesome. [64:40] >> Awesome Instinct. Thank you. [64:42] >> great work Instinct. Awesome. That does [64:43] it for this designer view. Marvin thank [64:46] you so much for being on. [64:47] >> Thank you so much for having me. Um it's [64:48] so lovely to be here. It's nice to be in [64:49] San Francisco. It's just like yeah, the [64:51] energy here is unmatched. Uh Y [64:53] Combinator is awesome. The office here [64:54] is sick. I like I I'm so glad that you [64:56] guys asked me to be on the show and it's [64:58] just it's nice to get to sit with [64:59] like-minded people who just want to look [65:01] a little bit under the hood. We we went [65:02] for some of that work and I think um [65:04] yeah, thank you for letting me letting [65:06] me show a little bit of my workflow. And [65:08] it's awesome to see all these all these [65:10] companies coming coming up with so much [65:11] innovative new work. [65:12] >> Yeah, Well, it was amazing to see the [65:14] behind the scenes of your work and [65:15] really [65:16] get into your your mind and how you [65:18] think about how you set the bar and [65:20] level it up with not just the visuals, [65:22] but a lot of the interaction and how [65:24] users actually experience the work that [65:26] you do. So, thank you so much for [65:27] sharing it with us and that does it for [65:30] this episode of Design Review. We'll see [65:32] you on the next one. Bye, guys.