Watch Me Fix A SaaS Design In 24 Minutes

This is Salesforce. It's a CRM software company and they recently raised $25 billion to buy a ton of their own stock back. But here is the real problem. Salesforce has been struggling recently. Their stock dropped by 27% in the last 12 months and new competitors have entered their market. Not looking super good. So in this video, I'm going to redesign their key screen to help them stand out again in their market. I'm Charles Postiaux, founder of Baboon.studio, a product design studio that helps businesses scale by making their products stand out in crowded markets. So let's review Salesforce screen and see how we can improve it. All right, so this is the screen I want to redesign. I've made a little frame so it's easier to add stuff and it doesn't float away. And I can already make another one so I can get started as well on the design. The frame is 1920 by 1200. And the thing I want to start first with is just having that little review of the screen itself and see what we can improve, what we can iterate on, and how to make the design better, how to make the product stand out and be a true unique experience for the users, not just a very enterprise-like design. First of all, starting with the sidebar, you can see that it's really, really big. The icons are super big. I think that could already be a great step forward, is just cleaning that up, refining it, maybe just having icons as well. Something else I'm thinking about is looking at this top navigation here. There is a lot of empty space or space taken that doesn't really make a lot of sense to me. First of all, I think we don't really need to show this like trial top bar. And here we have the logo, we have the search, and all of these, I think maybe we could try to push them on the sidebar here at the bottom. It's pretty common and maybe it could save us space because then all we have is the search bar. We have some breadcrumbs, I think breadcrumbs, maybe it's tabs, but I think it's breadcrumbs. And then it's the focus on this kind of user layout or like lead layout. Something else I'm noticing is this, it's not really a timeline, it's more like a progress bar maybe. I mean, it's technically a timeline as well, but it takes a re— like a lot of space and I get it. It visually, it makes sense. I'm just wondering how we could maybe go about it and if there's a way to simplify it or to, I don't know. I'm not sure. Here it's. super compact. There's not a lot of padding, and in some way I get it. You have a ton of information to get right away for the user just jumping into that screen, so you want to communicate as much as possible without having to click or scroll. I'm just wondering if there's a way to make it lighter and maybe more consistent throughout the whole screen. And for colors as well, like looking at the colors, you have a shade here of blue, you have another one here, the text is a different blue. So many different shades, it just feels a little Can we make it consistent to some extent? That would be great. I found some design inspiration that I think could be cool. Like I do like from Linktree, this, that's kind of like what I like to have. Maybe it's not exactly right, but having this detachment from like this floating card and then having the darkened background could be cool. There are also menus. I really like their sidebar. I think it's super clean and nice. Just the icon is easy to understand and to read. I guess on hover you could see what these are and They also have this expanded column design and you can exactly see everything that's happening. And so maybe we could do something like that here, because I could imagine that this is probably top level. And then once you click on one of those, it's going to open up maybe a sidebar, a secondary navigation, and that could work really well for this. But I do like that. And overall, just having this balance between the light cards and then maybe a darker background could work well. Maybe the sidebar could be like that. And then I also liked this one here, this from Runway, because they have this bluish color that I think, I don't know yet the color palette we want to go with for this, but I can imagine it's going to be around the blue that they have. So it could be really nice to have something like this. So let's get started with the sidebar. Just going to make like a little sidebar here, maybe 64 to get started. Then for colors, I use shades of gray. That's pretty much everything that I use all the time when I design, at least until there is some UI or branding coming up to it. But otherwise it's always shade of black, shade of gray. And I keep them consistent so that I have maybe 6 to 8 colors and it's super easy afterwards to iterate faster and to identify which elements need to be updated. Then for the icons, I have 2 icon libraries. I have Cool Icons, which I think is really good for your standard icons, the navigation interface, the arrows, really good. And then I have Phosphor Icons, which is more specialized. It's usually easier to get any, like any industry. When I design, these are my 2 go-tos. There are a couple of things that are super important with icons that I usually recommend people to do is first of all, if it's a button, it should always belong inside of a frame. And then I can do whatever I want if I want to minimize it or not. And that's a great thing is it's not going to change anything regarding the auto layout when we make it and the spacings between the sidebar, no matter the size of this icon. And every time you add an icon, make sure to follow constraint to center it. All the time because usually it depends on the library, but some of them are going to arrive as scale. And so when it scales, it's going to stretch out a lot, whether it's in height or in width, and that's going to look really bad. And usually when you notice it, it's too late to fix it and you need to go through all of the icons again. So let's add all of the icons and see how it goes. Real quick, if you want to go deeper into improving your design skills, you want to get access to the redesigned source files that I have on the YouTube channel, you want to get exclusive content and limited perks, you can become a YouTube member for just $4.99 a month. You can click on on the button join right under this video next to the subscribe button. And that's it, back to the video. All right, so I added all of the icons. I made sure that this is selected, like here you can see I don't have a lot of colors except like the blue from Salesforce. I added the little logo as well. And so now once I have all this, I'm going to auto layout everything together. So first of all, I'm going to select each of the icons here, Shift+A to auto layout, and then 4. Same at the bottom, 4. You can see here for Manage, for example, I think this is— there is a bit more spacing between the icon and the navigation. And so we're going to do 8, for example. I think that would work really well. Shift+A again, and then we can select everything, Shift+A, and then we have the sidebar ready. Now let's work on the top bar and I think figure out like how do we go with these kind of things here. This one is already removed, so We only have the search and then we have the breadcrumb tabs. So I could reuse exactly the same height as the button. So again, everything stays consistent. All right, so we have the name/tab/breadcrumb here and I've added also that little like edit button all the other way here. So I'm not sure exactly what it does, if it's for this or if it's for the page itself, but at least it's there. We can keep it like this for now. I'm not sure exactly how we would do it because I moved the search to here. So do we have it there? Do we have it on the sidebar? I think on the sidebar it's cleaner, but like it would look a little weird if it, if we had it here. I think it's, that's nice this way. It's consistent. It really feels like, okay, this is your, this is your whole canvas for this specific lead and the search is more on the whole product itself. And then we can work on like those little cards here. So we have the about with the description of the lead. We have the actions here, which are sort of like timeline and multiple actions. I say actions because I'm like, there are a lot of different things. I think there's email, a task, you can have a call, and then event. And then this is like Slack because Salesforce owns Slack. So I think it's a really easy way to integrate it into their product. And actually, if we remove the icon, we just keep text, maybe have this instead. For example, this would be email and then we can have the chevron here. For the dropdown. And then we could have event, then call, and then task. I do like the rounded corners on those. I feel like it looks pretty nice. Maybe it could fit the whole width, but that's for later. I'm just wondering, maybe 8. If we do 18 centered, 8 of gap here, and then corner radius, we do 100. Make sure to keep the colors similar and standard. I think that looks pretty cool like this. And even the section could also work in this same style. I think that could be a really consistent and nice looking style. Let me work on like adding those elements here and then we can see if it makes sense or not. So I added those elements here that looks really close to what they have. I don't really want to add this timeline here, but it still makes sense. I'm just wondering how we could have that differently. And for the settings here, maybe they could be floating like at the bottom here. I think that would be really nice instead of packing everything at the top here, we could maybe add a bit more visual hierarchy between everything, and that could make it easier. So something like this floating here, or you can imagine at the top, I feel like it could be pretty cool to have that there. And I'm wondering even if these could even be cards instead. It's like a background and then paddings, you know. I think that could be pretty cool. I added this drop shadow here from a previous project, actually the previous redesign I did on the channel, if you have not watched it. And that could Look nice. Obviously, I think the background should maybe look like the here, and then we could have like an auto layout 24. Then we can expand that. This stays in here. That's pretty fun. I think that could be pretty nice. I've replaced, you can see the icons and pretty much the colors and visuals with text. And so we lose that, that color here. It can come back here, but I'm wondering to save space, maybe if it could maybe just be like a little a little bullet because how do you connect this visual with that specific tag here that's chip? It doesn't work after you've tried and you've created something. You're like, oh, okay, the blue belongs to the email and the green belongs to the event. But when you're learning it and getting onboarding, it doesn't really make sense. I'm wondering if instead of having that, you know, like a little chip here, something like that, then auto layout center, maybe 6 of maybe 6 would be good. Remove this. Like if this doesn't achieve the same thing, and then we could even put something like here. And so then you connect the dots literally between the two. And this way it's a lot easier to make the connection and you still get a cleaner interface, but at the same time you still have the connection between the color and what it represents. Let me just duplicate this and add it next to it so we can see how it goes. All right, so I've jammed a little bit and I think this is a really interesting interface. I added the chevron I forgot to add here. And with those little, again, dots, I think it could work really well with, with this. But I'm still interested. I'm wondering how it's going to look like if we have a, like a dark, like this. So I'm wondering if it could be applied for the whole product or if it's just this that looks nice. Yeah, I don't know. I think it, it works for this screen, but it kind of kills the whole powerful interface. You can imagine like this might work for this specific experience, but if you apply it for the whole product, it's just going to look too too gray. I think that's a little, a little too much, but at least we've got it. So I think that's nice. Now I want to work on this about. I— maybe we could reuse that. Like, you can imagine like the name being here and then the actual name being there. And maybe we can remove that and have this chevron be the edit button. And overall, even here, like, this could be about. So I guess only the actions here would be removed and this one here. But besides that, I feel like if we can keep that consistent design element, That's going to be a big solver compared to, you know, what we have here, which feels very different. And it was the main point also of this redesign concept. It's just how do we create something that feels like they all belong with each other and stay consistent. So let me duplicate that here and we can try it. Just going to remove that. You see, that looks pretty nice. I think that would work well with that one actually. Let me move it. Oh, maybe this one. Yeah. Like you can see that looks pretty nice between the two. Like it feels a lot more consistent and like they belong in the same product interface. Now there is a little bit of visual inconsistency here, although the text is literally like, it's literally the same. It still feels different because of the design here. But besides that, I think it's pretty nice. Maybe those could be slightly bigger as well. Now I think about it, but I'm just afraid it looks, I don't know, I maybe I'm playing it safe here, but. I like how it looks very minimal and simple to understand and scan. Now I'm wondering, because it's still like, imagine here, this is just 2 of them. I'm wondering if it's going to be too much if we have 10, 20 different fields. So I have an idea here. What if they belong to the same card? So I would just need to update a little bit. So Shift+A here, and then we can push that there. 8 for now, because we're going to add a divider like they have. And then we can take that as well, paste it here, and then add a little divider here. 1 and then E2. Oh, now that, that looks really nice. We save space and it feels like it belongs, it all belongs together, which works really well here. And now I'm thinking about it, it could also work really well for the timeline because the timeline problem is it does, it feels like a stack. So I feel like in a way it does feel like it belongs together, but if we can group them like this, I feel like it might even make more sense in, in that way. So let me just clean that up a little bit, add this one, and then we can see if it Makes sense or not. So it would look something like this with all the information. I added a little new action. I feel like maybe it's because I don't know what's coming up next. I don't know if there's anything else, but it does make sense in my opinion to try to make people want to add more things, be proactive with it, with the interface and the experience. So I think this could be really, really nice. Like it does feel really cool in my opinion. I don't know what you guys think right now watching this, but I think it looks really solid. So now the only thing that we have left is the Slack column here. All we need is like Slack channel, the logo, then we need this chat input bar. I don't really want to design that or write that for now, I guess. But if we have that, then we can like, okay, this is solid. So let me add the icon here. So it looks a little different compared to the rest, but I like their idea that like this is not technically not Salesforce. It's more like a widget almost. It doesn't bother me so much that it becomes a little bit bigger like this. So now let me just take a screenshot of that and we can try to work on the chat here. So very simple, nothing really crazy to work on. I'm going to use E2 because we've been using it for a while. Maybe something like this could work. I don't know if the floating, I feel like it kind of kills it a little bit. Let's just have 0 of gap and then we can remove the corner radius at the bottom at 12 just like This one here, and then we can add a stroke here, remove the one at the bottom so it doesn't duplicate with the stroke we already have at the bottom, have an outline here. So we've got everything now. We have the 3 columns. So now the only thing that we are missing is all of this, the progress, the lead, and then some actions here. So if we can figure this out, I think we're in a really, really good spot. So let me duplicate that and see what we can do. Actually, something I just thought about is maybe you could have a frame here. I mean, a frame, a card that looks like the same style as this. with 24 of corner radius. Then we could use this for lead and then maybe 28, 32, change this to 9 or 6, and then we could have 60. Like this could be really cool here. And then we could move this and have the buttons here. And so that feels like a very powerful product like that. The only thing that would be missing is this here, the progress, maybe something like that. We're using the same design as the other buttons and making it full width. It feels really stretched out to me. Or maybe we could have some sort of like little toggle here, like, you know, with multiple text. I mean, all of those could be at the top, but then what do we do with that? I've got this from another project, the redesign I actually did last time on the channel, so you can check this out. But I did this little navigation. I'm wondering even if that makes sense to have something like this or not. So I think that's pretty cool, but now with the kind of rounded corners, I'm not even sure if that makes sense. And also the height is really different between the two. So let me explore a few options on this because I think maybe we could land into something that, I don't know, can feel nice. All right, so I've explored a bunch of ideas, like some are like fixed width on all of them. Maybe it's like, like what I had here. And I've completely removed— I've just deleted this, this breadcrumb for now. I'm, I'm thinking, should it be good or not? And actually, something I thought about is, what if— because if we remove all of that, right, what if we remove this, then what if this becomes the card instead of Because if, if we remove this, then that doesn't have any importance. And so instead, what if you just slide in and expands a little bit and it belongs together? And I think that can be pretty cool. Like this could be the canvas. But anyway, I'm just wondering for this, whichever feels good. I think this kind of feels good simply because it matches with the rest, but is it maybe because of it's a wireframe and not, not UI yet? I don't know. Maybe it could be here. But mark as status as complete feels a little far. It does make sense in a way because this is the top right where it's like it's done, it's checked. You check the status of it and in a way it works. Okay, so I've been iterating and kind of refining a little bit the sizes and stuff and it does feel the most natural when it's at the top here. This is, I don't know, like maybe it could be floating at the bottom here, but then it kind of, even if it's like 12 pixels, something like that, it feels a little close to those like secondary actions. And so this is just on hold, but otherwise I I really like this design of having those here and the car here. Now the only problem with that I would probably think of is it looks more of a navigation like tabs, and it doesn't really feel like this is part of the progress of this specific lead. So it looks cool, but UX-wise it doesn't make so much sense. Let me get this blue here. I think for the CTA would be perfect. What we could do is have this here, then we have White, like that already looks really nice. And here we could have also that. And then the drop shadow that I have here, we could put it right there. And then for this one, I could reuse that same drop shadow. Then the fill could be the blue that they have. And then I can reuse that one for the drop shadow here, something like this. And then I could maybe add a little inner shadow like that. And that looks super cool as well. And again, do we put it here? Do we keep it at the bottom here? Okay, that feels good, but it feels more like it's complete, like you want to click on it. It's completed, you want to click on it and you don't, like it shouldn't be something you should click on it until it's done. But that looks super clean. I really like that. I think we're in a good spot. Now we should probably think about adding some colors on top of just the blue that I've just added here. The one that I really like, the blue, is the runway blue. So I think we could try to go with that and see if it makes sense or not. And you can see again, like the same thing I talked about with the colors, being consistent with the colors and the shades of gray. And it's the same thing with the text. The typography style is the same thing with the paddings. Everything is like ideally multiples of 4. That's how I like to think about it. But you can see the text, it's 14. It's not a multiple of 4, but it's still, you know, in the sense it's always stay consistent. Whatever makes it easy for you to be consistent, do that. I'm wondering if, yeah, I think moving this back into the product, into the screen makes, I think it makes more sense. Then remove the drop shadow obviously. Or maybe what we could do, Is, let me reuse this one. Maybe we keep this here and for the top here, we remove the search on the side and we keep it, we bring it back here. I feel like we're moving everything back to where it was at the beginning, but it does make more sense. And it's the same spacing. Everything is the same size. So it's so much easier to just drop new things in there. And then you could have search like that, maybe bigger, like 500 or something like that. And already, I don't know, it feels pretty solid to me. It looks, it looks really nice. Search has a lot more power now, which is not a bad thing. I think it's a great benefit. It feels a little lonely at the top here, but otherwise this makes a lot more sense. You're going to say I'm going crazy because I'm doing something I said I didn't want to do, but what if we put those back as well? Because technically they're all 44, so it would not be irrational to, to do that, you know, something like this. But then if we do that, then we can remove this here, and then that works, but I'm not a big fan of the logo here, so maybe you can remove that. But this one, we can use this little thing here, which is called ignore auto layout. And this way it stays at the top and this stays centered and relaxed. That feels really nice. It doesn't feel like Salesforce in a way, I think in a good way. The only thing here is it feels really unbalanced because we have elements here on the right, we have center, but nothing here. And thinking about it, where is it? The breadcrumbs here. We didn't work with those. So we could technically use that, make sure it's 12 pixels here so that we get the 24 visually. And here we could say home, a content, it's aligned well. That feels a lot better. So now for the colors, we do have, which I don't have anymore here, the blue here. Let me add a little white frame. We have this one here, we have the blue, then we need a darker for the black here. We need something that's wider. Something like this could be nice, I think. There, it doesn't feel really blue, but it is. I think that's the key, is that it shouldn't be too blue. Then also I'm thinking for like the secondary button here, it would look really good to have the blue, but for this, probably like 12 or maybe 08 to work together. So we have like the primary and secondary buttons. And actually speaking of primary, I think this could be really good as a primary button. So let me actually just reuse this, add new action. Let's also Have this here. I think that creates a better balance visually. It makes the select channel stand out. And at the same time, it's a lot easier to then focus on the 2 other columns rather than all 3 at the same time. And then for this here, F2, I think it's also good to maybe go with something like that. Oh yeah, I think we're getting somewhere. That feels really nice except here. I don't know. I feel like we might need other, maybe like a lighter. We need one for here. Maybe this one would be good. So it should be 6. Yeah, that looks great. I like it. Then we have the 9. I think the 9 could work. It should be slightly— it's usually for those and— oh, I need to update those. It should be for those little icons here. Actually, I need to update that again to stay consistent. Check the 9. Maybe like this. Here we could have a nice little gradient. I think a white gradient. Then 100, maybe flipped. Yeah, that looks good. And then here, probably like that nice little drop shadow like I had on the search bar. For this one, I'm not sure. I think we need another color, or let me try this. That looks better. But what if we add for those, we make it white so that you can see it works as like that separator, that divider. And I feel like it looks even better, like more premium. Oh, and then for this one, they stop the text. So the action is not disabled, the action to send it. So I think we need to do that as well. And this should probably be Yeah, this one. And also those like that. Yeah, that's much better. Let me add the text here. I forgot what it was. Let me copy this and let's add it. And then we can fill container. And I think that looks really nice. That looks super cool. Oh, we need to add those colors as well. All right, I think we're in a really, really good spot. Let me clean that up a little bit and then I think that will be the end of the video. All right, so this is the screen we started with for this video. And this is the screen we ended up redesigning. I've cleaned up a little bit the design. I've added a bit more colors here. I forgot to add also the, the name of the lead and added the little like white corners here. I also reduced the icons to 1.5 of weight everywhere, so it looks really nice. I've added a little bit more on the settings, a little cooler aesthetic, and I think that's about it. I also added a bunch more colors. I've tried to reuse some of what they What Runway and Manus did. But that's it, that's the redesign. Thank you so much for watching this video. Make sure to leave a like and subscribe, and I'll see you for next one. Bye. Bye.