Prototyping AI Experiences

I'm super excited about this workshop. It's going to be a very interactive session and I have like a lot of exercises for you all to like understand the concepts and also to have like an icebreaker and get to know each other and I'm excited. And I was looking for a place, a venue because I one day I just woke up and I was like I should do a workshop and I didn't know any place here so I went like wework and stuff but pretty small space so I couldn't figure out and I just moved to Bay Area 1 1/2 years back but Gladys came to my rescue and saying that I used to come here for a lot of events and then I asked and they sponsored this venue for the workshop. So I'll pass it on to Gladys to talk a little bit about what they do here and their program and then we'll dive deeper into the workshop.

Hi everyone, my name is Gladys. I don't want to make it like a but I just want to do a quick intro from our side. This is our space for Middle University so hope you enjoy the facility here. So what we do is just we do a pre acceleration program like eight weeks. We will help pre founder or early to funder do basic numbers. So this is our next portal. We have about like a thousand founders in the community right now basically throughout the a week helping you you know value your idea if you are pre launching stage and also find your first customer and also prepare your future fundraising. So basically we have founders from these big tech companies like Lithia, Apple, Burke, Amazon, Topper accounting firms, you know those banking as well and then they go through our April program and then they will either guarding YC techstar those ecom incubators and also they raise money from you know Thunderstorm, Sequoia Florida Capital Zero stuff like that. And then we have world cohorts each year for each cohort we have like 100 teams. So quick recap 1.4 we have incubated queues 232 teams and then this year we have doubling the size. So right now we have 135 teams for the co format which we just kicked off last Tuesday. Here are some of our donor cabinets. Astroncvd Guiding Lights so yeah that's pretty much from my end. If you are interesting learning more please go to our website. We have tons of information, our curriculum FAQ very about us and also this is my personal link so if you want to take content with me. We also do have some Lineup events with VC like 500 global sci fi hashtag capital in July here as well. So if you're interested in joining us for the future events, please.

Can you take out that pot from there, the flower pot. Okay, thank you. Yeah, feel okay. So it's been a while I haven't done in person. I do a lot of like online workshop just whenever I kind of experiment with something new and then just share with the design community. So we're gonna today, you know, dive deeper into prototyping AI experiences with Play. But the theme is revolved around prototyping and how does that look like in the age of AI? And I picked the plate tool, I will dive deeper into that. We'll see how the hands on session goes. I just hit a roadblock last time last night that you need to have the OpenAI credit but we'll see. But I'll show the demo and some concepts of how you can use the LLMs and AI capabilities to prototype as a designer or a non technical founder as well. So yeah, that's the tool we're gonna use. But most of the junk is like doing exercises, learning about prototyping and lots of fun activities. So before we get into the presentation, how many here are designers, founders, investors? Okay, good. So it's mostly founders and designers. So I'll just make sure we kind of cater to that. So these are the outline of the workshop and the session today. So we're going to understand what prototyping is and we'll also do like an exercise and why is it important and how AI is kind of changing the products that we design and how it's creating like new interaction paradigm and understanding multimodal interaction. This might feel like a design school a little bit. So we'll talk a dive deeper into some of this interaction design and how AI is changing it and then we'll look into various tools that will help you prototype your ideas quickly. But for this session we'll dive deeper into a hands on project with Play. We'll see if we hit any roadblocks or stuff but I'll let you all feel comfortable with Play at least out of this workshop. Little bit about me I'm John, I'm a product designer. It's been seven years doing the product design. I currently work at JP Morgan and I also run my independent design studio called Human Inspired Studio where I consult early stage startup founders with the product, design their direction and do workshop for them to gain clarity. So have you ever thought of an idea or did you feel it was too complex for you to do it. So have you experienced that where you had an idea but you never pursued it? Anyone raise your hand? Yeah, so we kind of always have these concepts and ideas in mind, but we never prototype or go forward with it. And sometimes that's another problem. I used to be an engineer before I became a designer. So we also have this problem where we over engineered the product and nobody uses this or the users won't even know how to use the product. So if you are an engineer before, have you kind of experienced a situation like that? Yeah, so we kind of have experienced the situation as well. So that's where prototyping comes into a picture where you have an idea or a concept that you show it to your customers, your stakeholders and investors and get feedback pretty early. So you are building with your customers and not for your customers. And then it also helps you validate even before you spend a lot of money and development of fully fleshed out product just to find out nobody wants to use it or solves the problem. And that's where prototyping becomes like the tool for your communication with your customers. So there is this example when Dropbox had this problem where people wouldn't understand what the product is and they couldn't communicate what the the product is. So instead of doing something complicated, they just created a stop motion video of how Dropbox worked during that time nobody would even understand it. So when they kind of published something like this, it like made the user understand what their product is and that, you know, they started like a wait list of the product and that they got around. Just give me a minute. It so they got around like 75k sign ups for their wait list. And that resulted into the founders getting 1.5 million in seed funding. So a prototype need not to be always a product. It can have different form, it could be a conversation, it could be a video and it could be a paper prototype. It could be a prototype with the tools that we have today. So prototype can have different forms and shape, but we are so we are living in this time where we have more better tools where we can create very realistic and functional prototypes and product that you can validate your ideas quickly and things like that. So one of the tool is play. There are multiple tools that we can use. And also if you are a designer, it helps you to communicate your concepts, ideas or visions to stakeholders and even in your portfolios to communicate your ideas better instead of telling like a huge story around it. Showing a prototype can help you get your ideas very quickly. So we're going to do a quick exercise where I'm going to give you a prompt where we're going to pick a problem. That is people often forget to drink water. So I'm going to give you a sticky note. Be creative with it. You can draw or you can fold it and create a product that solves that problem. And maybe one or two people can share and pitch that with us as well. So here are the OLED spleen. And if you forget to drink water, the plant on the screen gets wimpy and once you drink, it's changed to slide. I have a different budget.

What I do is inside of the water bottle.

That's why prototype comes into picture. They don't have to be perfect, but they have to communicate your ideas very effectively to your audience, your stakeholders. And maybe you are innovating inside the company or you are prototyping outside just to explore your ideas. Prototype are the way to kind of bring that early conversation with your customers. Customers. So the evolution in AI is kind of like changing this, right? And how we are creating and creating the products and communicating ideas. Now it's like amplified, we have generative videos where you can quickly create videos like this to communicate your ideas. You can iterate on those videos to see how it evolves. So here he created like sticky notes on his desk so you can visualize that idea which you had not thought of and then even make concepts, UI and physical products and stuff through videos and communicate this idea. So we are gotten so many AI tools nowadays where you can brainstorm with it and get clarity on your ideas and things. We also are aware of tools like lovable where you can just write a prompt and your product comes to life. And if somebody told me this five years back, I wouldn't believe it, but this is the reality now where you can, with natural language, you can generate products. Also, you all might be aware of AI agents. So as designers and non technical founders, you also have tools like N8N where you can create workflows, AI agents of your own quickly prototype that ideas and test it out and see if it's actually solving the problem, improving the efficiency, making the workflow better without having to code. So even though the innovation in AI and all these new patterns can feel scary, but it's also giving us a lot of tools to kind of create full fledged product and validate it very quickly. And at the end, we humans are problem solvers, we designers, we founders are problem solvers. And these tools help us to kind of quickly test our ideas and Iterate it very quickly. So the next exercise is going to be we'll try to make it quick because Lovable is very quick. So feel free to go to lovable.dev use your laptop or your phone. It works on your phone as well. And then go describe your product idea for solving the water problem and then come up with like a product and maybe two people kind of show that to us how it looks. This is what I had done. So I had created this with Lovable, just with one prompt. I didn't even wipe code it where I could enter the water I drink and it shows the visuals on the top and also keep tracks of my daily goals and intakes. I can refresh it every day. And then I have like a web app that I just created with what do you say in single prompt. So we are kind of like have this tool nowadays, if you have not used Lovable, this is a good time to test it out. I'm not affiliated with any of this product. These are all my experiments that I'm sharing. I do have a Slack group where you can share your. What do you say the prototypes get feedback and stuff like that if you want, but it's completely optional. I'll keep this open later. But go to Lovable and then create a functional product in just like five minutes maybe and then two people show that to us. So I'm also doing this exercise just for you all to introduce to different methods and tools to kind of communicate your ideas and brainstorm. So selfie with your water bottle. You get rewarded, you get points. If you see some of the demos, there was like pictures, audios, videos, how we are interacting with the product is changing and that's where. And if you can see like the Google's Google Gemini, there's a demo they showed where he's fixing the bike and using the camera to figure out what's the problem with the bike. He's talking to the. What do you say? The phone. He's also talking to the AI. And the AI agents are also going ahead. And so and also Apple's recent wwdc they published, they announced where people are. Or you can use like transcribing and then using AI to transcribe the language. And language is a very big problem. And AI helps you to transcribe in multiple language in real time. And also the Ray Bans meta glasses, you use audio, you use videos and to talk with the AI. So what is this called? So this is nothing but multimodal interaction and that's becoming more and more prominent in the products that we use. So when products are heading like this, our prototyping regular like figma and stuff, they do have a place in the design process or initial stages or designing the product and design systems and stuff. But at some point they won't give you that capability where you can create products that are truly multimodal in nature. So multimodal is nothing but the way of interacting with the AI through multiple modes of interaction. So it could be audio, it could be video, it could be voice. And you might have seen that what do you say? The more different visuals and different modality of input you give to AI. The AI understand the context better and that's where the products are heading and that's the pattern we are seeing. I do have an ad. So there are different tools that helps you create multimodal interactions and we are, it's not, what do you say, hypothetical situation, it's the reality now. So Play is something that we can use. You can also connect to like LLMs and you can access your camera, you can access your audio, you can do transcribing and use the iOS ecosystem to create quick, quickly put together an iOS app and then test it with the users and also ship production ready apps as well through Shift UI integration and stuff. So we also have protopie, it's another prototyping tool. Google and Mercedes and some of the companies use that for prototyping. So this gives you capabilities both prototyping for Android as well as iOS where play is mostly focused on iOS and then and this also gives you access to your camera, access to like the sensors of your devices so you can create multiple modes of interactions. And it wasn't a primary thing before, but now if you see AI products this is becoming more and more prominent. Yeah, figma is a great way also to prototype your ideas. Lovable. That's what we tried. And Bravo Studio, Bolt and Reloom are using like natural way of like communicating and creating products and that seems to be a growing trend now. This is a quick prototype that multimodal interaction I created with Protopie where I kind of. And Apple, this was like two years back and Apple have launched like the visual intelligence where you kind of scan and it will tell you what kind of a product this is. And this is just a prototype just to. I was just exploring different sensors and things like that. So I feel like. But this is becoming more and more prominent now. So as designers and founders who are creating products they need to think of this. So this is not just because oh, it's a cool technology we need to apply but thinking from an angle of making it easier and more natural for your end customers. Because nowadays you can see like grandmothers also using ChatGPT and they're talking to it as if it's another person and then they communicate it so fluently where for them going somewhere and typing and searching would have been really hard. So it's making product more easier and more personalized and more accessible. And it's not just a slap of technology on a product, but also making it more easier. And as founders and designers we need to constantly think about that. And so proto what is it? Play lets you create prototypes. I had an idea of AI mentor app so I was quickly creating those concepts and ideas. It's not playing but I could swipe with different mentors and talk that to then LLM. So each mentor would have its own personality. One would teach you storytelling, one would teach you design philosophy, one help with your getting a job. So I just had an idea, so I'd written a book so I was thinking to use that as a rag to kind of train the LLMs and people could talk and stuff like that. So as a designer we don't have or non technical founders, we don't have the technical skills to build it. But nowadays it's changing where you can quickly create your products and test. These are some of the concepts that some of the community members have created and they look like Soreal has a prototype. And as designers it also helps us to think through the interactions, the visual direction, even the aesthetics and the delight how we create that to the users. And when you show these prototypes to executives and internal team, it's easier for them to understand rather than walking them through the figma screens and they don't understand what you are trying to tell. I think there's still a little learning curve but it's getting less and less every day and it's becoming, you know, an important skill for us to have. Play also got the Apple's design award this year and you can create like AI chatbots by connecting to OpenAI's API and they have the videos how to do that. So if somebody tells you to explore the AI product, you can use this tool to quickly put together your concept. This is only for iOS for now and you can use their system level components to. You don't even have to design everything from scratch. You have the system level components you can use to create a prototype. The app I had for hands on workshop today where you can use the OpenAI's LLM to generate the images like this based on the prompt. And our traditional design tool will never let you do anything like this. So this is very cool that we have the capabilities now before we go into the hands on workshop and the demo and for the workshop we also need that API for credits and stuff. So there's some challenges but let's see. But I'll at least walk you all through Play and you all can download and try it out and things. So before we go into the hands on session, do you all have any questions? Bolt and Lovable they still have. I feel like they're like every tool is so different. Like Bolt and Lovable is definitely good for web apps and for there aren't much good tools for like native apps. But if you're doing iOS app you can use like Alex sidebar that's like a LLM that goes with the xcode. You can prompt and create your product with ShiftUI and ShiftUI is very easy to understand. And then if you making like a mobile app you can use the protopie or Play to create your product. And with Play you can also create it to data and you have your own databases and stuff like that. So real APIs you can use actual APIs to connect. So I feel for native, if you're using iOS I would recommend Play. And if you are creating a web app, definitely Lovable or Bolt. And also now there is Figma's mcp. You can put connect that to cursor, bring your designs to actual through that and launch and stuff like that. But what kind of a product are you creating and see if they let you do some design system integration so you don't have to create all the components from scratch. So it pulls that design system components and creates a very good prototype. And then I think if you know some coding it helps to customize things a little bit. If you're creating like AI agents and stuff, I would recommend N8 N8N. So if also N8N you can connect this has a back end to your front end has a logic as well. So you can create like a custom workflow for example this one I'm not sure a lot of time mostly on the design process. But I don't get time to do all this. But it's just helpful to know to do it. But if you're making a web app, I think heads down Bolt and Lovable is the best tool. And Backend, you can use like N8N to create backends and stuff. Yeah, Yeah. I Think yeah, that's a block many people hate. I think the social media hypes it up or you can make an app in a weekend but if you don't understand the foundational tech it's really hard to do. So I would go back and learn some foundation of front end and some JavaScript to debug it or work with like an engineer who can help you a little bit with it. But you do need some technical knowledge to able to debug things. Yeah, it's easy to create, hard to like debug things. Yeah, yeah that's actually that's why I'm very disappointed with these tools for sure. But I think they're trying to solve it and that's an opportunity for them to improve on that. They're not very. I feel like they need to hire more designers to make it simple, easier. It's very technical driven. But Figma is also trying with the Figma make but it's the same problem as well where you can't really get it right. But the MCP seems to be Figma's MCP seems to be solving that a little bit. For example if I want to create something in lovable and I want a specific design so it won't understand the context right. So but if you connect that to Figma's MCP it will have the context of the design and then it builds out correctly. So yeah like context is. You all can download don't have to download the iOS 26 one but regular one get a free one. So this is a free tool only when you need multiple projects and you have more collaborator you pay for it and you can get, you know start working with for free. And by the way if you all want to connect further I have feel free to comfortable whatever you feel. The best you can connect me on LinkedIn and then I'm going to share this on substack as well. So you're going to get an email and then I also have a Slack group of like AI enthusiasts just sharing it like a special invite to people I meet in person and do workshops. So feel free to join the Slack group or connect on LinkedIn if you want to stay in touch anyway so let's go if you all want me to send this, you'll also get an email with all this link so no worries. So this is how play looks like when you go here you have different options to like learn look at some existing products and you need to have a Mac for it. If you have Windows it won't work and then these are different prototypes people have created. So here different scroll effects. It focuses a lot on the delight and interactions and stuff. So that's one good part. If you're a designer who care about all this, this is a great way. So it gives you a different this. The good thing about this is patterns are practical. You wouldn't create unrealistic patterns that differs from the human interface guidelines you will be able to use. That's very closer to Apple's design system. And then you can ship this as an iOS app as well, which is ready to use by people and launch it on app store and things. So here are some inspiration as well. People have shared so you can take a look at creating different effects and visual style. And if you have a photo app idea, there's a lot of good system level integration and stuff like that. So that's a little bit overview of it. So you go to your projects and then you can create a new project. And then if you are familiar with Figma, it looks very similar to Figma. And this is like a quick prototype that I had created and you can run it on like a simulator so you can actually see like an app. So I had had this idea of a simple note taking app where with the Sorry, my context menu went away. But I was using like proofread, generate email and things like that. So I was just exploring it. So you can go ahead and create like a new screen and that's where you get a blank canvas. Are you all following along or how are you guys feeling? Following along. Okay, nice. So the first phase is to design before you go into interaction and prototyping. So this is where you do the interactions, this is where you do the design. How many of them got play just on their laptop installed? Okay, nice. Anybody still in the process? And then also in the pro version they have generates the Shift UI code if you're trying to make the app. And then here canvas you can switch between light mode and dark mode and things like that. And also if you want a bezel, you can have a bezel here and then switch between different iPhone models and stuff. And you don't have to be worried much about that as you kind of do. You'll start getting used to it. And this is the interesting part here. These are like workspaces. So you have the design, you have interaction and then you have components, you have pages so you can switch between different. So you can click like 4, 3, 2, 1. So pages are like in Figma how you have your artboards and Screens. So these are the pages and then you can select between whichever page you want to use. So how this works is you can design things from scratch, but you can use the iOS design system. They also are doing the iOS 26 update, so you can pull all the components from here. So if you want to add an image, just drop a image here and you have the image there. So if you want to add a video, let's say you are making a video app and then you have it here and you can quickly build it out. You'll might in terms of like the stacks, but let's try to troubleshoot it as we do things. So for our demo app we are going to have very simple layout and then if you all are interested to learn more, we can do a deep dive session sometime virtually. But we are going to have this input field where you're going to create a prompt and then you guys are going to have an image where it generates the image. We have 15 minutes, we'll try to do it and then we'll do some networking and then we can take it virtually later as well. So I'll show you how to do that quickly. Let's type here field. So we'll take the text field and drop it here. So the way stacks work, it always starts from the beginning and it works its work downwards. Like how the code also works. And then this is like, has no like margin, right? So we can go here and this is where the you can adjust things. So I'm changing the margin here and then making some adjustments like this and making it sure it's in like the center. There are definitely more better best practices but will make it quick. And then the good thing is it gives you like system level colors. You don't have to worry about what color to use. So you can create a quick pick a color of your choice and then let me pick my own color. So I'll kind of do visible and then you can modify me. Change the corner radius here and then you have a search bar. So in the traditional design tool you did this and you can also test it with your phone and so you can show it to your stakeholders and validate your ideas and stuff. So if you click here it will show you like connect to your own iOS app. So if you have an iPhone you can connect and then look at what do you say it on your phone as well. So when you add this, the best part is you can type it here and it's like interactive from the day one. You don't have to Create prototypes with noodles like Figma and you have the behavior integrated upfront. So did you all get till here prompt are you got in? Yeah. So now the interesting part is interaction. We go here and then I can tap here and then you can add different interactions like this, which is cool. So I'm going to go to. Since we have like 10, just 10 minutes I'm just going to show as a demo and then let's take this online where we will dive deeper into this session. So feel free to join that Slack group if you want to dive deep. So let me show you the demo here. So. I'll show you how it works and then let's deep dive into it online session since we are running out of time. Okay, so this is what we were planning to learn today. So let me show you. So now you'll understand how design works and the next step is the interaction. That's where you kind of connect to like OpenAI's API and things like that. The product is like keep evolving a lot so there will be a lot of bugs and stuff. But if you go to interaction here and then here you can see these are like nodes where you can connect to like OpenCI API, drop your API key from OpenAI and then it will connect that to OpenAI and then you can. Go here and then select One sec. Yeah. So the way you like interact with this is like you can double tap on it and then enter things and drop a key here and it will tell you like okay, you can create more variables and things like that. We'll take this online, I will dive deeper into so you'd have like a hands on experience building this out and then you'll be able to create a quick prototype with that. So there is something called prefabs as well. So if you want to make a quick scrolling effect and things like that you can quickly able to create and for now so just to summarize, you design things, you go to interactions and then you add like different interactions that you want. Scroll, touch, long press, prefabs and OpenAI's API and you can able to create AI based prototyping and stuff like that. So it does has few limitations. But let's say that AI mentor idea I have, I could like easily prototype using play. So it kind of helps you where to communicate. We have seven minutes so what we're going to do is we'll take this online later. Feel free to join the Slack group if you are interested and substack I'm going to send you all the email and then we can connect on LinkedIn. These are the three ways to connect and things. So, yeah, that's about this workshop. Thank you for staying this long and going through the session. We have seven minutes if you'll have any final questions before we leave and then, yeah, we can wrap up from there.