Watch Me Fix a SaaS Design in 1 Hour (Step by Step)

In this video, I'm going to find a random screen online and I'm going to redesign it in an hour. And if you don't know who I am, my name is Charles Postiaux. I'm the founder and designer at Baobab Note Studio, where we redesign products for startups that have raised a few millions to Fortune 500. Let's get started. All right, so I'm on mobbin.com. It's a great platform to find actual products and design references that are really good for learning as a designer, but also doing what I'm doing here, which is creating concepts. I think Lindy could be an interesting one simply because they do so many things. It's almost like a super app in a way that has some challenges With it, but also more complexity. A board is pretty cool, and they're really doing something unique that I think works well and looks good for them. Merio could be an interesting one. I don't know if we should redesign that or not. That could be a good contestant on this. Air could be interesting to redesign. It feels very bland, very normal, and especially like looking at their website, it looks really nice, but I don't get that feeling on the product. On the product, it feels really stale. And so I'm wondering if we can bring some of that creativity into the product. We could come up with something interesting. So I'm going to copy this screen and I'm going to ask the Figma Make AI to turn that into a design. Something I can already do is like try to figure out what we want to achieve with that. For me, right away, there are a few things. The first one would be the sidebar here. The number 2 is this top bar, and then the rest of the platform, the screen itself. And even the screen could be divided into like the navigation and then you have like the text and actions, then the board itself, and then some like extra information and actions. And again, this is one screen. Ideally it would be the whole flow. Like if I were to redesign the onboarding itself, I would think through all of those steps and I think, okay, what is like the activation moment? What's the activation point? When do the users become actual real users, not just someone going on the product for 5 minutes and then leaving forever. But yeah, I'm like, for, for example, the first thing is, do we really need all of those elements? It's like a dozen actions that can be taken right away. It's a lot. They probably have a rationale behind it. I'm just trying to figure out, okay, is there a way to simplify it? All right, so we've got the redesign from the AI. It doesn't quite look like the actual product, but it's still something. Let me try a version myself. What I'll probably do is, I do like this idea. Of keeping it almost like floating. What I would try to do perhaps would be to have like create a new board at the top here. It's like a collapsible and then create new. So this way we can remove that and instead add some of those stuff here at the bottom so that it reduces the amount of like selections and options at the top. For follow, share, and add, that's a lot of actions. It's not a bad thing, especially if people really use it a lot and care about it. I'm just wondering again, how can we make it better or how can we improve that? It feels like this top navigation is part of the rest of the product, not part of the board itself. And so if there's a way to make it feel more like part of it, that could be nice. And I'd like to keep this idea of the branding that they have. I don't know how we can get there or what can be done for it, but it would be really cool to include some of that. Now, one concept that we could do is give this idea of air and lightness to it. While still keeping that powerful interface and technology in a way. We will have to do some trade-offs because it's a concept, but I think that could be interesting. I did like this floating card here, and so I'm wondering if we could expand that through the whole product, and then we could have some key actions here, an action bar, cuz we need the add to add inside of a board, which we also need to create, be able to create new board. So that's where it's. Could be a little bit challenging, but still an interesting challenge to have. We have 2 ways to do it. The first one is this becomes a global interface that no matter where you are, it's always going to have the same actions. So like maybe create a new board, maybe you can access those like notifications, search, maybe you can customize that bar to actually be that navigation right here. That could be one way. The other one would be that it's not global, it's only based on The board that you're in. And so it's going to be follow, share, add, and search. We also have the real estate inside of the board that could be used. Like we have those here for organizing or viewing the file in a different way, but we still need those like 12 actions and a way to easily switch through boards. We could have here a dropdown with all of the boards. I don't want to overcrowd the interface. I'm just like designing, just like trying to localize stuff and see where they they could fit and how it, they could work in the product. It doesn't mean everything's going to stay, but I think that's an interesting approach. Something that we might sacrifice in this concept is all of these could be like in a dropdown, like here. Could have like a way to access the menu and then it pops up. This could be create new board. This could be navigate through the boards and this could be your profile. And do we need those 2 here? Maybe not, but I like this idea and then it pushes us to go more towards the actual branding aesthetic, which that's something I've noticed a lot in some products is they have like a really cool, really exciting branding. And then when you get into the product, it's just, it looks completely off from what I would've expected of the product to look like. And that doesn't really serve well when you onboard customers, when you want people to convert. So I'm just trying to like think about, okay, how do we actually embody the aesthetic and the brand of the product into the product, but it's still usable and it's still nice and interactive and Powerful, which is a difficult balance to do, and it takes weeks, if not months, to actually come up with something that's good and relevant and strategic. Let's try to actually do the copy on this. I usually do multiples of 4, usually always, usually always. What? Most of the time is going to be 12, 14, 16, 18, and 20. That's what I most of the time go with, but I still try to stick to the multiples of 4 rule. And then I have 2. Icon libraries that I use. First, for icons, no matter the project that you work on, you will find icons that are relevant for your project. And if you want more like general stuff, Cool Icons, I think, work really well. And then for icons, something that I always do is just have a frame and then instead of frame, use the icon. I try to keep the box the same size as the text. Nice. And then, so we have the top section and now the bottom. I'm not sure about those 2, if we need them or not. So we can try to remove those. All right, let's try that and see how it goes. This one is probably too big. Like, I do like the 44. I would want to keep everything at the same height. So if the button is 44, which we'll need to think about, but if it is, then we can reduce that one to 44 as well. I do like the blue color, but if we have a blue background, then it might not work super well. And this, we can keep it that. And for the paddings, I don't want Too much, but I still want some, some like good, good spacing. So maybe 16 would be good. Okay, so that's what we're working with right now. Is it good or not? We'll see, but I still do like the idea. And then we have the navigation, not navigation, but like core actions here. Also feels like a math problem. But yeah, that's kind of like the goal or the vision I had on this. And then in terms of UI and direction, I would, I was thinking of doing a very light blue and very dark blue, but it's too much as well. We need to rethink that. Then we add some corner radius. This one, we push it here, maybe white like that. We can also remove the opacity. We can even add like inner shadow. That could be really cool. It's not exactly like that, but I think it's more aligned with this idea. All right, so I've been jamming a little bit on this. It's cool and close to the website, but it's too much, right? Like people would not want to use that. It's too bright. And so I tried to Explore some ideas with a lighter background. Maybe we can remove that for now. It's a very light blue. And then on top of that, I added some gradients here, cool bright colors, and a bigger one here that's blue. And then I added that same kind of color that I've used there for the navigation, which I think looks cool and makes it stand out. And then I added some drop shadows on the frame itself. Then I think it looks, it looks nice and clean and lighter. That's where I kind of want to go with that. I also updated the menu icon to be on the left, which I think makes more sense, and hamburger, so it doesn't look like a math equation or something. Now the question is, how do we go with those things at the top? Because one idea would be to reuse this effect and apply it to those, which I think works. Do we need to make this one stand out or not? I'm not sure if we go with the bolder 2-pixel weight. Or change it to medium. Wait, this is add. Okay, now we're kind of messing things up. I think this could be create a new board. Yeah, this would probably be related to that. So it probably should be this add, share like this. Still looks a little too, too greasy. That feels good. I like the, I like this kind of aesthetic and design style. Do we separate them? Like have a different treatment to them? Something like that could work. How's the opacity, the contrast on this? Above 5 is good, especially for like a secondary button. But yeah, it would be good to change this to be bluish. I do like the, the vision, and I hope you do like the vision as well, but that's pretty cool. Should we close the gap a little bit? We have the whole kind of layout done with the interface. We've tried to declutter as much as possible. Again, that's a concept, so it's probably less practical UX-wise, but there is a lot more storytelling here and That's an interesting branch to dive into, I think, and it could help impact the product in a good way. It could be max width right here. Cool. We have everything now. We could do follow like they have, and then the star and the 3 dots, and all of them should actually be buttons. Maybe we can even have the chevrons and change the color. Cool. We can do something like this, an edit icon. Does it work? It does. It does work. This one. What if they were living here? Oh, actually this is all, they're all 20, so this probably should be 20 as well. Yeah, the problem is that they're not super equal in sizing. Yeah, should be better like this. Let's update just a little bit the icons. So they look more equal. Okay, cool. A bit more balanced. We need text and we need the cards. Nice. Luckily we have the text here, so that's great. And then max width, maybe 1000 would be good or 1052. I think that could be nice there. We need a lighter version of this. Let me just work on that real quick. The easiest way to come up with a color palette is just to use the primary colors that you came up with. And then you copy it on a white surface. That's super important because otherwise it's going to look different. And then you just reduce the opacity and then you can just I, and then it's going to pick the actual like 100% opacity color. And then obviously you need to change it because of the opacity here and we're good to go. The border here can expand all the way. We'll remove the corner radius here. Then bottom, we can either have those here or Let's try to put them back like they did. Need to space that a little bit more. Maybe it should be slightly bigger. And then this, and then divs. Yeah, that's better. 24, let's do 40. Yeah, probably. Then we have a good spacing overall. And then for the cards, we have those. Let me just screenshot that so I can see them right. Below me. Nice. What's the corner radius? Do we go 20 on this? Probably not. Actually, I don't like this. And we can use the drop shadows. Maybe, maybe not. This could be nice. And then we can have a nice little— I did that a while ago, but if we can have a nice little graphic design on this, maybe. That's actually cool. Nice. Then we need to change the font color, increase the size of those. Yeah, like that's going to save just a little bit of space, which we desperately need. Basically, if you want that, the thing you have to do is you have to like type as usual, but as soon as you add the spacing, it's going to create that like, like that list. So the way to remove it but still keep the number is to just Command+Z, and it's going to keep it back as like text. Maybe the groups are slightly too visible. Nice. I think that looks super cool. It took almost an hour and a half, so a bit longer than what I would've wanted, but I think this is a really cool, nice looking result. This is the before and this is the after. Actually, that looks pretty nice. But yeah, like I think it's more aligned with the brand that they have and that might help achieve that a bit more than what they have right now. So that's it. That's the end of the video. I really hope you liked it. Make sure you leave a like and subscribe and I see you for next one. Bye.