Episode Transcript
[00:00:00] Speaker A: Foreign.
[00:00:08] Speaker B: So for all of you out there, like vibe coding your SaaS apps or your next side project, you know that like design is one of the telltale signs that something is AI generated, right? It's the M dash of like the product world is like crappy looking design.
And today I have on Francois Brill. Francois is our head of product at Kastos and worked with them for like eight years and designed and kind of helped build almost everything that we have along the way and is like the person I respect most when it comes to like brand and design and style when you're building things online.
And so Francois is going to like roast us a little bit similar to the most recent episode with Brandon on the technical side, Francois is going to roast us on like design and UX and UI for Outlier. So because Outlier is a product I built entirely by myself with Claude coat. And so the question is kind of like can you build good product without a designer, without like a design system?
And what are the things that I'm fucking up that you guys can avoid as well? So Francois, man, I'm a little nervous but looking forward to this chat.
[00:01:19] Speaker A: Thanks so much for having me. Great. We'll take it easy, don't worry.
[00:01:21] Speaker B: Yeah man.
So I guess like to set the scene like you and clearly Design work with SaaS companies to create great looking product, great UI and UX and design.
Where, where did like you come in to help companies like us?
Where you see people kind of like falling down, like what. Why do people come to you and say like I need to hire you because.
[00:01:55] Speaker A: Yeah, so I think kind of like what you've been touching on is like we're typically your design partner and I find a lot of time it's we fit in naturally with teams that don't have an in house designer. And I think even as more of late like people are hiring smaller teams, are hiring designers less just because you can do so much on your own.
But I still find like you need the right systems in place to kind of make it feel like a system that kind of works together.
So a lot of times we partner with companies, typically SaaS companies, although we do a few other runs as well. But typically SaaS companies that's building products and anything from design and like we work on a subscription basis so we kind of your designer on call for anything that you need. But we work on the branding side, the marketing side and then the product like UX side and typically our first month to six weeks, four to six weeks of engagement isn't always like setting all the building blocks in place, like design systems, all the tokens, like everything.
Like, I would love it if figma is replaced and we have more of a streamlined process. Like, I think development is so much further ahead than a lot of the design tools. But a lot of it is how do we bridge the gap between figma and kind of thinking through ideas. Like we still need that kind of scratch pad for establishing what we want to create. And then I've always been someone that loves to build this stuff as well. So it's like the point of taking it over to code is a lot sooner in the process now, but it's still like, how do we get that branding, that visual, that aesthetic kind of right. And then we kind of bring it into the design tools and kind of teach AI also how we want to do things so that anything we do from that point forward it can kind of do with the same structures in place.
[00:03:38] Speaker B: Yeah. So we're going to touch on that last bit, I think towards the end of the episode because like I found myself like not having a system and would just build stuff and like each button would be different, each color would be different and all this kind of stuff. Even with cloud code being as good as it is here in the last couple months to where like have a bit of a system, but I know you're going to walk through like the system you use with the clients and we're going to see kind of like how we could improve like what we have going on at Outlier.
So. But. But I think I just want to dive in and like talk about your impressions of like we'll start with the marketing site maybe and like, I guess I bucket each of these into separate but related things like design and you are design UI and UX different things. And if so, kind of like how I kind of consider them all like slightly different but related and I don't know why.
[00:04:29] Speaker A: Yeah, I would definitely say it's definitely different things.
And the easiest way to kind of make the distinguish or distinguish between the two is like you UX is how it works and UI is what it looks like.
So definitely if like traditionally a project was always around, how do you think through how it works without really thinking what it should look like yet and then really honing in on exactly what it is how it works, kind of like that's where jobs to be done, all those type of frameworks come in and then once you have kind of that system stitched together, then you worry about what it looks like and that's where design systems and everything come in.
[00:05:07] Speaker B: Yep.
[00:05:08] Speaker A: Cool.
[00:05:08] Speaker B: Okay. Okay, cool.
Yeah, you want to, like, share your screen and just walk through what, like, a design and, like, UI professional sees when you see outlier. So this is the part where I sweat a little bit, but it's okay. Yeah, go for it. Yep.
[00:05:25] Speaker A: Like, I think there's a lot of things, a couple of things that stood out for me from a. I guess this is more on the UI side, design side.
Like, I think it came in as. As dark mode. Like, I feel like just because AI can do lights in dark mode, it always. It's a tricky thing for me because both of those are usually considered in a very specific way, at least when you design and put it together. And it's really hard making one of them look good, never mind making both of them look good.
So I felt like. Like, I would normally. I normally just choose one and kind of stick with that just because it's easier to make it look good.
I like the fact that kind of you chose a specific font for the headings and a different one for the body.
That's one of the kind of building blocks is typography. So how does that kind of fit in normally? And I know you probably don't put a ton of work into, like, a logo, but it's like, it does feel a little bit detached to the logo for me. Like, I don't see how that font and that logo kind of work together.
So that's something I would pay attention to. Like, how does that fit closer together?
And like, maybe one last thing on the light mode, dark mode, like, where you see, like, expert practitioners doing this really well, is something like this. You have a product screenshot in the dark mode. When you switch to light mode, you actually flip the UI of the product to light mode. It involves uploading two different screenshots, but that just makes it feel a lot more polished. And someone that has the system set to light mode, that's going to log into your product, I would guess that would be light mode as well. So it's more reflective of what they would see in the product as well.
So that's like a cool little, like, nice to have, I guess.
And then maybe one last thing that really bugged me is, like, those rounded input boxes and the square buttons.
And I saw that on mobile specifically, like, there as well. Like, it's. It's just a big, like, mismatch, if you know what I mean.
Okay. Where normally you would choose a style for roundness, and that's kind of part of the system. So the building blocks are normally like colors, fonts, shapes, and spacing.
So that if you choose a rounded input box, choose a rounded button or more of a square input box with a square button.
So that's kind of like the small things that stood out for me from a visual.
[00:07:50] Speaker B: And do you have a preference between the two, like, rounded or. Or, like, mostly squared?
[00:07:55] Speaker A: I would say it's something that, through the years, it's kind of something that goes in and out of fashion.
So it, like, rounded was a big thing, like, a couple of years ago. I think, like, square is coming back a little bit now. But again, I wouldn't worry too much about what's in fashion at this time. More, I would think more about what fits into the brand. So if you have, like, a lot of time, more of a editorial or fashion type of brand, rounded, lots of clean, white space makes a lot of sense.
Whereas maybe if you're doing tech, like, maybe square or round, it makes more sense.
And some. Some brands even get away with doing, like, sharp corners.
So I would say it's definitely something to consider as part of your whole brand. Like, how does it all fit together? How does it translate into everything else? Like, in your product? If you have cards, what's the roundedness on those. On those borders? How does that fit in with everything else?
Yeah, I think besides that, from a messaging perspective, it seemed pretty straightforward for me. What it does, like I mentioned to you before the show, I have not registered. I haven't logged in at all.
So it would be interesting to see how that matches what the marketing side says versus what I actually experience in the product. And I know you're shipping daily as well, so I don't know. Screenshots might be a little bit dated at this stage.
Yep. But, yeah, I think seemed pretty straightforward what I can do, why I would need it.
Yeah, Anything you wanted to touch on before jump in. Sorry.
[00:09:28] Speaker B: If you could just. If you could just go back up to the next. Yeah. So one of the things that, like, I have a problem with is, like, you know, we're doing, like, Tailwind and Shad CN and, like, it wants to use this, like, rainbow of colors all the time.
And you'll see when we log into the product, we have a Kanban board kind of concept, and the kind of header accents are, like, different colors. And it looks like a freaking rainbow because there's, like, six different columns in the Kanban board.
How do you feel about that? Or like, with Kastos, we have A handful of colors we can use. Two or three or four colors we can use with Outlier. So far we have like green and like a couple different shades of green. But like on this specifically, kind of like this is for folks just listening, it's kind of like a quote looking or like a product screenshot mock up thing. And it has like a green, a purple and an orange pill to it. It seems just like too much color. And I've tried to like reduce that without it just being white and black and green.
I don't know. How do you think about that?
[00:10:40] Speaker A: Yeah, I think color is definitely a big challenge.
But I would say as you're building up the system from a foundational level, you definitely want to kind of have your grayscale and there's a bunch of different grayscales you can pick as well and you can match that based on your primary color. So I would always say obviously you have a primary color and if you can't choose a primary color, you use black as the accent.
Some brands do that.
And then I would say like, you have like, you have the green, like that's your primary color and you really want to like zone in around that. And especially when it comes into a product screen.
And we can touch on some of the principles once we look at a screen like that. But it's normally you want to have everything as neutral as possible and then use the primary color to guide the user in terms of what action you want them to take.
And you normally use your primary color for that.
So it's really important like what you use and how you use it. And I think think one of the biggest challenges we had at casters is the primary color was red. And red means danger before the rebrand.
And it's not like you can't work with red, but you've got to be smart in terms of how you use your secondary level colors. And that comes to more like what you were just asking about. It's like, how do we almost use system colors? Like I would think about it as you have your neutral palette with your primary color and then you have like almost system colors, which are things that communicate function. So the easiest way, yellow and red. Yeah, it would be like, blue is info, green is success, red is danger, yellow is orange is warning.
So use that in terms of guiding the user through steps they take in the product.
But I think what you're showing or what you're asking about, like this Kanban board, like attaching color to the states could also make sense because the Thing you want to do with color is you just want to use it to identify very quickly.
So if someone looks at it, imagine they're looking at a Kanban board, but it's only text. Then they have to read everything to understand what's happening, what the columns mean, what's the highest priority versus lower priority.
And then we can use icons or color to kind of enhance that.
So the thing we want to try and enhance is the readability or scannability of a quick glance at a van board. And if we can do that with color, like I would say use that to advantage on that kind of level. But it's like you can't give everything color because then if everything's important, nothing's important.
Right, right, right.
[00:13:13] Speaker B: Cool. Okay.
Yeah. Is there other parts of the kind of marketing site or the homepage that you want to like, call out?
[00:13:26] Speaker A: Yeah, I guess.
Only other thing that it kind of stood out to me. Like I said, I know you, you probably didn't spend a lot of time on a logo and obviously there is something there, but it's like, it's almost like you have it here on the comparison table with that little crown. Like that seemed to me like we're going to champion your. Your content. Like that always looked like a better logo to me than the logo at the top. So I really just wanted to call out like, I love that little elements over there and almost how that could start working in a branding or design design kind of logo as well.
Love that idea.
Yeah. Nothing else really, just the buttons.
[00:14:05] Speaker B: Okay.
No, I totally see it once you mention that. I can't not see it. So. Yeah, I mean, if you're just listening, it's like rounded border radius for the input and then a square button. So I get the mismatch there. Okay, cool. Well, yeah, I'm super nervous if you want to go through the process of logging in or creating an account. So we are just. Yeah, so, yep, you can go to.
This is the login page. So just go to sign up at the bottom there.
And yeah, we did push like a quite big update today and I haven't actually tested it yet. So this will be, this will be like really fun to see, to see how this goes.
Nothing like doing live QA testing.
Yeah, it's the base on the podcast.
Well, Francois is just getting like the email confirmation while he's doing that. I'll just say I have found that the biggest gap in kind of AI driven development is testing in qa.
I was like, I can, I can pump out like I could build like if you had the whole spec you could build this whole product in a day.
But there's going to be, there's going to be gaps and there's going to be edge cases and there's going to be. With the database like testing in QA is still by far the most time intensive thing. It's, it's astounding that like even with using a fair amount of tooling around it we'd like still have to go and click around and stuff a lot.
[00:15:47] Speaker A: Do you use any form of like taste driven development or writing taste?
[00:15:52] Speaker B: Yeah, we have something like 800 tests in the product and we have a whole end to end test suite that runs when we go to merge into production and still like stuff is, you know, I hate to say stuff breaks like. Yeah, yeah.
[00:16:08] Speaker A: Okay. So in the onboarding side I should add a YouTube channel.
Yep.
I'm definitely not big on YouTube but I'm sure I have a URL.
More of a consumer than a producer.
[00:16:31] Speaker B: There you go.
And so folks just like just listening again like the, the first page is onboarding wizard. He always like to enter your channel URL just that's like the foundation from which we build kind of all our, all of intelligence. And then the page here is like we will go fetch and suggest competitors to track.
And so Francois is presented with a couple of competitors to track here.
[00:16:57] Speaker A: Okay.
It's something that could be nice like some of these names. So it's given me a selected competitors to track with three seams to be pre selected and I guess another five or so that's not selected that I'm guessing I could add in like some of these I'm familiar with, some of these I'm not. So it would be nice if, unless I'm missing it somewhere where even a link out if I could quickly see their channel or see a latest video or something to see like better ideas on something that might be interesting but it's, it's not.
Not something I can preview.
So that would be a nice touch if I could kind of see what I'm.
What kind of competitors I want to align myself with.
[00:17:46] Speaker B: Yep.
[00:17:48] Speaker A: Are you supposed to be able to select these?
[00:17:50] Speaker B: Yeah. You can't. No, no, no. Maybe you have to unselect one of the top ones. Maybe it's only going to let you do three.
[00:17:58] Speaker A: I see. Yeah. Yeah. Okay.
[00:17:59] Speaker B: Yeah.
[00:18:00] Speaker A: Okay. Oh, it says select up to three competitors. Yeah. Just maybe something to kind of.
[00:18:06] Speaker B: Yeah.
[00:18:06] Speaker A: Guide me that I need to unselect to select more or something or like. Yeah, yeah, okay. Let's just say those make sense.
Okay.
So I've signed up. I have a connected my channel, got some competitors.
I see. There is a getting started guide just went through onboarding. So there's another checklist to go through.
So add my channel. I did add my channel, so. Or even. Yeah. I don't know if this was. Yeah. So obviously I'm completely new to the process, so I'll talk about my assumptions. So I would. I've connected a channel. I can see pipeline, ideation, competitors, titles, thumbnails.
I guess the meat of the products would be generating ideas. I'm not too sure what pipeline is about and what ideation is about. Like what's the difference between those two?
So I would probably be drawn towards ideation first and try and generate something from here.
I guess that's why it's the next thing in there as well. So coming here, I can see there's formulas and ideas. So formulas being a star, winning formulas save patterns from successful videos. So I don't have anything in there.
I don't know if I need to add competitors again maybe.
[00:19:40] Speaker B: Oh man, this is terrible.
This is why. No, I mean this, this is we, we. I, I should have tested this before we, we rolled it out. But no, I mean, I'll, I'll. I guess I shouldn't have to describe it for you to be successful, which is like the big kind of product fail.
But yeah, I mean the kind of concept is like at a higher level is like you have your channel and that's like the thing that you're optimizing, right? Like that you're getting ideas and titles, thumbnails for a channel. Pipeline is like I do my work in notion and I have a board just like this. I'm like, this is dumb. I'm doing all my other work and here to run my channel now I should be able to just manage my, my channel in here. Getting ideas, managing state, collaborating with the team and the editors, all that kind of stuff. So that's the idea around the pipeline is. It's a, it's a Kanban board or a table. So like we borrowed the, the stuff from Notion around like just a way to manage it in a flexible way. So it can be a list or it can be a board.
[00:20:47] Speaker A: Yeah, it's almost, I think some of the stuff I could see from the screenshots on the marketing side as well. And one thing that stood out for me on this side, I've loved the idea of a pipeline.
For me It's a similar thing with all these tools that help you post to X or to Twitter.
I always find I have to go in there and just post or schedule new content basically. But sometimes I just want a scratch pad to go and put ideas down because sometimes I'll have a random thought and I want to put it down but I don't have the time to shape the idea right now and putting it like then I end up having a notion board that's separate like you say.
So I love the idea that the pipeline is kind of integrated so you can think about it more as a workflow.
One thing that kind of puts me off a little bit is like I have to create. It says create new video.
Which I don't know if this my idea is going to be a video yet. Like maybe it's a idea.
I can see that the video isn't. Has an idea scripting, recording like the whole workflow kind of status that kind of makes sense. But some ideas might be non starters forever because it was never good enough or.
Yeah, I guess that's one thing that kind of stood out to me there.
I don't know. I'm just going to put in. I think the competitors I put in was in more like like.
Like running marathon kind of channel. So it's like completely different use case. So let's just pretend we want to make a video like that.
How to run a pretend we super audacious want to do that.
So target published date. Interesting.
Yeah. Like I said, I love the idea of a pipeline because I can just as I think of things, plot it in and then I would guess keep coming back.
I would wonder how ideation is kind of linked into pipeline. Like can I use this to ideate and plug them into the pipeline? Like that would be ideal for me.
Find, extract, adapt. Yeah, add to your pipeline. Yeah. So I'm trying out. Let's analyze a video.
Let me get a URL quickly.
[00:23:15] Speaker B: This is the page I struggle the most with. And so there's a couple ways you can create ideas. One is the page you're on here which is like you have another video that you like and you're like hey, what's the framework that makes this successful or that that I like and how can I adapt this for my channel. Another one is like we call gap analysis which is like these are your. It's like just like ahrefs like this is the shit that your competitors have posted channels or videos about that you haven't.
And there's another one from like saved videos, like you save from. We have a Chrome extension and you can save from YouTube in there and then extract ideas. So similar to this one that you're doing here.
[00:24:00] Speaker A: Yeah.
Yes. I guess the kind of. The interesting thing for me would be.
And I guess it's. Sorry, it's not. It's not a great use case with me not really having a YouTube channel or that at least is targeted around a specific topic because I feel like for some reason it's thrown me in the productivity tips and it's trying to adapt this formula of how to run a faster 5K, five top tips into how to write better emails, five proven tips or how to sleep how to sleep deeper, five science back tips for how to learn faster. So it's thinking like I'm in a productivity life, like how to sleep better. Like that type of expert, I guess.
[00:24:45] Speaker B: And what's on your channel now?
[00:24:47] Speaker A: Pretty much nothing.
Okay. Okay, let's try. I don't think I have much published videos.
Like a few running stuff, I guess.
[00:25:01] Speaker B: Okay. Okay.
Yeah, I definitely take a look. I can imagine it's like it doesn't have enough context, but it should, like just from the description even.
[00:25:12] Speaker A: Yeah. What I was going to say is it would be interesting for me on my account if I could say, even if it was just something to set that almost like system prompt of this is who I am or this is my channel. This is what I want it to be about.
Yeah. Because I guess you can analyze the channel, but that would be interesting if you could kind of steer it in a certain direction or. I've seen some people that kind of pivot their YouTube channels from one audience to a different audience. So it's just something where if I had a little bit more of a way of steering the ideation at least in a direction.
But I love the different formulas of how you can do competitive gap analysis, analyze video, get all of these. Like it's just h. Yeah.
[00:26:00] Speaker B: So this page is like just a lot, you know, like how. How would you.
So just kind of walking through the page, like from the top left, there's saved ideas. This is like we have Chrome extension. You can save videos from YouTube in here. And this is like a bookmarks kind of thing.
AI ideas is like from those save videos, extract like, hey, that kind of idea could work for your channel in this way.
Discovery topic is just like a keyword search thing.
Analyzing a video is kind of a similar thing to the first one, but just like just paste in a URL and then the gap Analysis I talked about before, like I struggle with this page a lot from a UX perspective almost because like you just want ideas and there's a couple different ways to get at it. How do you think about like if you were looking at this and you're
[00:26:46] Speaker A: like,
[00:26:48] Speaker B: I guess the tenant that I have is it should all just be magic at this point with AI, all these pages and buttons and stuff, I don't think should exist and just be like here's 10 ideas that we have for you.
I don't know, I don't know. That's kind of ranting I guess.
[00:27:05] Speaker A: Yeah, I guess one of the kind of UX principles is cognitive overload.
We like to say there's just too much happening. I don't really know where to go or what to try out. So I just went into one of the like analyze a video because that one stood out for me I guess.
But at least from a structured perspective I would put out works at the top, but that would be a first thing. So if I get to ideation, just explain to me what do we do in ideation and where does it end up? Like I assume that you go to a pipeline and that was literally the last thing on the page because like again people scan a page top to bottom, left to right, at least in western cultures where we read left to right. So this is literally the last thing you would read on the page and that's kind of telling me where it will end up. So I would definite get that higher up I think.
Yeah, with, with AI and like kind of the chat interface like it's shifted the perspective of, of what people would expect a lot as well.
So I would almost, if I come into this page, if I had a something I can type a sentence into and say I want to generate ideas for this and maybe like, like a lot of them do it where they have like the three kind of bubbles below the chatbot for like if you completely don't know what to do, like type in like select one of these pre made templates or some people call it recipes or whatever.
So I'd almost say like if starting a new like I think you also have like the combination of starting a new one, like how it works at the bottom and like here's recent ideas and I would guess this library kind of fills up as I do stuff as well. So it's kind of like you're mixing new versus existing in a weird way. So I would also like make it more clear like this is where you go to generate new Ideas. This is kind of some of your recent ideas.
Like, these. I can't click into them. I don't know how to use them again. So I wouldn't know if, like, does it help to keep them there? Like, or is it, like, if I wanted to get one of these ones to my pipeline, is that something I could do?
Yeah, I would definitely think through how you think through, because sometimes you want to shape idea and you're not ready to pass it into the pipeline. So there might be a use case for keeping it here. But like you say, make the page more approachable in terms of asking the user maybe what they want to do and see if you can infer, like, which one of the methodologies you kind of invoke on the back of that.
That would be the magic way, like, you say, of how you could do that.
[00:29:35] Speaker B: I like the idea of the chat bot, like, or the chat interface. I think. Yeah, I tried out.
It's like every day a new one comes out. Twin. Did you see this one? Twin? So, yeah, anyways. Anyways, it was kind of big on Twitter yesterday.
[00:29:52] Speaker A: Yeah.
[00:29:53] Speaker B: It's like you create an account and it's like a chatbot. It's like, yeah, I want to automate some marketing stuff. And it's like, what do you want to automate? And it's like lead gen or conversions or sales or organic, social or whatever.
Yeah, I can imagine. It's like, hey, I want to analyze my competitors. I want to, you know, extract the formula from this idea, or I want to just research by topic.
That would make sense. And so, like, these are all separate pages that. That we have. Like, do you. Would you just get rid of all those pages and just have one kind of chat interface with, like a history on the side?
[00:30:30] Speaker A: I guess this page would be replaced by, like, the way I would think about is the chatbot kind of gets the context, passes that into something like this, and then the result of this. The result of you don't need this page because the result of this, after it's analyzed, is what you'll present the user.
[00:30:48] Speaker B: Yeah.
[00:30:48] Speaker A: So I don't know if it should stay in. Like, I wouldn't imagine it's a chat interface that you can keep chatting with.
Like, maybe it is, but maybe chat is just the entry points and you still get to a results page where you can decide how to shape the idea or added into your vault or into your pipeline later.
Like, one kind of challenge I found with the chatbot style as well is, like, it just introduces a new, like, Blank canvas kind of thing or paradox, I guess, where like, if you just present with it, like, I don't know what I don't know. I want to analyze a video. I don't know. I want to do a competitive gap analysis.
Like, it's, it's some things we don't know because we don't know. Like your tool has the ability to do all these things. I think you definitely shouldn't lose that. And that's why I think the kind of guided bubbles below the chatbot is very important in terms of showing off the most important things. Or you can have the chatbot has like all of them do it on the bottom. They have like kind of settings which are just like drop downs. That sets it in different modes. Like maybe the default mode is analyze the video, but you can switch that to competitive gap analysis or you switch it to different kind of modes. And that's kind of ways that we educate the user.
Like you would remember from traditional like, like user onboarding and SaaS. Like, we kind of build up into this aha moment where the user kind of snaps what the product does and that kind of like solidifies it in their mind.
And I think with a lot of these AI tools like that, the shape of that has changed a lot. And it's not this kind of moment that we build up to, it's this kind of moments that happen in between.
So it's kind of like you need to build all of those kind of interactions into all the little interactions in the products and to kind of help educate someone how to use the product, but also help them see the value in terms of what you can deliver with that.
[00:32:35] Speaker B: Yeah, I do think there's this like incremental value, like delivery that we need to be like delivering to customers. And it has to be really fast now. You know, like the concept of like, oh, we'll get you onboarded and fill out this 87 page questionnaire, like, just seems kind of silly at this point.
And that's always a challenge for me. And like, it was a challenge with us at Castos. It's like, how do we get somebody onboarded for their podcast at the same time making a bunch of assumptions and doing a bunch of work for them and giving them control over things. Like those two things often are like, opposed, you know, like, you can't be really opinionated and make a bunch of assumptions. Just do a forum and give them control easily, I don't think.
[00:33:19] Speaker A: Yeah, and the more you do, the less educated they are about what they could do, right?
[00:33:23] Speaker B: Yeah, yeah.
[00:33:25] Speaker A: It's like someone else I see doing this or like you said, kind of abstracted this in a, in a different ways. Like every they have that, that new. The newsletter, every they have that tool, Quora Computer, which basically like summarizes or groups all your email into like a daily summary, I guess.
And like I find it interesting because there you don't have a. There's no settings page, there's no UI for settings. You just ask the chatbot like, hey, add this to the safe list or a.
Yeah, moved it to the inbox and I saw that Kiran. Kiran. I don't know if I'm butchering his name, but the developer on that, he was like, I don't want to build a ui. I just want people to just chat to the bot and just ask what it wants. And I find it like hard sometimes because like I don't know what to ask for or I find it like it's such a tedious process to have to ask and like get a response and where I could just flip a button to say always add to inbox.
So I think there's still a balance to be what kind of do we give users to kind of just do drive by themselves versus just let the AI kind of figure it out for them or guide them in the right direction?
Yeah, I don't think there's any easy answers. And the process of UX is still kind of being shaped in this new world as well.
[00:34:37] Speaker B: Yeah, I mean that's like you kind of went through the, I think we call it agent onboarding. But yeah, the whole vision of this and we're, we're kind of like step one of probably four at this point is like most of the UX will go away here over time.
Like the. Because the goal like, okay, I built this because I wanted it right. And it's like I want good ideas, I want to stay on track and I want it to execute title and thumbnail for me so I can just like create this so I can literally. And then scripting would be maybe the next one. So you literally sit down, shoot a video, plop it in here and it's done. But I come like knowing what I'm about to say from like an idea and a scripting or outline perspective and then title and thumbnails. The stuff downstream that the editors, you know, kind of pair on right now, it's a bunch of screens and a bunch of buttons and stuff. But there's no reason, like we call it the agent because like if you Give it your channel and you give it your competitors, and you have some ideas of like, shit that you want your channel to do. It should go get those ideas for you, prioritize them, script them, generate titles and thumbnails just for you instead of you clicking around to a bunch of screens.
So, yeah, I mean, we're. We're like.
And then the. And then even further, like, we talk about this at Castos a lot. There are products where you want the person in the product all the time, and that's like HubSpot whatever whatever. And figma, there are products where, like, you don't want the customer there all the time. And that was Castus. Like, you want the person to come in, publish their podcast episode, leave, and then just come back, like, to check analytics or something. And I think this is kind of like the latter, which is like, I don't think customers should have to spend a lot of time here to get value.
[00:36:23] Speaker A: Yeah, it kind of makes me think. I saw a. Like, I think people are experimenting with all kinds of different things.
And I saw someone like, like, for me as well. Like, on my website, I do like to blog still and do everything in markdown, just because it's easy, because the text is in the code. And if you. You can create the right, like, help write the post and publish and everything in one kind of workflow, I guess.
But I saw someone like, literally just put a markdown file of like 10. Like, each line is just a new title or a new idea, and then every morning they wake up, there's a new kind of draft ready, like, researched, and you can plug it into Ahref and get the key keywords and write the blog post and do everything, generate a cover. Like, everything around that. Like, like this makes me think of that. Like, if you had a place where you just kind of come up with, like, you just add a list of ideas and tomorrow when you come back in, or we can email you tomorrow and say, here's 10 things. Because the thing is, like, people, like, I haven't gone through the COVID or even these titles.
Like, people don't know what they. What they like until they see it a lot of the time.
So even with the covers, it's like we can generate a bunch of stuff and say, choose the best one. Like, I think, like, you would remember, like, we always used to say, design is cheap, development is expensive in terms of time. And we would spend a lot of time in Figma and throw things away and shift things around. And by the time it gets to Develop. It's polished, it's perfect, and they can just implement it. It's almost like flipped on its head now, where design should just be a 2 or 3 out of 10. Like I say, Figma is just a scratch pad where we kind of develop the visual direction, then we just start coding because it's so much quicker. Doing a lot of screens and prototypes and things in code. And code is cheap now. Like, I can go in cursor and give it one prompt and give, say, run this through two or four agents and give me four different work trees with different solutions, and I can choose the best one in a matter of minutes.
So it's the same thing. Like, how can I. How can you almost take an idea with no UI and just present someone with, here's your title, here's your thumbnail, here's the outline, here's the script, everything.
And here's like, three different paths. Here's the curiosity one, here's the desire one, here's the timeless one. And they can kind of pick the best one for them.
I think the benefit of AI is the speed at which we can do these things.
[00:38:45] Speaker B: Yeah, Yeah.
I want to talk about design systems.
I've had my ego bruised enough.
No, this is amazing.
It's funny, I'm pretty public about building this with. With just like, you know, Vibe coding and stuff, and I think it's a really cool product. I'm using it and my. My channel is, like, doing really well. So, like, I think there's. There's like, quite a bit of value here.
But.
[00:39:13] Speaker A: But.
[00:39:13] Speaker B: But you know what, what is one thing I'll say about Vibe coding or, like, whatever. Building with cloud code or cursor is like. It's a. It's a velocity thing as much to me, which is just the same as what we just said. Like, it's just like, throw a bunch of shit at it and it will eventually be good is kind of how I look at it. Like, we built a whole product in about a month, and we're iterating on it and we're going to tweak design and we might just like, totally rip out the.
The ui. But, like, that is way. To me, that is. That concept is way more important than, like, getting it right the first time.
Yeah, because it's just like, do more.
[00:39:51] Speaker A: Yeah. And the value still lies in using it with users and getting real feedback. Like, you know, the old adage of build it and they would come. Had never worked in the past. It still doesn't work today. Like, even with AI.
But I think what AI enables you is to build something quickly, get it out there and then get feedback.
[00:40:10] Speaker B: Yeah.
[00:40:11] Speaker A: Like I said, because it's like code is cheap. Like, honestly, with these things, like next month you can throw all the code away and generate it again if you have a proper spec or you have the vision of what you want to build.
And I think that's not the user and their needs and what you're trying to build is not going to change. The code might change around that and the code isn't gospel anymore like it used to be.
So I think it's. Yeah, you're definitely right in terms of solving the right problem for the right type of user is still the ultimate goal.
[00:40:43] Speaker B: Yeah. Yeah, Cool. So maybe I'd love to hear like a, like a mental model or a framework perspective how you, how you work and how you think about working with your clients to create design systems so that we don't end up with like rounded inputs and square buttons and things. Like, consistency is so important with design and, and I find that like AI doesn't do that. Great.
So, yeah, walk me through that process.
[00:41:14] Speaker A: Yes. I mean, obviously, like I've been designing for 20 years, been through all kind of iterations of the web and how everything works. And yeah, building design systems manually teaches you a lot about how all the right building blocks that goes into, into like making the right piecing together the right ui. And I touched on it earlier, it's the basic building blocks are like typography, colors, shapes, like all of those things. But essentially all that's doing is mirroring back up into your brand.
So something I've been kind of working with or prototyping, I would say is like kind of building a system that builds like a, like I call it for now, it's like a design MD file. Like just like you have an agent's MD file that sits in your root. It's how do we capture your whole brand and your whole vision into a system that AI can kind of work with?
And I think most of the time, well, if you have a brand, you have a lot of taste, but the tools don't know about it.
And like you just said, like a problem with AI is if you just prompted to do things, you will get generic output, all of that. And the gap. And the gap isn't necessarily the tool or the templates that you're using, it's the language that you're using to describe that.
So this system is really built around. And you would remember we kind of did this manually at Cast is like go through a rebrand process where we would kind of try and capture what your brand is about.
And we had, I think the one exercise was kind of like, where do you identify yourself? Are you more tag viewer or are you more Swatch? Are you more Ferrari or Jeep? And it's kind of this visual like sliding and you can do, it's a sliding scale. So are you more in the Ferrari side or more on the Jeep adventurous side? And I think all of this says something about you or the brand that you're trying to be.
So it's really like how do you describe yourself and how do you capture what you as a brand kind of stand for? Because once you know that like building a design system is just an outcome from that.
So kind of there's a process to kind of put this all together.
So there's a discovery process to understand like what that brand conventions are, your goals, audience aspirations, visual reference exercises. Because again, I find people, there's a kind of take what the process a designer would normally go through in terms of showing you different examples or asking what looks good for you versus what you like, what you don't like. And a lot of this is what you don't stand for as well.
And then the taste profile is really capturing all of that. And then from a taste profile, we can spin out a design system. And the reason we have a taste profile is like I said, if you hypothetically are a fashion editorial brand, that's like white and black, big serif fonts, like lots of white space, that's the rounded buttons.
And again like within that, you have some wiggle room in your design system to say maybe here's like three to five fonts that work with that kind of branding system.
So you can kind of tweak it within the guidelines of still what is your brand and what you kind of stand for.
So this is just trying to capture what a normal branding and design exercise would go through. And then we kind of captured that in terms of like a design MD file. And then I found like doing a couple of tests with this, like, yes, it's got this like higher level stuff. And then we also go into more lower level stuff, like patterns.
Like if you're using like this last step would be if, like what do the actual design tokens look like if you're using tailwind versus bootstrap or shared cnc.
And we capture all of that in a design MD file. And that file is also transferable to your coding directory. But you can Also upload that into chatgpt or Lovable or anywhere else and it will kind of have that whole context of what to do, the colors to use, the fonts to use, the spacing, the rhythm and everything to create around that. What I found, like once you kind of describe what this should look like, anything that you go and build from that point forward kind of inherits the system, like even for you with the product that's already built, you can kind of bring it in, but then also say reevaluate all the components and kind of build it up from this kind of system upwards and can kind of get everything up to scratch.
Yeah, so that's typically what we work through is how do we kind of capture that to help you succeed and also to stand out. Because like you said, the output from AI normally looks very vanilla, looks very similar. So the more you can do to kind of make yourself stand out, I think the better. And a lot of what people are doing now that I see in terms of visual design or that we do as well is what kind of captures your brand, what makes it different.
And it's not just not being purple, because AI loves generating purple. I think we passed that phase.
But it's like, is there textures or patterns or something else that you can bring in? Is it the way that you generate images for your blog, what kind of makes you unique that kind of filters back into your branding system as well?
[00:46:38] Speaker B: Yeah, I found that last part really of being different to be actually really challenging to push the AI in that direction. I played around with a plugin called Impeccable Style. I don't know if you've played around with it.
[00:46:53] Speaker A: Yeah, I've seen it.
[00:46:53] Speaker B: Yeah, yeah, it's good in a lot of ways. Good like it does a lot of you of accessibility stuff and like, you know, kind of bad patterns.
But then like it, it starts sending you down this path of like, oh my gosh, like it really, really like bold and not, not productive ways is what I found. But, but, but it is like what I wanted, which is like, you know, it's funny, at Castus we always had the like project Blue Hair. Like I want, I want the like 22 year old blue hair with a bunch of tattoos like to design my website because that, like, that, that's kind of like what you need these days. I think, like you need a really weird website I think in some, for some brands.
And I, I just, I can't get Claude code at least to, to give me like a really wild site and maybe I'M trying to one shot it too much and I need to be like, these are the buttons we use and this is what constitutes that or this is the font and this is the hero section or something. But yeah, I mean, outlier looks really ordinary and I wish it didn't because I think you need like punch in the face kind of design.
[00:48:07] Speaker A: Yeah. And I think a lot of that's got to do with the input in terms of how you guide the AI. And that's where like I said we would predominantly still use figma in terms of the scratch pad of how do we create something or at least create the patterns that make your brand unique, make a difference. And then once you kind of figure out the patterns, then you kind of capture that into a system that, that's easy to roll out.
But I think that's still a step.
That's why I would love to automate the whole process. But I don't, I don't know like how to just automate everything and give every, everyone something that's unique.
So I still find like that's still a, not a manual process. There's definitely AI that speeds up a lot of the, the inner processes within that and extracting what works for someone, what doesn't. But a lot of it's still a personal taste type of thing. There's no right or wrong answer when it comes to branding. I think like you said, just pushing it in terms of what makes you unique is the important thing and kind of being consistent once you kind of go down a certain path.
[00:49:08] Speaker B: Yeah.
In terms of like AI tooling, like you're obviously building a lot like any, any kind of tool tips or suggestions you want to leave folks with outside of you can't say cursor or cloud code because then any cool things that folks wouldn't have heard of?
[00:49:27] Speaker A: Yeah, all the standard stuff.
Spend a lot of time like Claude Code cursor I use daily.
Yeah. Nothing outlier besides outlier itself.
[00:49:41] Speaker B: Are you using Figma? Figma's like Figma Studio or whatever it is?
[00:49:46] Speaker A: Yeah, I think. Yeah. Yeah, definitely. I find like that's good for some things.
Okay. Again, even there I find like, I use it a lot for like, I still do a lot of like illustrations for marketing sites. Like when you want to, instead of showing off product screenshots, do more like the stylized illustrations.
And even there I find you need a good example or two. And then once you take it to figma, make like you can say, make me a new example based on this kind of prompt then it's pretty good with that.
[00:50:16] Speaker B: Yeah.
[00:50:17] Speaker A: Yeah. And then I guess something I love to do. I don't know if it's something completely different, but it's like I love to develop like an image style for, like I said, just like blogging a little bit, just more like capturing what we kind of do.
So I like developing this kind of, like, image styles.
And I do, funny enough, I do all of this in ChatGPT.
[00:50:48] Speaker B: Okay.
[00:50:49] Speaker A: Yeah. So my process for that is something like, again, find references, find things that you like. Ask ChatGPT to kind of extract that back into a JSON format to explain what the style is and. And what it is and tell it. That creates a prompt that you can pass different subject matters into.
So once you have the prompt, then you can. You can create more images in a repeatable kind of fashion.
[00:51:12] Speaker B: Yeah, yeah.
[00:51:13] Speaker A: Or this was like a different kind of look for this one.
Like all of them are kind of different. So, like. Yeah, I don't know, on a personal level, like, to kind of solidify learning and everything, I just write, like writing some of these, like a series with a bunch of articles in it and like pushing the boundaries on the images and how to create that.
But yeah, that was something in, yeah, chatgpt that I found pretty interesting.
[00:51:36] Speaker B: That's crazy. That's crazy. Are you building those images in ChatGPT or are you passing that to Nano Banana?
[00:51:42] Speaker A: No, all in chatgpt. Like they're made of model. Yeah, that's what I'm saying.
[00:51:46] Speaker B: I haven't used ChatGPT other than with my kids in a month, probably. Yeah, yeah.
[00:51:51] Speaker A: And yeah, besides images, mostly personal stuff. And then Claude is the work stuff.
[00:51:57] Speaker B: Right, Right.
[00:51:58] Speaker A: Yeah. And I guess just the standard stuff like voice dictation is a lot faster than typing, so use that whenever you can.
But yeah, nothing else too crazy on the AI tooling front.
[00:52:10] Speaker B: Yeah, yeah. Cool, cool.
I mean, this is super helpful for me.
I think I've shared kind of you and I working together for a long time and a lot of my friends have and are working with you.
But I'll just say, like, as product is so easy to build, things like design become really important because, like, brand and differentiation becomes harder and harder because there's so much competition. So like, yeah, design and UX and just how something feels is the harder thing to do. Like we talked about, like, you just can't tell Claude code to make it sexy and look good, you have to have like a system around it. So.
Yeah, I super appreciate your feedback. Highly recommend anyone who's listening, who's like, fuck. I got to get on my design and UI and UX game to give Francois a shout. So it's clearly dot design. Yeah, it's the best way to get in touch.
[00:53:06] Speaker A: Yeah, that's it.
[00:53:08] Speaker B: Yeah. Cool, cool. And so we'll leave links for all the stuff in the show notes, but.
Yeah, man. Anything else you want to leave folks with?
[00:53:16] Speaker A: Nope. I think, like, you just said there, like, it's hard. You can't just prompt Claude code to do something. Because I think the thing that I'm also not struggling with, but the thing I'm realizing over and over again, it's like, if you can do it, everyone can do it. So it's hard for a reason.
And I think we need to be pushing ourselves to the boundaries of whatever is possible and try and get away from the mean in the middle, because that's what everyone else is doing. And you will never stand out by just doing the same thing as everyone else.
[00:53:46] Speaker B: Yeah.
Yeah. That's a great place to leave it. Awesome, buddy. I appreciate it. Thank you, Francois.
[00:53:51] Speaker A: Thank you so much.
