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

I found this random dashboard online and I'm going to redesign it in about an hour. And if you don't know who I am, my name is Charles Postiaux. I'm the founder and designer at baboon.studio. I've worked with companies worth over $160 billion and I do product design for a living. So why this dashboard? Because I think it has a lot of potential. It doesn't look too bad. The icons are carefully crafted. The design is not bad. I think it's a little too much. There are a lot of things happening everywhere. Everything makes sense, right? Like you need the business performance, you need today's appointments to see what's happening and how much money you've made. You need all of those things. You need the to-do list as well to know what's next, even though to some extent you probably don't need too much. But there is value in this product. There's value in this dashboard. I just need to figure out a way to improve it and make it lighter. I need to check some other design references to see if there's anything that we could use. And this is a pretty clean— still a little too much. We have like, what, 9 tabs? So it's a little much, but I really like the clean aesthetic of it. So I'm going to grab it. I also like the how it's organized on the screen. I think there would be a way to minimize this to take less space. This also take less space. We can try not to have this trial. This is very non-intrusive, so that's really good. Like, why don't we have the trial here? Okay, the company name is right there. Again, there's a problem also of this huge navigation. So I'm going to create a frame 1920 by 1200, copy that here. So what's interesting also is that usually what you see on the homepage is a representation of different pages or features of the product. Here it doesn't really feel that way. Workflow, it's really cool and visual, but there is no workflow. Like this would be the workflow, right? But it's not, it's not the workflow. It's just each category, each section here has its own thing. Schedule is today's appointment. So there is still a conflict of wording. It could be today's schedule. I don't know, maybe it's confusing for users. But then view schedule here. So there's still some call to action here. Business performance— there's no business performance here. It might be insights. I'm just wondering if there's a way to maybe hide some things that are not so high surface level, maybe one click underneath. And I know some people might say, well, yeah, but it's important, so we need to surface it at a very high level. But if you surface everything at a high level, you surface nothing at a high level. You need some Some clarity and simplicity, especially for first-time users, again, for activation, for them to understand what the product does. If you add more teammates to the product, it's going to have, like, you can imagine this is a very surface level, very kind of light version of it where you have like 2 requests, 1 quote, 1 job. But imagine if you have hundreds and hundreds of them, the impact of having some friction at every single touchpoint with the user and the product, that becomes a little bit overwhelming. Create, I'm wondering if create is just Doing that. I think it's really smart to have that. I think they've done a good job at prioritizing what's the most important actions at the top and what's the less important actions at the bottom. I would want to push it farther where we don't even show that. Nice. I was able to get their logo. You see, like, that is also really smart for OpenSea. I will grab that as well for our design. Actually, this is pretty cool too. We might do that one because then you break it down into sections. The problem with this one is it's a lot harder to Create, like you pretty much reduce the importance of that for the importance of everything else. Like Hummy does it well where you can see here search and plus. So we could do something like this. I'm not fully convinced about it. I just don't really want to sacrifice too much of the navigation because navigation is the most important thing in terms of product structure. Like you have the navigation first and then you have the different pages and features that you're going to include as like that primary foundation. And then it's more about secondary features and settings. If you don't nail down the navigation, it's going to be a lot harder for you to design a good product. That's why I usually spend a lot of time doing the navigation. That's a really small button. It's 46, but I want multiples of 4. This actually is pretty smart in terms of layout. Not exactly what we want, but I kind of like the idea of, of those different like sections and grids. I do like this too. This is pretty interesting as well. That's what I was imagining for this instead. I don't think we have an account except if this is the account. Otherwise there is just this one and there's a lot here. I would probably clean that up a little bit. I think there's so much information we need to be very specific and critical with the space that we use. You can see here, for example, it's really good because there is a lot of stuff. There's a ton of volume, there's a ton of things happening. And so that helps to nurture that great layout specifically in that grid. This, for example, would work a lot more for Like a side hustle, for example, that would still work well because it helps to educate you. It helps with invoices and all of that. So you see a different layout for a different type of user. Here, what we want to do is pretty much have like an all-in-one tool to manage your company, to manage marketing, your insights, to know about the clients that you have. So we need to have that clarity and that focus on something specific. And I think this should be customizable because not every business works the same. They have different processes, different ways of working and understanding things. This could be reduced down. It could just be that, and maybe this could be a little bit more minimized. And again, I don't know how much people use that. I think it's great for big companies. I don't know if it's great for small, even medium companies. I'm not sure. Refer friends is like, why is it there? It should be in the settings or something. Actually, this could be very fun to have. So we have a couple of options in terms of directions. I really do like the minimalism of Notion, which could work. With these in terms of information. I feel like it's something very templatized, and so that could maybe work. What if we remove the sidebar completely? What if we had like just a floating thing here for those 3, and then the rest is I don't know where? It's a big bet, but why not? I think it's worth trying. We would want search. This would be workflow. This would be something else. I don't know what it is. Maybe business. Then apps like that. I had this idea, but I don't think it Would make sense. Still keep it. We could have both. Could be fun. So let's have the three actions for now. Shift A to auto layout everything. Then this one would be different. F two. Check all of them. Maybe eight. This we could have for outline. Maybe remove that. Something like that could be fun. Still different from this, but it still still looks pretty cool. And then I really like this idea of sidebar like that. So we remove those things that we don't need anymore. We just have the rest. Optionals. And then I want to reuse kind of like a mix of this and right here. I just need to create one cell pretty much. Then I just write what this is. Then we can have workflow as the category, which I think works well like this. Then duplicate that and we have this. I don't know if we want to divide it into different sections, maybe business. Then we could have extra. Then we have all of them inside of that frame. They're all auto layout, so I'm going to just Shift+A to auto layout. Need to check if everything is fill for the resizing for the auto layout. So it all looks good. We could have a stroke on the side. Then at the bottom we can have the company name and settings. I kind of like this very simple one. Select all of them except this one. Shift+A to group them. Keep them like this. This way we can change the gap for the whole thing and have it auto so it goes down at the bottom. And here we could have kind of settings, help, and the company name to like switch. Or we do like those here. Make sure to keep it not scaling so that if it stretches, it doesn't look ugly. Then constrain here, top and bottom for vertical. I'm not a big fan of the navigation that I've done, so I'm going to focus on the rest. I feel like we're losing a little bit that style. I do like this idea, however. So maybe going back to the very unique, very simple experience. So we have request. Also, the colors could be a little bit better. I feel like if you close your eyes a little bit, the red looks like the orange and the blue looks like the green. Do we need those here? I feel like if we remove to-do and instead we have like history or happening now, something like that about the, you know, important actions to do. Because this is not really the place for our actions. It's more of an overview of the workflow, what's happening. So this could be a better place in that. I want to try without it because I really like the minimalistic aspect of Notion. We could use those colors for the states. Then we need to set a set. I like to stay consistent. If there is 2 words per category, it's good to have them for the rest. Could we have a different one? I'm going to try where it says, for example, 9. Yeah, I like this a lot better. I think it's interesting. I don't know if it's done the right way. And you see how much, I mean, it's not even comparable anymore, how much space we save between this huge thing. And then I get it, maybe it's, it's not the right target audience for it, but I still think it's important to save space. And this is like ideal case scenario in terms of width for the desktop, but this could very well work for a lot of different screen sizes. And then what else we need? Free trial, 10 days left. Group them all together. We still need a frame inside for it. Start over like this here. It looks cool. We could have the search icon too. We can have the little slash like this. We might just need to improve a little bit the paddings so it looks a bit more natural, a bit better balanced, even if it doesn't look balanced in terms of numbers here. Do we even need the stroke here? That might look better without it. We could have the settings. If we wanted, we could still have that. Actually, maybe this reversed. I'm not sure if it would work since everything is aligned on the left. Do they have a colored CTA or it's only this? Bookings blue. I actually prefer the Notion blue, but it looks too much like Notion now. I prefer the dropdown. I think it's a bit more actionable, practical. I just want to redesign it. Maybe hide it. It's a bit more subtle. The buttons at the top, 40 of height, so it's a lot more homogeneous. It's the same everywhere. And this would be also 40 then. And these would be 20. Maybe this. That's actually pretty nice. Like a little toggle. Oh, that's actually, that's a, that's actually a really smart idea. That's just a toggle and people can just click and then if you click on create, then it would toggle to a new page. I think I like this one more. I like the idea. I hope it makes sense. This didn't feel like it felt very SaaS, fintech. This feels a bit more, a bit cooler like this. I feel like we're getting there. Do they have other actions? Now sometimes they don't have it. Total active. Ah, we need the CTA here. Once I figure out this design here, this component, I will be able to also unlock this one here. I want to reuse the same. I don't really want to add those filters because it's a bit useless. And you could use the colors again. Like if you did the users with the colors here, it could be connected to that. I don't, well, I don't have time to figure it all out, but that could be really cool this way. Maybe there's a way to view more detail. There is another, there's a tag something. I just want to save space and make it cleaner so that people get here and it's a lot easier to know what to do. I don't know if they've tried to remove the, the number here, the time. Adding a logo and brand takes 2 minutes. What do you mean it takes 2 minutes? Is it just dropping, dragging and dropping the logo or is it like defining the colors, defining the logos, defining the different sizes? Like if I see 5 minutes for that, I'm like, I don't wanna do it. So I think they should maybe A/B test it to like to figure out if it's worth it or not to show the time to see if more people click on it or not. Or to show what they can unlock with it. We just need business performances. There's no more space. Can we change the colors? Should we use the one they use? Maybe a softer black could work. It's pretty cool. Maybe this could be good. It actually looks nice. Let's totally add this and add a bit more padding to those 2 probably. This should be auto for the gap. Constraint should be left and right. Home, create, and the schedule so that you can see everything. Everything has its own place. And I feel like the onboarding could be a lot faster here because it's like, okay, here's the homepage, here's your dashboard. You can customize it. You can put whatever components you want for the sections to know what's important for you and for your business. This second tab is to create stuff. So like create a request, a quote, a job, an invoice. And then the last one is just being able to see like appointments, schedule, what's happening, anything deleted, everything moved, what's today's goals and appointments to do. I feel like these are like the 3 core elements of the product and These are like the 3 most important ones. Still not sure, like not sure what to do with the business aspect of it. We could add them here, the extra stuff. I need to try. I want to see how it looks like with the other one. Does it look better? I feel like it adds some like anchor to the page, some grounding. Okay, it's pretty cool. We have a little space for business performances. I have no idea. I can sneak it like that, make it feel like we've solved it even though we haven't solved it yet. And this should be like, It sends you to different places, but I really feel like this is insights. So maybe could you say view insights? Change text here. Receivables, revenue, invoices. I mean, maybe a bit too much drop shadow. This seems pretty cool. I don't know if you will see it on, on camera or not on the video. There is a little drop shadow. Yeah, so we have the page pretty much. I think it's done. I really like the design. Maybe more like spacing, like here. There's a lot of spacing here. Yeah, I think a bit more spacing is, is good. Do we need Dividers, maybe dividers. I think an icon would have worked maybe a little bit better. So this way people would be able to still access all of their favorite features or not, or discover new ones without it being super intrusive and taking a ton of space or mental load to figure out what they are, understand where you go with that. So I think that would be like a good balance between everything while taking less space. For the user. And I think we are good to go with this. That's my reinterpretation. I didn't expect it to go this way. I didn't have any idea actually on what I wanted to do. It took 2 hours. I'm still happy with it. I think it looks cool. This is what we started with. I mean, what they have pretty much. I just wanted to keep it the same, just improve it a little bit or just the UI, but I just ended up changing everything. I think it's a little easier to understand what these are, but honestly, I think this is like a great mix. I really like this idea of having 3 toggles. To have different use cases for them, which are the core actions of the product, but make it very easy to go through them. This is optional. I think it's still useful to have them. So that's why I added them here. But yeah, that's the design. Let me know in the comments your thoughts. If you liked it, make sure to leave a like and comment.