Loading summary
Transcript58 lines
- [00:00]
A
There are a bunch of mobile apps making 10k a month, 50k a month, 100k a month. And I've noticed that there's something in common with all of them. They stand out. So today's episode is a free course? Yes, it's free. And today we're going to teach you about animation, interactions, illustrations, iconography, widgets and how you can come up with ideas to make a mobile app that is well designed, that is going to stand out, that is scroll stopping so that your mobile app has the highest probability of success. Today's episode is with Chris. He's a single developer and he runs a portfolio of cash flowing mobile apps. 2026 is going to be a massive year for coming up with Vibe coded mobile apps. I want to see you build one that work. Chris Roque. He's back on the pod. It's been too long, Chris. By the end of the episode, what are people gonna get out of it?
- [01:10]
B
Yeah, well, first, thanks for having me, Greg. I think the main thing I want them to get out is how to make apps that stand out. Because right now it's never been easier to make an app. There's hundreds of apps coming out every single day and I want to teach people how to make something that stands out from the competition.
- [01:27]
A
And we're not promising you're going to make 10k a month, 50k a month, 100k a month apps, but we are seeing an increase in the amount of people, solo builders, building these apps that are generating life changing incomes. And I think one thing that they have in common is they do stand out in some way. So, Chris, can you commit to me that by the end of the episode you'll give us a few tips and that people can take away so that then when they build their own apps, they have a higher chance of success?
- [01:57]
B
Yeah, 100%. I can do that.
- [02:00]
A
All right, let's get into it.
- [02:01]
B
So I'll give a really quick intro just so people have context. So my name is Chris. I build productivity apps. I document everything on YouTube. So I have taught people how to build apps. I've also built a bunch of different apps myself. The reason I'm sharing them is it's not to plug them on the channel or anything. I just want to show that these are pretty robust apps. And one of the common reactions I get from people when they see the apps is they're like, there's no way a solo developer built these things like they are. It has to be a team behind them. And I wanted to show you guys that it is definitely possible, but it is really only possible because of all the AI stuff that's happened. There is no physical way that a single person can develop and launch these and maintain them and keep growing them without the help of AI. So I just wanted to share this so you guys know that I do have experience. There's, I think the biggest one right now is Ellie, which is a daily planning app. There is a couple thousand paid users that are using this thing around somewhere between like 7 to 10,000 daily active that are using this. So it's a pretty substantial app. And then right now my newest app is called Amy, which is a calorie tracking app. And the reason I want to bring this up is there are thousands of calorie tracking apps that are probably coming out every single month. And what's fascinating about this calorie tracking app is it has actually gotten a lot of attention recently. And that's why I've decided to build it. And the reason it's gotten attention is because I have crafted it in a way that it has really stood out among the calorie tracking apps. And we're going to go into some of the details of why I believe it stood out and how you can apply it to your own apps and everything I'm about to share. Even if you don't have a technical background, you can 100% apply every single one of these things. With AI with no coding experience, I'm very confident about that. Might just take you a little bit extra time to learn and grasp some of the concepts, but if you take the time, you'll be able to do this stuff too. Let's go into how I make these apps that stand out. So the first, the first thing, there's a couple things I'm going to share, but the very first one, which I think is probably one of the most important ones, is animations and interactions. And this is stuff to make the app feel more dynamic because again, coding has never been easier. Anyone can spin up an app in 24 hours and people are doing that. So that's why there's a flood of these apps. But a lot of them are very static. Like you can kind of tell that they're AI generated, they're vibe coded. Just like you can tell when an image is, you know, an AI image or a video. Consumers and users are also starting to spot when something was just a 24 hour vibe coded app. And so to stand out. And one of the tells of that is, or one of the tells that you can One of the things that you can see that an app is probably vibe coded is it's very static, it doesn't usually have a lot of life to it. And so a way to combat that is by having more animations and interactions. So I'll show you an example of what I mean by that.
- [04:57]
A
Sam Altman, the co founder of OpenAI just said that it is the era of the idea guy and he is not wrong. I think that right now is an incredible time to be building a startup. And if you listen to this podcast, chances are you think so too. Now I think that you can look at trends to basically figure out what are the startup ideas you should be building. So that's exactly why I built ideabowser.com every single day you're going to get a free startup idea in your inbox and it's all backed by high quality data. Trends. How we do it, people always ask. We use AI agents to go and search what are people looking for and what are they screaming for in terms of products that you should be building. And then we hand it on a silver platter for you to go check out. We do have a few paid plans that, you know, take it to the next level, give you more ideas, give you more AI agents and more. Almost like a chatgpt for ideas with it. But you can start for free idea browser.com. and if you're listening to this, I highly recommend it.
- [06:05]
B
So this is my calorie tracking app, Amy, and the way it works is it's kind of like Apple Notes where you just type what you ate just like you would an Apple Notes. And then on the right, the an AI is actually going to search and try to calculate the calories for you. And so again, this is a very interesting take on calorie tracking, but when I tweeted out this concept video, it absolutely blew up. There were so many incredible designers who were praising it there. I think about 800 people joined a wait list that I put up just from a single tweet. And that was after like 20 hours. Like I just forgot to put the wait list up, like put the link for the wait list. So even just at the tail end of that tweet, 800 people joined the wait list, which again is kind of crazy for a calorie tracking app because there are so many calorie tracking apps. It's like the stereotypical AI app to build right now. But this one did stand out, and I think it was again, because it was a bit of a novel concept, this pattern of Apple notes meets calorie tracking. But also it's the animations and just the feel. When people saw this, it really did stand out to them. Now I want to show you a concept that I tweeted the day before of the exact same app. This one had like a thousand plus likes on it. Like almost, I think 3, 400,000 views. This one had like seven likes on it. It's the same exact thing that I tweeted the day before. Same concept. Like, you know, you just type in, like, Apple Notes. You see the calories on the right, but there just wasn't as much attention to detail and the animations and interactions compared to the first one. So you can kind of spot the difference here. Like, if we go back to the first one you can see on the right. It was a very conscious decision to have it say, searching. There's that little animation with the gradient, the sources come down. All of that stuff is available on the right. I just didn't take the extra time to do it. But here it just says calculating, and it kind of shows there is a little bit of an animation where it kind of subtly. There's like a little tint as well in the calculating, but it's just not as subtle. Or is this just not as good? But that is the difference between, you know, a tweet that went pretty viral from my perspective versus one that didn't. Even though it's the same concept. And the difference between these two screens was about, like, it was literally 24 hours. Like, less than 24 hours, actually. I think I made the changes in, like, probably six hours. And again, just all vibe coded. Not a single line of code was written for this. But I think this is a prime example to show what happens when you go an extra mile with the animations and interactions. Um, here's another one for my budgeting app, Luna. This is.
- [08:39]
A
Oh, sorry, real quick on the calorie tracking one. I gotta be honest, Chris, when I saw you tweeted this and I saw that you're going to the calorie tracking space, I was like, don't do it, Chris. No. You know, having seen, you know, so much competition, you have the calai guys doing like $3 million a month and so many people copying it. But then I watched the video and it was just like. It was a breath of fresh air. That's what it was. And I think that that's sort of the lesson I took from this, which was, even if you have a highly competitive space, like hyper competitive, you picked literally the most competitive space. If you can figure out a new way from a UI and interaction perspective to showcase that information and allow users to interact with it. Sometimes it's, you know, it can go viral. TikTok X and that essentially becomes your MVP. Like, you don't even need to. Like, here you are actually building this app. But, like, you could have theoretically just, you know, created the video posted on X, see if people liked it and then went, build it. Built it.
- [09:52]
B
Yeah, yeah, 100%. I think you said it correctly. Like, there's so much competition here, and this is a really good way to validate it. The funny story is this was actually me validating it. So I didn't even plan on building the app completely. I just kind of posted the concept. This was just me from actually a throwaway project in 24 hours for me to play with Apple's liquid glass. I was kind of testing some things, and it just so happened that people really resonated with it where I was like, okay, I guess I actually have to go build it. But, yeah, that's exactly what I would do too, is just if you have concepts, just throw them out. You'll be so surprised. But the thing that does make things, these type of things stick out, it is the interactions, the animation, those details, that's what's sticking out. Because anyone can code now. Like, anyone can do it. So these details do matter. You want to move on to the next one, Greg? Okay, so the next thing is my budgeting app, Luna. Again, an insanely competitive space. The budget tracking space is so competitive. But people really liked the app that I built because I spent a lot of time on the interactions, the feel, just everything. I'll play a short clip of just some of the interactions throughout the app. But if you kind of get a sense that there is some motion here, it does feel a little bit different. I wish I could also convey there's a lot of haptics going on. So that's when the phone kind of subtly vibrates when you're clicking things. There's some page swipes there. All of this stuff is really minor. And even when you're watching this video, it probably just doesn't look like a lot. You're just probably thinking, oh, this just looks like an app. But I'll show some specific examples of the little details that went into this that I think really did add up and make for a better experience because people could have chosen another budgeting app. There's so many out there. But the reason people stick with this one and the things that I'm hearing over and again, over and over again from users is this just feels different. This doesn't feel like a normal budgeting app. So here's an example of the level of detail I'm talking about. And it's something that, again, you could totally just vibe code and do yourself. It'll just take a few minutes. So one thing I did was when you look at a lot of normal Apple apps and just default apps, when you transition between pages, usually it's just kind of an instant transition. Like if you're on your Contacts app and you click between the pages, it's just going to instantly appear. Something that I wanted to do was add a little bit of motion when you're changing between the pages. So if you look closely here, you can see that the pages are actually swiping left and right. And it's really subtle. So a lot of users probably won't even notice that this is happening. I'll slow it down here so you can see exactly what I mean. But when you transition between the pages, there's this little bounce and the pages are kind of shifting over. That minor detail was something I saw in another app. I don't even remember what the app was, but I remember seeing that. And I thought to myself, why does this just feel different? Something about this is just so nice. And I spent a lot of time trying to figure it out. And then when I literally had to record my screen and slow it down, and I was like, oh, my God, the pages are transitioning. That is amazing. So this is just one example of something in this budgeting app that I did. There's so many other things that I did here that kind of add to create this experience. This is the level of detail I'm talking about that I think anyone can do. And again, the way that I did this was I literally just was dictating into cloud code, and I just told it, hey, can you make it. So when we transition between pages, have it slide over? And then I just had to do a few more prompts to tweak it, to tweak the speed, the bounciness, but all in plain English, this is something you can totally do as long as you know how to describe it. Another example is dictation. So this is my daily planning app, Ellie. We actually have this AI assistant, and you can actually dictate commands to it. And something that I did was I added the ability. I added a little bit more animation to the dictation. So now when you click this icon, you'll see that the. The background turns black and kind of expands from the microphone. The icon here actually rotates from the send button to the check mark button. It's so small and subtle and like it needs to be slowed down to see it. But. But again, it's one of those things that when a user sees it and feels it and then compares it against another app, they will. They might not know exactly what's happening, but they'll be like, why does this just feel better? And again, you do this across 100 different things in your app, it will add up. People will remember these things. They'll remember the feeling of using your app. And I think that this is just another example of a small detail and same thing here. All I did to do this was I just told Claude Code, can you make a black background come from the microphone icon and can you rotate the send button into the check mark? I think this one was actually done completely in one shot in one prompt like this one. I was actually very surprised that it got it, but it's because Claude Code, for example, is very well trained at interactions and animations, which might surprise a lot of people. It is very, very good at this stuff. Apple has a great animation library that's very well documented and so it can actually do these custom animations if you know how to describe it.
- [14:52]
A
I think back to that one. I think, I think you're totally right in the animation. Like, it's smooth and it's fresh. But I also think there's a few other reasons why this resonate. This whole concept resonated with people. One is you created a mascot, which we're seeing that as a huge trend right now, which is like, especially with AI first apps, like, people see. See it as like an animal, a person, you know, someone they're talking to. So having that, you know, I think helped. One, two. It's Voice first. It's a Voice first app and I think that's it. There's a huge opportunity to look at. You know, I'm sure, I'm sure there's a ton of planning my day apps, but you know, how many of them are legitimately Voice First? I don't know. So I think you did that well. Third is you didn't just have a text box that said ask anything. You had contextual buttons to get people to actually engage what's next, plan my day, etc. Etc. And I think that's important because when users are looking at a blank screen, they don't know what to do there's a reason why Google has the I'm feeling lucky button on Google Search, right? It's because they know that sometimes people show up to Google or whatever and they're. And they just don't know what to type in.
- [16:15]
B
Yep, yep. 100%. I, I think that's something that if you're especially someone who's kind of just vibe coding for the first time or making an app, it's one of those things that's really probably overlooked. Like they probably would not put the chips here or, or, or understand the significance of this. But yes, that this is like a lot of thought went into putting these chips here when I coded this. A lot of thought even went into what specifically should I put in here. So I did study a ton of like ChatGPT Quad. I studied all of these apps to figure out what are they doing, why are they doing it. But yes, these details like it does actually not even for the feeling it has a direct impact on the usage. Like people will probably click these things and there's just a higher chance that they'll, they'll use it more properly if you have this. Yeah, yeah. Anything else on this one, Greg?
- [17:04]
A
We're good. Cool.
- [17:05]
B
Okay, sweet. Cool. The next thing, I'm glad you actually brought up the mascots and the illustration because that is going to be the next thing we're going to talk about to make it really feel like a more premium and just a different app. But two more examples on the animations interactions in the calorie tracking app that I'm building. Another thing that I added was this streaks feature. So this is where you can build a habit. Gamification exists in Duolingo, even in Snapchat, in a lot of different apps. Gamification is a very powerful way to build habits and increase retention. I decided to actually add a streaks feature here and then for fun, a little badge that you can actually unlock as you start increasing your streak. And these are hand drawn by my fiance. So very fortunate. But I'll also show you how to make mascots like this using AI because that's what I was doing originally. But something that I coded which a lot of people were surprised that I didn't write a single line of code for. This was when you unlock the badge, you can actually click it and they're based off of cat memes, but you can actually drag along kind of like it's like a holographic sticker type thing. It's kind of based off of like Pokemon or just these holographic stickers that you can unlock there. This was completely done by Claude code as well. And all I did was tell it can you recreate a kind of holographic sticker where I can move my finger around and I can drag along the sticker. And I was so surprised that it was able to get this in I think two prompts. Again, because Claude is very well trained on Apple's technology. Like this was using something called Swift Metal, but it is very well trained on this. So it can make these really cool interactions. But I just don't see a lot of people doing it, which surprises me because I think, I think people assume that it can't get it because this stuff does look very complex. But if you know how to say it, if you know how to break it down in plain English, it is able to get these things. So this was another really cool example that I think stood out to a lot of people. Last one I'll show on the animations interactions is actually one that was created. I was not using Claude Coder Cursor for this. There's another platform called Anything. So it's I think create anything.com I wanted to show that even if you're not using a tool like Claude code, you can do this in stuff like Anything and lovable and v0 if you know how to prompt it correctly. So this was just a fun 24 hour concept that I made. It was another food tracking app purely built with create anything.com and I added a bunch of custom interactions and animations here. So here's. Here's one that appears. This date picker that appears that bounce, that modal completely custom. This little sheet that says take photo gallery. Enter text this is. These are not components that Create Anything has. These are fully made by the AI and the animation of it popping up and kind of having a little bounce and a shadow full that was fully custom. That was something I completely told it to do and that was me trying to push it and see what it's capable of. Another thing very subtle is I have this mascot of my dog, Luna, looking at these foods. It's very subtle, but you can actually see that it's bouncing up and down a little bit. So that's another very subtle animation I was testing. But doesn't matter what platform you're using, you can do this in all the other platforms. But the important part is just understanding how to break this down in plain English. That's. That's the important part. But I'm. I'm pretty sure all of the Platforms are capable of doing stuff like this. So that's the animations and interactions that this is the. Probably the number one thing that makes apps stands out. And again, if you're going to record demos or concepts, that is what shines in these demos and concepts. Like, again, it's the difference between this tweet blowing up and then this one. Not is just, do you add a little bit more polish? Is it a little bit more dynamic to go on to the next thing that really makes apps stand out? It is, as you mentioned, Greg, illustrations, mascots. This is something I started doing in my apps because of AI, because I'm able to generate these things and we actually talked about it in the other episode that we recorded before, and I have a whole video on my channel documenting how I build these things. But right now, what I'm using primarily is ChatGPT. I've noticed for some reason it's very good at making these kind of illustrations. And I think with the newest models, with I think ChatGPT5, once it started with that, it got really good at following instructions for mascots. But my pro tip, if you want to make mascots, and here, for example, is this AI meeting assistant app that I was working on, and it had this mascot that people just absolutely love, named Lily the Ghost. And what's cool about having mascots and using AI, you can make almost infinite generations and iterations on the same mascot. So here I took Lily the Ghost and I made a variation where she has a magnifying glass and she's searching. So you can kind of see how in your app, even in empty state. So this is like a state where typically there's nothing going on. It just. It probably for most user or for most developers, they would probably just put a looking glass icon or something and it would just say type something to search or no results found. This is a great place to put custom illustrations to really give your app a lot more personality. So that's what I did here and I just generated this in GPT5. But my pro tip for anyone who's doing this is actually to bring on or hire an actual artist to generate the first version or some sort of concept and then use that and feed it into ChatGPT or whatever you're using to generate as a reference and say, hey, can you kind of riff off of this style? And that's actually what I did to generate Lily the Ghost. I didn't just directly say, can you make a ghost mascot with a flower on her head? I didn't do that instead. What I did was I fed in this. This was a hand drawn illustration that my fiance did of our dog Luna. And I told it, hey, can you use this as a reference and now make me a ghost based off of this? It didn't actually follow the illustration style that closely, but I did notice that there were some elements that kind of was retained. Like some of the shadow is kind of very similar, but that is something that, that's a little trick that I've learned is just if you pay someone for some original art, there's a high chance that the iterations that you get will just be a lot more unique because everyone is doing this right now. Like, I'm, I'm now seeing a lot of people using AI for illustrations. Like, this is now becoming a more common theme. So to stand out, you will have to either be really creative with how you're generating these, or again, I would recommend commissioning an artist, getting some sort of first version done because then at least you know, it is unique and it's actually cheaper than a lot of people would think. I think you can probably get an artist to do a very first version for you for like two $300 or something. But then, and then obviously, once you have the actual mascot, you can make infinite iterations, just like I did. Oh, yeah, sorry, go ahead.
- [23:54]
A
Could we try something? I know this is sort of off script, but.
- [23:56]
B
Yeah, yeah, yeah.
- [23:59]
A
Can we go to ChatGPT and if we gave it, if we gave it a reference image of say, the, you know, Snapchat ghost, you know, the logo. The Snapchat ghost logo.
- [24:12]
B
Yeah, yeah, yeah.
- [24:14]
A
I wonder if, you know, let's just say we want to create a. Actually maybe with the tongue, the tongue sticking out because it has a little more personality. I always found this was pretty decent in terms of like the brand. And so let's just say we're developing an app and, you know, we want to. We're inspired by this, we want this sort of vibe, but we want more of like a 3D, you know, kind of like how you had it like yours, it feels. Well, is yours 3D? Would you say it's 3D?
- [24:50]
B
It does have some shadow, so it does. It's definitely not like fully 2D. I think it was a little closer. Like it has some depth.
- [24:58]
A
Okay, so maybe we say like, we like this Snap logo in terms of like, it's youthful, fun, fresh energy. But I want to do like maybe a banana as a mascot. Let's say I'm creating a mobile app and I think a banana, for whatever reason is interesting, and I wonder just how you would prompt it to get the most out of it.
- [25:26]
B
I think what I would do is I would say, can you create.
- [25:29]
A
Just follow the same vibe as the original image?
- [25:32]
B
Yeah. And let's just see what it does here. Typically, I do have to do this a few times, so I think to get the ghost mascot, I think it took maybe like 10 to 15 different prompts. And I think I had to tell it things like, can you make it less cartoonish? Can you make it more cartoonish? Can you remove these elements? So we'll see what this comes up with. I have no. I've never actually tried 5.1. This is, I think, new as of this week. So, yeah, I'm kind of curious how good it is. It might surprise people, but I've found also that for coming up with novel mascots, ChatGPT is actually better than Gemini, better than Nano Banana from Google. I think nanobanana is very good if you want to make iterations. So when you have the base mascot. But I am still finding myself making actual mascots, like the first version in ChatGPT. Okay, let's see what it does here and then let's see what it copies. Also, another pro tip. When you're using ChatGPT for image generation, the more you ask of it, the harder or the worse it usually gets. So it starts deviating, and then you start getting that kind of ChatGPT style that you see in a lot of ChatGPT images. If you ask it to just do one thing really well, it's way better at following instructions. So. Okay, let's see. It did come up with a banana. I think it did kind of. It did keep some of the shadowing that's here for sure. It kept the tongue. It actually kept. Also really the same style as the eyes. Even the lines. Yeah. Are pretty similar. So I think it did a good job of keeping the style because that. This is what we gave it. So it's like. It does seem like it's kind of similar, but. Yeah, I mean, we could keep riffing off of. There's like a. There's so many things you can keep riffing off of it. Like if I say let's.
- [27:16]
A
Let's do one more.
- [27:17]
B
Yeah, what do you want?
- [27:18]
A
One more prompt and see what happens. I also, like. I kind of feel weird that we gave it, like, the sneaky Snapchat image, their brand and likeness, but it was a place to start.
- [27:26]
B
Yeah.
- [27:27]
A
So what would you do to make it like different, but also, you know, unique and better.
- [27:32]
B
I think what I would do again, my. My advice is to. If you can use original art, somehow or a combination. If you use like, like actually, let's just see what happens here. If I just feed in, I have no idea what it's going to do if I do this. Like, if I feed in both this hand drawn illustration of my dog and the Snapchat mascot, both the ghost and dog mascots. I've noticed also when you do combinations, you get very interesting results. I literally have no idea what it's going to do here, but it'll be cool to see because we at least know what's going to happen if we just did the ghost. Let's see what happens if we do both. But this is actually a way too. Because I think something that I'm really worried about. When I made a video explaining how I do this stuff, I explicitly was like, do not try to copy someone's style, one for one. Like you need to be original here. So definitely, if you're going to do it, make sure you just iterate a ton so it looks very different. Or again, use original art or mash like three or four things and get the elements that you like from it to get something unique. That's probably what I would do because I know that if someone's going to do this, the first thing they're going to do is just probably throw in the Duolingo owl or some logo that they really like. Oh my God. What is this? It's very different. Okay, I see that. It's okay, it's more 3D already. Yeah, it looks like a lot more. Like you can tell it has a lot more depth. It's probably because it now has two references of something with a little bit more depth. Like this has some more shadows here. Wow, that is insane. And it kept the bow. So now it has the tongue and it has the bow from my dog. That looks insane. Greg, if you use this, I think. I think you might get sued or something. This looks like. Yeah, but it. That's interesting. Oh, this is not. No, this is not it. Oh no, here we go.
- [29:33]
A
Here was comment banana on YouTube if you like this logo.
- [29:38]
B
Yeah, yeah. If anyone wants to use this as their logo, please feel free. You have my blessing to do this. But it is interesting to see the difference here. When you feed in one versus two, it's our. It is already. Yeah. I don't know if it's better, but it is noticeably different. It's noticeably different. Like you do. We got something way more unique when we mash these two together. So that's my recommendation, is just use GPT5. Just throw. Throw it in. Get really creative with it. Try to find something that feels like you. But again, don't copy. Just don't directly copy anything. Try to come up with a unique style that fits the app.
- [30:12]
A
Okay. We can move on to the next thing, but I will say you were speechless when that banana came out.
- [30:17]
B
Yeah, that was something. That was something. Yeah. Feel free to anyone who wants to use it. Feel free to use it. Okay. On a note, for a good mascot or a mascot that there was a lot of thought into it. So this one was not generated by AI, but I did also want to show the power of when you get a good mascot, what it can do to the end experience. So this was something where we actually applied the mascot myself. And then again, my fiance is the one who hand drew these illustrations and she animated them in Procreate. We threw them into the onboarding for my new calorie tracking app. And you can just tell that this onboarding has so much more character and life to it. And I have never gotten so much praise about an app onboarding. Like, that's not a normal thing. People hate onboarding, but people after. I think I've onboarded about 500 testers at this point. I've been working on the app for a month. This is the most praised part of the app. Every time I invite someone, they're like, that was such a good onboarding experience. And the. There was actually one person who signed up twice. They told me, hey, I signed up twice because I wanted to see it again. I hope you don't mind. And I was like, okay, that's insane. Like, I've never heard of anyone signing up twice. But again, just imagine this onboarding if it was just static images or if there was no images. Cause that. That's what a lot of people do. Sometimes they just don't have anything. Cause they're. They just don't want to put in the time to make custom illustrations for each of the steps. But it does really add a dimension where when you see these, you're kind of like, man, what is the next one going to be like? I'm so curious. Like, these are so cool. Here's another tip that I'll give if. Because I think the thing that made this stand out was really the. The animation or just like, how it wasn't just a static image. This is actually something you can achieve through AI. And specifically, something that I've seen people do is they use Mid Journey for animations. So that's something a lot of people don't know. A lot of people just think of Midjourney as just pure image generation. This is the logo for Amy the Cat. And I wanted to show what this could look like if you animated it. So I just fed this into Mid Journey and I'll show you what that looked like. But here's an animated version that it just did in one go.
- [32:32]
A
Wow.
- [32:32]
B
Like, completely. And just imagine you're on the login screen or the splash screen, and instead of just seeing a static Amy the Cat, imagine if this is just looping and this is just moving already. That just feels like a whole. That just does not feel like a Vibe coded app. This feels like something way more premium. And so let me show you actually kind of what this looks like and how you do it. So people don't know this, but when you're in midjourney and this is what the Mid Journey UI looks like, you can actually feed in images as a starting frame or an ending frame. And so what I did was I just fed in this image of Amy the cat and then I think I just said, actually, I don't even think I typed anything. I think I just. I think I just like just clicked go. And then I was curious what it would come up with. And. And this. It did kind of get some. There was some weird stuff that came out of it the first time I did it, but then this fourth one was actually really good. Like, I. I think I would actually use this now in the login screen. So when you sign up for my calorie tracking app, you might see this in there. But this is a pro tip that I've not seen anyone talk about. It's using Midjourney to animate very static characters or mascots. It's actually pretty simple. I don't know how new this feature is, but when I discovered this, I was like, okay, more people are going to take advantage of this for sure. But this is a really cool one. But, yeah, that's it on the illustrations. I don't know if you have any thoughts, Greg, or any questions or anything, but.
- [33:54]
A
No, let's go to Iconography.
- [33:56]
B
Nice. Okay, so another thing, the next thing is Iconography. This is something that I see. It's just a. That this is a huge tell for Vibe coded apps, because usually when you vibe code an app, you don't really think too much about the icon style, but it has a huge impact on the app's feel. So I'll give you an example. This is my budgeting app, Luna. This is the best way to illustrate this. Look at the tabs on the bottom. I chose specifically lined icons, which means that they're not filled. These are filled icons on the right. Here, here. There is a difference between these two, and it's very subjective. Some people would prefer the left, some people would prefer the right. But the key rule though, that I see a lot of apps making is they love to mix and match these things unnecessarily. So here's on the right, where we mix lined and filled icons. So this is a lined icon and then the others are filled icons. It's really small and subtle, but it is one of those things where if you look at all three of these, again, it's subjective. Some people actually might prefer this one on the very right, but personally I really prefer the one on the left. And then the tab that's actually selected can have a filled icon instead. So these transition to the filled icons when they're clicked. Very, very subtle thing. But iconography is one of those things where when you choose really good icons, it really does elevate an app. But more importantly, if you choose bad icons or you're incorrectly matching them or using different ones that don't match, they're from different sets, it really does decrease the quality of the app. So this is another one that I wanted to point out that is such a quick fix for people and for people who are like, okay, well, where do I get these icons? These are three really good resources to check out. Personally, I'm using heroic icons for this set, so I'm pretty sure these are all from the hero icon set. Completely free to use. I believe Font awesome is another one that has really high quality icons. And then there's another one called Nucleo that someone put me onto. And it has a really good quality icons too. So if you're vibe coding and you're just getting started and you're like, I don't know what to do. Like, I'm just using the default ones that Claude is telling me to use. Seriously, just try these. You will notice a tangible difference. If you just swap out all the icons, make them consistent, it'll feel very different. So that's another. That's another. Another small one that actually has a big impact.
- [36:13]
A
And also typography, very important. Yeah, similar thing, small but big impact. The sizing of titles and headers and subheaders. Obviously the font you choose or fonts Right?
- [36:29]
B
Exactly. Exactly.
- [36:30]
A
Yeah.
- [36:30]
B
The readability, legibility, 100%. If you're just starting out and you've never done any of this stuff, just read, just watch a five minute video on typography and when to use certain weights, when to use certain colors, how they mix and match, match, how to make something more legible. It goes a long way because people are going to be looking at your app thousands of times a month hopefully. And so this stuff will, it will actually impact their experience. They'll feel the difference.
- [36:54]
A
I mean there's the famous example, I think of Steve Jobs going to calligraphy class right. At Reed College and that's what influenced the Macintosh whole font choices. So yep. I think to me, I put iconography and, and typography in sort of the same boat, which is like, it's an afterthought but like it's such people notice it. So thanks for bringing it up. Yeah, yeah, let's see. What widgets.
- [37:30]
B
Yeah, for sure.
- [37:31]
A
Okay.
- [37:31]
B
And the other thing is widgets. The reason I bring this up is because with AI it has never been easier to create widgets or even an Apple Watch integration. It's never been easier to do this. And I'm actually doing this for all of my apps. And this is the widget for the calorie tracking app, Amy that I have. So we have a home screen widget and again, this illustration was hand drawn by my fiance, but you can totally go generate this with AI. But again, it does really draw your attention to the widget. It's a, it's a really nice illustration to have here and it makes it stand out. Same thing too with if you notice there's some background sketches there also just hand drawn on an iPad, but you can just generate these things. But in general, something that I'm surprised, I don't see a lot of developers taking advantage of is making widgets because when you have them, number one, users are always very delighted when they see that. They're like, oh, amazing, they have a lock screen widget, home screen widget or an Apple Watch app. I mean, think about the apps you use every day. You were probably so excited when you were like, oh, thank God they have an Apple Watch app. Like, oh, thank God they have this. It's one of those things that it's a, it's a signal that this is a high quality app when the inve the developers invested in a lock screen home screen or an Apple Watch widget. Same. The other thing though, that's a bonus if you are a developer for your widget is people don't understand what a retention boost having a widget is because when a user is using your app and they open their phone, there are a thousand other apps that are trying to get their attention, especially through notifications, through other widgets. Having a widget and taking up this much real estate on a user's device is literally a cheat code. Because now anytime someone opens their app, I mean, just, it's overpowering the other apps. Like, I don't even look at the watch app or the fitness app. Like, I'm very drawn to this. So if you are able to pull it off and get a widget on someone's home screen, the chances of them opening your app increase substantially, which increases your retention, which increases the chance of them building a habit. And then even further, if you can do a lock screen widget, this is the ultimate cheat code. Because only four apps max are allowed to be on a user's lock screen. And if you can get one of those positions, you're basically going to. They're going to see your widget, like at least 150 times a day. Every time they look and they look at their lock screen, they're probably going to see your widget and then when they tap it, it'll do a deep link and open. It's just such a retention cheat code. So it's a, it's a win, win. Basically, it makes your app feel more premium when you have it, but also it just increases retention dramatically. I, I've applied it to all my other apps. So my daily planning app, we have this widget that shows how many tasks you have left. Again, custom illustrations done for all the widgets. And then same thing for my budgeting app, Luna, to see how much you're spending, there's a lock screen widget. When I implemented these things, retention, I think it more than doubled, I'm pretty sure because of this, which, which makes sense in hindsight. It makes total sense. Like people are just reminded of your, of your app's existence. But huge, huge one that I would do. And then the reason you can do it now is it took me probably four to five hours to make this. These two widgets for this app because of clock code. It used to take me, I think this one is the only one I did without any AI assistance because I did it so long ago. I think it took me like maybe a whole week, maybe two weeks to do the widget. It was kind of painful, to be honest, with AI. It's just the AI is So well trained on Apple's documentation. Like people have been doing widgets forever, so it can actually do these in less than a day. So there is no reason not to do it. Take the extra time to do it. It's just a win, win all around. Yeah. I don't know if you have any questions on this one or any thoughts.
- [41:11]
A
I mean, I'm a huge fan of this. I think a lot of people build apps, mobile apps, and they're like, yeah, I got the 50k mrr, 70k mrr. But like their retention is so bad. And so, you know, you said it best. Like, you know, these are. This is a retention hack in so many ways. It puts, it puts your app as a part of someone's daily workflow, daily use case. And I just think that for me, the first widget that really got my attention was the locket app. Yeah, yeah. It's just super well designed. Producer Rafa can put it up on screen so people can see it and then also like Jack Fricks new app. Yeah, what's it called? Lovely.
- [42:03]
B
Yeah, Lovely. Yeah. That's a really good one.
- [42:05]
A
That's a really good one. And so you're starting to see this resurgence of the widget ecosystem and I think people are more and more open to downloading widgets now, which I think is also a big deal. I actually, while you're talking, I took a note of a startup idea that I want to create for. For that. That one of those force slots. Yeah, yeah. Like there's, there's like there, there. There's probably so few widgets that are, that are accessible to that, you know, I just think there's a lot of opportunity and a lot of different verticals there.
- [42:44]
B
Yeah, 100%. Yeah. And again, it's so much easier to build a widget. Like it sucked building a widget before it actually sucked. So this was such a. If any reason to use AI, it's just to speed stuff up. Like this. Like this is the difference between shipping something like this and not. So if you're on the fence about using AI to do this stuff, please do it just so you can ship stuff like this.
- [43:05]
A
Sounds good. Did you have one more category?
- [43:07]
B
I did. So the last thing is just the most important thing. I think if you want to level up your design and level up just the, your ability to polish your apps is to be constantly exposed to good apps. So I just wanted to share some of the resources that I'm using when I'm just to get more design inspiration, understand it so Mobin is a big one that I use. So basically it's this massive design library where they just have so many screenshots of different apps. And I'm constantly just looking at this and I'm just trying to get inspiration because there's just such so many cool interactions and animations and little things you can also get a good sense of. Like, if you're on the fence of what icon should I use? Should I use thick, or should I use the filled, or should I use the lined or the filled icons? You can just go here and just see what are other apps doing? Does it look good? Does it resonate? Does it have the vibe you want? So this is probably my number one design resource. It is paid. I have a code. I don't know if I'm allowed to share it, but I have a code if you want to use it for, like, I think 20% off the free plan of the year plan, but 100% just browsing this. It's inevitable that you'll level up your design sense because these are just such good apps. Another One is called 60 Apps. This has really good interaction. So if you're trying to figure out interactions, animations, different things, like, I mean, I just love how just looking at this, like, you can tell that when you tap things, the gradient changes. I've never seen an app do that. So now I'm like, okay, maybe I'll go experiment with that in my app. And then the last one is called Spotted in Prod. It's the same kind of concept, the 60fps. It just has a lot of really good animations from the top apps. And this is where I'm looking to get inspiration. And that's probably the number one question I'm getting, is just what am I consuming? How am I leveling up my design? It's just these three websites, like, that's the only thing you need. And then the last thing, the last resource that I have, which it's actually for screenshots. And that's kind of my last piece of advice. So there's a. There's a Twitter account called Screenshot. First company, they basically just curate and show really good App Store screenshots. And they kind of show like, here's a nice before and after. Like, this is what most App Store screenshots look like for. Actually, this is actually not that bad. But this is how most App Store screenshots look like for Vibe coded apps. Typically for Vibe coded apps, the App Store screenshot is. It's like the last thing anyone wants to do. You're like, I just spent a month or two months coding this app. I don't want to do these screenshots. But people don't understand how big of a deal the App Store screenshot is, because it is the first impression that a user has with your app when they go to the App Store. And if you don't have a good first impression, that's the difference. There's no point in increasing retention if they're not going to download it. For Anyone who's doing YouTube, I equate this to the title thumbnail. It's literally the equivalent of if you have a bad title thumbnail, no one is going to watch your video. So any YouTubers or anyone doing content will understand this analogy. But level up your App Store screenshots. So this is a great Twitter account. I don't know if any websites that showcase App Store screenshots like this, but this is a really good one to follow. So those are the four resources. Like, this is the main stuff that I'm looking at also.
- [46:11]
A
Startup idea. Someone go build that.
- [46:13]
B
Honestly. Yeah, yeah, that would be. That would be. I would pay for that. I, like, genuinely, I think I pay for all of these services, like, even Mobin. Like, I have a discount with them, but I I literally still pay for them out of pocket because it's such a good, such a good resource.
- [46:29]
A
I love it. Cool.
- [46:31]
B
So that concludes. This concludes the, you know, how I make apps that stand out. It's really just a culmination of all these things.
- [46:37]
A
Chris, thanks so much for coming on. I feel like I need more of you, so maybe we'll record another episode. I want to know about your AI workflow. I want to know more about it. I'll include links to where you can follow Chris on social in the show notes. And Chris, thanks again for spilling the sauce on the show.
- [47:00]
B
Yeah, absolutely. Thanks so much for having me, Greg. Appreciate it.