Y Combinator Startup Podcast
00:15:29 · Marvin Schwaibold
[00:15:29] S1: This is basically a a a redesign and facelift of our current admin experience with a with a new with a new home home design and an overall an overall facelift of basically the entire product, which we've been working on, at the moment. I think one of the more interesting things, that we've been exploring right now is just, how psychic and the merchant interact with each other. We have this concept of suggestions, psychic suggestions on on the home feed. These suggestions are brought to the merchant by us. We've identified opportunities and benefits that the merchant could do inside of their ecosystem, inside of of their of their of their universe, and we can show those to the user. And then as the user interacts with these suggestions, we basically kick off a conversation with Sidekick. We can directly manipulate the admin dashboard for the user, and we can show show those changes to a user. So we're showing a user right here. We think you should rewrite or re rewrite the description of of your of your product. Here's the here's the here's the suggestion that we think you should do. You can publish these changes, and, basically, through a conversation with Sidekick, you've directly manipulated your store. And it's... The concept is more, can we bring UI to the user and into the... Into into context versus having the user click through click through the interface? At the end of the day, there's a world where a a merchant can spend a lot more time on the home surface and use Shopify as as a dashboard to delegate and interact with with Sidekick and have Sidekick directly manipulate the store. Right now, what you're looking at is is is still a prototype environment. This is... There's a dev UI panel inside here, and, basically, we... We're we're building all of these. The the the design team is building all of these changes and and demos and and and ideas right into the interface here so we can just test and build on top of it.
00:17:28 · Aaron Epstein, Marvin Schwaibold
[00:17:28] S0: Mhmm. [00:17:29] S1: And it's it's become this beautiful process where once a demo is at a point where we kind of all align, everybody branches off and builds a version Mhmm. Of something that they think they... That brings value. And then we all come back together, and it actually lives all inside the same the same demo and the same link. Yeah. And it's just a beautiful way to to to to share ideas and and and context. [00:17:49] S0: You said designers are building this [00:17:52] S1: Yeah. [00:17:52] S0: In here. A lot of times, designers are designing. And they're not building, but it's... In in Shopify and your team and you, you are building a lot of the stuff that you are designing so that you can test it, so you can prototype it, you can see it on live live data, live experiences. Yeah. And that's a huge part of of nailing it and building something useful and making sure that it's great. What was your evolution from, you know, designing in Figma Yep. To now you are not just designing, but you're actually creating it out into the world to be able to test it and doing that full loop yourself.
00:18:24 · Marvin Schwaibold
[00:18:24] S1: In this specific case, admin has a a playground that we build. Instead of that playground, we test. That's not production code, and that wouldn't be allowed back into the main Yep. GitHub repo of Shopify into, like, our main repository. Having said that, though, AI has definitely gotten to the point now where, as designers, we are highly empowered Mhmm. And capable to to visualize any idea that we want to get our idea across. In a previous world, that that just wasn't possible. We we looked at the at at the Collins website earlier. A lot of that work in Figma, when we worked on it, still looks like still looks like this. Mhmm. You can zoom into any part here, and they're, like, highly detailed Figma screens that that that we're designing through, and this is an ideation process. I think this is a mixture of me, Marvin Schwaibold, and Jay Tull working on this project together. And you can just see the evolution of, like, as we're going through the inter... Like, as we're going through ideas and, like, trying out new things, these are... The the... These are too heavy and too expensive to test in code. We don't wanna test this in code right now because it would require an engineer to take a look at it and build it for us, so we tested all in Figma. Figma is the playground in the in the world we we were building everything in. We we were building it on desktop, and then we were translating it to mobile, and all of this had to be stress tested out in Figma first for a very long time before we would go and and bug the engineering team. A lot of the way I'm talking to AI or I'm still using Figma at the moment is I can get really far with a very broad sketch.
00:19:50 · Aaron Epstein, Marvin Schwaibold
[00:19:50] S0: Mhmm. [00:19:51] S1: Here's an example of a side project I've been working on over the weekend, which I can go into into detail a bit, but one of the things I wanted to build out for this for this project was a a two by three overview of these grass studies and these videos I took, and the interaction here is you can open up any one of these videos, and you can drag down to to close them, and it works works the same in the in the simulator. I I explained this... I I I described this to AI, and and and I was working in Codex, and Codex built this out for me, but the interaction wasn't interruptible. So every time I clicked on an asset and pulled it down, I had to wait until the asset was all the way back in its position Mhmm. [00:20:31] S0: And
00:20:31 · Marvin Schwaibold
[00:20:31] S1: sat down before I was able to tap on another image. And that's just not how you wanna use this pattern. You... This has to be very responsive very quickly. Otherwise, you'll get very annoyed with the interface very fast. Mhmm. So I just went into into Figma and kind of drew out very rudimentary simple boxes, like, when when you click on the box, red comes up, you can swipe it away. If as you're swiping away, you click on blue, blue now comes up. Mhmm. And you can click that away and you do it with green. And I think that's just like a a good example of of of how, at least myself personally, I'm I'm using I'm I'm using Figma more. It's more a scratch pad to, like, map out ideas Mhmm. And I give those ideas to Codex. And I and I use the Scratchpad a because it's easier for me to to decompile something, but also it's actually easy for Codex to decompile it if it sees it visually. It interprets that image, I think, to how I interpreted it. At least it understood what I was doing and how I was thinking about the motion. I couldn't articulate it via via text or voice, but I could draw it out. There's two parts of this that I think are important to call out. I think number one, Codex and all the current AI software is is... And the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing, And you have to be able to take a a concept or or something more complicated like the shader and break it down into all its little components. You have to be able to understand those components, and then you can put those components back together.
00:21:55 · Aaron Epstein, Marvin Schwaibold
[00:21:55] S0: Yeah. Just show us how you did that here because, so to be clear, you had a bunch of images [00:22:00] S1: And videos. [00:22:01] S0: And videos of of actual grass. Yeah. And then you wanted to create a shader Yes. That looked identical to that, but you could control and function like a shader. And so talk about how... Like, the different elements and what you had to go through to actually get that to look lifelike. [00:22:16] S1: I have a few screenshots here. Again, this is a good example of how I use of how I use Figma. [00:22:20] S0: Mhmm.