Text-to-UI demo with Galileo AI Co-founder Arnaud Benard + How to design loved products | E1749

24 May 2023 · 52 min

Ask about this episode

Ask anything about it. ChatGPT or Claude reads this page and answers with the times it was said.

Connect VO and ask about every podcast you hear, including the moments you saved. Add to ChatGPT · Add to Claude

In short

This Week in Startups - Episode E1749 Summary

Episode Overview In this episode of *This Week in Startups*, Jason Calacanis is joined by Arnaud Benard, co-founder of Galileo AI, who presents a demo of their text-to-UI platform. The episode also features Scott Bair from Lunour discussing how to design products that are loved by users.

Key Sponsors

  • Crowdbotics: Offers a fast way to turn ideas into code with a free scoping session for app ideas.
  • Hampton: A private community for startup founders providing expert advice and support.
  • Microsoft for Startups Founders Hub: Provides resources and up to $150K in Azure credits for startups.

Segment 1

Galileo AI Demo

Guest

Arnaud Benard

  • Introduction: Arnaud discusses the ease of working with language models now compared to three years ago.
  • Demo Overview:
  • Arnaud showcases how users can generate UI designs by simply describing them in a prompt.
  • Example Prompt: "Design me a chat interface where Ed Sheeran and Batman have a conversation about quantum physics."
  • Output: The AI generates a relevant layout, showing how the UI would look.

Key Features

  • Structured Data Output: Unlike generating images, the tool produces actual code and structured data which integrates with design tools.
  • User Control: Users can provide specific prompts for more detailed designs, allowing for features to be inferred by the AI based on common practices in UI design.

Business Model

  • User Feedback Loop: Arnaud discusses their gradual onboarding of users to gather focused feedback.
  • Pricing Strategy: Plans to adopt consumption-based pricing where users pay per generation.

AI Model Adaptation

  • Arnaud emphasizes the need to adapt to rapidly evolving AI models, highlighting the dynamic nature of the AI landscape.

Segment 2

Designing Loved Products

Guest

Scott Bair

  • Introduction: Scott presents insights into designing products that resonate with users.
  • Design Challenges:
  • 88% of online consumers are less likely to return after a bad experience.
  • 73% of mobile app users churn after 90 days.

Key Principles of Design

  1. Start with an MVP: Focus on launching a minimal viable product to gather user feedback early.
  2. Text-Based Requirements: Document functional requirements without getting bogged down by aesthetics initially.
  3. Wireframing: Create rough sketches to visualize the user experience before moving to polished designs.

Design Process Framework

  • Step 1: Text-Based Requirements
  • Define user needs and expected functionalities clearly.
  • Step 2: Journey Mapping
  • Create realistic personas and outline their journey through the application.
  • Step 3: Wireframes and Polished Designs
  • Utilize tools like Figma to create polished designs that are ready for development.

Best Practices in Design

  • Whitespace: Allow for plenty of whitespace to improve readability and usability.
  • Hierarchical Design: Use visual hierarchy to lead users’ attention to key actions.
  • UI Library: Utilize pre-built UI components to maintain consistency and save time.

Final Thoughts

  • Scott emphasizes that good design is not just about aesthetics but about solving user problems effectively and engagingly. He also highlights the importance of iteration and feedback in the design process.

Key Takeaways

  • Galileo AI is revolutionizing UI design with its text-to-UI generation capabilities, making it easier for creators to visualize their ideas.
  • Scott Bair’s insights on product design stress the critical balance between functionality and visual appeal—creating products that users love requires deep understanding of user needs and effective design practices.
  • The tech and AI landscape is rapidly evolving, presenting both challenges and opportunities for startups.

Conclusion This episode provides a wealth of knowledge on harnessing AI for product design and the importance of creating user-centric products. Both guests underscore the significance of feedback, iteration, and understanding user needs in the startup journey.

Written by AI. May contain mistakes. Listen to the episode to check what was said.

Hear the part that matters, and keep it.Open this episode in VO. Double tap your headphones to save a moment as you listen.
Get VO free

Transcript

Automatic transcript. May contain errors.

0:00And now it's what's really cool is that I think everyone is aware of the language model so it makes the conversation way easier. I think if I was trying to do language model research as a startup three years ago, it would be really hard. But today, because people can see the benefits of using those type of algorithm, I think it's a super exciting opportunity. And I really see that things keep getting better and better and better. So that's even more exciting. This Week in Startups is brought to you by Crowdbotics. Great ideas can change the world. And Crowdbotics is the fastest way to turn those ideas into code.

0:36Get a free scoping session for your next big app idea at crowdbotics.com slash twist. Hampton. Are you a startup founder or CEO seeking expert advice? Join Hampton, the private, highly vetted community for high growth founders. Get invaluable insights, connections, and support to accelerate your business at joinhampton.com slash twist today. And the Microsoft for Startups Founders Hub helps all founders build a better startup at a lower cost from day one. Startups get up to$150 ,000 in Azure credits, access to free open AI credits, free dev tools like GitHub, technical advisory, access to mentors and experts, and so much more.

1:18There is no funding requirement and it only takes minutes to join. Sign up today at aka.ms slash This Week in Startups. All right, everybody, welcome back to the program. we have another edition of our innovators and builders in AI. Today, I'm really excited about our guest because I love building product. I love UI, user interface, as we say, in the industry. And our guest today is building Galileo AI. His name is Renaud Bernard. Welcome to the program, Arnel. Yeah, I'm super happy to be here today. thanks for inviting me on the show and your uh french i can hear uh are you in france uh are you here in our uh the bay area i'm in san francisco i've been living in the bay area for more than five years now and yeah i'm from geneva in switzerland which is kind of a mix between france and switzerland this yes they yeah they do um and where is there more chaos right now on the streets uh paris or san francisco i kid i kid um let's not get political here it's too early for that but i mentioned you on um the all-in episode uh 115 when we were talking about your product i don't know if you uh if anybody mentioned it to you the the mention of course and i'd like to thank you again for the shout outs it was really a a huge catalyzer for our launch so really appreciate it i was actually just listening to it while doing an errand and i was like oh well that's us so it was pretty funny to hear uh the name of our company while doing something else and it was a nice surprise thank you again uh that's fine just leave a little room on the cap table for your best dj cow um so i always ask my team my producers here at this week in startups uh to show don't tell i was wondering if you could demo your product now because some people are listening we want to sportscast it a bit so if you could describe what's happening on the screen and i'll help you do that a bit if you don't do it perfectly so no worries there but if you are not watching right now good time to go to youtube.com slash this weekend and watch this episode there or if you're using spotify you can just click the video button or turn it sideways it'll play the video and you can always search for this weekend startups our video feed on iTunes.

3:50So we have a separate feed. Podcasting feeds are not perfect. But Arno, take us through. I see we have here a prompt box that says describe your design and then the word generate. So walk us through how your product works. Yeah, so our product is very simple. So we allow people to type the design they want to generate. And basically, I'm going to narrate what's on the screen. It says, design me a chat interface where Ed Sheeran and Batmine having a conversation about quantum physics, as they usually do. And it will say that it's a back and forth conversation. And basically what we do is that we use that prompt for our AI, and the AI will generate a layout for you that is relevant to the prompt you wrote.

4:44and it takes a bit of time to generate but then you will get the layout that makes sense. So you can see here Batman and Ed Sheeran having a conversation about quantum physics and it's all generated right now in the browser. So you can see there's the content, the images, and everything. And it looks like iMessage, right? Like an iMessage thread. Yeah, I mean, the most messaging interface, I would say have a similar design, but yeah. Yeah, or maybe WhatsApp or whatever. Okay. Exactly. And then another one is design me a page to create an event, asking users about event title, description, and I think it's time afterwards.

5:31And I think this example is interesting because you can be very prescriptive about what you want to generate. So before we're a bit on the high level side, where I say just give me some messaging, But what if you're a PM that is working on Facebook events and you really need those fields to be on the UI? Well, the AI is able to understand that and make sure that those elements are going to be on your screen so that you can have a bit more control when you generate the layout. So you can see here you will get the title, the description, date on time, and also a way to invite attendees and create the events.

6:06and now just to be clear um what are we actually making here are we making code are we making a jpeg uh what what exactly is being built here that's a great question when we first launched a lot of people thought we're generating an image and they're like okay i have this image now maybe i can you know paste in a slide or in notion doc or share it with my team but what's actually what regenerating here is actual structured data, actual code. So the way we see it is that it can interface with design tools that are already part of the designer workflow, but it can also generate code. So you can imagine that if you want to use this design part of your developer workflow, you can also do that.

6:51So it's not a JPEG, it's actual code that gets generated. it got it so another example here is the home page for e-commerce app selling cool stuff for techies um like camping gear uh so back to the san francisco theme we were able to generate an e-commerce app that can sell a camping gear and i could take these and i guess uh click a button to export it and i don't want to go ahead of the demo here but into a figma or maybe i could just publish an HTML page and you could host it for me just as like a little mock-up page? Yeah, so for now, we are doing an iteration. We are integrating with Figma.

7:34But as you can imagine, we are iterating with our users to see what they want to do. I think in general, in that field, everything is kind of open because Genetive AI is only one year old. So the way we see it right now is that we focus on two things, speed and quality. So we want to make sure that our designs are high quality and also that it doesn't take too much time to generate and that way the person making the designs can supercharge their workflow so you can see here on on the screen that it's able to generate a new commerce app and i used to work at fair the marketplace startup and i can tell you that collection is something that e-commerce website will have and popular items as well so it's because we are sitting on you know shoulders of giants and large language models, we're able to generate very interesting features.

8:25You're saying some of the features here that are put into the design were not explicitly asked for in the prompt. It's inferring that you might want a feature collection or popular items. Exactly, because that's something that is very popular in e-commerce. And I think that's the value that AI can provide, is that it can kind of expand the creativity of the person using it and get new ideas for features so you see here i put the same prompt a second time but this time the features are very different it asks about it shows for example the top deals so maybe if your brand is more about discounting and selling stuff in bulk you might do better you might do deals but if on the left you're more of a fancy brand and you want to do collections maybe you know a handbag brand something like that there'll be more the feature on the left so i think that's an interesting part of ai it's It's able to really show new ways of designing your product without you prompting about it.

9:25Amazing. It truly is impressive. Probably the most common challenge I hear from founders is related to building. Either they aren't technical and are searching for a technical co-founder, or they can code, but they're just spread too thin. This is one of the first major obstacles you're going to face, and I know how discouraging it can be. But there is a solution. Do you have a great idea, but you don't have a technical co-founder? Well, Crowdbotics can be your CTO as a service. Boom! Just like that. This means you can focus on building an awesome product and delighting your customers, rather than wasting your time on infrastructure planning, architecture compliance, and all that boring stuff.

10:03Crowdbotics also offers professional scoping to help you flesh out your project at the MVP stage and beyond. So cut off the hassle and get back to building that perfect product for your delighted customers. When you think Crowdbotics, I want you to think getting your time back to focus on product. Product drives everything in a startup. So let the folks at Crowdbotics show you how it works. Schedule a free scoping session and get your detailed build plan at crowdbotics.com slash twist. That's crowdbotics.com slash twist. How long have you been working on this? So we started the company in September 2022.

10:42it was me and my co-founder Helen and we've been working on this well since September 2022 and run more than 100 experiments but at the same time I've been working in AI for most of my career I was working on language model and language model research at Google and my co-founder was working at Facebook on consumer products but also led a team at Cruise in design so I think I think it's been brewing for a while, the idea of AI and design for both of us. But then the technology happened, LLM happened, diffusion model happened. And I think it created the perfect combo for creating that type of product.

11:25Yeah, it's pretty amazing how quickly this is moving. And so do you have users yet? Are you still in the laboratory building, essentially, this MVP? Are customers on the product yet? And then how do you make money? yeah so at the at the current point we we launched in february the we did the soft launch and we got a lot of people on the wait list and right now we're slowly letting people in so we're taking our time to make sure that we get the right feedback from people because if we let too many people at the same time you know we might get people that say i want e-commerce app other people that say i want food delivery and then we don't know how to focus prioritize the product so for now we're slowly letting people in and in terms of pricing what i've noticed with generative ai products is they tend to do a lot of they call it consumption based pricing which is you pay per generation which is kind of grouped as a subscription fee so we see doing something very similar where you would pay per generation and maybe per month you you get a certain amount of generations for free.

12:32Yeah. I mean, certain generations included in the price. How do you look at the sort of AI models? I'm assuming you're working with the chat GPT or OpenAI stack right now in Azure or something like that? Yeah. So the way I look at it is that we kind of change with the time a lot because every two months is basically a model that keeps getting better and better. So when we started the project in the product in September. We're working on a specific type of model. Then that someone releases a new model and we need to kind of bring our data to the new model. I think kind of every two to three months, we need to change the way we do things because the field is moving so fast.

13:16I think what's interesting is when I was working in NLP research at Google, there was maybe in 2018, a cool paper every three months that people would talk about. And now it's every week. So we need to make sure that we keep the pace and we're able to adapt to all the new models. And so the training data is whatever they trained it on, or are you making your own training data? Because there are specific websites, Dribbble, Behance, that have incredible collections. And I guess the question that will come up here is, hey, if you're coming up with a feature set and it's learning from the open web what other people's products are, how do those designers and UX folks get compensated?

13:59if the AI is now coming up with the answer? So have you given that thought? Yeah, that's a good question. I think the way we see it is in terms of the data, we don't use the raw data from Dribbble and trade a model on it. We created our own process to create that data set. I used to build data sets for Google Translate for languages that are kind of unknown or really rare languages. And we had to be really creative on how we create that data. so the the way we we generate that data for us it's it's all in-house we all do it ourselves and so we're not very concerned about i wouldn't say concerned but we don't fall into the maybe other problematic usage of ai where it uses directly the the other people's work as input because that's not what we do getty images is not your source material you could build up models of what apps look like based on your own knowledge of design etc so you can start making these definitions etc but you could also do a commercial relationship with dribble or behance or the artist on there and say would you like to contribute your designs and then link back to them and they could get traffic back so if i was using if i was a designer who had made beautiful i don't know e-commerce websites i might very much want you to feature some of my work in here yeah no that makes our sense and when you think about it that's that's how you know webs that's how templates work today in a way right where people sell a template on another platform and they take a cut out of it i think with generative ai the the interesting part is that i like to think that it generates completely novel things so i think the the hard part to solve is to say how much of the data was used to generate this versus is it something completely novel it's interpolated from you know just previous knowledge yeah this seems to be like a sort of interesting part of all this which is hey can we come up with new ideas and then where do these new ideas and then how does attribution happen um it and then there there are going to be ip questions i mean if it pulls you know who is who nobody owns the standard of a shopping cart a shopping cart is a generic device on the web but the execution of shopping carts there might be some copyright involved in there so you're going to have to be very thoughtful about that and then your your video went viral yeah and so you had over two million people watch that congratulations thank you and uh that's got a oh and i see you went to an accelerator previously yeah yes i went to south park commons i've never heard of that tell me about that accelerator how did you find out about it and what do they do there yeah so this accelerator basically is uh based in soma it was created by the former cto of dropbox and they have a big focus on ai and so that's a it's a great community where you will find people that are looking for the next step in their career towards entrepreneurship and you get to connect with people in the field of AI and they have a program called Founder Fellowship where they fund just a few startups.

17:15It's a very small cohort. I think my cohort had less than 10 people. And so a very focused program where they help companies find what they want to work on and what they want to build. Amazing. When you're the founder of a high-growth startup, things are chaotic pretty often, let's be honest. You face a ton of questions, you got problems that you don't always know the answer to, especially if it's your first startup. But you don't have to do this alone. That's where Hampton comes in. Hampton is a highly vetted private community exclusively for founders and CEOs. What's their mission? Founders mission is to create the most valuable and engaged community for high growth founders.

17:52And here are why some members have already called it life changing. When you join Hampton, their membership team carefully handpicks seven other members to join your core group. It's almost like a mastermind group, right? Okay, so now you got your core group, this group is like a personal board of directors for you. They're going to provide you with advice, critical feedback, and they're going to aim to help you accelerate your growth. I mean, that's what we're all in it for anyway, right? Personal growth. We want our companies to grow, revenue to grow, the amount of money we raise to grow, all that good stuff.

18:20So Hampton members run some of the fastest growing startups in the world, and you probably use some of their products like Morning Brew, Blank Street Coffee, Dribbble, and more. The connections, personal accomplishments, and a sense of belonging are what make the Hampton membership so special. Community is everything. You know that, like here this week in Startups is a community and here is an even smaller, more focused, tighter community for you to take a look at joining. If you're ready to scale your business, join the Hampton community today at joinhampton.com slash twist. I love this idea.

18:49Joinhampton.com slash twist today. You must be drowning in venture capitalists chasing you since everybody's in AI right now. Tell me about what it's like to run a promising AI startup right now in Silicon Valley. It's super interesting. It's interesting because when I used to do language model in 2018, no one cared about it. I worked on Gboard, the Google keyboard on Android. And when I was explaining things to people, I think they were excited because of the product itself. But then when I went into the technologies, they're like, what do you mean language model? Okay. And now it's, what's really cool is that I think everyone is aware of a language model.

19:32So it makes the conversation way easier. I think if I was trying to do language model research as a startup three years ago, it would be really hard. But today, because people can see the benefits of using those type of algorithm, I think it's a super exciting opportunity. And I really see that things keep getting better and better and better. So that's even more exciting. It does seem like, uh, yeah, the world understands this now and it's gotten just a lot better, you know, guessing the next word in Gmail or a Google keyboard was, you know, delightful, but it didn't have a huge impact on people's lives, but certainly, you know, composing an entire email does have a big impact, uh, or, you know, filling out a whole box of code or making a ux it does seem like you're also on a collision course with a couple of groups of people uh somebody like figma or canva and adobe they're all going to be looking at this and saying hey how do we incorporate these features into our platforms whether canva for people doing more casual designs uh or figma for doing more you know rigorous designs uh and the same with adobe's suite of products so how do you look at being an ai first company i think where people just want to go to is they just want to publish these pages to the web and then eventually build a functional website so you got people who are building code you're building front end eventually this is all going to come together in one product is it not yeah that's that's that's what we have been thinking about a lot i think when it comes to in general competition i think was just at the very early stage of that new generative ai revolution the way i see it i think that software is going to dramatically change i think the what we see currently in in the products that people use every day it's going to change right I use ChatGPT every day for coding I wasn't before.

21:36So I think there's going to be, in general, AI-first companies are going to have that advantage of being able to start from the ground up with AI. And in terms of what we can deliver, again, I think it's also, there's a lot of interesting opportunities, like you said. Like if we generate the front end, then the world is your oyster. You can do whatever you want. I think our focus for us is really quality and speed. And I think once we get really a threshold of quality that is really high and that people are super excited to use our product for that reason, then we can think about, like you said, other type of opportunities.

22:12But for now, we're really focused on design and generating beautiful UIs. And specifically web design, app design, because there's a lot of design out there. You got people who are making illustrations, images, movies. Yeah, interface design in general, that's our niche right now. Yeah, that seems, and the ability for it to write the code correctly is critical. And so getting that right is super important as well for you? Yeah. Yeah, I think writing code is a very interesting, you know, I think it's super interesting to think about. And I think the tricky part is like, how do you get it inside a developer's workflow?

22:51I'm a developer myself and I think developer is a crowd, in terms of customer, developer is a crowd that have high standards, so you want to make sure that you cater to those high standards. Yeah, for sure. Alright, listen, this is incredible how far you've come in a short period of time. We'll be watching. I'm sure you're hiring right now or looking for beta customers. If somebody wanted to try the product, how do they sign up? And if somebody wanted to join your team, what type of people are you looking for and how might they contact you and apply. Yeah, so for the website, you can go on usegalito.ai and for hiring, we're hiring full stack and front-end engineers right now.

23:30So if people want to join the adventures are excited about Largely Grid Models, they can reach out to me on Twitter with at Arno AI. That's my Twitter handle or just send me an email Arno at usegalito.ai. Fantastic. And did it have to be, are you an in-person guy? I know you're... Yeah, I think for us we like people to be in person for a few days a week because we have a tight collaboration between ai and design and it's super important for people to collaborate and able to iterate on our product i agree with you i think that the teams that who are who are brave enough to you know go back to an office and have a couple people sit around a table are going to do better now i know some people have gotten used to working from home and there's benefits to it but the people who work remote will have one set of benefits might be you know they can put more time and have less commute times but the people who are in person a couple of days a week they're gonna i think they're gonna iterate a little faster on their product no i think it's just because it's very visual in general right it's like sharing a design on zoom and then you want to quickly iterate between the design and the code and everything it just makes things a bit easier because of the visual aspect of the product you know i i saw you had tweeted as well um about auto gpt a lot of people playing with it and having a lot of fun with it um it is early days maybe you could explain to the audience what auto gpt is and your position on it yeah uh i know i know a lot about language model and i think auto gpt is like 10 days old so take that with a grain of salt but so i think the auto gpt is a way for a language model to to do tasks autonomously they can decide you can just send them a high level task saying and book me an appointment to the hairdresser for example it's going to be able to interact with an environment and perform actions basically so it's kind of like a personal assistant but as an ai I think it's interesting I know I wrote a tweet about it and I think my take was that what happens when it fails and of course we can think about very dramatic failures but just simple failures right well there's a time change and it books the wrong appointments or it just goes on the wrong website or it just does something wrong so my take was we should figure out a way to maybe that auto GPT to do something and then the person can just approve that it was the right thing maybe the same way that if you have to send an important email to someone you would just double check and then send it so maybe that makes sense how those models will go i i am playing with it myself i got the plugins i connected zapier on chat gbd4 and i sent a hello world email the other day and i had the same exact premonition as you and i'm i'm playing with kayak and it's like do you want to book this and yeah i was like hmm yeah this can go really in the wrong direction and it's sort of like the early days of autopilot so on my first my second tesla uh it had autopilot uh keep you in the lane adaptive cruise control and you could do a lane change but it confirmed it with you so it asked you to actually move the stick uh to make the change and to look in the mirror now on my model y i have the latest update of full self-driving and it's like how aggressive do you want us to be in changing lanes just in terms of what kind of riding style do you want and it is bulletproof as bulletproof could be it's a thousand percent better than any human could ever be and it actually shows you the side view camera it shows you you know uh the simulation and so this idea of just monitoring the ai i think is a very uh worthwhile guardrail to put in place and a thoughtful thing to put in place.

27:27I think you're exactly correct. But the auto GPTs are going to be super powerful. Yeah. And I think sometimes also language is not the best way to express certain things. So imagine I'm going on an e-commerce website and I want to say, I want to buy a jacket between$85 and$90. It needs to be denim. I think, you know, typing that in natural language is not the best interface versus just clicking on buttons. I think the same way with AutoGPT, where if you only describe a task, maybe sometimes there's a limitation with language. Maybe you want to have different type of interfaces to talk with it.

28:04Yeah. All right, listen, this has been an amazing discussion. I wish you well. Any good French food recommendations in the San Francisco Bay Area? yes because i you know like a good steak frites mules frites uh escargot you got a you got a favorite place uh i think shea mamon is pretty nice in general they do good uh steak and fries uh so that's that's pretty nice mom on yeah shea mamon ah i gotta check that out yeah what's your favorite restaurant in san francisco um you know i have it's it's funny you mentioned this um i really love Japanese food. I just got back from Japan. I couldn't go for a couple years.

28:46They had it on lockdown. And there is a specific dish called katsu. You know, like it's a... Yeah, yeah. And so not everybody's into it. It's basically like a fried cutlet, right? And there is a place called Cafe Okinawa. Mmm. Okay. Like the island. And it is on Townsend Street. So it's near you if you're in Soma. and uh they make a sando a sando is short for sandwich and they use thick white bread so when i was in japan i got uh pork uh tonkatsu sandwich but then you know they put some you know nice uh cabbage with it or something like some shaved vegetables but you can dip it into curry sauce so when you have katsu and curry so they have this sandwich oh my god i'll take you for it at some point when i get on your cap table and i get a little slice of that put a little investment in there i slide a little 250k for my fund into galileo you and i can have a celebratory tonkatsu sandwich um but they have the katsu sandwich over there and it's mind-blowing and you know this is one of the great things about san francisco people can talk about the problems but the absolute creativity and the food scene is just in the even in the bay area you go to berkeley or you go to napa or you come down to san mateo area where we have a lot of great asian food and so every time i go to the city now i find myself going to cafe okinawa um and uh getting their chicken katsu they also there's another weird dish that they do in japan where they make fruit sandwiches oh again with this white bread so you know like wonder bread is like a really weird bread here in america yeah they have a better version of it in japan they make their like their own white bread and then this concept of a fruit sandwich i had when i was in japan for the first time they put like a whipped cream but not too sweet and then they put strawberries or i had one with mandarin oranges and so they have a strawberry one there so you literally imagine strawberries with a very like not too sweet whipped cream on white bread oh my lord you would think it's like a weird thing it tastes delicious uh so it's very good yeah and also San Francisco, I feel like lately had a lot of amazing AI events.

31:07I've noticed that there's been a lot of excitement around AI. And I think every week you meet a lot of interesting people in that space. So it's been kind of a, I think, kind of a rebirth of the city in that space as well. I hope so. I was there Monday and I had my accelerator. I had seven companies and we were at Fenwick and West's office. And then I went over to Wilson Sincini's office on the Embarcadero. And we had our founder university, which is like people just making MVPs that haven't even incorporated yet. and i had about a hundred founders there and people the energy level was really high but walking between the two places one in the fi die and one in the embarcadero i mean there was nobody there and i just remember pre-pandemic the amount of traffic in the city to get out of the city took 45 minutes just to get from like the fi die or embarcadero out of the city half an hour minimum and you just i drove got out of the city in six or seven minutes i mean i just zip it was like it was like it's the middle of the night so it's i think that sometimes that's the creative destruction that occurs where young people come into the city or like storefronts are cheap and somebody opens up like a little passion restaurant like cafe okinawa they also have a egg salad sandow that i'm going to try so i'm rooting for san francisco uh and i'm hoping some of the really great efforts like grow san francisco and uh stuff gary tan's doing and david sacks are doing uh some of it but listen i hope to meet you soon and uh hopefully at one of these AI events in San Francisco or the wider Bay area and maybe we'll go to Cafe Okinawa.

32:35Sounds good. Yeah, thanks for everything and thanks again for the shout out and inviting you to the podcast. Thank you. All right. Talk to you soon. Cheers. All right, everybody. Tom Davis is here. He's a senior director at Microsoft for startups. He's a former founder himself. Tom, Microsoft has a huge, huge cloud computing, supercomputer, Azure. Everybody knows about that. But you've started to run giant LLMs. Maybe talk a little bit about what it takes to run a giant LLM in the cloud. And this is a lot of iron, isn't it? Absolutely. And really, thanks to the partnership that we have with OpenAI, for the last few years, we've been spending a lot of time really building an AI-focused supercomputer.

33:16We went back and looked at everything, the GPU configurations, the networking, to really get it right, to be able to run these large language models and make them available for startups through the Azure service that we now have that you can get through Founders Hub. And so, yeah, it takes a lot of compute power, but we've managed to optimize that. We've spent a lot of time working with startups to help them optimize things as well over time. And as more and more innovations come into this, we will make them available to startups, not just OpenAI, but anyone just starting up a startup. We offer$150 ,000 worth of credits so startups can leverage that and really get going on their journey.

33:57The Founders Hub that Microsoft provides offers$150 ,000 in Azure Cloud credits, all the development tools like GitHub and Teams, Office, all that great stuff. You get all that for free. Five minutes to sign up, six figures in benefits, aka.ms slash This Week in Startups. Thanks so much, Tom. Hey there, my name is Scott and I'm a partner at a branding studio, Lunar. and today we're going to talk about how to design love products. Let's dive into it. So first, are you ready for a scary truth? And this is that 88 % of online consumers are less likely to return to a site after just one bad experience.

34:38So what does that mean for us looking at the positive side of design? Is that the ultimate goal of us to design well is to solve someone's problem in an enjoyable way. So just creating good, beautiful designs by themselves is just art. However, it should solve a business problem. And so let's dive back into why that matters a little more. First is that 73 % of mobile app users churn after just 90 days on average. And this is typically because it doesn't solve their problem for the long term. It was nice at first, but then it died off. Next is that first impressions are 94 % design related. So when someone comes to your site, you have about seven seconds for them to see if what they're looking for is right.

35:24And if it looks like it can be trusted. And then if they don't find what they're looking for, they'll bounce. And finally, 38 % of users will stop engaging if the website's content or layout is unattractive. Again, spoiler alert with this is that people do judge a book by its cover. So looking at how do we design products, you probably have seen this quote before from Reid Hoffman, which is, if you're not embarrassed by the first version of your product that you've launched too late. And that means that if you are building this beautiful design and you never launch, then that's probably not as important as just getting out the door and get real feedback from users.

36:02So with the goal that we've seen that design matters a ton, but also launching matters more, how do we do both? The way that we do that is what everybody's familiar with, which is starting with the MVP. So here, step one, we design a smaller focused piece. And this is something we can test and make sure that it's solving a real problem in an enjoyable way. And then from there, as we grow, then we can scale and improve as we go on. And that's where we can build out, hire more people, and then make the design like we actually want it to be. So I'm going to cover a three part framework for what I use for designing great user experiences and beautiful designs.

36:45And I've done this at large banks and I've done this at startups and the same process works for both. So step one is I always start with text-based requirements. And this is simply just what you see in the little thumbnail. If you can see that, which is just text saying, when I go to log in, here's what I expect should happen. When I go to upload a photo, here's what I expect should happen. And I usually stick to something like Notion or Google Docs for that. Next is that I go into rough wireframes. And this could be a mix of a couple of different layouts. This is something like sticky notes, whiteboards, or honestly just using a napkin sketch does the job.

37:27And then finally, we go into making polished designs. My favorite is Figma, but you can use a bunch of other tools to essentially create the pixel perfect designs that will be handed off to your development team. So let's dive into each. The first one, text based requirements. And again, this is how I start every single product. And I always do this with clients as well. So when we talk about that they want to release a new feature, I'll start with just text. And the the test that I use for this too, which I'll cover a little later is, can you explain this over the phone to someone? So if you say, hey, at this screen, it needs to do this.

38:05And again, it's more focused on the function side. So how I do that is I start with a summary statement, which is specific group of people have x problem, and it would be and they would be willing to pay y dollars to solve it by and then whatever your solution is. Again, this is a business problem that we're solving through design. Second part is I'd focus on the problem, I really want to make sure that I'm focused on solving a real problem, not creating a solution in search of a problem. And then finally, with this is I would focus on the personas. So who are these people that we're solving their problems for?

38:42And then next I'd move on to what is the home run for them? So they, they have a problem, but what would it actually be for them to have a solution that they want to tell somebody about? And then I go into the requirements. And this is what I mentioned earlier is that I go specifically down step by step up here's what I expected each stage. And with this, I'd speak to the function verse, this is how it should look. So if I say, hey, they should log in and then continue to the next step, I didn't specify that the buttons should be look like this, or the color should be this, none of that really matters at this stage, it's simply focused on function.

Read the full transcript

39:22And I typically use Notion for that, but you can use Google Docs, Word, anything with just text. And to illustrate why this matters, if we take a simple login screen like this, so this is a, say, create your account. Might look pretty simple, we've all seen this. But if you're going to ride out each step of how this functions, you might pull out some things like this. Name, you need the first and last, you need both. Is it a required field? Or is it optional? What about email? What happens if they misspell it? They misspell Gmail. And how do you verify that? What message do you put under it? Is it really static, like incorrect information?

39:56Or do you say, hey, try again? What about are there password requirements? Do you require 27 characters? Do you require a special character? Or are you going to let them put in whatever they want? What's a sign-in text for the button? Should that be get started, sign in, let's go. What about social logins? What happens after they sign in? That's the next step that's really important. And what about a confirmation email? There's a lot with this too. Once you sign up, do you receive one? What software, what provider is it through? What's the text? Who is it from? All of those things need to be defined.

40:34Next, step two, and there's two parts to this one. I start with journey mapping. So I outline the experience from their shoots. And the first step with this is to make a realistic persona. So as you'll see on the side with the visuals, I use essential digital sticky notes and I use FigJam or Envision has a great tool called Freehand. And this is where I essentially make digital sticky notes. And I say, person A, let's call him Sam. Sam wants to try to go downtown from where he's at at his apartment. So he pulls out his phone and he opens an app, happens to be the Uber app. And so he puts in the destination.

41:14And so if I were to build out the Uber app, I would just simply say what he's doing, almost as if I were to watch a movie of this scene and everything is done by stickies. And that's where we map again, this is a, they do this, then they do that. And then they also, they may be thinking here, here's what they're frustrated by. Here's how I can make a home run for them. Some software I use again is envision app or freehand fig jam Miro. So you could use simply just a whiteboard with paper sticky notes. And then next, the second part of step two is the wireframes. And in short, this is simply just boxes and lines that communicate what all those steps are.

41:52And as you'll see from these images again, these are real ones that I've used and they are ugly. And that's by design. So here, make ugly, quick sketches. You should not at this stage, from my perspective, focus on making really polished wireframes. At this point, they're just the focus on what is the experience going to be like. And I've found I get better feedback on the experience if I make the wireframes ugly. Because as soon as I start making them look good, people are going to focus on what the button styles don't look like that. What color is going to be here? What mockup will be in this place?

42:24I don't care about that at this point. I just need to focus on does it solve the problem in an enjoyable way. Focus on this again. I use grayscale only. I don't even use any color when I do it. or I should say, unless you see here, there's colors, but it's more to illustrate that these are different objects, but that's not anything to do with aesthetics. I can use Envision app or freehand, Big Jam Miro, use a whiteboard or paper napkin, any of those work. Next is jumping into the polished design. This is what you came for. So make development ready designs. And something that designers have to learn too is that we as designers want to make everything pixel perfect.

43:05We work on our eight pixel grid and everything is just beautiful. Well, translating that to the internet where developers have to account for desktop, tablet, mobile, constantly changing screen sizes that we have. It's never going to be exactly pixel perfect, but developers are getting better at doing it that way. So my first step is I will build around five primary screens. So let's say again, if it's Uber is your app, I'd say probably one of the main screens is me putting in my address to where I'm going to go. And then the next, next screen might be what happens if I'm actively driving. And then maybe the other key screen is what happens when I'm done with it.

43:45And so that's about three screens. And if I were to do that, I would have some sort of map layout, I'd have inputs to be able to put in for my current address, my destination address, and then what happens when it's actively going. And what that does is I start building these key screens, and it gives me buttons, inputs, map, some sort of icon for a vehicle status. And I kind of create a rough hodgepodge of all these styles that I like. And that will show me all the styles that I will need. And then from there, I'll pull the rest of the components from ideally a really well defined UI library.

44:23So the UI library is essentially a set of buttons and colors and fonts and other components like inputs and drop downs and every other thing you can think about for software design. Here you want to just pull from it ideally and keep you reusing the same components as opposed to every single screen. You do not want to create a new button style every single time you go and have a primary, secondary and maybe tertiary options there. And then finally is that I would make sure that I have all those screens built out for all of the or all the layouts built up for all the screens that I'll need. So if I have a standard app, you probably have to take in consideration desktop, tablet and mobile screens.

45:04And with this, make sure that it's really clear about, here's a desktop version, here's a tablet, here's the mobile, because when developers go to build it, they're going to ask those questions about how does this scale down? Is the picture to the left still or in the text to the right? Or does it shift when it's on mobile? Design that all out, make your developers happy to give you a quick picture of Timewell, which is an app that I've designed. These are the screens that I've used, I've cleaned this up since. But you can see here all the variations of the different screens I've had to use. So like I mentioned before, if you're creating an account, what happens if you put in the wrong email, I have that out.

45:42Or what happens if you're uploading a photo? What happens if it's in progress uploading? What happens if there's an error? I have to think about all of those different states to design and see desktop tablet mobile all these breakpoints. And the simple part of this is that every single interaction has to be designed or at least talked about. So when we compare now, what you're seeing here, which is the design side to the tech side of here's what should happen function wise, and then you have the same thing map for here's how those same functions look, you have a really great way to design and develop a really great product.

46:19I can give you one tip is as you are starting to build out your platform, just start with a design system or UI library. These are pre built buttons, colors, fonts, drop downs, navigation menus, it's all the pieces that you'll need to start with. And they're usually like the ones I have listed here are around 100 bucks. and it is probably the best money you could spend when you're starting to build out. Don't waste time building buttons from scratch when you could use great ones. The reason for this is that people are going to judge your app just by glancing at it in a second. And if it doesn't look good, they're not going to trust it.

46:56So I'd say first version, just go with somebody else's prebuilt framework. It's kind of like using somebody else's Lego blocks just to start there. Finally, we're going to go through a speed round of resources here and then some do's and don'ts for design. So if you are looking to build out your designs and to make sure that they look good, I have a bunch of resources here. I'd go ahead and check those out. Let's jump right in to our speed round. So UI UX, which also means user interface and user experience best practices. So what it looks like, how it functions. These are pulled from Refactoring UI, which I'd recommend looking at their resources as well.

47:38First one is start with what feels like too much white space. As you'll see on the side, I find this a lot with developers, is that they build everything really packed together. You want to make sure that it breathes and that your eye can scan. People don't read, they scan. And so you want to give them the ability to see sections really quickly. And then it also just adds more air to your screens. Next is the Goldilocks spacing. So you might have too tight, you might have too big and both feel really cheap. But if you blend it somewhere in the middle, it'll feel just about right. Again, using an eight pixel grid is really great.

48:16Hierarchy. You'll see here that as you squint your eyes, a lot of times you can find what is the most important thing to look at. So as I scan the left one, all the fonts are kind of the same. There's not a lot of weight, but as I look at the right one, they've highlighted and pulled and made some fonts thinner and some wider. So the weights are thicker or thinner. And then you'll find that some text is larger and smaller. Again, you want to help them scan for the most important things. Here, simplify when possible. On the left side, this is really common to see if something like name, and then their actual name, job title, and their actual job title.

48:54When in reality, we know what a phone number is, we don't need to specify what phone and the actual number. So on the right side, you'll see just put in the value. So her name, her position, her email, her phone number. Next is prioritize values. So here, if you look at the left screen, chances are you'll see heart rate first. That's not what's actually most important. The most important thing is in context of this app is probably 82 beats per minute. Here's a clear primary action. So as you look on the left, chances are you'll see the red button first. If you want to position options to somebody, you do not want to put delete first, most of the time you want to put what is a positive way to interact with your products.

49:36And so here you do want to do what's on the right, which is you'll see first is publish and then edit and then delete. And these you'll also see focus for the next one, which are to set up a hierarchy of styles correctly. So you'll have a primary button, a secondary button and a tertiary button. And I would keep to one of these styles. So these three rows are different styles that I would use for an app. So I wouldn't intermix these. So I'd keep a blue button that's solid, I would have an outlined one, and then maybe a link, or it could have some sort of bare option. And you'll see those down below.

50:08A couple more, don't stress your content too wide. If you're like me and you've accidentally booked a movie theater ticket too late, you might have to sit up front and you can't see without turning your head side to side. That's essentially what we're doing here when we put our text or our content too wide or even goes completely off the screen. So keep it to a reasonable amount. Similarly is with text, you can keep paragraphs between 45 to 75 characters. And with text, more and more people, again, don't read. So keep it to where it's really skimmable, not too thin, but in that sweet spot. And last one here is the group, your text and your images in context.

50:51So as you'll see on the left side, there's the title, it says the one size fits all platform and then the neat is simple, there's the subtext, it goes as wide as the next content below, when in reality, this is grouped above to the other text. And so make sure that all of your content groups together. So with that, Again, I'm a partner at a studio called Lunar. And if you're at a certain spot where you are looking to raise a round or go to the next stage, we'd love to have a conversation. So customers do judge your book by its cover and we want to help you uncover the truths about that, how I can be more successful.

51:27Also, I am a founder, so I am in Jason's portfolio at launch. I did that through TimeWell. TimeWell is a platform where you can save family memories with your voice. I'd love for you to check it out. With that, thank you so much for your time. please keep me up to date with your designs. Thanks so much.

From the publisher

This Week in Startups is presented by:

Crowdbotics. Great ideas can change the world, and Crowdbotics is the fastest way to turn those ideas into code. Get a free scoping session for your next big app idea at http://crowdbotics.com/twist

Hampton. Are you a startup founder or CEO seeking expert advice? Join Hampton, the private, highly vetted community for high-growth founders. Get invaluable insights, connections, and support to accelerate your business at http://joinhampton.com/twist today!

The Microsoft for Startups Founders Hub helps all founders build a better startup, at a lower cost, from day one. Startups get up to $150K in Azure credits, access to free OpenAI credits, free dev tools like GitHub, technical advisory, access to mentors and experts, and so much more. There is no funding requirement, and it only takes minutes to join. Sign up today at http://aka.ms/thisweekinstartups

*

Today’s show:

Galileo AI’s Arnaud Benard joins Jason to demo their text-to-UI platform before discussing the AI startup scene in Silicon Valley (3:47). Then Lunour’s Scott Bair gives a presentation on how to design loved products from rough wireframes to a polished design (34:17).

Follow Arnaud: https://twitter.com/arnaudai

Check Out Galileo AI: https://www.usegalileo.ai/

Follow Scott: https://twitter.com/scott_bair

Check Out Lunour : https://www.lunour.com/

*

Time stamps:

(0:00) Arnaud joins Jason

(1:29) Discovering Galileo AI

(3:47) Arnaud demos Galileo

(9:28) Crowdbotics - Get a free scoping session for your next big app idea at http://crowdbotics.com/twist

(10:36) Galileo’s inception, its business metrics and its AI models

(17:28) Hampton - Join Hampton's community of high-growth founders today at https://joinhampton.com/twist

(18:52) Building an AI startup today

(24:43) Arnaud’s position on AutoGPTs

(28:02) San Francisco’s startup and food scene

(32:43) Microsoft for Startups Founders Hub - Apply in 5 minutes for six figures in discounts at http://aka.ms/thisweekinstartups

(34:17) How to design loved products with Scott Bair

*

Read LAUNCH Fund 4 Deal Memo & Apply for Funding

Buy ANGEL

Great recent interviews: Brian Chesky, Aaron Levie, Sophia Amoruso, Reid Hoffman, Frank Slootman, Billy McFarland, PrayingForExits, Jenny Lefcourt

Check out Jason’s suite of newsletters: https://substack.com/@calacanis

*

Follow Jason:

Twitter: https://twitter.com/jason

Instagram: https://www.instagram.com/jason

LinkedIn: https://www.linkedin.com/in/jasoncalacanis

*

Follow TWiST:

Substack: https://twistartups.substack.com

Twitter: https://twitter.com/TWiStartups

YouTube: https://www.youtube.com/thisweekin

*

Subscribe to the Founder University Podcast: https://www.founder.university/podcast

More from This Week in Startups

All 653 episodes
Text-to-UI demo with Galileo AI Co-founder Arnaud Benard + How to design loved productsThis Week in Startups · 52 min
Listen in VO