My 30 minutes workflow for designing faster and smarter.

I designed this startup website using 3 AI tools and 4 traditional design tools, and in this video, I want to show you my entire design process using an AI-assisted design workflow. This video is sponsored by Mobbin. So here's a quick breakdown of my current workflow. I use Claude and ChatGPT for brainstorming and prompting. I use V0 for generating first drafts. I use Mobbin for design inspiration, and then I go back to traditional tools like Figma, Framer, and Jitter for the final polish. Later on in this video, I will explain why going back to this traditional tool is very, very important to the design process. So I start with ChatGPT and Claude, and the first thing I usually do is to create a project for anything that I want to work on. And the reason I do this is that when I create a project in that manner, I'm able to start providing context on what I'm working on from the very beginning so that later on I don't have to start thinking about how to provide more context. This website is a personal project, so I'll walk you through everything that went into the process without holding back anything. I'm building a digital twin for creators. This digital twin can have conversations with the creator's audience in the creator's voice, and it is trained on every piece of content that the creator has published. For example, you can ask my digital twin any questions about UX design based on the topics I've covered on this channel in a meaningful conversation that feels like you are talking to me. So the goal of this website is to convince educational creators who are the target audience for this product to request a demo or join the waitlist. Now let's dive deeper into how I actually use this tool. Now in this particular case, for this website, the name of the website is doppo.ai. It's not live yet, but what I've started with here is to create a project for doppo.ai. And as you can see within ChatGPT, there's been so many conversations within this project. So this is all context for anything that I want to around this project. Everything, all my brainstorming, all my conversations, anytime I have new ideas, everything goes into this project. Like, this is the very beginning, for example, where I was basically just trying to like brainstorm and understand what a very, very minimum viable scope for this project might be. So myself and ChatGPT, we brainstormed on this together to create a scope for, for the project. So if you can look at this now, you could see that it's already thinking about what the user story could be, what the primary personas could be, what an hypothesis could be, and the success metrics. But because all of this has been done within ChatGPT already, it has enough context. And that's the same thing with Claude as well. Within Claude, I have the same project, which is this particular project. And like you can see, I also have conversations within Claude the same way I have with ChatGPT. So most times I have conversations on both of them to compare their inputs, to compare their outputs rather, and to see what their responses might look like. At the beginning of this, Claude helped me to generate the actual user stories and all of the required artifacts for this project. I'm trying to find the stuff that it generated. I'm trying to look for it here, but I can't find it now. But yeah, so this is basically like a vision statement, for example. So it shows you that, you know, the brand summary. This means that when I want to create a website, for example, and I want Claude to help me generate a prompt to create that website, It has so much context already because we've been talking about this project together since day one, right? So here, since I've had all of these conversations, I then ask Claude and ChatGPT to help me generate a prompt that I can use to start this website. So here I'm just going to go. And if you look at this content assistant profile here, this is where it helps generate the prompt for the website itself. As you can see, it says prompt for V0. It has the goal that the prompt is going to achieve, that the website wants to achieve, the design inspiration, how the page is going to be structured. Also, I had an idea for this website to have like a section where I tell a fictional story about the problem that we are trying to solve with this website, right? And myself and ChatGPT, we've been brainstorming on what that story could look like already. You could see like all of these are like us talking together to really understand what that story could look like. So because we've had all these chats, And we've done all this brainstorming. It was easy for me to just say, hey, could you generate a prompt for V0 that I can actually use to create the first version of the website? Now I'm looking for the prompt within the chat here and I'm going to find it soon. Yeah. So here is the prompt within the chat. As you can see in the prompt, I said, where your product manager at? Write a prompt for V0 to create a waitlist page for Dopeful. Based on the last format of the story drafted, and then I provided other information. You might wonder why I told it at the very beginning here to wear a product manager hat. Now, the reason why I did that is that in the instructions for this project, I asked it that in this project, I said, in this project, you are my thoughtful sparring partner who is a highly experienced product manager, a savvy copywriter, and a great brand marketer and seasoned growth hacker. So I've given it 4 personas within this project. These are the 4 personas that you will have. Then I'll ask you to put on a hat of each persona each time I want to switch to that persona. For example, I could ask you to wear your product manager hat so you assume that persona till I ask you to put on another hat. So what I'm basically telling you here is that at each point when I want it to be a product manager, I'm going to ask it to wear a product manager hat and ask it questions around how it can help me think about like a product strategy or approach the thinking or brainstorming session like a product manager. And I do the same thing if I wanted to maybe be a copywriter, I'll ask it to wear a copywriter hat. And that's how I basically maneuver the prompts within this Doppel project. So if I go back to the prompt that was generated, for example, now you'd see that I asked it to generate the prompt and then this is the entire prompt that was generated. It basically added the goal, what is going to be in the hero section, the scroll story section, and then what is going to be in the final call to action, right? Now all I just need to do now is copy this entire prompt and then we go into V0 to think about how we can get the very first draft of the design for the website. So within V0 now, I also have like the website here. And if you can see here on this side, I've been iterating on different versions of what this website could look like. It's such a far way. It's such— it's so far from like where I'm actually trying to get to with the website from what you can see here already. And from the very, very beginning of this conversation with V0, I had entered the prompt here. This is the entire prompt, and this was the very first version of the website that V0 created. Um, all this copy and all these captions was already generated by ChatGPT and some refinements from me as well. So if you can see, this is the very first version that V0 created. And like I said, sometimes V0 just does interesting things. This is the story I'm talking about, and this is how we broke down the story. This also gave me an of like what that story could read like. And already, because this is like a first draft, I already have ideas on how I can make this story better. And this is just version 1. If you go all the way down, you see this keeps going on. Version 2, this is like version 4, all the way down to like version 51, I think, which is basically different iterations that I've been making. But there's not so much difference between like each version. For example, at this point I was just trying to like think about how it's going to help make the header better and also close the gap between the story sections here. If you come down and then I go down to like maybe version 23, again, not so much different. And this is the thing with iterating with prompts, the fact that when you want to iterate and maybe make changes to something, you have to write a whole prompt to make some little changes. Although V0 has like a design tab where you can actually come and make some changes to the design here, but I don't think it's been properly designed just yet. So I'm still using like the prompt, but One interesting thing that I found out with V0 is that sometimes you can do something really nice and surprising. And that is something that you can take into the later stage of the creative process that you can say, oh, I like this idea or what you explored here. For example, the thing that I liked that V0 did here is that when I hover on this, it basically explains what a dope hole means with an hover animation. But I saw that this wasn't going to scale on mobile. This would not really make sense on mobile because mobile does not have this kind of interaction. But I like that it just took initiative to do that and the way He sort of broke down the story as well, sort of gave me some insights. And also the footer, how he created the footer and the captions that he had on there. But for now, it's still really, really bland. This is not something that I can ship that I would say, okay, the website is done. I think this is just so bland and almost too minimal. But I kept coming down and I kept making other feature iterations to it. Let's see what version 37 looks like. Yeah. Now it's maybe getting a little bit interesting. It's introduced a little bit of gradient here for this version, and it's basically trying to like have like a gradient from like the top version, top all the way down. So it blends into like the story section. This is basically like a story that is going to make the core essence of the project. It's going to make it really interesting to anybody that wants to understand how this works. You know, I really like to introduce stories into like maybe websites or just things to just make things come alive so you can understand what that product actually does. Now, the interesting thing is, okay, this gradient is really nice. But again, it hasn't blended all the way and it's still not looking as good as I would want it to be. Let's see what it did at the point when I got to version 42, for example. At version 42, it just moved the gradient all the way down, and then it started introducing some interesting stuff. Because this is a voice-first interface where an AI twin or a digital twin is going to be having a chat or a conversation with somebody, it just introduced some kind of audio animation. And I think this is really interesting, right? And when I go all the way down to other versions, all the way down like 46, for example, here it was basically just trying have like different iterations of that animation. Yeah. So it's moved it down. It's just moved to like different areas. Now at this point, I was already getting tired of vibe coding this website. I was already getting tired of writing prompts because now I feel like I'm getting diminishing returns, which is the reason why I said it's important to understand that you might need to fall back to traditional tools like Figma and Framer after you've done some iterations here. And this is exactly what I did because now I felt like, okay, I have a vague idea of what what I need to do. I don't have the blank canvas problem anymore here. And I can now move whatever I'm doing here to like Figma where I can have a little bit more control on like what I'm working on. Because even when you look at it up to version 51, you now see that, you know, I now have a clear idea of, okay, this voice animation thing that has like these pulsating circles is really going to be interesting on the actual website. And if that's the only idea that I take out of using v0 for this into something that I have more control, like Figma, Figma or Framer, then that's fine. It's really good because I didn't spend too much time iterating here, even though I have 51 versions of this particular same website idea. So now I'm going to move on to Figma to see how we can actually start putting these designs together in Figma. In Figma now, I have so many iterations of the website. So now in Figma, the very, very first thing I had was like, okay, I have what the story actually looks like. And I said, okay, how about I have the Story section, and then I have something to actually make the story sections come alive, right? Maybe have like some kind of illustrations to show the main character in the story, because this story basically just talks about how this particular character is able to solve a problem with this product that I'm creating a website for. So I went back into ChatGPT, and I asked ChatGPT to create an illustration for me that looks like a Notion-style illustration, like a line illustration that depicts a particular character and what that character is trying to do. Remember that within ChatGPT, I have a project. I've described everything. ChatGPT came up with this story based on the prompt that I gave it. So it wasn't difficult to ask it to create an illustration that actually fits that story. So I started thinking about, okay, maybe I should have an illustration instead of just having like what V0 gave me, instead of just having like blank sections of like the story here, maybe an illustration can actually tell the story better. So as I was exploring what that could look like, And this is what I was just basically doing on Figma. Also, I was then thinking, okay, how could I actually make this thing make a lot more sense and look better? Should I even take out the illustration altogether and try something entirely different? Maybe like have a section itself for the actual story than just have like an illustration like this. Also at the very header, I think the iteration that I did on V0 really helped me understand what I wanted the header to look like, but I didn't like the the caption that V0 sort of had. This caption of, you can't talk to every fan, but your Doppel can in your voice. I think I like it. It's really good, but I don't think it's punchy enough. I think it's too long. So I started going back into ChatGPT again, and then we started brainstorming on like other caption ideas, which is how we arrived at scale your impact, no extra hours required. Because basically, if you're able to have your digital twin have conversations with people on your behalf and learn about your audience, then you wouldn't need to have any extra hours dedicated to having one-on-one with those people because, you know, that just saves that time and you get a lot of insight and then you also help them as well. But at this point, I wasn't really feeling good about this. The only part that I was feeling like, okay, I was feeling a bit good about was like I had like a section where I actually put like these features of this website in some kind of bento style. But I wasn't really feeling like what I had in the footer here. I felt like, yeah, I felt like it just wasn't hitting the spot for me and I felt like I needed some Inspiration to really get what I am looking for, and that's what led me to Mobbing. On Mobbing, I was able to like find a lot of design inspiration for what I actually wanted to to do. Like for example, Mobbing you can find inspiration for like apps. You can find different kind of apps on Mobbing. Any app that you feel like oh this app is so well designed, you're very very likely to find it on Mobbing, and that's what I basically used to get get any inspiration. And the great thing about Mobbing is they also now have sites, and I'm designing a website so. So this is a very, very good example of something that can help me find design inspiration for a website design. So on Mobbin, there's a particular website that I like and I just search for them, which is the website is called My Mind. And I found them on Mobbin and I'm like, oh, this website is actually on Mobbin. This is cool. I would like to check out this website. And then I just went to like their actual page. And if you can see, this is what it looks like. The website actually sort of has a lot of ideas that I would like to explore on the other website that I am working on. So I started looking at these. And I'm like, okay, this is really cool. They have like this bento style here. They have like this gradient style here as well. They also have the way, like the way they blend like their foregrounds and their gradients and their text with like images is really, really attractive and nice. It's just like, it's not very, very conventional, but the main thing that I picked from this website that was really interesting to me is I'll go to the actual website so you see what it looks like on the actual website. What I like there is like their use of typography, the way they were able to combine sans-serif text fonts like this with, um, serif fonts. It was really, really nice. And that's the main thing that I picked from this particular website. So I picked the font pairing, a serif font and a sans-serif font. I picked the font pairing and I also picked like what they have in the story section. You can see like they also have like a story section here and I like how they sort of have that. Then the third thing that I was like, okay, this is a really good thing to get inspired by here is how they actually showed the features. So here is where they have their own features, frictionless note-taking, smart bookmarking, and all the different features that they have. I like the way they arrange the bento grid for their own features. So this is how this website was actually able to help me to get design inspiration. And without Mobbin, I wouldn't have known that, you know, this website is actually available here and I can see all their screens. So with that, I took a lot of that inspiration and went back again into Figma. And I started thinking about how I can bring some of the ideas that I found there in Figma. So I started thinking about, okay, how can I make this header better? In the hero section here, you can note, you can see that I've started bringing in the voice animation to see what it could look like. I have like the serif typeface that I'm combining with a sans-serif typeface here. And then here I have like what the story section looks like inspired by what I just found on the website, MyMind. And then here I have like, you know, buttons where you can use to request access for like a demo or you can get early access. But one of the main inspiration that I found from the website that I just showed, MyMind, is this particular bento section that shows the features of this particular product. I like this idea of having like cards to show the features and describing the features and then something on the side here to actually illustrate what that feature looks like. So I have like illustrations to show the features, the captions, and then illustrations to also show something that actually helps you understand what the features of the website are. And this is what I introduced here. And then at the footer, I think this is a more interesting footer than what I had here initially. I think, yeah, for some reasons I'm just not sold on this, but I'm now leaning more towards this. I'm still iterating. And then this is like another iteration of that. Where I have like again, I'm kind of settled on what the hero section can look like. The story section looks better to me. I think it's better than having illustrations because these illustrations feel very AI generated. I don't know. Maybe they don't, but to me they feel very AI generated, and I think it takes away from the quality of the website. I think it's better to just really just introduce the story section using something like this. And if you come down here, I now started thinking about how I can call a little. Bit more attention to the feature section here. And that's why I introduced this background color and then also have like these cards. And then I have another card on top of that. And then I have like illustrations on the side to actually show what that feature means or what that feature could look like in the product itself. So this is coming together like really nice now. But I know that one thing that definitely makes websites to look good is motion and animation. Like when things move on websites, when you see things moving around, it makes it come alive. And I was thinking about how I could actually introduce some motion into the, into this website. And this element that I have here, these illustrations on this side, on this side are actually placeholders for things that I want to introduce motion to on the website. So the next thing that I did now was to come up here on this Figma file and then start to think about how I would show the motion for this. Like, so I basically created a frame for how I wanted this to look like when I create like an animation or something. That moves for it. And I have the same thing for every other piece. And the reason why I'm creating all of this in frames here is because I want them— I want to move all these frames to another tool called Jitter. Jitter is a really simple tool to create motion designs because motion design is really difficult. If you use After Effects for motion, it's so hard. But with Jitter, it has like some custom movement and custom transitions that makes motion so easy. So the next thing I did was to then move all of these things into Jitter. Now I'm in Jitter now, and as you can see here, this is like an animation that I've created in Jitter. If I play, you're gonna see what it looks like, right? This animation took me like 5 to 10 minutes to create. This is another animation that sort of shows somebody having a conversation with an AI. You can see this animation again took me a few minutes to create. All you just need to do is create the actual frames that you want to animate and then bring them into Jitter. This video is not a tutorial video. I'm just showing my workflow. Eventually I might create tutorials on specific sections, like how to use Jitter, for example. I could create tutorials on that, but this session is not a tutorial session. I'm just showing you my workflow. So again, you can see like different kinds of animations. For example, here's another animation that sort of shows what that, what that thing, the thing that I saw in V0, the motion that I saw in V0, here's another animation that sort of shows how that works as well. And this is another animation that shows some kind of other features there. So now let's bring all of this together because we are not done yet. The next thing— tool that all of this was now moved into is Framer. And the reason why I chose Framer for this is that Framer is a tool that allows you to publish websites. It's so simple. It's like Figma with a publish button where you can create your website, you publish your website, and the website is live. Right. So since I already had my designs in Figma, all I needed to do was to use a plugin to bring that design that I have in Figma because Figma has helped me create my layout already. So since I already have my layout created in Figma, I just use the plugin to move everything from Figma into Framer. Then within Framer, I start to adjust it to make sure that it's responsive, to pick the different screen sizes for the, for the responsiveness and start to adjust each of the parts. So as you can see now, things have changed a bit on Framer. I've now found, I think, a better typeface than what I had in, in Figma. In Figma, I was using a typeface that's called Instrument Sans. That's the typeface that I'm using. I think this is a typeface that Perplexity also uses, or Perplexity uses like a fork of this typeface. So So I thought that that typeface is sort of getting a bit popular already or has been hijacked by one huge big major tool called Perplexity. So I said, okay, I would love to try another typeface. So I found this really nice typeface called, um, I can't remember what the name is called now, but I can find it in the, in the tool. And the— yes, it's called Coconuts. That's what it's called, Coconuts. I think it's a really nice serif typeface that, you know, has like some really nice corners and edges. So that's what I'm using. And then I also thought that, okay, I think it would be nicer to just make this website kind of monochrome and just have like black buttons, don't have a lot of colors. Also use some kind of very, very beige background color for the entire website as well. And then this is like the story section. And now this is like the feature section. But as you can see here, all of this look blank, but all of these are actually moving animations. But the reason they look blank here right now is because they are sort of static until I actually publish the website or actually play the website to show you how it actually works. So let me play the website now. If I click this now, you see, now once I just scroll, it shows everything. And my favorite part about this is that now the stories can then come and it feels like I'm actually reading the story because it just streams into the screen. And then the section comes. So you can see like this section is animated. And then this one is also animated. All of the animations have been exported from Jitter as Lottie files and imported into Framer. Right. And then at the end here, I have like the audio thing. Remember that the audio thing that V0 created was at the very top of the page. But I thought that if I put that at the very top of the page for my own design here, I think it takes away from like this global header on the page. It takes away from like this hero section of the page because I didn't want anything that takes away from the core action that I wanted the user to perform, which is to request a demo, right? I didn't want any kind of animation to distract them. Once they come into the website, they see the main call to action. They see the main value that they can get from the website. And then they request a demo. And if they feel like they need to be convinced further, then they can scroll down, then maybe read the story, understand how this thing can actually work. For them. And then once they do that, they can still request a demo here if they read the story and then they are convinced that this actually works for them. And if they still feel like they still need more convincing, they can go through the features, see how the features work. And then at the bottom here, they can then choose to request a demo. Like I said, this website is so easy because once I just hit publish like this, now it's live. For example, this is the actual live link of the website because I haven't connected it to a domain just yet. It is not, you know, I can't, you can't go to dopu.ai and you find this, but currently this is live at dopu.framer.website. If you try dopu.framer.website right now, as you're watching this video, you're going to find this. That's if I haven't moved it to the actual domain by then. So this is the finished website, right? Where, you know, I have like the main hero section, the story section. Um, I have like the feature section coming Lots of really nice fancy animations. And then I have all of that coming as well. And then at the footer, I have the final call to action. And I really like what's happening with like the audio animation that's here, there at the footer. So that's how we've moved from, you know, prompts within ChatGPT and brainstorming within ChatGPT and Claude to a very, very scrappy first version in V0. Right. To different levels of iteration, to different levels of iteration in Figma from using illustrations and actually landing at this point where we have a little bit of color, then to like creating motion in Jitter to introduce a little bit more motion into this website. So the final website, which actually has like, you know, a lot more simpler version of everything that we've done before. I think what I'm just trying to show here is that you can't really shortcut the design process. A lot of these AI tools promise you shortcuts. They promise you that, oh, this is everything that you have to do. You just do this, do this, do this, and then you're done. But that's a lie. Because if you actually want to create something that is genuinely unique, that doesn't feel like something that every other person has created, you have to think about how you can go through the process. You have to keep iterating. And the value of AI in this is that it helps me to brainstorm faster. It also helps me to iterate faster. Imagine creating 51 versions of this website in V0 before I eventually come here. If I had to create 51 versions using a traditional tool like Figma, it's going to take me forever. But in V0, just with writing prompts, I can create 51 versions. So that's my AI-assisted design workflow. This workflow might change in like the next 3 to 6 months. I'm sure it is definitely going to change because these AI tools will get better and I'll probably be able to do more iteration and rely less on traditional tools. But that's my AI-assisted design workflow, and I'll see you in the next video.