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

I found this random screen online and we're going to redesign it together. So why did I choose this screen? I feel like it has a lot of potential. It's a data analytics and AI tool. They've raised a lot of money as well. I think the UX is good and there's a lot of navigation elements, so it's really difficult to change all of that stuff. I don't think the idea should be to redesign it into a concept that looks cool but doesn't really do anything. And so I just wanted to maybe clean up the design a little bit and try to improve it. So let's copy it and go over to Figma. So we're in Figma and now what I want to do is design the outline of that screen. And this way we're going to be able to already have some of that information and try to improve on it. So I just copied the image, put it on my frame. This is perfect, this hover state, because it tells us about the size of this button here. We're going to do 36 multiples of 4, which is very important when you design. Then it looks like they use 18 for the sections. And then for this, I don't really have any icons that could work. So we could just find something and maybe reuse it over and over again for all of them. Otherwise, it's going to take 10,000 years to, to get it done. We could use this one, drop it here, and then we're going to Shift+A to create an auto layout and expand that up to there. The spacing seems to be very strange, so we might just improve on that as well. Also, 18 seems to be quite big for that. Also use different colors for the background, which I think looks cool. Actually, what I could do is create a component right here, and then we can change those to the component. And this way, whenever I want to make a modification, I can just make it up here. We also need to be careful with the spacing between sections in this sidebar. Let's group them together, have 4 spacing. I'm just going to change this icon to be maybe 6, and then we can create A variant, auto layout the container of the components. We can add a background as well so we know what we're doing. And this one could be active and this one default. Perfect. So the active is going to, for now, we're going to keep what they have for the colors. And they use the same thing for both icon and text. And there is a little bit of rounded corners. So we can do that right here. We could do 8 for now. Maybe I will change it later. Oh, actually, now that I think about it, we could add, I mean, it doesn't really matter so much, but we could add a background just to see what we're working with. And the last one. Perfect. And then what if we add one more and remove the Boolean? I think it works. We don't really need to reuse anything else. We just have the Boolean instead. Then I'm wondering what to do with the button because it really looks different from the rest. So I think they should still be the same size everywhere. We can do 40. And this one looks like 52. Yeah. Let's reuse this component. And detach it. I think the size is the same. Let's do 40. And I'm going to probably change the paddings. So I think that works. And then I just need to make sure the spacing is correct on the rest. We could have maybe 20. Oh, we could make another one here, which is 6. And that could be category maybe. It's not a state because they locked for this one specifically, because technically you cannot click on them. We have the sidebar. I'm wondering if it would be better with an improved spacing. What if we had 6? This one should have 8. It just looks a little bit cleaner. And here maybe 4. We could do 8 and 8. I kind of like it like this. Now what we need is the top bar. I'm not sure what this is, if it closes that sidebar or if it's like another part of the product. And then Databricks. Let's have this Hamburger menu, and it should actually be a button. Maybe we can do 10. And this right here, this there, auto layout, 16. Then I need to work on the paddings here. Then we can duplicate that search bar, change the icon. We need the shortcut as well. It should be fixed width. We could do 640 maybe. Then we need to Shift+A for the left side. The gap should be auto plus P. It should be 40 and 40. center. I don't want to add those. Let's keep it like this. Interesting, the paddings here seem to be a little misaligned. Like, it should be here. They should have 4 pixel padding, and the same here. And here is very far. But you can see here, the problem is that this one is 152 and this one is just 40. So if we Shift+A to Auto Layout, it's going to be not centered. So we need a way to make it centered, and the easiest way is to just create a new frame of this and do the same width as this one. So 152. And this one should be auto. And this should be right here. And so now it's centered. Now in terms of paddings, I need the same paddings on every side. And then I need to keep it at the top here. And this one, the constraint should be left to right so that even if we change some stuff in there, it's not going to move. And this one should be same thing, but top and bottom and on the left. Could we do it? 220. This one is kind of the same font. So we have kind of like the structure, right, of the page. We have all of the outline, and I wanted to keep it simple and just use a multiple of 4 instead, which is also very easy to implement for engineers because it's just, usually 16 is a root of rem, so it should be easier to implement. We need colors, but I'm not a big fan of this. I mean, I think it works well with the original brand. Yeah, it's white. So we can keep it like this for now. Ah, they changed the colors different for, okay, I guess for readability contrast. So I think it still looks good. I think my goal was just to modify a little bit the overall spacings. And if we change the text size, that really looks pretty clean like this. I like the idea of it being regular instead of medium because it feels like a data app. I mean, it is a data app, so I would imagine it's a bit more granular specific, which I like the idea of. Is there a way to improve the paddings? I'm still not convinced. Let's just do another layout for this on 51. Is there a way to change that to 12 paddings instead of 0 since you already have 12 paddings at top? And then should this be 0? What if we change the paddings here? That's pretty fun. I'm wondering if you could just be new here, search. And so then we remove that. This way it's a lot cleaner. And this, we can maybe move it down there. I don't know if it's actually this or not, but can we do this size? 36. So what do we need? 8 and 8. Remove that. So it can be fill container, then auto for spacing at the top. Nice. And then we can actually say John Smith for the user, then maybe F2, and have another padding of 12 and 12 and 0. Shift+A to get them both. Then this should be— 50. Field container should stay the same. This one should be constrained top and bottom. There should probably be another icon, but I don't think there is one. Can we do maybe bold and maybe change the color? Oh, now we need to work on this bad boy here, the whole page. Technically, it's pretty smart because it's like the further left you go, the general it is. So here you select the catalog, then next is within the catalog what you select, and then within that you select this. Right? So it makes sense. Are there any design I could search or find? This one's pretty interesting, like this. Wow, look at the paddings. Here is super close and here is like super far. Let's give it a try. How much do we have out of corner radius? 12. This could be 36 too. So if we stay consistent on that, 8 and 8, could have that. This one is the reload or refresh. Keep those together like this. Perfect. I don't know if these are categories. I think they are. Type to search. Look at this icon. Where is it? Why is it floating? The lesson also when you design like that is you realize that a lot of products are not perfect. They're not as good as you think they are. It's a detail, but details make the product. Like you can see this is not centered again. So they've raised almost $21 billion. $21 billion. And the product is not that great. It's probably great technically and all of that stuff, but like visually it's normal. I'm going to add this one, filter, and then the short run right there. I don't think we can change that. I don't even know if it's worth it to change that. So the key to do this is just to add paddings, maybe 0. And so then what we do is add extra paddings. Actually, we could add on both sides. We could have random ones for some others. It's just a concept. So I'm I'm fine skipping that. And then I just need this to be different. Is this but less complex? Ah, we can use that. We can select all of them, fill container, and this we'll have to move it even more. Like that seems good. All right, this one, these 2 needs to have that padding and we've got it. So now we can hide it again. This could be a fill. Then here we could have a stroke, but only at the bottom. Can they be F2? 12, 12, maybe a 0 in this 12 as well. That looks pretty good. Then this one is the active. State, and we can shorten that. It should be field. Can we stick it there? That actually looks very fun like this. Yeah, we do need to do that. So I'm going to remove that. Or we could use the same thing as this one. So search here, it would be filter. That looks pretty cool. I'm just remembering the spacing. We had 6 of gap. What did they do for— it's the same color. What if it was the same color like that? And this one should be 6. 2020. We could increase that. Yeah, we did save a lot of space, all this extra, and pretty comfortable as well. I don't know if we want to Shift+A on that, do this, 0, and then we remove those. We keep this, remove those here. We remove this one. I think I prefer this one. Can we minimize that to 40? That actually looks pretty cool. Such a clean navigation. Like, it just naturally would naturally fade in and out as you hover stuff and you would see everything right away. I really like this. And it should not be bold. Keep it everything the same. Should be 6 though. Just to stay consistent, let's also make it a button here. And this way we don't need paddings. We always need like icons always need to be inside of buttons. So let's work on that last piece. The final, the final boss. It really shifted from what I had in mind when I saw this design, but not in a bad way. Happy surprise. Honestly, I feel like we've done so much of the work laying out the structure, keeping that consistency and everything, that it might be straightforward. Retail sales. Oh, the only difference here is that we might keep it auto layout stuff. Then we'll remove that. We're going to put them like this. They don't have any paddings. And the way I keep it like this is because we need to have that like outline. Sample data, details, permissions. So many. 20 spacing. I could also make those components, but it's not as critical as this because it's just 2 states and only here. But yeah, otherwise we'd be like default and active states. 6. This one is good. And then we need to figure out what we want to do. No corner radius, maybe 8. Look on the bottom and this could be— we need those. So let's remove those 2. And you see it's so much easier now to design because we've already done the work to outline those details. 3 call to actions is a lot. Let's put that here. Share, we don't really need it, but I think for consistency they kept it. And then create. Now we keep those. I'm going to add that. No, I have it here. Like the menu. Okay, maybe we don't have that here. And this way we can have a stroke there. Yeah, we might. Maybe 12. And this, the benefit of that is it takes the whole page. You really have a lot of space to do that. And then we would have the 12 Paddings. Yes. Let's totally add this. 12 paddings. Then we need a description. Let's add the colors. And now it seems so much more valuable and important to have that call to action here because there is no other blue color. There is no other fill color. It's only those. And that's it. Here it's not a lot more, but you see the manage trial. You see the new here. Just that one. I think we need to do something about the buttons. They look so bad. What do we have? Let's do 8. Nice. And then we want the description. Let's try it all. Okay, that's weird because filter column as well as it have a search. Should be search columns. And then we have the magical AI generate. Let's have a max width limit here. Auto for the gap. That should be relatively simple. I really don't want to do that table. All right, let's speedrun this. For this, we just need the one on the right, then type, then comment. No corner radius. Shift+A, horizontal, 0. Again, for this, I would usually have components. There is no need for components here, luckily. Oh, we can keep it like this actually. And for this, we remove the stroke and we change back to regular. And then the padding is a little weird. So maybe we can just add a gap. So let's just hide it and have a third one. Okay. Yeah. And then we can have the stroke again, 0. I mean, E. Bottom. And why it doesn't show up? Let's set it here. Ah, right. That's why it changes because the, yeah, we have to remove the gap. Actually, we could keep it like this. What is that? 36. Let's keep it like this for now. And then about this table, let's move it there. We're going to have to mix what we have for description and what we have for the table. We just need 2 columns. We don't need those 2. Then owner. Could have something like that, but then we remove those stuff. Let's focus on this one first. We can keep it like this. Remove that. And I think we've got everything needed from this. Now the challenge is going to be to just resize that stuff. Cool, like this works. Yeah, this we need to fill container auto. I'm not a big fan of the, of the spacing here. It could just be like this, to be fair. It looks a little boring though. Something we could do is, you know, they have the AI chat like here. Maybe we could use that because then it looks cool and I think it looks Better than that visually. That's the design. That's like exactly what they have here. I mean, exactly in terms of content, but the redesign is pretty much done. Something extra that we could do is the AI chat on the side, which I think could be a nice detail. Something like that. Then they have chat bar-ish. We can use— we could use that. Remove that. Remove all of that. Space auto. Could feel like a chat. Now that's what I call a superpowered interface. Suggestions. I don't know. And I just copy because I have no idea what else to write. Explored data opportunities. That's actually really cool. Do we need this? Like, that could be very cool. Now that's what I'm talking about. We've been able to save so much space compared to this design, which honestly, like, if you move that a little bit more to the side, you shrink it down a little bit, you could fit that. But you can see this already is pretty well sized and this is almost the same size, like 1032. How much is that? Yeah. Yeah, we have about 130-ish pixels less, which doesn't really feel like it. But that could be really, really cool. Now, the only— maybe not a problem, but the only thing here that I would maybe work on and improve if I had to would be it's very bland, right? Like, I think the benefit of this here is that it's a lot more simple to differentiate stuff, where here it's not that simple. So does it mean we need to maybe change this here to be like that? Do we need to do this? Not sure. Should the background be different? I think that helps actually. We can keep it like this. It looks pretty cool. And then I want to try one last thing to do like kind of like a desktop. I don't know if it's going to work, but basically we want to do like, it's not going to be exactly like a desktop interface, but we'll probably need tabs, like the little dots here, but it's just a mockup. Can we use the glass texture on this? Maybe not. Okay. I've spent a long time working on that. I think that would look super cool. And I think this way it's a lot easier to differentiate. It's not perfect. I just did it in like 10 minutes, but this way you can easily differentiate the kind of the chat, the main centerpiece, and that's the design. So that you can imagine this is your desktop. I don't know how to do data and analytics and all of that, but I would use it. It looks really, really cool. And so this is what they have right now. This is what we landed on in terms of just the redesign itself. We added that little AI assistant, so it should have been like this if we wanted to really stay exactly like they have. Then I think that little AI assistant is really cool and like nice little detail to have on the screen. And it works really well with the rest of the design and the kind of design system we've built. And if you want to really go into the details and imagine what it would look like if it was actually like inside of a product on a desktop, something like that, it would probably be something similar to this. We have 4 whites, 2 blacks, and the red that I've changed a little bit so it's more readable on this. But that looks really cool. And that's it. Let me know what you think in the comments and make sure to leave a like and subscribe if you enjoyed this redesign. It was really fun to do it.