Did I Go TOO FAR With This Redesign? (SaaS Design)

In this video, product designer Charles Postiaux selects a random SaaS interface (including Contractbook, 1Password, Revolut, and TwelveLabs) and conducts a live redesign. He begins with a quick audit, pointing out inconsistencies in color, spacing, and navigation, and the overall clutter of the original screens. He then establishes a design‑system foundation—using a 1920×1200 frame, multiples of four for spacing, and auto‑layout principles—to build a clean card/tile layout. Throughout the process he experiments with card versus tile structures, adjusts colors (blue palettes, shadows, background fills), and refines typography and button sizes. A major focus is simplifying navigation: moving from a right‑hand menu to a left‑hand, customizable menu, and relocating secondary features into settings to keep the core experience focused. He emphasizes an opinionated, user‑centric approach, suggesting that allowing users to customize their menu can differentiate the product. The video ends with a concise, decluttered UI, a reflection on the benefits of opinionated design, and a call‑to‑action for viewers.
Chapters
My name is Charles. I'm a product designer. I've worked for companies worth over $160 billion, and I'm going to find a random screen online and redesign it. We're going to try to understand the features, the experience, what's good and what can be improved. Let's find the screen. And by the way, if you find design that you think could be nice to redesign, you can let me know in the comments and that could be another video. This is an interesting one, mostly because I feel like it has some potential. To look good. Something I'm already noticing is like the purple card is different in terms of design than the green one. They achieve different things, but it's not super consistent in that sense. This is very light purple and this is pretty dark green. The spacing is really wide here, so there's potential. I don't know. This is also confusing because there are so many stuff everywhere. Like you have the navigation at the top, buttons to create more stuff. You have buttons in the center. You have like this preview. With a ton of stuff in it. You have also buttons here, you can change the view here. Very confusing, but it's just exhausting to do, to redesign. You see, like, they could just remove that stuff. Like, what they could do is just maybe just all contracts, you don't have any of those. Then you don't need imports because it doesn't exist. Contract spaces could just be one, actually could just be like that. Then all of this doesn't exist either, that is gone as well. And then you can just have what they had here. And you could just have that and that's it. Okay, you could actually, you could just remove that as well. Could just be that. View all contracts and then you have that in the middle. And super easy, you just create stuff. It doesn't look, you know, like this is what they have right now. It's a lot. It's so much. Anyway, that could be an interesting, you know, design to do. But just try to be, just try to be simple in that. You don't have to overcomplicate things. This one is the same product, Contractbook. So I feel like they could We could redesign that too. Again, it's a ton of stuff, which doesn't surprise me now, but maybe contract data could be at the top. What's new could be at the bottom. Could just be one column, not 2 columns. Latest project could just be horizontal. Yeah, could be nice. 1Password could be interesting to do just because it looks very bad, but it's not that many things to change. So it could be a cool redesign to do. I don't like the navigation on the right just because conventionally it's always on the left. They wanted to do something different and it feels more like a vault because you have the logo at the top left. But we could change that. We could have a different way to do it and then just have cards. Because again, what they want to do is fit the width, which is not bad, but it just looks different. Let's try to do this one. So we're just going to make a frame, 1920 by 1200. We might use multiples of 4 for this. So like 4 pixels, 8, 12, 16, 20, 24. Because one idea that we could do is to have just cards there, just cards like that, like a gallery carousel. And then we could even have like a little bar. And then you could have a section name like that. And then you would have like that. And then here it would be reports with like a chevron and you can open the menu from here. And then we could have your vault items here. Then we would have the logo like that. And then it would be the account here. Because when you think about it, 1Password is about storing passwords and storing information. So how do we make a very professional, safe product cool or different? So I'm just going to— we could use that for reference. We just need 3 cards or maybe a little bit less. So how do we want to proceed with that? Okay, we can change that. Would be 16, maybe 24. This would be a button. 44 is good. And maybe 16, maybe 20. Then we need to reuse that for the name. Then we need a chevron, drop it 8. We might change the color. They have a gray, it's maybe too bright. And then one per word, if we need 44, but it's okay, we might do 44. Then we're going to do that. All right. And then we need auto for the space in between and then 24. Nice. Then we need to make the cards. Actually, Revolut, we might need the I like the design of like having the background like that. The colors are cool, so we might have that. And then I need that for like a menu maybe, but that's not what I'm here for. I need cards or tiles. Maybe tiles work. Tile. Now let's go back to card. This would technically work. This product I'm reviewing right now is TwelveLabs, and I like their design for that, so I'm wondering if we could use this. It's a little small, but actually that's not bad. Cool. Then we would have that. Let's duplicate it. Maybe 24 of spacing. Now what I'm wondering is, do we need those sections? Security reports, account activity, team insights. Maybe. Because we have a couple options. We could either have it— what do we need? Bridge report. Let's screenshot that. Then we need a CTA. 4420. Last viewed. Do we care about last viewed? I don't really want last viewed. For the design, I'm not sure. Let's add another layout and fix that bottom. We might actually not even need that. Cool. So that strategy of doing 3, 3 doesn't work because there are 7 of them. Now I'm wondering how we want to move forward with that. Is there a way to make it maybe bigger, slightly bigger? I don't want to make it too big, otherwise it's going to be difficult. Yeah, to go through it, like it makes no sense. This is kind of— it's pretty good. Now something we could do is also like Cosmos, where— let me grab that. We could try to do like Cosmos. Let's try and see. So if we switch that, then this would be dashboard and vault items. Then this would be the search, search for, and more like that. Maybe have a search icon. It's maybe too big. We could change that. How much is the text? 24. No, I'm not a big fan of that. I think I prefer the idea of here. I still like the thing here, but then it's like, why do we need dashboard if it's achieved there? Or we just have that. Cool. Let's remove the— oh wait, what's that? What if we do 40? Let's do 40. How to do that, that thing? Where is the content? Sign-in attempts. Actually, we can do it here. Usage report, account, account activity. We need to— and then team report is Team Insights. And I don't know how we want to represent that. Amount of cards there are. How much is it? 76. Wow, could work. That's the size of this, about 260 and 76. Let's do 260. Let's do 64 for now. That's so small. Let's do 440 like that. Actually, we might need a hamburger menu like that. Could work better. Nice, I like this a bit more. Now let's try to add colors and change a bit that thing. So Maybe I'm going to change that to 1.5. Maybe this could be smaller, but we keep that. So the container is— yeah, maybe not. Should we do more? Should we do 28? Yeah. Let's try with the colors of Revolut to see. Nice. Then I want to use that, but it should be blue. Blue, please. It's a little hard to read, but I prefer that. So we might need to adapt. It looks pretty cool. Let's try to use the blue. Blue that they have. Okay, and what if we change that to 24, 20? Could work. Nice. So do like the rest looks pretty clean. This we need to change it. We're going to do 12 and put it to E so it matches with the background no matter what. This one might do the same thing. 40 is good. This could be white. How much? 20, 20. Okay, let's go 16. What if we do that in blue? Not sure. That's actually a pretty cool design like this. And the benefit is that we can regroup them to change all of them and it can stay there. Maybe another design would be 0, 12, 100, fill container. This is 60, maybe even less. Maybe this is also 4, maybe 8 is good. What if it's 100? What if it's white? No, actually I kind of like that. We could make it thinner and then we can change that to give an impression of change. Maybe like this, and then it would change, it would adapt depending on where you are in the experience. Pretty cool. Let's try another one. I want to do like the F here. Let's go back on 12 Labs. How did it do it like that? Relatively the same. Just change that too and have this. What if we increase? It doesn't really work. I do kind of like this more. What if you push it to 60? Okay. I think maybe both are interesting and remove that and have that instead. We can actually also change the color. You know, 1Password, like the blue they use is a very overused blue. So I know it could be fun to have something a bit different. And I do like that color thing. So we might try that. Just going to bring that up here. So we can say this one, sign-in attempts. So this and view report. Did I have a different hover state? No, not really. Let's try and see how it goes. Can we do it like No, let's try a normal way to do it. I mean, normal way. What is normal? I prefer this. So nice. Then we want to color like this. It looks pretty cool. What if we change that to be slightly more? Maybe you could have also inner shadows. 24. We duplicate it. We do the opposite. So that's really pretty cool. You know, like it's nice and different. You would be like, is this really 1Password? Maybe we change it again. Nice. Do we do more? Or maybe we can just keep doing that. Could be. Is this too little? Too small? We cannot see it. How many are there? 7, right? 1, 2, 3, 4, 5. Yeah. So it's 7. No, it's more. Wow. That's a lot more. Should be this. And what if this has no stuff and it's at the bottom? Yeah, there are a lot of ways to do it. So this is good. Or do we need it? No, it's okay. I think that's cool like this. I don't know if we need drop shadows. No, this is the same. We don't need it. I'm still not sure about the navigation. Actually, just that. That could work. Let's try again with the drop shadow. They don't use drop shadow, right? No. Yeah, I think that's pretty cool and unique. I like the design. Let's try another version where— is it the same? M6. Okay, let's just do that. And let's try where those white— it doesn't feel the same though. And if we remove that? No. I think this is my favorite one. What if we try a very bright color? And we could have multiple ones in there. Have this and then change it, right? And we can even change— I don't know what to call that. That's pretty cool. Yeah, I like that. Let's try to design it. It's only been an hour. So I want to again, like, use that bullet style in terms of the grid. And we need this. They want to download the app, so get the apps. Yeah, what's that? 6. And so then if we were to use this, what we could do is we could group, remove that one, group everything, then lock it, have a square, and then we can F, maybe not F, I'll see. Background blur, maybe 24 is good. And this could expand like menu. Then we need to add them together, auto spacing, then we raise that down. It's fine. Maybe we still do it. So let's try 24, 10. Then we can do here 0, 0. Fill container, stroke, E on the top. Then again, oh, is there already one? 24, 10. Then we just add the names. Okay, I think they would, they have to, they have to group those into smaller categories because that's like A lot of stuff. Policies and biddings can be in settings. Activity logs integration can be— and developer tool can be in settings. Invitation can be in settings or in people dashboard. We already have it. So do we keep F or do we make it 0? We could do it like this. Perfect. Just like that. It's actually pretty cool. So then you click on it, it expands into that menu. You can close the menu again, switch pages. And it's pretty nice. Yeah, like that. I do like the little groups here, the little groupings. So this is like the design that they have. And obviously it's just one screen. They probably have a design system where those cards can be reused everywhere else. For me, it's very unique. Actually, I think it could also be reused in many places. But yeah, I do like the simple design, simple navigation. We try to declutter as much as possible, remove all the information that we don't need, all the design elements that are not needed for the user to get the most out of the experience. It's not overwhelming, but you can see it's just a ton of information everywhere. We just remove all of that. We simplify it. And it's still practical. You still have the menu here. That's simple and easy to use. We try to remove a ton of those pages from the menu and just have them in the settings instead. So you can just focus on the core experience of the product. The extra stuff, you can put it in the settings. And actually, you know, the menu could also just be customizable. Maybe in the settings you have like a customization page where you can decide what gets into the menu so that it's easy for you to go through it. Because the goal of 1Password is that this is your vault, so you should be able to set up the vault the way you want it to be. There are features you don't want to have. Like, if I'm just here for the reports, then I want the reports to be in the menu and easy to access. If I don't have a team, I don't really care that there is a team settings. Very cool. I really like the design. I think it's also opinionated. But that's how you stand out. Being opinionated, having that design that stands out compared to the competition is something that can be used as a great advantage. Thank you so much for watching. This is the end of this redesign. Make sure to leave a like and subscribe. Also, YouTube thinks you will like this next video. I think it's a good video, to be fair. It's a, it's a pretty cool video. So make sure to give it a watch. Bye. Bye.










