Before & After: Small Business Websites Redesigned

on today's video we're gonna show you five amazing redesign for local businesses and you're gonna learn so much about redesigning websites on this video stay tuned [Music] hey everybody what's up and welcome to a web design before and after video so on the last last month on october we did a challenge for the flux academy students and we told them hey pick a local business no matter where you live in the world and redesign their website in an effort to help small businesses you know with the whole cove in 19 situation small businesses and local businesses are struggling let's try and help them by redesigning their website and i've challenged them and told them that the winner are going to win some airpods pro so i want to show you we got like over 50 redesigns many of them were so good but on this video i want to dive into five of the ones that i like the best and also declare the winner i'm going to show you their presentation they've actually explained the whole process of the redesign i'm going to link below if you want to dive into the redesigns a little bit more because we're not going to have time to dive into each of them uh with with the appropriate time that you need to look into this so if you want to see the presentation i'll show you check the link below this video all right let's dive into it so the first redesign we got is from alex and uh he designed a before and after for this um frankie fancy franks so it's a hot dog gourmet hot dog restaurant so this is the website that they currently have and those were the goals for him so make more visitors want to click and convert into sales tidy up the layout and create more inviting copy by the way tidying up the layout is i don't know if that's kind of a business goal that is measurable but let's see what alex has did here so he tried to list it out what are the potential problems with the current website and uh the one thing that we can see is kind of the logo in the center i don't know that's a problem but yeah it is true that people get started looking at the top left so that'll be easier to recognize there are lots of items in the menu that is pretty much true it is pretty hard to read and see what's going on here and it's also not a really a call to action and then basically just a very busy background so this is how he kind of breaks down the things that he thought can be improved to the website again i'm going to go through this pretty quickly because we got a lot to cover here but let's dive into the solution so here's the redesign so you can see that he basically changed out the whole layout he cleaned up all the left side here and he created a more simplified navigation put the logo on the left clarified a little bit gave them a copy with kind of a very clear call to action and call to action and a value proposition it's way more readable now that it's split kind of left and right and in general he kind of rearranged the layout from left to right instead of very long sections and i think it looks really really nice so we can see here kind of like the before and after so this is the whole new layout and i think it looks great well done alex let's move into the second redesign from fernando and this is foreign i think i'm not super strong on portuguese but this is basically a popcorn club if i understand correctly um let's see how this looks in the before so this is the website i don't know what small business for popcorn does but apparently there's is such a thing so they have a carousel here at the top it's pretty hard to read the text here and then it's rotating so this is basically kind of an e-commerce site i can tell because i can see that um you know there's the shopping cart here and so let's see for nonetheless the main issues no useful headline to set the tone and explain what they're all about the photos are nice but they're not the best application inconsistent photography so whoa he really broke down the problems here so you can see that he really noted what's wrong and why now let's see the redesign so if this was the before bam this is the after this is really like a radical redesign so first of all it's pretty clear that it's this this is a popcorn brand now it's very clear to see what they're selling it's very clear to see now that's an e-commerce website with the you know shopping cart here and the prices here so here's he explaining what he did here so in general i went for a more modern current look um added animated interaction which we can't see here but he also sent me the figma edit a card layout to display the most important info and call to action anyway this is really well thought out design and also a fantastic design so if you want to dive more into it make sure to check the presentations in the link well done fernando really nice web design all right let's check the next one from juicepe all right so here's the before and after of a local business what the hell is this all right let's continue here all right so he chose somebody that he actually knows so he knows this founder of um this company where this is actually an expert's website and he started drilling down into what's what are the problems here so it's not really clear who is trying to help so this is for hr people for job seekers who who is this person and how is it going to help so basically there's a lot of unclear text a lot of a bunch of texts here what is this lack of usability so the full screen menu might be good for mobile but it's less usable for desktop all right so let's check out the reading okay so he also talked to the founder uh who's the mentor he try to understand really what are the goals with the website all right so let's see so he was thinking first about the structure of the homepage and this is really um interesting to think about what should go there what is the story that we're trying to tell here before we go into the design it's a really smart way to approach a redesign and he liked the idea behind the logo okay so he wanted to break the logo into kind of visual components that he could use chose a new font and color palette and this is basically the redesign okay so now it's very clear that we are your digital recruitment expert and you can see he set up a new navigation new shorter statement main call to action and it's also sticky here in the nav bar and a brief intro to the company of course with logo for social proof so this is a really nice web design all right giuseppe good work here this website looks really really good all right let's move on to the next web design so this is from feliksander yuan and he did the redesign of joko koren i'm not sure i can pronounce this name but basically you log into this website you don't even know what is this i mean i can see a bunch of logos here and a bunch of text but what is this so there are a lot of problems here also here yuan is also trying to break out and understand what is the story on this page how much effort are you trying to tell with each part of the website so more than 50 of the website is just news and past events so maybe this is not the right approach also you know the navigation can be improved this whole logo thing can be improved so a lot of things to work on and he's using here stats from the nielsen group which is smart about you know people reading and how people read on the web so that's a very smart way to think about and reason with your clients why you want to change something and all right let's see let's see the redesign all right so bam after wow okay this looks like a completely different website now you can see that this is a personal website of this business consultant who's going to help you create systems and brand for your business very clear all of the logos were you know clarified here uh made to look consistent by using a single caller and the hierarchy is clear so you first understand who this person is connect with me and then these only serve here as a social proof as a third you know at the third hierarchy versus just being the first thing that you see is logos also the navigation has been compressed colors have been reduced and a very nice use of color you can see main is this kind of gray the secondary is the black and then a yellow kind of ascent to highlight and uh and give kind of extra touch to the website so very very nice and well explained redesign he's also took all of these news articles and structured them into a little bit of a gallery but more important he brought in the numbers which actually tells the story here so let's see the overall redesign all right so obviously before and after and also the structure so take a look here it was mainly just a carousel and then a bunch of images now it actually tells the story with the number and the services and everything that a website actually needs to convert visitors into into customers and also it's 15 shorter really really nice web design and really really nice structure and thinking about this yuan really really great work and the last redesign and also the winner of this challenge goes to nadira who has redesigned the website for a wwa awp is a social service agency so it's basically a non-profit that helps multiple demographic let's see the website before so first of all goals increased donor conversion rate enhanced donor relationship and lead generation all right let's see the before so this is the before kind of looks like either like a template or a very blank page not too much design here and not too much wait let's go into the call here while there is kind of a donate button here there's not much going on to actually convince you to donate and the form so there is no donation here on the homepage to begin with it's just the newsletter let's see the redesign so here's the redesign first of all completely looks like an upgraded brand looks way way better more images telling the story how we can help and then this is uh one section to a donation kind of showing the progress and then another section for donation really easy give you gives you the options to make donations so very donation focused and very visual focused right uh the the focus is on images versus just a bunch of texts this is the newsletter has been way reduced and uh let's see the structure let's see the process of this so here um nadira put them actually side by side so that we can understand what what was done here so first clear headline to make it more powerful main call to action to donate prominent call to action replace the carousel uh to show all images at once i'm i'm a big hater of carousels on the front of homepages i think if you want to show something just show it don't just confuse people this is definitely gives a better experience what i really really liked here is how she thought about the whole donation area right how to increase donation conversion rate so redesign the whole thing dedicated sections showing amount raise and share campaign update in real time to create urgency and strong call to action so this is really a nice effective way to design showing the 300 students are empowered so far because 30 percent has been charged so you can really feel like by donating you're moving that bar into the next step you're helping more people so this is a really nice and effective design and this one as well here so seamless and fast free donation experience five clicks mux to complete the donation transaction mobile friendly this section is really really nice uh donation component anyway i think this is a really really fantastic redesign by nadira and it is the winner of the october flux academy students challenge and adira you're winning the apple airpods pro i recommend all of you to go check out these full presentation and dive into them to learn more about the reasoning and how to explain your potential customers or your clients that you're working with right now why you are approaching the design in a certain way this really shows you how to communicate the reasoning for why you're choosing specific design decisions all right i hope you found this helpful if you want to learn more about web design you're also welcome to explore our programs on flux academy the link will be below as well i'll see you on the next video bye

Channel: Flux

Views: 170,514

Rating: 4.9432626 out of 5

Keywords: website redesign, website redesign process, website redesign goals, website redesign announcement, website redesign timeline, website redesign ux case study, website redesign steps, website redesign proccess, website redesign best practices, website redesign bedore and after, website redesign before adn after, website redesign bedore adn after, website redesign ux case studdy

Id: LfGEBqV6K28

Length: 13min 47sec (827 seconds)

Published: Mon Nov 09 2020