The secret to better AI prototypes: Why Tinder’s CPO starts with JSON, not design | Ravi Mehta (product advisor, previously EIR at Reforge)

25:21Let's see. And yeah, this is a good start, but it's not sort of the level of quality that we want and that we need. Yeah, and it almost is a lot cleaner too. I was noticing in the old prototype, there's like a lot of little emojis and things that are filled in here and there that you as a product person or designer might not want in. But when you say like, here's my clean data schema, here's the media I want and the media I don't want, it gives you sort of a much more modern look and feel to this experience. And I think that's because of the separation of concerns. The tool has been able to focus on what is the right UX around this data set rather than simultaneously figuring out the UX, simultaneously figuring out the data set.

26:04Yeah. And what I want to call out is so many people that I've spoken to are really worried about getting design systems into these prototyping tools but have really underinvested in what you're showing, which is like the data models. And I was actually talking to somebody yesterday and they said, what context do I need to make sure I always give my PRDs and my prototyping tools to generate? And I said, get your engineering to give your definition of your data schema and just copy and paste that in. That is like one of the first things I think you should do because it's the right level of constraints around the experience.

26:37And you're just showing sort of the next level of this, which is populating that, extending it, and then putting it into a prototyping tool. And then what's really nice about this, and we just generated it on the fly, so I'm going to have to see where the code is. But if we go into the files, we have a nice breakdown. and if we go into lib, which is often where the data ends up, we have a sample data file. And so we can go in and we can change this. Let's say, you know, actually we want Marcus to be called Mark rather than Marcus. We can go in here and let me see where Marcus is. Change his name to Mark.

27:14Just need to reload. Ah, there we go, Mark. Change Mark. Same thing with the photo. Like, you know, this is kind of a good Paris photo, but we can probably find something better from Unsplash. So let's just search for Paris. This one's a great one. Copy the image address. Come back here. If we look, we've got the cover photo. We can just replace that. And then again, reload. Oh, it looks so nice. It does look really nice. It's coming together. This episode is brought to you by Persona, the B2B identity platform helping product, fraud, and trust and safety teams protect what they're building in an AI-first world.

27:57In 2024, bot traffic officially surpassed human activity online. And with AI agents projected to drive nearly 90 % of all traffic by the end of the decade, it's clear that most of the internet won't be human for much longer. That's why trust and safety matters more than ever. Whether you're building a next-gen AI product or launching a new digital platform, Persona helps ensure it's real humans, not bots or bad actors, accessing your tools. With Persona's building blocks, you can verify users, fight fraud, and meet compliance requirements, all through identity flows tailored to your product and risk needs.

28:34You may have already seen Persona in action if you verified your LinkedIn profile or signed up for an Etsy account. It powers identity for the internet's most trusted platforms, and now it can power yours too. Visit withpersona.com slash howiai to learn more. You're replacing these sort of piecemeal, but if you wanted to stamp out a bunch of different versions of this completely, you're working with just the data file, right? Yeah. So we can actually just go back into Claude. And now we can just say something like, now generate an itinerary for the same travelers going to Thailand. Yep. So I'll get that.

29:18This chat already has all the context. It knows what the schema is. It's going to go back out to Unsplash to grab all those photos. And it's going to generate a new itinerary. Same people, different trip. And then once we have that JSON file, we can actually take that and apply it directly to the prototype. I was just thinking about, again, going back to when we had to walk uphill both ways in Photoshop for our designs. Like, the speed at which you can create versions of your design is really helpful. And, you know, one of the things that I'm thinking about here is, great, go ahead and localize this in Spanish or go ahead and localize this in another language.

30:03Let me see what that looks like. Or even when you want to extend the design going back to, and maybe this just my engineering brain likes this, go back to, let's update the data model first and then let the design cascade out of the data model as opposed to putting buttons on the front end and then working our way back into the data model. I think is just a really nice primitive on which to standardize your prototyping efforts. Absolutely. And then it allows you to be much more flexible in terms of what you're doing, and allows you to work on the functionality separate from the data model. So for example, here, let's say I wanted to add a feature where, you know, I want to be able to see blank cards if people have time in between activities.

30:48So we can kind of see where the free time is in the day. it'll go in and it'll implement this functionality using that data set so if we want to put a new data set in here or change anything the functionality is totally dynamic rather than baked into the prototype which often is awesome i really like this and you know again we're looking at the data modeling the design of things but i'd be remiss not to mention how helpful it is to have the content researcher, especially on a consumer experience of what hotels should I put in? What attractions should I put in? What do they actually look like? And maybe your designer's been to Paris.

31:28Maybe they have not. And you certainly don't want them spending time Googling the top hotels in Paris for people in their 20s and 30s. This does, in addition to doing the scaffolding, it actually does the right research on the content and what to put in here and feels pretty realistic. And you might actually have two different itineraries, one for someone who's older who's going to Paris for their third or fourth time, someone who's younger who's going to Paris for their first time, and then you could test this feature with itineraries that really make sense for the user who's using the tool. So now we have the free time cards added in.

32:03We've got four hours, four and a half hours between checking into our hotel and our dinner. We can look at day two and see that we've got a couple of other time blocks in here. So now Claude is completely done generating our Thailand itinerary. And so we can actually just swap out the itinerary. If we go into the code, we can see, okay, we've got the data here. Let me copy that over. And then I could just replace this and then reload. And now we have a Thailand trip. That was thrilling to watch. All super easy. and those free time blocks stayed we have great photos here sophia and emma i bet he's named marcus though because we made that edit in a different tool so i think so yeah if we were yeah we look we overrode that but that's easy enough to change yeah that's easy to change we can go back here uh and update it this is awesome okay so to recap for folks instead of just prompting into your prototyping tool you can use your favorite general LLM tool, in this instance, Claude, to actually generate a JSON schema of the data that you want to represent in your experience.

33:20Go into your prompting tool, your prototyping tool, say generate a user experience based on this data, paste the data in, then use that data schema as the basis for iterations and updates, and then even swap out that data schema with entirely new content and watch how your experience, you know, adapts to new content or show that to different user segments or just really impress your boss. So yeah, you've completely changed. I think this is going to be just as popular as Ryan Carson teaches Claire how to appropriately vibe code. This will be you teaching me how to actually bring some data and structure to my vibe designing and prototyping.

34:02This is genius. I'm really excited. I know you're working on a blog post. if it's out we'll link to it but this is this is great and again one of the things I want to call out I am just a really lucky b2b enterprise girl we just work with like form fields and buttons like the fanciest I get is like my button has a gradient in it but you with your your consumer product background get to work a lot with media and one of the things that we're looking at here is the media aspect of it, the photos, really do make the experience. It does, absolutely. Yeah, we use the Unsplash MCP to get these real kind of like free stock images here into your prototypes.

34:45But I know you've also been working on generating great photos yourself. So you want to show us a little bit about how to use MidJourney again, unlike how Claire does it, which is just like float in the MidJourney model until something cool comes out with a little bit more structure than that? Yeah, let's do it. So I was playing around with MidJourney a lot, trying to get mock data for a project I was working on. And I was working with a designer named Finn Sturdy who has done just a brilliant job of kind of figuring out how to get stellar results out of MidJourney that feel really curated and feel like a creator director has helped to design them.

35:27And as we looked at how he was prompting things, we discovered a few things about how you can use really specific wording within your prompts to elevate the images. So let's just start out with a very simple prompt. And I think what's great about these tools is even if you're not very descriptive, you're still going to get pretty good results. I mean, you could see the content on MidJourney is already beautiful no matter what you're looking at. But let's say we want to just have a stock image of an office chair. You might just type in office chair. I know you're probably going to type in more than that, but let's see what it generates.

36:02So it's going to go through. It's going to look at references. These are still pretty nice office chairs. The photo is nice. But is it really usable? Like, is it the sort of thing that you would drop into a catalog or something like that? It probably isn't there. Yeah. And the way that we can get to a much better end result is to think about three things. the subject, the setting, and the style. So I'll use a new prompt. This will actually generate much better results. We're very clear about the subject that we want, which is an empty, stylish office chair, and then really clear about the setting.

36:42And the setting includes both the placement in the room and the lighting. Lighting is a really key part of setting that photographers think a lot about. And if you talk about the lighting in the prompt, you're going to get much better results. And then the last thing we want is a particular style. And there's a couple of things that can help with defining style. The sort of thing that a lot of people do is they try to describe it, but that's generally not how photos are tagged. And so the idea here is to think about, well, how would a photographer actually describe a particular photo? And they might use cultural references or location references.

37:20And then oftentimes they'll use camera metadata or other information about the shoot. And so in this particular case, we've added in a keyword for the film stock that we want to emulate, Fujicolor C200, which is a very warm film stock that generates really beautiful kind of like golden hour type of results. So I've started that generation. And now we're going to get something much more usable than the initial prompt. Yeah. And as somebody who was a early MidJourney user, I think MidJourney is like the gateway drug to consumer AI. If you have like a parent that is not yet bought into AI or does not understand what it can do, get them in MidJourney.

38:04You're going to get some weird Facebook posts, but they're going to be unlocked on something really, really special. But what I would say is I'm shocked at how fast it's gotten. It used to be so continuously slow and it's fast now. Okay, we got a pretty, I mean, I want that to be my office. Who cares about the chair? So beautiful. We've got the Italian kind of cultural cues. We've got the beautiful lighting. It's a great chair. This is definitely a usable photo. We've also, you know, I think one of the things Mid Journey excels at is giving you these different variations. So here's another one, another one, another one.

38:40All really beautiful and very usable if that's something that you're looking for. And what was key here is thinking about the prompt in terms of how a photographer might describe things rather than telling the AI what you want. So, for example, you know, we could change the setting and a photographer is probably not going to say, I want really soft lighting. Instead, they're going to describe the setting, which is an autumn, raining morning. So we're going to take this exact same scene and move it into a different lighting setting, which will change the mood quite a bit. And as one of the four people in technology that have a liberal arts degree, I have to call out.

39:25I do think this moment where we're using natural language to generate assets across the board, especially media assets, art literacy is really important. The ability to describe design is really important. I don't think people spend enough time articulating what taste means, articulating what elegance means, what quality, what style means. And even going through this practice of understanding reference art styles, reference devices like digital cameras or film, locations, I think language is now such a foundation for technology that if you're not investing in your linguistic skills, you're going to miss out on your ability to create these high quality assets, at least at this point.

40:13I totally agree. And I think the two fundamental inputs into creating something are taste and craft. And so taste is the ability to know what's good or what you want. Craft is the ability to actually achieve that vision. And with AI, it's completely 10x to everyone in terms of the craft. Anyone now can create photos or music or other things, but the taste is really important. How do we take that incredible power and use it to create something that meets the needs that we have, whether creatively or professionally. Yeah. And if you don't feel like you have the natural skills to look at a photo like this and say, what makes a photo like this?

40:49Make me feel this way or look this way. Hack is take this photo, drop it in like a clot or a chat GPT and like have it describe it back to you in language. And it can give you, it can kind of be a train and exercise ground for giving you language into these prompts. So I think people need to put a little effort into training themselves how to write good prompts and kind of backwards engineering out of things that they like, how they might describe them better. And as you develop that understanding, you'll also develop a vocabulary around it, which I think is incredibly powerful for prompting. Yep.

41:26Great. So we have a beautiful chair. It's a trestle desk. It is an autumn rainy morning. Another one. You've got the raindrops. You've got Milan in the background. Another one. Another one. So very quickly, we've gone from this kind of beautiful morning light to this kind of softer light, not by describing the light itself, but by shifting the setting and having the LLM kind of figure out what is the appropriate lighting for that setting. Now I have to ask a question. Is this photo and this prompt a reflection of being a parent that works at home and just imagining what it would be like to have a completely empty, clear desk looking out at Milan in a stylish, probably very expensive, easy to ruin, design within reach here?

42:18that would be amazing one could dream if only you could see my desk right now it's tiny and filled with you know battery and stream deck and all sorts of stuff exactly so again you can use mid-journey for commerce and for escapism here a hundred percent yes and then if you'd rather be in new york than milan you know here we've just added uh new york to the photo and said it's a modern glass american architect's office and what's interesting i think a lot of times people think a lot about the foreground in their photos but not what the background is and the background is just as important to providing a sense of place and now okay you know we go ahead so remind me so remind me again we need subject we need location we need light and just pick film or a camera as your cheat code.

43:10Yeah. So subject, what do we want? Setting, where is it? Which includes the lighting and then style. How do we want it to look? And you and I were hypothesizing before the show that the reason why film or camera could be a cheat code here is we suspect that these models are trained with a set of metadata that includes that information. And so when you narrow in on that data set, you get a more refined source of content that's generating these images. Yeah, absolutely. And let's show an example of that. So film stock is often metadata that is associated with a photo. And so here I've changed from the Fuji film stock to Kodak Tri-X, which is a really beautiful black and white stock that is very contrasty and has a lot of grain.

44:01So rather than telling the LLM, I want grain, which can often overdo it, or I want contrast, we're saying we want it to look like Kodak Tri-X. Oh, it is really beautiful. And you can kind of get a sense of it. It's not quite, you know, just creating something black and white. It's a little bit more than that, a little bit more contrast, a little bit more character to it. Yeah, a little bit more texture to it. And I think what's interesting here is there's a lot of meaning that comes with the film stocks. So not only are we getting a different style, we're also getting interesting compositions.

44:34And I think that goes to how these models were trained, because, you know, they're trained on data that likely has descriptions or metadata around the images, and they're trying to create a mapping between the language and the image. And so when you use photographic language, it looks at the higher quality photos in the data set. Well, and you know, there's a lot of and rightfully so anxiety in the arts and the creative professions around some of these tools. And when I hear you speak about how to get higher quality assets out of here, I think what a head start folks with a creative with a photography with an arts background, actually have in this kind of world where it still is really anchored in the technical aspects of the media.

45:23And so if you know photography terms, then you can actually prompt. I've seen a lot of like F-stop terminology and prompts, all those sorts of things. You can actually prompt it significantly better than someone off the street who's like, I know how to write code, but I don't understand what Kodak film stocks are out there. And so, you know, I just I do think for folks in the arts, I hope you can look at some of these opportunities and see where you actually have a leap ahead of folks and bringing something like this with your own creative vision, with your own photography or art, I think is going to be a really interesting way people build even, you know, more amazing things in the future.

46:00So I think it's it's awesome. And I want to see more people in the arts actually. Absolutely. And this lowers the barrier. Yeah. You know, and there's good things about that and bad things about that. Yeah. But I think it's better. You know, the more people in the world that feel empowered to create, the better will I'll feel, the better will I'll be. And not everybody can afford these fancy cameras either. No. You know? Oh, amazing. Okay. So you have a person now that we're generating. So I'm generating a person. So young man with brown hair and eyes at golden hour. And I've added in some of that camera metadata that you were talking about.

46:36So Leica, that's like an$8 ,000 camera, right? So that's not accessible to most people. But by mentioning it here, it puts the image generation model into the space that it's learned from around those cameras, which makes for more beautiful and more aesthetic images. 50 millimeter lens is a very common focal length for portraits. F 1.2 says I want a really blurry background, like incredibly blurry background. So it's kind of ethereal looking. And then Fujifilm Provia is a good portrait film stock that people use. And so here we've got a great image that embodies that. And we can go through and see the other ones.

47:15And all of these have sort of an aesthetic quality that's sometimes hard to get out of AI. They're not in that uncanny valley that we often see with images that are generated of people. And I can kind of show you, you know, if we actually generate an image, but we don't include any of that camera information, sometimes the results are more in that uncanny valley. Now, what I do have to call out here is all of these generated images have a quite mournful aesthetic to them. There's rain. These men are looking very concerned through these windows. And so I'm going to challenge you after we get off the podcast.

47:53I want you to email me a happy young man. Okay. All right. That sounds good. We will do that. Okay. Oh, so you did do a portrait of a young man with brown hair and eyes. So same original subject prompt without all the location, lighting, film, camera, metadata. And we got like sketches. Yeah, we got sketches and that's fine because we didn't tell the image generation model that we wanted a photo. And one of them is a photo, but you can see this photo kind of has that uncanny look to it. It's a little bit too perfect. And that's because it's trying to use the average of all of this training data rather than these photos, which are saying, okay, I want to actually be in the realm of training data around high-end photography.

48:43Okay, you have given us such a great way to structure our prompts. I have given everybody homework to study the arts to make yourself better at these AI tools. Let's do a couple lightning round questions and get you back to your very far breadth work of generating JSON to do AI prototypes to AI mid-journey photography prompting. So, you know, as I said, Enterprise Girl, B2B, Squareboxes and Forms. What I love about what you're showing us is there is a lot of work in consumer that can be really accelerated by AI. So there are two questions on this point. One is, what do you think AI PMs and product teams in consumer products really need?

49:31How are the skills that they need to develop different than maybe ones that are working in B2B? What do you think of the opportunities are for consumer product teams with AI? I think AI for consumer is incredibly exciting. And there's a whole lot of consumers that are using the big tools like Claude and ChatGPT. I think one of the nice things about B2B is the ROI of AI is usually pretty clear. Like if we can accelerate a workflow, we can make someone faster, we can make someone more capable. The reason why is very clear. And so businesses are adopting this stuff very quickly. For consumers, it's not always really clear what the consumer value proposition is and what problem you're solving for them.

50:14And not every problem is worth solving for consumers. So just because you can do it with the technology doesn't mean that people want to actually do it. And so I think really good consumer AI is grounded in an understanding of consumer psychology and consumer needs and then maps in, well, how does AI fit with that psychology and those needs rather than starting from a technology first solution and say, okay, you know, we can do all these really cool things. Let's create a consumer app around that and hope that we're solving a need. And so there's a little bit of magic, I think, that has to happen with consumer.

50:45And the way I think to do risk that is by focusing on those needs and really understanding the underlying psychology. Well, and I would just say, as you were saying that some of the kind of like psychological needs that I think are underserved simply by the limitations of technology, time and space on teams are like extreme levels of delight, which is how can you create really rich, engaging, delightful experiences, those like beautiful, you know, parts of the app that tend to get shaved off in scope reduction exercises. I think that's a real opportunity. And then the other thing is making products feel really personalized, either to the place you're at, the people that you're with or what we know about you.

51:29And so it doesn't have to look like a chatbot. But if you can think, what could I do today that I couldn't do yesterday for this user? I think there are a lot of answers where AI really unlocks your ability to deliver something very special, even if it looks like a tag or a comment or a photo. And so it's, you know, what is the tool behind the scenes versus what is the expression of the product? I think you can differentiate a little bit. And I think that delight piece is so important. A lot of times as PMs, we prioritize things as must have, nice to have, won't do. And I used to tell my teams, if we cut all our nice to haves, our product is not going to be nice to have.

52:07And we have to reserve some of our time for the delightful things that make the product stand out. Yep. Oh, I love it. Okay. And then my last question is, other than giving it reference locations where you fantasize yourself to be, when AI is not doing what you want, what is your prompting strategy? How do you get it back on track? Do you have any tricks? I try to be very encouraging. And I've been using the word elite a lot. So you are an elite sales coach or you are an elite photographer. And so just elevate its expectation to itself. And sometimes that will help it generate better results. And I think what it's doing is it's, a lot of prompting is like, what space of the training data set do you want to be in to get a result?

52:50And when you use the encouraging words, it's not that you're actually encouraging the AI, it's that those words are associated with really high quality output and it puts it in a different training space. Okay, I love it. And again, I think this is the prompting strategy of choice of parents who are always telling their kids, like, you can do, I know, So I know that you're a capable kid. I know that you can do, I know you can do your homework. Okay, well, where can we find you and how can we be helpful to you? Yeah, so I've got a sub stack. So Ravi on product, and you can find me at ravi-meta.com.

53:24You can also find me on LinkedIn. So please follow me. I've got a class that Brian Balfour and I launched with Reforge. It's on AI strategy. So the question that we were answering with that class, which is really important for us as product builders, is not only how do you understand the technology, how do you integrate it into your product, but what does this mean for you competitively? What do you need to do to create a product that's going to win in the market, I think in the most intense environment that we've seen in the history of tech? So we launched that in April, had a really great first cohort.

53:56We're launching the next cohort in October. So check that out if you're interested in learning more about AI strategy that's available through Reforge. Awesome. Well, thank you so much for showing us all your amazing workflows. They're very useful. Awesome. Thank you so much for having me. This has been really fun. Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show.

54:28You can see all our episodes and learn more about the show at howiaipod.com. See you next time. Thank you.