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

My name is Charles Postiaux. I'm a founder and designer at Baobab Studio. I've worked with companies worth over $160 billion, and in this video I'm going to find a random screen online and we're going to redesign it together. I'm on momme.com, amazing platform to get inspiration from other products and how they approach design and product design specifically. And I found Evenbrite, which I think is a pretty big company. They recently rebranded, which I think looks pretty cool. They raised half a billion dollars. It was more a long time ago, but still a lot of money. So, you know, pretty big company. The reason they should also care about the design and the product is that not everybody gets to know like how to use a product, how to use an interface, how to go through an interface. And for me, like looking at this screen, it's, it's really not practical. You have basically 3 different columns all sized differently, which is fine. But like this one has the title, the headline filters. This one does not have it, which is pretty much concert events, right? Like this should be And then you get like a map here. I'm a little confused with that. My approach usually is when you design a screen, when you design an experience, you need to understand the moment in time, the key moment your user is in. What is the most important information? What are the most important features to share with the user at that specific moment in time in their journey? And here you're not just trying to find random things, you're trying to find the right ones for you. And so I feel like you should be filtering, then finding the results. Then looking at the map to be like, is it worth going to this concert, for example, considering the location it is in? Filters are all over the place, different styles, extremely narrow for something very important in my opinion. They don't even show how many of them are there. Just looking at this, I feel like there is a lot of things that could be improved on every level. So I'm going to copy that design here. I'm going to go on my Figma project. I'm going to drop it there, make a frame the same size, 1920 by 1200. Perfect. And I'm going to find that logo because I need it for the design to look better. So if you don't know how to do it, it's super simple. All you have to do is right-click, inspect, then click on that little arrow here, hover the logo until you see SVG like that. Then you click on it, you go right here, SVG, right-click, copy, and copy. You don't see it, but copy element is the first one. And then you paste it there. And because it's SVG, it's not pixelated at all. It's not like finding something on Google Like you search for the logo and you get like a PNG. Sometimes it has a background, sometimes it doesn't. So that's a really good way to do it. And so now we need to think about the page. What is the goal of this page? What is the mindset of the user when they arrive here? I think we are going to still use a lot from Airbnb, even if their new design is not super good. I think that the mindset that Airbnb has is a lot more connected to Evenbry than we might think. Okay, let's look at Airbnb and specifically services because Or no, actually experiences is better. And service in French, I don't know how to change the language. It doesn't work for some reason. Like we can do it together. English, back to French. But anyway, you can see here Airbnb for the experiences, their originals and popular experiences, all the experiences. But you can see how they order it. And I'm not a big fan of popular and originals just because like you can see everything is original and popular. So it kind of ruins a bit the customization, in my opinion, and how everything stands out. But that applies a lot to that. And so just right off the bat, the map. Why do we need the map if what we want is New York? People are not stupid. They selected New York. Obviously they want New York. New York is pretty big, right? So we can refine that and improve that, but right away, not super needed. And then here, your event will look great here. I don't know if this user, for example, has created an event yet or not. I think it would be a really good call to action if it's someone who has created an event. That would be an amazing call to action there. If it's just a random user and it's shown to everybody, probably not the best. So again, it really just depends on the specific users. And I believe that the more personalization you can bring to the product, the better it's going to be, the more impactful it's going to get because you customize the layout and the The call to actions or the offers based on the user's history on the product. And you can see as well, like, the amount of options that you see right away versus here on that screen. Okay, let's just look at the screen real estate a second. This is all you have about what you're searching for. This is the only element, the only space in the whole screen that helps you get what you want. Isn't it crazy when you look at it this way? Like when you look for events, shouldn't the whole screen or most of it be about that? Like, shouldn't all of this be about your search? Shouldn't you just have all options here? And I feel like that's what Airbnb does really well is like, you can see the text is extremely small here. It's probably not the best. It's probably also better on mobile, but they're still doing a great job in terms of showing a wide variety of experiences. And so in my opinion, I think that we could do that. In maybe a different way, but maybe similar. Something else I'm wondering about is why this format? I get that it's good for the description page, but why not just frames like that? Why not just like Airbnb? And I don't even think Airbnb is a full, like you can see a full square. I think it's larger, but it's a lot easier for people to create, like just to upload photos right away. That's already a lot better, but it's also easier for people to create posters in my opinion, or to upload them. There is less constraints around it. Maybe I'm wrong. Maybe people prefer the wider posters, but the only— it's not really a problem, right? Like it could work as well. It's just a lot different. So what could we do? What could we learn from it? How do we improve that? First of all, we can just improve that search bar, but we could 100% just do what they have, concert. I'm just going to add a stroke just for now. And we could do maybe 16. 16 is a little tall, but should be fine. -2. Then I think I'm going to try this way for now. New York. What they do is they have one bar, right, with a divider. I'm just wondering what the difference is in terms of aesthetic. Do we need another one? Do we need travelers? Probably not. What do we care about? Actually, let's go. We can go on the platform, right? So let's just say again, we could do New York. I think they chose this one. And then we can do concert. So many buttons. Wow. So right away, the difference between the two here, between what they have, is we don't see that get started. So it's either for users or it's for Oh, but that's okay. I think that's pretty much what we have. Oh, because there is the banner as well. That's removing some of the space, the options. You can see the card design. So there is a hover state. I think that's pretty good to have that. I don't know why they wouldn't show it right here. I think I know why. It's because the image is so small that it doesn't fit in there, or it would hide a lot of the content. But why view map? You have to click on it to load it. Why even show it in the beginning? Why not just put it at the bottom? And then you have all of the— okay, so I think what they wanted to do here is they wanted to do like Booking.com or these kind of websites where you get all of the settings there. Why is there so much spacing and the button is so big? Categories. What happens if you view more? Wow. Oh boy. Right. So the problem also is the map. You scroll down and the map doesn't follow you. So what they could have done is they would have only made that listings section scroll up and down. But the problem with that is The filters could not be seen. You can only see the filters by scrolling down as well. So much confusion around this. I do like the tags, going fast, sales, and soon. Yeah, I like the tags. I'm just not sure about the sacrifice they make about the space. I think it's the, the tag is something that they added after designing the interface and it's more like an afterthought. So it works kind of. So in my opinion, we don't really need that. I'm going to take a screenshot. Just so we have a reference of our own, which I think could be better than this one actually. So we'll remove that. Let's keep this one. It's the same size, so that's perfect. The problem with what they have at the top here is that you can see this is in blue. So what happened is they had too many things. Like there are 4 actions you can take at the top, right? So they thought, huh, people don't click as much on create an event because we have those 3 options as well. So we have to make it stand out. So let's make it blue. Whereas maybe we don't need those. And so it would just be the profile and the CTA, the call to action to create an event, which I think is the most important thing with booking something. These don't really matter so much because first of all, if you have tickets, you're going to have them on your email, in your inbox. And likes, they do matter a little bit, but they could also be tucked away in your profile. The homepage could be improved so that we show the tickets and the likes super early on when people log in on the platform. I do like this and then I'm going to have— I'm going to do what I just said. Just 2 CTAs. It's going to be create an event and the profile. For that, we're going to do that gray, which is a little blue, which I think looks pretty cool. Then we will have the call to action. Create an event. Let's do 16 for now. Then here, that would be the user. We could have an icon. Let's take this one. Let's go here. We're going to do 20. Pixels, and then we're going to maybe have 2. I think 2 is pretty nice. It's a little kind of like a dark gray, which I like. We're going to reduce that to 1.5 for now, and this we're going to increase it to medium, then 12 pixels, uh, maybe 8. What does Airbnb do? Oh, so you— we have like a profile, and then we have that. We don't really need those 2 because— maybe we do actually, because then the profile becomes like tickets, likes, where you went, what you booked. And then you have this other option, which is your settings. So let's do that 24, or just 2, maybe 1.5, but it's usually a bit smaller, thinner. Oops. That works. It's clean. I like it. We could put the logo there, maybe 32. Nice. We lock the ratios. Let's keep it there for now. We have this at the top here, and then here, concert search and New York. So we could have Navigation, could have the pin. Let's Shift+A to auto layout. We're going to have probably 52 in height, could be good. Maybe 12 and 14. New York. And what's the other one? And by the way, if you're looking to scale your product and you want to work with me directly with my design studio, baboon.studio, you can go on the link in the description to see what it is about. We've worked with companies worth over $160 billion. We can do sprints together between 4 to 16 weeks, and we're going to go through whatever needs to be done, whatever needs to be improved on your product. It could be fixing UX gaps, optimizing your onboarding flow, but it could also be about redesigning, improving the product, reshaping it. We've worked with Mux, who is a startup that has worked with some of the biggest brands for streaming infrastructure. They are worth over $1 billion. We've also worked with Booking.com. To reshape booking for businesses. And so if you're interested, you can just go on baboon.studio. It's super easy to learn what we do. And if you're ready or interested to work with us, you can just fill out a form to see if you are a fit. And if you are a designer wanting to learn more and deep dive into how to become a strategic product designer and make a lot more money, you can go on my YouTube channel and become a member. So far people have loved it, so maybe I can see you there. One option could be to change this background. We might actually try to rebrand a little bit. I think that could be pretty fun to do because it's boring to just repackage something that could be improved. I feel like it's not super fun as a designer. So also, I don't understand why we need something here and there, but the same icon twice. But yeah, let's try to have a little bit fun. Can we use that? Maybe we could try to have a slight gradient. I'm not sure if that's good or not. Maybe not. You know what? Let's just do it black for now. Let's use it too. I like it. I think that's pretty nice. Let's try to frame those, select all of them, Shift+A for Auto Layout, Center. We're going to add the constraint to be left and right so that if we scale or recenter or move stuff, it stays the same place. 24 probably would be nice. What is this one? 23. Let's do 3 more. 20 is nice for this. Now the problem is that this is probably not the same height. 184, 245. So what if we— yeah, that doesn't work. So we're going to Option+Command+J, like group. And we don't want it to scale. We want it to stay centered and on the left so that when we scale that to 245 and we change the gap to auto, it works. And this is centered. Nice. Pretty cool. We might add drop shadows, but I'm not even sure if we need it. I'm wondering if we do the same for those. We didn't center them. So you can just Option+H and V, and that's going to center them. And this 148, how much is that? 14. Let's do 8 in here. That's pretty fun. I do like the idea. So now the goal is to focus on what do we show, categories, filters. Oh, that's what I wanted to add actually. Now I remember, it's the dates. Could be this week, like here, dates. It's super important. Like if we look here, neighborhood is pretty important but not as important. Price could be important as well, but we want people to see everything first. We don't want to Right away, just remove some stuff just because currency could just be in the settings. It's not a filter. So that's it. That's really the only thing that we care about because category, I want to do like Airbnb here where we know where they want to go. So the categories are going to be the sections. So dates, that's right. We want the calendar for that there. Maybe this one. Let's fix this one because we did not. 220 could be nice. Maybe we want to push a little bit more. These. That's pretty cool. So then we have a couple options, like I just said. Do we want to show the map? Because I already said I want to be in New York for concerts. So that actually could be solved by just saying, you know, by having like a radius. It could be within 5 kilometers. That could help. So we could do that. This one, we can put it at 6. We just solved the dates and we solved the maps. So already all of that is freed up. Now it's about how do we show the content? And we could like, I don't know if that's valuable if I just do like Airbnb. I do like the, they don't have an hover state on the original. They have an hover state here. Let's try to do something a bit more fun. So let's try to do categories. The logo is super cool. Let's do, so we have what? Business. We don't need the icons. Food and drink. Health. Music. I'm not sure how I want to design it. I have an idea. I think Airbnb has a width limit, so they have either 1824 or they have below 1800, they have 1344, but then the photos are smaller as well. So what we could do is like a super big text here to get on that boldness of Evenbrite a little bit. We might actually not even need that. And then we can do food and drink, maybe that actually could be what we want. So we do that here. We could do business right here, then food and drinks, 160 maybe of spacing. We could have at the bottom settings and a map. We don't even need to say settings. We can just show the icons because they're pretty clear. Like some icons you're not sure what they are, but some are pretty straightforward. Select that, 1.5, center it. The map could be right here. Maybe it's a little small, I'm not sure. Could even do this mix. And what if we do the same here? Does it work? Honestly, that's pretty fun. I like that. We could say these neighbor— like based on the neighborhood, like concert. Oh, but that's concert events. Wait, I'm a little confused then. Why, if you say concert, you want the category, right? Doesn't it— does it add up? Like you don't want a concert. Like concert is always music. There is no concert in health or concert in business. So that doesn't make sense. And that's already done. So what I wanted to do was to have like here, for example, the neighborhood, like Manhattan right here, smaller than that, maybe a bit more. Yeah. Like right here, and then you could have the options. But what do we do now? I just realized that I was focused on the design and the layout, but what we could instead is just say the neighborhoods here. So we can do that Manhattan, and here we don't need anything. How do we want to play with that? I'm not sure. Could that work or not? Because something interesting that Airbnb did is they removed a lot of stuff from the details, and you can see it if you search and like you go on, like I think on the map, you can see they have a lot more information here because still the old design. And I actually do like the design here of the map. That looks super cool. But I do like the design we're going with here because the map does not become super important if you enter this information. But now I think the question is, do we want to have so much, so many details here? Probably a little bit. We have to probably to show promoted. I didn't— how much was it? 1134, I think. It was not 1134. How much was it? 1344. Let me add those rulers. I think the reason they probably didn't move with like a square is that every user, every event on the platform would have to change their formats, which is a risk to take, but probably a calculated risk. Like Instagram did that, right? For the post, they changed it all to match the format of their Shorts or their Reels. So everybody who had squared images now has ugly visuals, but it's Instagram, they own everything. So just how it is. Maybe Eventbrite is not in that position. So now what we can do is plug in split shape and we could try 3 columns, 1 row, maybe 12, maybe 16 would be better of gutter. And we could do that. And let's change this one to 6 so that we can see it's maybe even less, really just 30%. Let's do 28 to be multiples of 4. Always important when you design. Let's actually Do 20, but I think 3 is a good ratio. It's a good number because this way we keep that same logic of very large banners, images. And then we could have the text here. I don't know if we want those. Like, it's a problem as well. If you let people write like that, it just kind of ruins a bit, in my opinion, the experience overall. You want an experience that's very homogeneous, if that's the word, very balanced. And so when you have like those very cool, very clean text And then you have this huge ugly title. Yeah, title here, 20, maybe 24, but it's still fine. Maybe medium, -1, Friday. How do they do that? They do the dot, 9 PM. Then what do they have? The organizer. And then we have 2 things. We have the price and the tag. So I want to have the tag here, especially if it's promoted and the price. Okay, so let me think. What do we need? Do we need to know who organized it? Does it matter? If it's Great Hill, if it's the People's Forum, if it's 3 West Club, if it's Church in the Gardens, do we care about that? Do we care about the name of the organizer or do we care about the event? Because then we could just remove that and say, what do they do? From, let's say, $40. So we could do this at 20 and those 2 at 16 pixels, maybe have 2 of spacing of 4. Let's keep them together. This one maybe 8. And we We might add like a small padding. We're going to keep it like this for now. And this way, like we don't really want the copy to be right next to the edge because like it feels like it's out because of the corner radius. So we want to add a little bit of room on the side so that it doesn't feel like it's about to fall off, maybe even 8. And here we can easily just auto layout those. We can keep it like this and maybe 16. What do we have? Is it 20? Yeah, it's 20. So let's do 20 as well. Maybe not. Let's keep it like this. And this one, like here, it's a lot of just details and trying to figure out how to do it. We could do 6. This one too. Yeah, I mean, oh, why not do that? And this maybe 28. So now we can just replace those 20 like that. All right, so I've just added a few more and we can just duplicate those, put them in the back. And that's pretty nice. We might want to increase the spacing on that just so it's a little easier to read and to go through. We could go bolder to match the vibe. Oh, it's not a frame. Okay, let's just add that then. And then it would be— is this promoted? Yeah, not sponsored, promoted. And we can add their little question mark like that. I do like actually keep it the same style. That's pretty nice. Usually when you have an icon on the left and you have text on the right or whatever side, you always want to add a bit more space. On whatever side the text is in so that it feels more balanced. Like you can see here, it feels more balanced even though it's 2 pixels more on the right. I need to always use frames and not rectangles. The first 3 would be maybe promoted, and we maybe don't want to be so forward about it. I would probably not do it like that. The problem is that it's going to create a lot of unfairness because people don't like to see promoted first. They want to see something that they care about, that matters for them. So I would probably do like this. And then you can have those little tags like going fast. And we could have a flame and then sales end soon. And then we could have— maybe the timer could be better. Maybe we need to change that to be a bit thinner because it doesn't work so much with the text. This is better. End soon. And maybe we will add that one here to make it a bit more balanced. Paddings 24, 24. This should be anchored at the bottom, constrained at the bottom. 160? Yeah, kind of. And now we want the spacing, maybe it's 80 and then 40, so it's twice. Cool. So I think we got it. I don't really want to add colors. I think, first of all, I think it looks cool and it's already been an hour. That's an hour redesign. Stop the timer. That's what we came up with together today. And that's what they have right now. It's very easy and simple for people to just go through it and understand when is it, what is it about, what's the price, and if there's a tag about it. It's very easy to go through specific— and that should not be food, that should be probably Brooklyn. It's very easy to go through neighborhoods inside of a specific radius. You don't even need to read the map because you kind of know where it is. And if you don't know, you still have the map anyway. I'm not even sure if we want to do— I think we want to do 60 spacing here. And that's it. Thank you so much for watching the video. I really hope you liked it. Make sure to leave a like and subscribe. You can become a member on the YouTube channel, just $5 a month. And also, YouTube thinks you will like this next video, so if you have not watched it already, have a look. Bye!