The New Full-Stack Designer

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

Marvin Schweibold: Thank you for having me.

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

Marvin Schweibold: I feel like the process itself hasn't really changed. It's still extremely iterative and sequenced out. There are a lot of iterations and variations in the work itself. But the tooling has definitely shifted a lot from tools like Figma and working with aesthetic layouts into more of an AI-driven workflow. I'll use Figma as a scratch pad for some of the ideas I have, but then very quickly that'll transcend into real demos that I can use. I only piggyback back into Figma from time to time if I need to lay something out or explain something to AI. It's definitely more of a world now that includes tools like Codex and CloudCode and being in terminal a lot, just getting to an output that I can use and test on my phone or computer a lot faster. That becomes a really fun, still very iterative cycle, but we've definitely moved away from the canvas more to AI tools in general.

Host: And how much of that workflow is AI driving the process versus you, the human?

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

Host: It sounds like your role is actually to be the editor.

Marvin Schweibold: We're more the editors now than ever before, which is fun.

Host: That's great. I mean, that was always the role, but getting to the point of editing just took a lot of handcrafted design that we would do in Figma. More and more of that can now be sped up and extrapolated with AI tooling. So you, the human, are still responsible for the ultimate final output and making sure that it meets your bar.

Marvin Schweibold: Always. But you have all these tools now to be able to get there way faster. A hundred percent. AI has definitely raised the ceiling for all of us, but it's not a crafter. It can execute complexity and technology that I couldn't hand-write code. It can write code, but it doesn't know what looks good and what looks bad. That's for me to decide and to steer AI in the right direction.

Host: I've been a big fan of your work for a long time. Maybe start off by telling us about the product design studio at Shopify and what you guys do there.

Marvin Schweibold: I work with a team of very talented designers. We've been there for the last year. Between us, we run an initiative at the company to redesign and touch the most important surfaces we have. That includes anything related to Sidekick, which is our AI infrastructure layer that manages our entire admin, to the mobile app, which we call the green app, and everything from admin and admin dashboards. Quite recently, we've been working with a lot of new AI infrastructure that the engineering teams have built for us. It's been a really exciting last year.

Host: It's actually really interesting because Shopify is like two decades old at this point, right?

Marvin Schweibold: 20 years old.

Host: 20 years old. So we are in a new era now where AI is changing a lot of things. It sounds like a lot of the work you're doing is to modernize and bring it into a modern era through design, but also the experience itself. What does the design team and your product design studio actually work on? Are you in Figma and canvases and designs and passing them off to engineers? Or what is the design function like that you manage there?

Marvin Schweibold: At the moment, there are almost two parts of this big initiative. Part of the organization of the design team has redesigned the entire admin experience. This redesign starts in Figma with polishing interfaces and bringing that into the web. The other part of the organization, the Sidekick team of Shopify, is working on automating and manipulating a lot of the Shopify interfaces via chat. You can use chat, Sidekick, or AI Infra to manage your store and automate what it means to be a merchant online. They are two almost controversial, paradoxical sectors of the company, but they work really well together. You're building really beautiful new UI, but you're also using new UI to generate AI infrastructure and AI workflows. That's incredible to see. A lot of that translates very nicely back into the mobile app and is up-leveling the mobile experience. It's a lot more conversational, talking to Sidekick about your business, rather than having to manipulate your business via the interface.

Host: Previously, before joining Shopify, you were building your own product studio with Molly. You had incredible motion, animations, and interactions there that I always found to be really inspiring. Maybe you can show us some of that and talk through where it came from.

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

Host: And you had some huge clients that you worked with during that time.

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

Host: It's so cool. There are little details here. The animations are very organic. Even as each screen changes, the gradient and the shadow behind it changes to match the color of the background. A lot of people maybe wouldn't pick up on it, but it's something you intuitively feel.

Marvin Schweibold: We got this idea from the ambient lighting behind TVs that are mounted on walls. JTEL, pre-AI, basically duplicated the video and had it blurred out in the background so it would match the rhythm of what's going on on the screen. It works really nicely. Before that, it used to just say "Molly is a design studio in Brooklyn" with a gradient at the bottom that was kind of vibrating.

Host: I can see it changing there. It feels like a thunder or something.

Marvin Schweibold: Yeah. For us, it always felt like people were inclined to scroll into it. We didn't even have to show them any of the work, but we kind of hinted at it. Then you scrolled into the reel and the rest are just very nice, simple carousels. Some of the patterns we used to call the system, or we call the system Primal. It's a way to understand content on a website and digest it. For us, it was a very structured way of digesting information when clients came to us with a lot of content for their websites. We helped them build that into a system on the website that allowed users to explore. The way we would build websites, flowing through them felt more like you were exploring the website than the website was demanding your attention. Everything is just one layer away, everything is progressively disclosed, so you never overwhelm the user with too much content.

Host: What are some of the ways you accomplish that?

Marvin Schweibold: This was a project we did with the agency Collins. We worked with them for over a year on this website. As you scroll through the homepage, each section is a chapter that can lead you into further exploration. This is one of my favorite sections, the bookshelf. These are all of the case studies from Collins.

Host: Even going back and hovering over those elements, the way they bounce feels different than what you typically see. Talk about how you made that. You didn't use AI tooling for this, you handcrafted these, right?

Marvin Schweibold: Yes. This was very much design and engineering partnered together. I would lay something like this out in Figma and try to understand the spacing, size, colors, and rows. Then I would hand it off to someone like Jesper who would work on the bounce animation. All these books have to level up on top of each other and then land one more time as the last book lands on top. It has to feel very organic because if it feels bouncy and organic, it alludes to the idea that it's a bookshelf that's alive. Those things, while seemingly unimportant, are exactly the kind of little moments people pick up when they scroll through these websites.

Host: Why does that matter? You have a supremely talented person whose entire job on this project was to make the tab interaction. It's easy for anybody to say "just throw a tab, tabs exist for free in five seconds." Why did you feel it was important enough to spend somebody's dedicated time focusing on just that one interaction?

Marvin Schweibold: There are multiple ways to answer that. Especially for the studio, because they work on design themselves, this is a branding studio. The clients coming to the website are looking for those kinds of Easter eggs. They want to know that if I hire this agency, and they take this much detail to produce a website of that quality, what kind of Easter eggs are they going to put into our projects? When they pick our color palette, maybe they're going to come up with a system behind it rather than just picking five colors they like, because that's the level of dedication it takes to go really deep. It's a way to show off the level of craft and detail you can bring to any part of the interface. We try to do the same level of care and craft at Shopify.

Host: Talk about the decision to sell your design studio to Shopify and come join them. How has that process been different for you, being at a large public company and leading a product studio internally, versus the work you were doing when you were independent?

Marvin Schweibold: Toby at some point last year basically said, "We're entering a new era and that future needs to be designed." He said, "I want to design for the future and I need to hire good designers who can help me paint a picture. When we see that picture, we'll know what it is and we can go down that route." That's the mandate at Shopify. Design is very much more in the foreground. It's a very honest organization that's very self-aware. It's a founder-led, engineering-led organization, and design hasn't always played the role it's playing now. Design is very much helping shape the narrative of where the company is going and the level of craft and pride we're taking towards the tooling and software we're building for our merchants. That's beautiful to see. That was one of the reasons we wanted to join. While we were having fun designing websites for other studios like Collins, we also wanted to have a larger impact and see if our strategy would hold up on interface paradigms with millions of users versus the few users that would scroll around a smaller website.

Host: Right. So it's a different set of challenges. A lot of the design studio work you did was create a new site or work on a product. Talk about how it's different now. Shopify has millions of users and there's a lot of money at stake with every design decision and interaction. What is your process like now being this internal design studio? How do you interface with the rest of the organization and with users?

Marvin Schweibold: For now, our studio exclusively operates within Sidekick, the AI infrastructure layer of Shopify. The whole team works extremely close with the rest of the design organization. It's a very beautiful interplay. I've been in positions in previous careers where if you're more isolated, it's always more difficult to integrate into the company and have a large impact. At the moment, we're very ingrained in the current workflows, timelines, and roadmap. It requires a lot of experimentation. Up-leveling the interface was easy for us because we have really talented designers who rebuild parts of the interface in Figma and then, using AI, we can port that over into very tangible prototypes extremely quickly. Prototypes are a million times more useful than any PRD document you can write. They spread around the company like wildfire. If Toby sees a prototype that he likes, we can go off and build that. With some of the AI mutations work we've been looking at, we can show some of that later. It feels the same. We have ideas in our head, and it's extremely easy for us right now using current technology to simulate it all and generate prototypes. In the past at Molly, a lot of the work was done by hand. Sheets were designed by hand, animations were done by our developers. Art direction might have been my idea, but there were a thousand counterparts you had to interact with. Now I'm seeing one-off armies or teams of two going off and doing the work of many, because the tooling is allowing us to do that. That's making it a lot easier to get by, because I can show up with a prototype and get people's attention faster than if I have an idea and have to get a whole team rallied around it.

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

Marvin Schweibold: This is a redesign and facelift of our current admin experience with a new home design and an overall facelift of the entire product. One of the more interesting things we've been exploring is how Sidekick and the merchant interact with each other. We have this concept of suggestions, psychic suggestions on the home feed. These suggestions are brought to the merchant by us. We've identified opportunities and benefits that the merchant could do inside their ecosystem. We can show those to the user. As the user interacts with these suggestions, we kick off a conversation with Sidekick. We can directly manipulate the admin dashboard for the user and show those changes to them. For example, we think you should rewrite the description of your product. Here's the suggestion. You can publish these changes, and through a conversation with Sidekick, you've directly manipulated your store. The concept is, can we bring UI to the user and into context versus having the user click through the interface? There's a world where a merchant can spend a lot more time on the home surface and use Shopify as a dashboard to delegate and interact with Sidekick, having Sidekick directly manipulate the store. Right now, this is still a prototype environment. There's a dev UI panel inside here. The design team is building all of these changes, demos, and ideas right into the interface so we can test and build on top of it. It's become this beautiful process where once a demo is at a point where we all align, everybody branches off and builds a version of something they think brings value. Then we all come back together, and it all lives inside the same demo and the same link. It's a beautiful way to share ideas and context.

Host: You said designers are building this in here. A lot of times designers are designing and not building. But at Shopify, you and your team are building a lot of the stuff you design so you can test it, prototype it, see it on live data and experiences. That's a huge part of nailing it and building something useful. What was your evolution from designing in Figma to now creating it out in the world to test it and doing that full loop yourself?

Marvin Schweibold: In this specific case, admin has a playground that we build and test in. That's not production code and wouldn't be allowed back into the main GitHub repo of Shopify. Having said that, AI has definitely gotten to the point where as designers, we are highly empowered and capable to visualize any idea we want to get across. In a previous world, that wasn't possible. Looking at the Collins website earlier, a lot of that work in Figma still looks like this. You can zoom into any part here, and there are highly detailed Figma screens we're designing through. This is an ideation process. This is a mixture of me, Michael Speichert, and Jay Tal working on this project. You can see the evolution as we go through ideas and try new things. These are too heavy and too expensive to test in code. We don't want to test this in code right now because it would require an engineer to build it for us. So we test it all in Figma. Figma is the playground where we were building everything. We were building it on desktop and then translating it to mobile. All of this had to be stress-tested in Figma first for a very long time before we would go and bug the engineering team. Now, the way I'm talking to AI, I'm still using Figma at the moment. I can get really far with a very broad sketch. Here's an example of a side project I've been working on over the weekend. One of the things I wanted to build was a 2x3 overview of grass studies and videos I took. The interaction is you can open up any one of these videos and drag down to close them. It works the same in the simulator. I explained this to AI while working in Codex, and Codex built it out for me. But the interaction wasn't interruptible. Every time I clicked on an asset and pulled it down, I had to wait until the asset was all the way back in its position before I could tap on another image. That's not how you want to use this pattern. It has to be very responsive very quickly, otherwise you'll get annoyed with the interface. So I went into Figma and drew out very rudimentary boxes. When you click on the box, red comes up. You can swipe it away. If as you're swiping away, you click on blue, blue now comes up. You can click that away and do it with green. That's a good example of how I'm using Figma more as a scratchpad to map out ideas. I give those ideas to Codex. I use the scratchpad because it's easier for me to decompile something, and it's actually easy for Codex to decompile it if it sees it visually. It interprets that image similar to how I interpreted it. It understood what I was doing and how I was thinking about the motion. I couldn't articulate it via text or voice, but I could draw it out.

Host: There are two parts of this that are important to call out. Number one, Codex and all the current AI software and models are extremely capable at creating anything. You can use these tools to make anything you want, but you have to know what you're doing. You have to be able to take a concept or something more complicated like the shader and break it down into all its little components. You have to understand those components and then put them back together. Show us how you did that here.

Marvin Schweibold: To be clear, I had a bunch of images and videos of actual grass. I wanted to create a shader that looked identical to that but could be controlled and function like a shader. I have a few screenshots here. This is a good example of how I use Figma. I fed the video into Codex for the first time and explained the project and the process. "Take the video, turn this into a shader. I want the shader running in the web. Be as meticulous as you can, be very pixel perfect, grab all the colors, make sure you're using the same hex codes, understand each part of the image, and try to recreate that." It went off and said, "No problem, I got you." It came out with this, which obviously doesn't look at all where we ended up. The process from there was I would screenshot this and my original video, open up ChatGPT, and give it to another agent. I explained exactly what I was doing. I said, "Why is the other agent not understanding what I'm trying to get to?" ChatGPT then helped me understand my own process. It said, "You have to explain where the light is coming from, what shadows you're using, and maybe break the image down into six parts and have it do each one individually and put that back together." As I was thinking about all of these different things, I was trying to come up with how to become very clear with AI and explain exactly what it was looking at. One trick I used was I went into ChatGPT and had it render a topographical map of the underlying structure. As I was going through this, it was getting closer. You could see it was painting more pixels into the grass blades, and these started to look like bushels, which felt more realistic. I figured out that it doesn't understand that it's not a flat layer underneath—these are little hills. I fed this back into AI and it understood, "Okay, there's an underlying structure in a map that has different depths and heights. If I can re-render the grass on top of that structure, it'll be much easier for me to create the scene." That worked really well. In this prototype, there's a binary toggle to turn the grass on or off, and you can play with the terrain quite a bit. This was all unlocked via Josh to me at a lunch the other day. He looked at this and said, "This looks pretty good, but you should look at the length of the grass blades." I asked Codex, "How many grass blade variations do we have?" It said about 217,000 different grass blades, but they only differ by 0.6, 0.7, 0.8. So we built a toggle for it so we could see it ourselves. I don't want to have to go back and forth with the interface and chat about this—expose the underlying structure. Exposing the underlying structure would also show me where AI had made mistakes. The original version of the terrain map it had implemented was completely wrong and skewed. I couldn't get to my outcome anyway because AI had misinterpreted something five prompts ago that I didn't know about. DialKit unpacked that for me. In general, you can mess with a few of these values and they help visualize what I really wanted to see. If the length here is longer, you can introduce more wind. This was something I wanted to test, to see how crazy I could get with the wind. You can see it gets a little wild. This is just a small example of a fun project to see how far you can get with the tools. These are things that before AI, I couldn't do. I might have had these ideas, but I wasn't able to execute on them. That's what's changing with the design role right now. Designers are becoming more full stack, as are engineers and PMs. There are no limitations now.

Host: This is one of the common patterns we've been seeing a lot: creating prototypes and then creating little widgets that allow you to control different variables to test it easily and get it right. Previously, it wouldn't have been worth anybody's time to do that. You would play with variables in code until you got it and then call it good, and that would take way longer. Now it's so easy to create new little software tools to control these variables and dial it in perfectly, which I guess is where the name DialKit comes from. Tell us more about DialKit.

Marvin Schweibold: This is a product that makes it really easy to create and tweak a lot of these variables in whatever project you're working on. You can just run npm run via his website. He has a little prompt for it. You can plug it into whatever you're working on. I have another project I can quickly show. This is another version of DialKit where I was manipulating a carousel. This is inspired by Mike Mattis, a design lead at LoveFrom. His portfolio carousel works in this way. I wanted to see the nuance in the way that carousel works, the way you can drag down an artifact, and when you let go, energy ripples out from that artifact and triggers a collision effect with the other artifacts. Building out the side panel here helped me look under the hood of my own Frankenstein that I created with 91 prompts. It helps you dial in some of these different parameters that are really important. Pull-boost means the faster I drag this down, the stronger the boost is. You want to play around with that toggle a little bit. It can't feel too intimidating or too strong, otherwise the whole system feels off. I know when it feels off, but the back and forth with chat just doesn't work. You need to be able to expose those kinds of values.

Host: It seems like a lot of the projects we've looked at and what you're describing is setting an unreasonably high bar, and now we have the tools to meet it much faster than before. What is the role of the designer, and maybe even non-designers? How should they be thinking about design? A lot of the audience that watches this are founders of early startups who feel like they're engineers but don't have a design bone in their body, or designers trying to figure out if they could start a company or build the product. How should they think about themselves and up-leveling the way they use AI to create higher quality design?

Marvin Schweibold: A lot of the way I keep thinking about AI is that it's an infinitely patient collaborator and teammate. Codex won't get mad at me if I need 91 approaches to get the animation correct. If I had done that with my engineer, they would probably flip out. My advice to everybody is to tinker with the tooling. It sounds kind of silly, but go in and describe what you wanted to do. When you see a result, don't give up. Explain that this is not how you envision it. Send it a website where you really like the carousel animation, or give it a screenshot from Save It or Cosmos of something you think looks beautiful. Show it a color palette it should copy for you. Keep going back and forth, shaping your narrative together with the tool. For designers specifically, my trick is to just try to copy. Even now, I'm trying to imitate this carousel animation that's been around for a while. Now I have an infinitely patient teacher and friend that I can build it with. I can look under the hood. I'm doing that in my own time, on my own weekend, without bugging any of the engineers. It's my experiment, and I want to understand how this thing is put together. That teaches me how to be a better manager, a better collaborator, and a better team member. That's how we should be treating these tools.

Host: That's great advice. YC's next batch is now taking applications. Got a startup in you? Apply at ycombinator.com slash apply. It's never too early and filling out the app will level up your idea. Okay, back to the video. Should we review some websites?

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

Host: Let's do it. First up, we've got NStack.

Marvin Schweibold: Okay. So this is NStack. "The only AI workspace you'll need. One powerful agent, one intuitive desktop workspace, and every tool you need to handle any task." Right off the bat, one thing that's very nice is the fact that they're emulating the desktop. It feels like you're on a desktop, and I think you can probably use these and explore them.

Host: Yeah, what's nice is you're basically in their product already, using it. I'm a little confused about what to use it for, though. "The only AI workspace you'll need. One desktop, every tool you need to handle any task." It's hard when it's so broad to figure out what I should use it for. Maybe you can use it for anything.

Marvin Schweibold: Yeah. But sometimes it's helpful to know what you want the user to do when they hit this. From a visual perspective, it's very overloading. You have a lot of content in the sidebar, chat history you can scroll through, some sort of interface here, and the main messaging of NStack sits over here. It's hard to figure out exactly what to focus on first. My German graphic design professor would always say when we were making posters that this poster doesn't dictate—it's not diktatish. There's nothing in this poster drawing my attention. I don't know what to do when I look at it. Do I click these icons? Do I go in the Slack-like thing? Do I go in the chat? Am I texting the chat here? Why am I called Mark?

Host: You're Mark, I guess.

Marvin Schweibold: I'm Mark now. Feedback here would be to collapse some of the clutter and make it more around the introduction and the headline. Focus on what I want the user to read and take away. A simple way into a very quick demo of the tool would be really important. At least it's very whimsical and feels kind of retro, which is nice.

Host: There should be one specific goal that is the primary KPI or the main thing you want a user to do when they hit the site. I'm not sure what it is here. Maybe it's "get started" or "talk to this agent." But there are so many other things pulling your attention. Maybe the "get started" button is the primary CTA, but they have other buttons in the middle that look exactly like those buttons. Now there are multiple buttons with the same color calling for attention.

Marvin Schweibold: Someone once said to me that often when we build websites, we focus on one thing and make that really well, building the whole narrative around that one thing. On Collins, the book stack was something we were proud of and wanted to show off. That was the heart of the website. With NStack, I would ask myself, "What is the one thing I can rally around and get people to look at and do?" If they only take one thing away, it's better than trying to do everything at the same time. That's what's happening here. There are a lot of things screaming for attention. It's the opposite of progressively disclosing information.

Host: As a positive, one thing they do well is they're trying to drop you right in the product. I assume this is how the product functions. They're not trying to tell you about the product and then get you to click a bunch of things and sign up. If the aha moment is people just starting to use the product, let's get people into the product as early as possible. But it still feels like we need a little more context to figure out what we should be doing here.

Marvin Schweibold: Agree. NStack, thank you.

Host: All right, let's take a look at SkillSync.

Marvin Schweibold: "Free local first Mac app that carries your memory and skills across every agent and teammate." That's nice. At least it's clear what the company does. It's in dark mode. The fonts are very small. The difference between "SkillSync" as the logo and the first paragraph below it has a lot of percentages in the typography height that could be skewed in a little bit. They feel a little off. Again, there's a lot of very dense information. As soon as you start to abstract some of the functionalities and features but still stay very detailed like they're doing here, it becomes very hard to understand exactly what it does. It requires a lot of actual reading of all these features to understand what's going on.

Host: I'm curious about your take on this. They have a bunch of sidebar tabs trying to show off different features. You have an interesting approach on tabs with all those sliders you make—they're effectively tabs. You have the affordance of knowing there are multiple of them and you can see multiple at a time. The trap a lot of people fall into with tabs like these is that users usually won't click on all of them and explore them all. You have to assume that whatever is hidden behind them, nobody will ever see. How do you think about that? How can they encourage people to explore this more rather than burying everything behind tabs?

Marvin Schweibold: I always have this rule: you can't put more than seven lines of text on a slide if you're presenting work. You have to come up with rules and constraints for how many features you want to show off. I would use a three-up component here. Take all these features, compress the information down, and try to understand the top three things SkillSync can do for you. "You can do X, Y, and Z." Those are the three things you show off. All of those are tappable, leading you into sheets or view transitions with more information. Since it's very flat and broad, you're a mile wide but only an inch deep. You don't really know what you're looking at. That requires a deeper understanding of your feature set, condensing them down into principles and main points. Then you can bring more information under each of those pillars, which will help users understand the flow of the website better. It's also better for the founders. If I were still running my studio and working with this company, there would be a whole exercise in "What's the one thing you do?" If it's syncing skills, let's only talk about that, make it really cool, show it off, and get people to use the product as quickly as possible.

Host: It's also interesting that we just hit the bottom of the page. It's not very tall. Users are comfortable scrolling. If there's important information hidden behind these feature tabs, just break them out and make the page longer. It's okay for people to scroll longer rather than compressing and hiding everything.

Marvin Schweibold: Exactly. The other trap I see a lot of people falling into with AI tools now is that because it's so easy to create a different image or animation—these are animations, right?—they spit out a bunch of them. They've all got the hallmarks of very small text and this animation. No human would spend the time to program a little dot going from these corners. But that doesn't mean it's actually adding value. When you talk about needing to curate and set the bar, there are lots of things here, but they don't help my understanding of the point they're trying to make.

Host: I fully agree. That's something where you need to hire the right people with the right skill sets to help you do the job. AI can help you put this whole website together, but when it comes to abstracting these features into illustrations, it might not be the worst idea to work with an illustration designer who specializes in information graphics. That could become a core part of the SkillSync brand identity. I remember working with Gemini a few years ago. There was this animation with a braid showing the model and all these different things Gemini had. They all came together and built a helix. That animation explained exactly the capabilities of the model. It turned into a very thin line and said "Gemini." A lot of people worked on that animation for a very long time, and later engineers translated it into a scrollable animation for the website. That kind of sold it. That piece of motion was ingrained in my memory and really explained what the model was doing. Sometimes being a little more artistic and abstract goes a long way. For SkillSync, there are a million different patterns and visual examples to show that off. You can be a lot more craftful and graphical in how you design that on the website. That would be my feedback to these guys.

Host: Cool. Thank you, SkillSync. Next up, we've got InstaPlay.

Marvin Schweibold: I'm seeing a bunch of featured... I can't tell if these are movies or games. It says "Design something that... Bird sort." Okay, these are games we can play. How do we play? We've got a bunch of birds. We've got some sound playing. Let's try something else. Start button. We're fighting this wolf, I guess. We've got this call out here. It says "Describe your game idea" when you click into it. There was no copy under the title "InstaPlay," so we were left to figure out how to orient around the page. The first thing we did was see all the visual games and screenshots, so we jumped right to that. We missed the fact that the primary purpose is for us to create our own games on the fly.

Host: Yes. A line of text could help with that, or some type of call out that makes the prompt box more prominent. It goes back to your example from earlier: what is the one thing we want the user to take away when they land on the page? Is it exploring the multitudes of games already created, or is it the fact that we can create our own games? Creating our own games leads you to a sign-up page, which no one is going to do if they haven't seen their created game. You have to cough up enough credits to try to onboard people into the product. That's the cost of acquisition of one user, and that metric is extremely important. That cost of acquisition can't continue with Google. It has to be that whatever I just asked it to do, it spits it out perfectly, and I have to be able to try it one or two more times. If that works, I might be inclined to use that piece. You put in a prompt, submit it, and it takes you to this screen asking you to sign in. The problem is we don't know if this is good.

Marvin Schweibold: This is a great example where you could build out a really cool interactive carousel. Each game has almost 10 seconds of real playing rather than just these static assets. I don't know what's behind it, so I don't know what I'm looking at. You could probably get Codex to tap into each one, screen record it, and replace that as the thumbnail, at least on hover states. That would bring more interactivity and dynamism into all these different universes. I think what they're trying to show with these covers is "Look, with InstaPlay, you can do a lot of stuff." I don't think we even need to be able to play all these different games if the call to action is to create our own game and be game designers ourselves.

Host: Right. If that is the primary call to action, that is not what we did first. You probably want to actually create the game for people so they can play with it. If they want to save it, come back to it later, or share it, then they sign up or create an account. Here, you have "Create," "My Games," "Explorer." No one knows what any of that means. If you click on "My Games," it leads you to a sign-up. If you're not signed up, you shouldn't even see "My Games" or have the ability to tap into something that leads you to sign in. "Explorer" is basically the page we're already on. You're already exploring on home. I don't think that needs to be a new button. The only thing you've done on the explore page is take the input field away from me, so now I can't create a game anymore. There are a few things in the hierarchy where I would really think about putting yourself in the position of someone coming to your website for the first time who has no idea what you're building or selling. How do they interact with the product?

Marvin Schweibold: It was also interesting that you went into the game, and when you were done, it wasn't obvious to me that the fast-forward icon gets you back to the homepage. I thought it was going to take me to another game. It can be misconstrued as an arrow really quickly.

Host: Right. You actually clicked the back button to get back because there was no obvious home to go back to.

Marvin Schweibold: Exactly. But this is super cool. You can imagine just getting people to put in a prompt and create a game, like the racing game you were just doing. People could play with this for hours. You just have to get people to that value of creating the game and experiencing something. Once they've created that game and are proud of it, being able to share it with friends is probably a really nice growth hack for these guys. There's a lot of value in this kind of work. Props to them.

Host: Nice job, InstaPlay. Next up, we have Mintlify.

Marvin Schweibold: "The knowledge infrastructure agents build on. Self-updating documentation for startups, enterprises, and agents." Great. I'm obviously very familiar with Mintlify. It's an incredible company, growing really quickly, and is a product that tons of YC companies and other dev tools use.

Host: This is a beautiful website. It looks very professional, straightforward, and clean.

Marvin Schweibold: Yeah. Let's drill down to why we feel that way. What are the specific elements that make us feel this is very clean and professional? I think it's being reductive in exactly the correct ways, showing only the things that are actually necessary. It has a very clean headline, a small paragraph underneath. The "Get Started" button is very prominent. It's showing off some kind of dashboard. You can understand that this is probably where the documentation would live and get updated. The graphic in the background adds to the vibe rather than taking away from it. It's subtle and in the background, helping you think it's some kind of network or infrastructure intelligence layer. I never know about logo walls, but this logo wall is very well put together. It's a lot of really big, credible companies, which builds a lot of social proof. With so many tools flooding the market, you need that kind of proof point to say, "Okay, if Spotify is using it, maybe we should look at it." This is a great example of abstracting UI and feature capabilities into something very cohesive and art-directed that feels interesting to look at. I would say the headlines here for these cards are a little bit too small. With the background color being the same, I'm kind of looking at none of them. They're reusing that braided animation in the background, and it's losing its magic if you keep reusing it all over the place. Less is more here. The headlines could be a little bit larger.

Host: Again here, it's hard to read both on top of your existing setup. That seems like a very important point you would want people to know: "You can control who has access. You can build on top of your existing setup." But it's super easy to miss because the screenshot takes up a lot more space, and the animation draws your attention away from the headline that is actually really important and buried at the bottom.

Marvin Schweibold: Exactly. You have to differentiate between how much information the visual is giving the user versus the copy you could add. That balance is a little off here, but overall, very beautiful. These are just nice. This is a really simple to use carousel. I can swipe through it. The colors are mapped to the photography. I think that's something people don't get credit for enough. This is great and really well done. It's Manhattan, the blue sky. It's Coinbase, a blue artifact here. That feels really nice to scroll through. They're very branded. Although these colors are too close together. I would have used a different color for this one. But overall, very clean, very trustworthy. There's a lot of space between the sections too, which is a technique you use a lot in your designs.

Host: Each section of the homepage is basically the first chapter of all the child pages. When we were designing for clients, if you are talking about products, solutions, resources, and pricing, those are the four main parts of your homepage because that's where we're deeming the most important parts. As you scroll through the website, those four components show up in exactly that order from most important to least important because of scroll depth. People drop off as they scroll, so important content has to sit at the top. Each one of these sections should lead me into that. If I click on product, theoretically I would have had a whole section for product right here on the homepage. Products should probably have a homepage itself because there are so many products. But overall, it's well-designed and simple. It looks like they took time and care to make this website, which is nice to see.

Marvin Schweibold: It's a lot more breathable. There's less going on here versus some of the other ones we looked at. There's still a lot of content, but it's spaced out and distributed across. Everything has its own space, which helps the user know what to focus on at any one time rather than feeling like there are lots of things trying to draw their attention. It's interesting how you describe that as actually taking more time than the things that have lots of competing elements, because it takes work and curation to figure out what we actually want to keep. It's easy to throw everything in. It's much harder to figure out what needs to be edited out. That conversation is harder to have with the team. Everyone wants their functionalities or features on the page. You have to curate it, make a decision, and reduce. That's the job of any designer: reduce complexity, show one piece at a time, and drive narrative that way. It's hard to do, but it pays off when done correctly.

Host: This is excellent. Great work, Mintlify. Next up, we have Nullify.

Marvin Schweibold: "Your users don't read your docs, your patients don't read your manuals, your employees don't read your content. Nullify turns your docs and ideas into narrated, animated videos. Make them yourself in minutes or have our studio team make them for you. For teams who need more video than they have time to make." Right off the bat, being a typography designer, I would say there's a headline, a paragraph, and almost a smaller version of the paragraph underneath in a different font size. Then there's the "Book a Demo" button and the "Start Free" button. There are one, two, three, four, potentially five font sizes right in the viewport here, disregarding all the logos and the banner in the corner. It's a lot going on from that perspective. You can have a headline and a paragraph, and you have to put all the important information into that paragraph. You can't keep adding headlines and making the user read all those different points.

Host: The first thing that jumped out at me is the two placeholder elements in the headline. I find that disorienting. It's one thing if you have one and it's changing, because you can anchor yourself on "we do this for this type of person." But with two elements changing, the user is changing and the docs or manuals are changing. It sounds like it's actually a video thing, which I would not have gotten from the headline at all. I think what they're trying to say is people don't read these documents and PDFs, so you need videos so they pay attention. But I feel like they need to say they do videos that convert better—the positive of what they do. Could they use their own studio to make a video of Nullify and put that on the website so we watch that first? It proves their point. People don't read all of this. We're not going to read any of this anyway, so just show us a video of what you do.

Marvin Schweibold: There's a carousel here that I think shows off the product. Let's click into one of these. I assume these are examples of their animations. You can't click into one of them. You have to use the icon. That's not good. This card needs to be tappable. You look at this and you want to click into it. "Every year, thousands of warehouse workers get injured." It's an instructional animation video. "Most of those incidents are completely preventable and warning devices." The video looks well made. The thing we want to do here, tying back to the carousels you created in those past projects, is explore their work. When I click into one, it comes full screen. Then I figure out how to minimize or X it out. What I really want is for it to zoom in so I can see it play, and then keep jumping to the other ones to see the depth and variety of what they can create.

Marvin Schweibold: Exactly. None of these are tappable. I can't open them up full screen. You have to use all the little buttons. "The vaccine is injected. Muscle." I would want it to zoom up, not the full width taking over everything, but 90% or something—just enough to show me what's going on. Then I can start swiping through all of them, and maybe right underneath, show me the actual company. These might all be case studies. As they open up in really nice sheets with depth, the rest of the page pushes back, the sheet comes up, you see the video at the top, and maybe there's a description of what that video is for. That could lead you into customer stories or success stories. These are obviously demos of past clients, so there should be more focus on those videos and less on the logo banner ad. A conciser headline that doesn't jump around between two things happening at the same time.

Host: Now we're getting into the platform. "You make the video. Upload a doc, a blog post, or an idea and get a narrated animated video in minutes. Edit it just by chatting." I feel like that's what I need all the way up at the top to explain what it is they're doing. Right off the bat, I don't even know if this is for me. How many people do they lose who would be ideal customers but can't figure out that this is for them? Show me what the product does, and if I'm into that, then show me the results.

Marvin Schweibold: I also noticed it's scroll jacking here, which drives me crazy.

Host: I agree. It feels less responsive to the scroll I'm trying to do. It takes a while to ramp up to the speed I want. Let's take the time here to talk about scroll jacking and scroll manipulation on websites in general.

Marvin Schweibold: Smooth scrolling on websites is a disaster in the industry. You should use the native scroll on websites and not hinder the speed at which a user wants to interact with the content. That's exactly what we were talking about earlier with interruptible interfaces. Apple has pioneered this for decades. Their software and hardware are proof of that. You want interruptible software because all thought patterns are interruptible. You might think something and click on something else. You would never want to get a user into an environment where they have to smooth scroll or scroll jack through content because that's the way you think they are going to perceive or digest it. That's almost an arrogant way of going about it. I always feel like I want to be as unobtrusive as possible and be as polite as I enter the room. Dieter Rams would always say, "Enter politely and quietly when you walk into a room." This is not the only website users have ever used. We're used to scrolling on hundreds of thousands, maybe millions of other websites on our phones. We get used to the sensitivity and precision with which we scroll. When something changes that, you have to reorient yourself to find what you're looking for. It becomes a distraction and sluggish. I'm trying to pause on this piece of content, but the animation is still playing. Now I'm trying to use the trackpad to counter that animation, and it's making me uncomfortable. I don't want to have to scroll like that. The tap targets here are really difficult. You have to hit these tiny buttons. It's a bit complicated at the end of the day. They have multiple different carousels on this website, all with video players that open up in a full-screen video player, and the only way to exit is with the escape button. Overall, the videos seem very well done. Just getting people into those, being able to see more of them, experience them, and understand the case studies behind them seems to be the thing that will convert people. If this is improving the health and safety of Adidas or that construction company, then Nullify is doing a great job. That's the product they're selling.

Host: Awesome. Thank you, Nullify. Next up, we have Instinct.

Marvin Schweibold: "Building the lunar future today." We've got a moon and some kind of satellite floating around. It's nice. It's very immersive. It's safe to say these guys are working on space technology.

Host: What gave you that idea?

Marvin Schweibold: Aerospace technology. Already there, kudos. To go back into the AI world, this is a great example of how you can very easily get an LLM to make a 3D or WebGL version of a moon that you can put on this website, interactable with the cursor. That's something I would probably add to this page. Both of these elements are things I would render in 3D and have as live objects on the page. That's not totally impossible to do now with AI. That would build what we call "showstopper components." When you have one or two components on the website that really take all your attention and draw you into what's going on, that's an awesome moment to show something like that off.

Host: This is very well done because right off the bat, we knew exactly what this was. The animation of showing it in 3D—it could have been a 2D photo that they superimposed, but there's something about that drawing our attention to "oh, this is actually the thing they're building." The moon is a photo here in the background, so that's what I was reacting to. Nice use of the font. A lot of websites right now work in a very safe, considered space with a sans serif. Having the courage to wield a serif font on the website is a nice touch.

Marvin Schweibold: On that note, the logo itself, the font here, and this typography here are all different and kind of competing. There's a lot of color in the logos down here, including your lovely logo. It's almost drawing too much attention away from the actual message. In this case, there's only one message. It's nice and reductive, but you have space to add one more piece of meta content here that talks more about what your company does and what you're building. Let's dive further in.

Host: "Instinct is building the lunar lander for today's space industry. Launch, cruise, land." It explains what's going on. It's really cool that when you hover over it, you see it. The first one, I couldn't really tell what's happening there. It doesn't really look like a launch to me.

Marvin Schweibold: There we go. You just had to sit with it for a while. Maybe they can get to that faster. The attention span in general is half a second. That's what was cool about the second one—as soon as you hover, it takes off.

Host: I think that's a very good piece of feedback. The moment you hover over this, it should open up. There's a world where you could have them all play at the same time because they're very concise moments: launch, cruise, land. They could all play in quick looping videos, and you could probably get the point across even faster. The land video doesn't really get the point across. I don't think everybody immediately understands that's the moon and you're slowly coming closer to it. What you're actually waiting for is this moment—you see the shadow getting bigger. That's it. That's what I want to see. I wouldn't even show any of the other stuff. It should be that scene and this one, with the top open, and that's all you need to do.

Marvin Schweibold: One, two, three. The three-up is nice. On mobile, this quickly turns into a nice carousel, so it's very easy to translate to mobile. Again, the Primal strategy that JTEL and I would always use: if you have technology, company, news, careers, merge—if these are the things you deem important for your business, those are the chapters on the homepage. Show off technology, show off the company, show off news and careers. Don't make me use the navigation at the top. These are all elements you can bring into the homepage. From there, using very simple sheets, you can transition into any piece of content, and it'll make the whole thing feel more digestible and readable. Let's click through some of the pages.

Host: That's cool. Technology. What I like about this is it looks like real video. It makes me feel like this is real. It's not a bunch of renderings. It's hard to tell if this is real or just a plan they have. But no, they're actually doing the thing. They're building this.

Marvin Schweibold: Great example. There's not that much information on the technology section. This whole video could have been a piece of content on the homepage that says "Explore our technology." You tap into it, open up a new component like this, scroll through it, and when you scroll back out, you're on the homepage again. That interaction pattern would work really nicely. This is super cool, but you're relying on people to click on the technology page to see any of it. We're getting a little sloppy here with the cover images. There's a lot of stuff going on. It doesn't match the quality and style of the rest of the pages.

Host: Not at all.

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

Host: I think my takeaway is you've got to release Carousel Kit.

Marvin Schweibold: We have a carousel kit actually. Bravost has been working on one called Blossom Carousel. Blossom Carousel swipes and scrolls and comes in a multitude of different variations and versions. It comes as stacks on mobile. This is free to use and on GitHub. Any founders or entrepreneurs watching the show can use it.

Host: This is great. Everybody should use this. Instantly, your carousels will get way better.

Marvin Schweibold: Exactly.

Host: Awesome, Instinct. Thank you. Great work, Instinct. That does it for this Design Review. Marvin, thank you so much for being on.

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

Host: It was amazing to see the behind-the-scenes of your work and really get into your mind and how you think about setting the bar and leveling it up with not just the visuals, but a lot of the interaction and how users actually experience the work you do. Thank you so much for sharing it with us. That does it for this episode of Design Review. We'll see you on the next one. Bye, guys.

Marvin Schweibold: Thank you.