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

In this video, I'm going to find a random stream online and we're going to redesign it together. If you don't know who I am, my name is Charles Postiaux. I'm the founder and designer at Balbano Studio, where we redesign products for startups all the way to Fortune 500s, and we've worked with companies worth over $200 billion. Now let's get started. So let's look at some products. The goal for me is just to like get some inspiration as to what I want to design and how to redesign it. Fabric could be an interesting one. I think they have like that unique Product in a way that could be a really nice product to redesign. Actual could also be a really nice one. I think they have that uniqueness, very simple, straightforward product. One product that I think could be worth redesigning is Adeline. I think the website is something that people have talked a lot about just because it's super clean and cool and creative. Then you dive into the product itself and it's very basic. Gusto could be nice. The only thing that I'm not a big fan of is just the design. Like it looks not super old, but it looks pretty old and it just doesn't quite make a lot of sense to me. Maybe we could go with the hiring page. I don't really want to reshape everything. I think I just want to do like a nice cleanup of the page, improve just a little bit the top navigation, refine the sidebar, tighten things up for like that hiring toolkit. And that could be overall like a nice little product direction to go with. All right, so let's copy this and go into Figma. I'm just going to go over and do a nice little frame. So 1920 by 1200. Something we could also do is go on Figma Make and ask the AI to create that same screen. And we can have all of that like copy without having to actually type it ourselves. Now while it's being worked on, I want to think structure and layout of the page and the actual design that we want to go with. Maybe we could go with like something similar to Manus. I like the color palette of the product, the rounded corners. Another one that I think looks really cool is the Cursor website. I really like the color palette on this, the aesthetic. So that could be also a nice little reference to have. So I'm just going to like take a broad screenshot and same for Manus. Actually, I'm going to hover also this so I get the states as well. Improving the UI and the aesthetic has value in and of itself. Can make the product feel more premium. And so you can increase the price of your subscription and you can also just easily stand out against the competition, which I think goes to, it is a pretty rough competition against like big leaders. And so that could be like a nice way to frame that redesign project. All right. So the AI made the product. We have the copy and the elements. So I think that's already like a big win on this. I think like the font is pretty big now, maybe 22. That's really big for a card that creates somewhat of like an imbalance between the navigation and then the cards. And even for like this, it feels still imbalanced between the copy here and then the tabs. Something we can do already is go on their website to like grab their logo. So just right-click, inspect the page. You click on this little thing here, then you hover the logo. They don't have an SVG though. Clicked on that link, inspect SVG, copy, copy element, and then we have it. Now how can we work on this? I think, yeah, I'd like a more traditional or modern navigation here than the sidebar at the top with like search maybe on the left. They have refer and earn at the top here, but they also have it on the sidebar. So I'm wondering if we can just remove everything up here and have a big search in the middle. And we don't really need this, but it could be like a, you know, like something you can collapse and that could be Right here. That could be one way, I think. All right, so let me just copy a little bit more of what they have and then we can figure the things out. So I'm going to grab an icon. I have 2 libraries. I have Cool Icons for like general icons and then for like a more specialized one, I have Phosphor Icons. All right, so I've outlined kind of like the copy and the icons. I've also moved some of the elements from the top here. I still need to add that profile, user profile. But the one thing I want to figure out or work on first is just optimizing or improving the typography so it looks more connected throughout the product. And I think this could be good. Something we could maybe try to do is take this, so 24, and then adding a bar here, have another frame inside centered, and the constraints are top and bottom, so it scales with how many items are in that category section. And for this, we can just keep it at the top and then match the height to be the same as the text here. So then we could have this as 2 and this one as F2. And then I just want to add this so I could reuse what we have at the bottom here. We just need a chevron. That's too big, so we can make a frame. Oh, and I wanted to add this little collapse button. Maybe like this could be nice. And then auto layout, gap auto. Oh, that doesn't look good with it centered. Maybe 24. Unclip the content and center it ourselves. Okay, nice. So we have the sidebar done and ready. I'm just going to auto layout everything and then we see if it works, if it's okay, and then we can move on to the main canvas. All right, for this we still need just no paddings. We could do 44. This extra section, and then let's try with 40 at the top. Doesn't quite work. What if we put it there? This could work. Now we need this as well, 24. This one could be 40 as well. We need to make sure everything matches in terms of like width so it all looks well aligned. And then this one, another auto layout, select everything, fill container for resizing. So everything looks nice. And then we can add some paddings. Do we go with 16 on this? Good. Let's go with that. The gap should be for this one auto as well. Then we can add a stroke here only on right, 24. Maybe this also is 24. I think an icon could work right here. Let's keep it like this for now. I just want to see how everything kind of lives together and then we can refine and optimize that. Let me check on the website, the actual like real The colors that they're using right now, just to be safe. I'm going to take the gradient as well. Sometimes they slightly change the color, so I don't know if they did or not. Yeah, you see, like, we have both, so I think that's nice. And then the gradient could be a nice addition to it. So you see, I think we will go slightly smaller overall. If it feels too weird, we can always go back or adapt. And 24, 28, we just slowly decrease the size of the copy. We have it right here. Move down to maybe 20 or 16. Let's go with 16 for now. For now, and we'll see if it's not enough. Then auto layout this for spacing. So I can technically reuse that for here. But do we go with kind of like this? How much is the rounded corner on this? Is it 12 or? Yeah, it's 12. The question is, do we have a max width and you don't go past it? And if you do that, you need to apply it on every single part of the product, which. I am not against. Okay, let's try to make a component and then we can think about that. Frame here. We can reuse that same text styles. The font is so big. That's pretty strange. We could work with one and see how it goes. I really think having that like nice little search bar here could be super cool, but that's way too big. So we could go with 16, 24, and then 13 like they do. 1316, and then 4 is nice. This is probably too big. We're gonna reuse those icons here. Maybe medium would be nice. And then for this, 1624 could be good. This is 44, so I guess we'll stick with that as a reference. 44 is nice. I'm thinking, how do we organize it in a way that scales? We need a nice little button. 3820. I have this as a reference and then I can iterate on that. Then the frame here can be 80. Same thing here, push down the gap, select those, auto layout. So all of them are 80 and then 20, fill container. We can even do similar to what the AI did. So then it's 40, center it. Yeah, I think that can look good, but it looks super off. It doesn't feel like it's centered. You see, like, it's like this where it should be 2 pixels up. Remove the auto layout on this and then just move those 2 pixels up and that works. Probably with 16, it looks slightly too big. I think 14 could work. Change this. Okay, cool. Let's duplicate that and add the other ones. All right, so we have all of those and we can Shift+A, maybe 12. That could be good. Then we need to maybe reduce this one to 20 and 14, and then add one here. Planning like that is nice. This one could be medium as well. So we could go with a 28. Then we can duplicate that, change all of this. What do we want to do with this section here? I think the tabs are really useful for people to like get specifically where they want to go. And it's more like an introduction to the resources available because you can see like see all our articles and read article, like it already redirects to the blog. The only problem or like difference is if we go with the max width, we can't really have too many of them. You need to make a frame. When you center it, it's centered within the frame, not within the canvas. What we can do is instead of having them stacked horizontally, we can have them stacked vertically. The thing, the benefit is going to look a lot like what we have at the top. So we have 20. I'm just going to try one. Read article, we can have like an arrow to redirect. It's 20, maybe 1.5. It looks a little off, so I need to update the padding as well so it feels more aligned. Maybe 1.25, and then again, v-2. We don't need this card here, so we'll have to push that text 20, and then we can just copy what we have here. It's the same, right? Yeah, so we can reuse exactly that. Then we have 12, like this. And then I just want to have this one here. So the way to make a tab have the text, you don't really need any paddings except at the bottom to make that little underline. And then what you could do is a stroke, you could do 2, and that's it. You pretty much have your tab. And then you can just duplicate it, hide the stroke. Move this to more a grayer color. Then you can auto layout and just duplicate 20 and add it to the main auto layout. We can fill container for the auto layout of the tabs. And then again, add the stroke. And even here we can maybe change the weight to be 1. And then we can have a search bar. Maybe search and ask campaign 1624. Again, like to keep things consistent. For example, like here, I want to reduce the icon because it looks way too big compared to the text. Instead of having to reduce the icon itself and then the spacing has become weird, what I want to do is stay aligned with the height of the text. So if it's 24, I'm going to take this icon here at 24. I'm going to create a frame and then reduce the icons without having to impact anything else. And maybe we improve the padding on this a little bit more, 20. We have the overall structure and layout of the page. Now we need to add the colors and maybe improve a little bit the overall design. Like for here, I'm not even sure, do we need to, we could make it like this auto spacing so it takes the whole width and I think that works. We could also have maybe a smaller version of it, like PLs. I'm not sure how we want to go with that. Even remove one. We have a slight inconsistency with these here and these. So do we want to change the headlines to be lighter? How do we make those slightly bigger? But then if we do that, we need to also update this. Yeah, that might be healthier. Make sure everything is fill container. Do it like this. Nice. I like it. 273. We could do 280. I think we've improved this quite a bit and it looks much better now. We still are missing the colors, so let me Try to grab some of the colors that they have, and then we can see if it like makes sense or not for what we're doing. And I want to see if this should be more like this. And do we want to medium? Yeah, maybe we do medium. When you like iterate on the layout and the design, it's more like UX work, wireframing, all of that stuff. You want to use as few colors as possible so that it's a lot easier then to implement those like new colors and iterate and try out different styles. I don't know. I feel like I prefer the white background. We could change those. We have this one here too. Whoa. Actually, that's not too bad. And for the outline also, do we go with— they had this one. That looks good. I don't really like the outline on the chips here. I wonder if there's a way to maybe create almost like what we thought here. Same color, 0, and then maybe almost like a little Here like that. Then 6, I don't know, we go with that. For being consistent, let's change this to be like the actual color. Maybe like this. I'm wondering if there's a way to use this for the whole card. Then this one we'll remove. Make a smaller frame. F, maybe 8. Then this could be 1420. Could maybe add a bit more paddings here. Actually, maybe we'll just keep it Y and 8. It's a matter of paddings. I think like this it's better. It's, it looks similar, but it has some visual difference so that you can differentiate between your profile and I'm assuming is the company profile. We didn't add this test on that. That looks nice. That looks good. Maybe 40 would be nice. All right, so the redesign is done. This is what they have right now, and this is what we came up with today. That's the end of the video. I really hope you liked it. Make sure to leave a like and subscribe, and I'll see you for next one. Bye! Bye!