Watch Me Fix a SaaS Design in 2 Hours (Step by Step)

In this video, I'm going to find a random scheme online and we're going to redesign it together. And if you don't know who I am, my name is Charles Postiaux. I'm the founder and designer at Babano Studio, where we've redesigned products for companies worth over $200 billion. First step, let's look at design and see which one we can do. Kiwi could be an interesting one. I think they have a really cool kind of design branding aesthetic, which is always refreshing and nice for travel companies. Kraken. I think the idea is pretty interesting. They have a nice aesthetic and look, it just feels a bit all over the place. They have a ton of cards. Everywhere. So that's something that I would probably want to redesign. Maybe Linktree could be a good one. It's something that we've actually redesigned on the channel before. I think they have that uniqueness and a cool design experience, but similar to what I've just said about Kraken, sometimes it feels a bit all over the place and it doesn't feel professional. Fiverr could be a cool, interesting one. Pretty overwhelming in terms of the interface itself, but it still has potential, right? Like this is a very traditional design experience. It looks pretty similar to Notion as well. I think we could go with this one. I think the core goal here is going to be around this navigation and how do we make it better, and then trying to find like a consistent way to go with these cards. That could be interesting. So let's copy this and go into Figma. All right, so I'm on Figma and the first thing I want to do is create a frame the same size as the image reference, so 1920 by 1200. Another thing I want to do is to ask Figma Make to create a duplicate or a copy of this design so that I can have all of the icons and copy, and I can just copy paste everything. While Figma Make is working on replicating the design, I'm going to think about what I want to do here. So first step is going to be probably about the sidebar, and I kind of want to change it a little bit. So for example, this toggle could take the whole space and be at the top, maybe remove that. This could still be interesting. The create could still be here or something here, and this could just be one like collapse button. I think it's still nice to have it. I'm wondering if we could connect the account maybe closer to the upsell. I don't know if we could have account here and then something at the bottom to upsell people, like the free trial is going to end at a billing. And then for this one here, maybe actually this search could be here on the same level as the of the page title and then fixing a bit more the paddings again. Like, I don't know why, but it's just very inconsistent between the two. So the AI copied the screen. As you can see, it's not exactly the same, but we still have the main copy, which is what I really cared about. All right, let's start designing. First, we can do the sidebar. So for the copy, I mostly use multiples of 4, and if I don't, I still stay consistent, meaning that I don't have dozens of different text styles. So if you can stick to the same typography system, then it'll really help you have more consistent designs. And I use 2 different icon libraries for projects. I usually use Cool Icons and Phosphor Icons. Phosphor Icons is a bit more universal with a lot of different industries. Cool Icons usually have those like classic icons. My strategy usually for icons, and that's something I've learned from having icons as buttons is that it's not just the icon itself. It has to be within a frame and match it to the height of the text that's with it. So here it can be 24, and then I can do pretty much whatever I want with the icon so that it matches visually. It's not too big and not too small. I have this kind of profile mix between what they have here for the upsell and their profile account. And I've tried to combine them into one. Now I want to add this little kind of toggle between workspace and personal that I want to put at the top. Stick with the same colors and as few color variations as possible so that when it's time to add some visuals, some UI, some life into the design, it's a lot easier for me to experiment and to apply them to the overall design. So I could probably Shift+A and then maybe 4, and here probably 8 could be nice, and then a little corner radius, medium, and then have another one. Shift+A, then we could maybe try 4 of paddings, 8. Of corner radius, 0 of spacing. It depends. We want it to take the whole space or as much space as possible, and we want these ones to fill the container. Take the toggle, fill container, and that should do the job. All right, so we have the main kind of navigation here. Now what we want to do is work on adding those elements here. We can just have this one to collapse everything. For this little icon, I don't think I have it, so I'm just going to create a triangle. We can flip it, we can press Command+E, and then we can customize it so it does look like the design. And then it's just going to be about having an auto layout on this. And then we actually need to flip it so that it's all closed. Let me auto layout this first. And here we could have the logo. So to get the logo, all I do is right-click on the page on the website, inspect, then selection tool. I go on the logo until I see SVG. Then I click on it, then I right-click in the code, copy. Then I take the first one, copy element, and then I have it right here. So 28 here, also there. Then Shift+A, Gap Auto, and then we auto layout everything. And then again, we auto layout at the bottom. The gap should be auto. Then we can add paddings, so maybe 16, move everything to the corners. Then for constraints, we keep top and bottom so that if we scale The design, everything sticks. And then we need to select everything and fill container. It's just very bare bones, but the goal here is just to get that wireframe, that sense of strategic architecture of the page. And then we can add on top of that the UI and the aesthetic. So now the goal in the next step is to focus on the main canvas. This could stay here, but I want to also focus on making sure that those cards have an interesting look and maybe refine a little bit more the spacings and paddings. This visual is okay. I don't know if we want something different on that. Like maybe the, we can improve the buttons as well to make sure that it feels like a button and not just a tag. I think something we could maybe try to do is have bars like that and they could become this. So this way the cards take a lot more space. 'Cause my thinking is that, hmm, okay, we have this search here, then this place here could become the tags for like quick search. And we still have maybe this, or we completely remove this navigation. Actually, that could be better. And I'm not even sure if we need that. I'd probably want just to try for fun, have those 2 buttons be like floating here. So let's create first the canvas. And so to do that, it's always a container inside of a container. And so first I want to have this main frame to take up the rest of the space on the screen. And then inside of it, I will Add this extra one, use the auto layout on this. What we do is have the padding 16 on the right and then 16 on the top. Constraint should be all of them, both should be filled. So this way it's responsive as well. You can see here, same for this here, which is super cool. So obviously here the problem is if we take the whole width of this, right, it's going to look really stretched out. So my guess. Is that we will have a max width on this so it's nice and centered. Because technically we could still have the navigation here. Okay, let's just start writing stuff. Search, and then we already have this icon. Let's change the weight of the outline, 1.5. Let's increase the paddings here and then Shift+A and auto, and then maybe 1,000 for now. And we're going to constrain, it's going to be at the center. Then we can have the tags right below it, our content, and then we can have this little wrap and change this. And then Shift+A for auto layout. We can select all of them and then Shift+Select to remove the first one, which is the active state. And we can remove this and maybe have 6. And this one, we can do 2. Something that I liked on their website, is this hover section. I don't know if there's a way to have that for this one. So first of all, I think I'm going to just change this maybe to F2. Can you guys see a bit more? Is it still clear? I can remove this also. Maybe for now we make it slightly darker so it's easier to see. This could probably also be higher. I'm going to just copy that for reference. The gap would be 12. Then we can Shift+A to auto layout, then fill container so everything is the same. So 1028 of width, you can increase Or update a bit more the spacing, then we can copy the rest. I guess the problem is going to be the very long titles. Something that I always recommend people is to duplicate every time you want to try new ideas so that you have like a almost history of what you've worked on and then you can compare both. But another version would just be, and actually I need to fix that as well, maybe 32, just have 2 of them and get closer to what they have right now. Now I want to add those like little things, so workspace map and new space. And then we're going to add an icon for both. We need to change the padding here, 10 and 8. And for this one, it's something like this. So again, 10 and 8. Could that work? I'm afraid it's a little too small. Update that to 16. So now just kind of like the final step, which is to bring some like life to it and refine the elements. So I want to refine the navigation. I want to refine maybe the spacings a little bit more, the cards as well. The colors are really cool and I'm wondering if there's a way to add that to it and also the background colors. So we can always look at what they have and what they do on the website. This is very bluish, right? Oh, this could actually work. Now we need to make this a bit smaller. So I'm just going to make a frame, lower that to maybe 22. We could actually auto layout this. What colors do we have? Let's just kind of do a check on this. I'm not sure what to do with the visuals here. Let's try to do what they have on their website and we can see then. We could have like a prompt bar instead of this so that everything is the same width. So let me copy those little elements on each card and then we can iterate on this. And then something I want to reuse is this kind of strategy of just changing the opacity. That could be Pretty sweet. And then we could have a little, a little CTA, little button at the top here. Ah, that's space. Okay, so we could do spaces here. Spaces, new space, new space. Shift+A, horizontal. We keep it at the top like this. 12 is okay, but it doesn't matter so much. Then I need a color for like the CTA here, the button. We could keep what they have, the blue. Oh, they use a capital letter for everything. So we need to do that too. And for this one, we could have like a little prompt bar. Probably need spacings as well. So I'm just going to try to design a prompt bar and adapt from it. We could reuse the same icon. Gap here, full width. This could be 9. Improve that. 32. Nice. The gap should be auto. This could be 12. 1.5. This one needs paddings as well so that it's the same height. So 8. Hug content. It's not the best. Oh, maybe this is a different one. Like this one is a bit easier to understand because of different colors, but I wanted to keep something that's You know, nice and different. Then Asana could be red, and then asset management could be a dark blue like this, like that. And this one, we can change it like this. And maybe those, maybe we don't keep them floating around. Maybe we put them here. I was probably too greedy with that. For this, it's a little hard to understand that there are other options. So having it like this could work, or does it feel too much? I want to try something. We can remove that and we have it like this. Yeah, it's kind of what they have. But if we do this, then we need to also subdivide the actual section. We add paddings, 48. Then we add paddings to this one as well. Increase the size of this, push it all the way down, top bottom, all the way down, top bottom. That's pretty cool. Then for this, we can change the color, maybe like that. Then maybe 8%. Maybe for like secondary button here. We could maybe increase a little bit more the paddings. We need to also Shift+A on that. Let's fill container. This one is content. Oh, and then I wanted to add this little thing. I don't know if it's a bit overkill or not. Make a circle, then we use this, ignore auto layout, the big one like this. Select the color, maybe 8 as well. Then layer blur, 120. Then we pick the color for each. This one we need to boost it a little bit. Otherwise it's this one, but I feel like it's just a little bit too much at the same time, whereas this is a bit more manageable. And what if we remove it completely and we keep the height? I think we need to increase the size of this and move it slightly up. I think this is still better. Is it just because it's not the same opacity or it's too much opacity? What if we remove this, increase the size, make it pills? That could be a bit better. Let's try to copy that and apply it to the other ones. We're just going to switch them so that it, it's pretty much a copy, right, of the previous one. I'm just going to change so it looks different and then we can change the color. It feels a lot better. All right, and finally we can move on to this section here. So I want to have a nice like color that matches with, it should be black, but maybe with that bluish tone on it. So what do we have? We have this one. Maybe something like that could be good. Nice. Yeah. Looks good. Then I need another one slightly lighter for like the icons. What if the outline is also this? Maybe 175. What is this one? 20. This should probably be lighter. That's too light. And these 2, we definitely need something like a different, different one. This, but still like this. Nice. Maybe that could be cool because like, as soon as you open it up, the kind of chevron also opens up and like goes down. That could be a nice little change, but now it's weird and different compared to this. So we need to remove both and instead have this to be 8, right? And then now it's aligned. Yeah. Then no gap. Then for this toggle here. That looks really cool. I bet. 8. So add billing, that's this one. Oh, that's really big. I think overall that's pretty nice. I still think that this is maybe too big. This should be 36. And then we go with 20 here. And then we can minimize a bit more the sidebar. That should scale. Yeah. Do we go with maybe 40 instead? Yeah. Okay, we can increase that if we want. All right, so the redesign is done. This is the design that we started with, and this is what we landed on for this video. That's the end of the video. Thank you so much for watching. Make sure to leave a like and subscribe, and I'll see you for the next one. Bye. Bye.