I redesigned YOUR websites

in this video I'm redesigning five websites that my subscribers sent to me to show you how a few simple changes can dramatically improve the Aesthetics and conversion rates of your website and I'm going to walk you through step by step how I redesign websites to give you a framework for your next project so let's get started with Rainbow Falls kennel this is a pet vacation home built on a beautiful 45 Acre Farm and they asked me for help because the website is a few years old they built it using a Google Business template and it

doesn't really capture the feeling of a pet friendly place because it looks kind of bland so we're going to redesign it to be more fun and unique but also make a better sales pitch to the people who really care about their pets first I want to point out what's working I love the image you're using it's cute it's fun and it's energetic I also love this green it makes me think of my pets running around on a Green Farm but there's definitely a lot of room for improvement first there's way too much text and it's

way too small when you throw too much info at a visitor right away they lose interest so you want to give them one central idea to latch on to and then you can go into more Det DET I also think the gray background detracts from the fun atmosphere we want to create gray is the color of like concrete and jail cells which are two ideas we definitely want to avoid when designing for a kennel finally the design is split into too many sections we want to find a way to rearrange everything so the eye focus

is naturally on our main value proposition which right now is located up here so I'm going to load up figma which is my design software of choice and the first thing we'll do is set the whole background to this nice deep green then I want to add a subtle noise pattern over top of it to make it look more like an open field then we can take your logo and put it in the leftand corner now I want to take your main value proposition and use it as the headline on your website now to avoid

confusion with the logo I'll use a nice sand serif typ face make it a little Bolder and a little bigger now home away from home is a little bit of a cliche so I'm going to rewrite it slightly to get the same message across while also making it a little more unique then I'm going to add in a label above the headline that speaks to the visitor's main problem that they have to leave home and want to leave their pet in good hands then I'm going to condense all this information into a subtitle underneath the

header in this subtitle we want to tell people that their pets will be on a beautiful farm and we're going to be in their area because we want to let people know where you are we can also add in the detail that your familyowned so that your pets will be taken care of just like they are at home underneath that let's add in a button that reinforces the header so we'll say book your pets vacation today to make this look a little nicer we'll start by rounding the corner then we'll add a subtle gradient that

increases in transparency from top to bottom finally we'll add a white border followed by a subtle drop shadow to add some realism and some flare next I want to transform your image into something that looks like a postcard being sent from the pets on their vacation so I'll load up Photoshop and I'll start by adding in a postcard graphic that I downloaded from invado elements I'll change the color to white that way I can use it as a mask on top of the image to give this photo a cool rugged effect next I'll add add

in some strips of tape so that it looks like the postcard is taped to your website since I think we can use more than one image here I'll repeat this process for another stock photo and you can sub in your own image from the farm all right now we're back in figma and I want to place these images to the right of our headline I'll resize them and play around with the rotation and positions until we have something that looks good okay I'm happy with that the last thing we want to do is remake the

right side of your header to match the Aesthetics of the redesign to do that first I'll drag in our menu set the color of the menu items to White and change the last menu item into a button that matches the look of our other button next I want to change the send email and give us a call buttons to display your actual email and phone number I'll just put in placeholder info for this video since people are probably also wondering exactly where you're located I'll add in an address as well and give that its own

icon so there you go this is the final redesign just as a reminder here is the before and here's the after before after hopefully you're happy with this redesign and if you like the look and feel you can continue with this aesthetic for the entire website next up we've got fresh start counseling which provides counseling and Mental Health Services to adults living with ADHD like so many small businesses they were interested in a redesign because this website was made using a default WordPress template and they wanted something a little bit more custom they said visitors

complained about the washed out design and sort of confusing layout so they wanted something a little Bolder and more obvious so visitors knew exactly who they were and where to go to schedule and appointments on top of that they wanted to dit the red color scheme all together cuz they said it looked a little too negative they also asked if I could incorporate their tagline get a fresh start so we'll definitely do that I want to start with what's working here first I really like the general layouts especially using this big image in the center

here I think if we could unry it from this text it would stand out a lot more and I also like that you're directly addressing your target audience and some of the problems that they might be facing now a couple areas of opportunity stand out to me right away first we have 1 2 3 4 five call to actions that's going to confuse firsttime visitors so we want a way to streamline this into one main call to action and make that super obvious it also might feel washed out because this image has a black overlay

over it to make the text easier to read but the text covers up these wonderful people's faces and since the eye naturally gravitates towards faces it makes any text over top of them harder to read finally this welcome heading doesn't immediately tell me I should read to learn more and so all this great information underneath that might get skipped we want to find a way to consolidate this all into one section without covering up anybody luckily I think with a few small tweaks to the layout it should be doable so let's get started the first

thing I want to do is take your image and allow it to cover the full height of the frame this is going to make the faces pop a lot more then I'm going to add a black gradient starting from the bottom and fading quickly about a quarter of the way up the image that way we'll be able to add text at the bottom here without blocking anybody's face and without it getting washed out in the image next I'm going to make kind of a bold choice you wanted to feature your tagline get a fresh start

somewhere in this redesign so I'm going to make it the main visual element with a huge block of bold text in a bright eye-catching yellow using a big sanser font now this is definitely a statement it's attention grabbing so we can't have anything else be too big and we have to use this statement to lead the eye towards more information and a call to action so to give this context I'm going to put a bit of text over top of the tagline that directly addresses the main customer Avatar then we're going to make this italic

so if you're an adult living with with ADHD get a fresh start now how do we want them to do this how do we want visitors to move forward we want them to schedule an appointment so underneath the tagline let's make a button that's again very straightforward click to schedule and appointments let's round the corners and add a black border that will give it a soft Inner Glow to match the lighting in our picture and this is optional but I think a small arrow that leads the eye from the end of the tagline to the

button could be a nice touch now let's bring some of that information from the Welcome section into the new design to balance everything out a little bit now that this section is done let's work on the header so the first thing I'm going to do is transform this red logo to White because you said you're ditching the red and then we're going to move this into the top left corner now since we already have a lot going on in this design I want to make the menu a lot simpler I'm going to merge the get

started button with the two contact buttons and the other two call to actions so that'll just be one menu item we'll keep the rest as they are and move them into the right hand corner then if we want the get started button to stand out just a little bit more we can add a subtle border around it in the same yellow as our tagline so there it is this is the final redesign for fresh start counseling this was the before and here's the after so let me know what you think I definitely went big and

bold with this redesign but it's a lot less washed out like you requested so I hope you found this helpful our next website comes to us from Morgan's catering she says she paid an agency a few years ago to develop her website and for the time it was fine but she's since expanded to be a really full service event planner from setup to tear down so to portray that she changed the copy down here herself to emphasize that they're more than a catering business but she's looking for a redesign to really emphasize that point she

asked if I could give her website a more natural feel maybe incorporate some real world elements if I could simplify it and give visitors the option to choose a service right away since most of our traffic is coming from referrals and Facebook that sounds great so before we get started with the redesign let's take inventory of what's working and what we might consider changing the main thing that I love about this design is actually a really small detail it's these circular rings around the images down here that look a little bit like plates since you

asked to incorporate some real world elements I think this could be a great place to start I also like that everything is arranged in order so visitors know exactly what you do I just like to make this a little bit more obvious by moving it up in the design I think we could do that by basically removing this whole first section you know the image is kind of grainy there's these black bars which cut it off and it makes this text a lot harder to read so we're going to focus on what's working and to

keep keep it simple cut out everything else to give this design a more natural feel like you requested I'm going to start by bringing in a paper texture then I'm going to set the background to a nice warm cream color and lower the opacity of the paper so that it blends with the cream and creates a look like a physical menu now because you said you wanted to simplify the design the best way to do that visually is to incorporate repeatable elements so that way there's a natural Rhythm and logic to the design so visitors

know where to look and it won't look cluttered to do that we're going to design a container that will repeat throughout the design to try to make it look like a menu so let's start by adding a title let's say catering and pick out a fancy kind of sah font over top of that let's just put in a bit of text that highlights the benefit of the service and because we don't want it to take up too much visual attention we'll use a script font underneath that let's put in a subtitle that explains what visitors

get with the service and because we want this to be super legible let's use a sandera font next to make it feel more like a physical menu let's add in a line that separates the title from the description I noticed a lot of menus do this and I think it's a nice touch next to the left of this whole thing I want to add that plate Motif that you had in the old design so to do that I'm going to add in a white frame set the corner radius to 500 so that it's perfectly circular

then on the inside I'm going to add in another frame again set the quarter radius to 500 and place in the image you had on your homepage next to make this feel more like a plate I'm going to start by adding in a light gray border on the outside of the outermost frame then I'll add a Dark Inner Shadow coming from the bottom right and a light inner Shadow coming from the top left this will make it feel more like a 3D object finally to drive that home I'll add in a drop shadow on the

bottom right so now that we have this container done we can repeat it three more times for your other services so I'll fill in that content add in the images until we have something that resembles a real life menu next let's add in our title and we'll use the same font we used for our menu titles make it a little bit bigger and set it to bolt now because most of your traffic is coming from Facebook and Word of Mouth we can write a title that assumes people are already a little familiar with your business

underneath that we'll put in a subtitle using the same font from our menu subtitle and we'll write about how you handle everything from setup to tear down and how you can either get the full event package or choose Services all theart next up we'll add a button to book in event and we'll use the same red color as the lines in the menu finally We'll add in your logo in the top left and instead of having menu items since you wanted to keep this design more simple we'll just add in a hamburger menu on the

right that visitors can click to navigate your website to make it a little bit more obvious though we'll set it to that same red color and there you go this is the finished redesign for Morgan's catering as a reminder this is what the website looked like before and this is the after so if you like the direction of this redesign you can continue with the same kind of theme throughout the rest of your website next up we've got baressi ceramic M ppf A detailer in boa Ron he reached out because he personally feels that the

website is way too busy people have told him it doesn't really look super professional but most importantly is that he's running an ad campaign soon where he wants to advertise specifically his ceramic Coatings and paint protection film services so he asked if I could take a look at his website to see if I could simplify it make it a lot more polished and specifically advertise his ceramic and ppf that's exactly what we're going to do so let's get started by taking a look at what's working and what we might consider changing first I really like

the black and red color scheme I think it matches great with the black and red details in the car I also really like the image itself the car looks like it was really professionally detailed so I want to find ways to elevate that feeling of sleek cleanliness which will probably involve clearing out a lot of this other information cuz you know I'm not a huge fan of the layout I think too much is trying to compete for my visual attention like the button is bigger than the headline we have two different subtitles the spacing definitely

feels a little bit cramped and I agree that right now it feels a little busy so we're going to take all the important parts of the design clean it up and really focus on the ceramic coating and paint protection film so just like the Fresh Start redesign I'm going to set the image to take up the full height of the page but unlike Fresh Start we're not going to zoom out and see more of the image but I want to zoom in and really focus on how shiny and clean that car looks after being ceramic

coed next we're going to add in our headline I'm going to pick out a super clean and strong sand caod make it pretty big and extra bolt now most visitors to this page are going to be coming through Facebook ads for ceramic cating and and ppf in book ofone so what we want to do is reassure them that they're getting what they clicked on so our headline is literally just going to say ceramic coding and paint protection film then over top of that we can add in some text that says where we're located make that

much smaller and less bold then I'm going to take the most important bits of info that you had in these cards here as well as the guarantee and condense that into one paragraph underneath the title next up underneath that I'm going to add in a button that says book appointments and I'm going to use the Lucid icon plugins to add in a calendar and frame both of those together then to add a splash of color to the design I'm going to add in a nice red that matches the interior of the car and I'm going

to turn the opacity down so it looks more like a red glass then I'll add a small red border around the button and give it a subtle roundness then I want to add in a testimonial section to back up the claim that we made rated number one in Boke of rone so I'll create a tiny circular frame and add a person inside of it then I'll duplicate that five times change out the images and add Auto layouts then to stack them over top of each other a little bit I'll add some negative spacing between each

frame then on the right I'll add in five stars and a tiny 5.0 to the right of that then underneath that I'll add in the number of reviews now to make this whole thing a little more visible I'll add in a dark linear gradient that starts in the top left and disappears around the middle of the page okay great that's looking good next I want to create a space for your logo and menu so I'll create a black frame at the top and then lower the opacity to make some of the image visible then I'm

going to take your logo crop it out of the image and then invert the color now I can place it in the top left of our header awesome that looks nice then I'm going to recreate our menu using the same font so everything looks consistent make the text a little bit bigger then I'm going to make the last menu item a deep red so that it stands out a little bit more all right so this is the redesign for baressi ceramic and ppf I think we made it a lot more simpler and a lot more

optimized for cold traffic so just as a reminder this was the before and here's the completed redesign finally the last website we're redesigning comes from Elizabeth who is an SAT prep tutor in Little Rock she wanted to know if there was anything I would do to spruce up her website because it feels a little bit sparse and generic to her in the hero section she just has a picture of herself and a bio and she wants to make it more obvious right away that she's a tutor and that she's good at helping students of all

different kinds so I can definitely help with that probably by incorporating some testimonials and some classroom Design Elements but first let's start with what like about the design I think using an image of yourself in the hero section is a great idea if you run any kind of personal service business it's good for parents and students to see you and get comfortable with you I also really like that you do have a bio a lot of oneperson businesses sort of forget that they are the business and the more people know about you the better finally

my favorite part about this section is actually a hidden detail because in the middle of this chunk of text you've got a great stat that students improve by over 200 points compared to their pre-test scores when they work with you so definitely want to make that more prominent in the redesign so there's a lot working here but there's definitely a lot that could be improved for starters that great stat was sort of buried in a big block of text that has a couple of great key points but a lot of unnecessary info as well it's

not obvious what makes you good without asking visitors to read a really big paragraph right away it's also not super legible because the text is a little bit small and light gray doesn't stand out well against a white backgrounds I also agree with your assessment that it is a little bit sparse I would love to see maybe some stats or testimonials from students so now that we know what we're looking to keep and what we want to improve let's get started with the redesign the first thing I want to do is set the background to

a subtle off white I'm going to incorporate some real world elements into this design so I want the background to feel more realistic next I want to take this block of text here condense it and make it visually obvious this is a tutoring website now to get that look I want to design a noard inigma and write our text on that so we'll start with a white frame placed in the center of our design then I'm going to draw a red line across the top and a blue line underneath it make sure the spacing is

right and then duplicate the blue lines down the frame now that we have our not card let's add some text I like the Personal Touch of introducing yourself at the start so I'm going to add that to the top of the not card but I want to pick out a more fun casual font and increase the spacing a little bit then underneath that I'll write the intro and I want to use a monospace font to make it look like it was printed onto the not card in this paragraph I want to emphasize three things where

you're located your experience and most importantly how you help students with the SATs all right that look looks good now just to drive that stat home I'm going to make it a little bit Bolder and change the color to Green then I'm going to add in a little arrow to make it stand out more and to visually convey the increase now I want the car to seem more realistic so I'm going to add in a subtle drop shadow next we're going to add back in your image but crop it a little to fit it next

to the card and then we'll add a one pixel gray border some border radius and a drop shadow just cuz again I want to make the section feel real to facilitate that and also to add some testimonials I want to design frames that look like fridge magnets that have students on them with some academic achievements and a kind word about Elizabeth now I don't have access to your testimonials so I'm going to make some up and you can add in your own so we'll start by making a frame with a width of 305 and a

height of 270 then we'll give it a tiny border radius and a thick outside stroke in a nice light blue color then inside of the frame We'll add two more frames the first will set to that same blue backgrounds then add in an image of our student and then our name and we'll use a sand seraphon here for some extra legibility increase the weight and the size underneath that we'll also have her accomplishment so what did Elizabeth help her achieve let's just say she got into Princeton then we'll write a glowing testimonial about how Elizabeth

helped her go from a 1350 to a 1560 again these are all just examples substitute in your own testimonials then I'm going to duplicate this Frame twice change the colors change up the students their accomplishments and their testimonials then I'm going to place them to either side of our no card and rotate them slightly so they really look like fridge magnets and and to sell the realism again I'll add in a drop shadow awesome that's looking good so since we have some extra space underneath our note card I'll add in some stats so using the

same s s font from our student names I'll add in a number underneath our not card and the stat associated with that number beneath that I'll repeat that twice for two other stats underneath those I'd like to bring our button in now I'd like to make the text a little bit bigger and a little Bolder then I'll give it some roundness and add a black border now for even more realism I'm just going to add a small glow inside this button coming from the top and left sides then I'll add in another drop shadow so

that the whole design kind of looks like it's on a real teacher's desk then I'm going to add your logo to the top left and your menu in the center of the design aligned with the not card that looks pretty good I just like to add one final touch and that's to bring in a shadow overlay over top of this whole design to make it look even more lifelike and realistic and finally I'm going to turn the opacity way down so that it doesn't interfere with the visibility of anything so there we go this is

the final redesign just as a reminder this is the before and here's the after if you enjoyed this video and want me to redesign your website check out the first link in the description where you can submit your website to a Google form and you might be featured in a future video If you enjoyed this video make sure to check out this video right here where I've redesigned more small business websites