UPWORD Consulting - Week 3

Template Customization


I want to help as many freelancers and agency owners generate high-value WordPress projects consistently and predictably and will keep the training and weekly support 100% free for as long as I can.

The resources in this course are crazy valuable ($15,000 worth of resources - but you won't pay anywhere near that), from all of my proposal templates, to legal agreements, to a fully built out WordPress agency site, these premium resources can help accelerate your growth.

You won't find another course like this that is so affordable and packed with so much valuable content. Unlock the resources today!

Learn More

Okay. So I've got the design ready and I'm going to walk you through the entire design, what we created and then how I present it to the client.

And especially with home pages, this is a very critical piece because you still want to create trust and you really need to explain why you design things the way that you did.
And this again, helps trust and makes the client feel way more confident in their investment. So this first presentation is the most important.
When you get to inner pages, you can kind of strip it back because they're way more simple, but this is the first thing you're going to show them.
And it's the first time that they see your design. Um, and you're probably wondering why only submit one design. And the reason why is in the past, when I've created multiple designs, it just creates chaos.
Um, because it opens their eyes to different options. And then you're just getting tons of feedback and it slows everything down.
I only show, I only present one design at a time if the client likes it great. If they don't like it, then we'll redo it.
Um, and I've found this speeds things up tremendously. The only time I designed multiple designs is when the client specifically asked it, uh, which is not very often.
So I highly recommend just coming up with one design and so that your clients can stay focused on that one design and not distracted on the other, on the other designs that you might present.
But that's totally up to you. This is how I do it. This is what's worked well for me. Okay. So into the design.

So here is the design we came up with. You'll notice there's some slight changes. We remove the top bar because it just didn't look right.
It didn't feel right. Um, and so we've got this nice modern look we've, uh, matched the navigation to kind of have a feel that Apple and Tesla did.
Um, we also added a phone number here, especially since their audience skews, older, older people love phone calls. So we wanted to put that front and center so they can just get on a call with them, especially for repeat visitors.
And then people that prefer to do like an online quote. We put that nice free quote button right here. Oops.
So then moving forward, um, originally we were going to do like a split design with residential on the left commercial on the right, but it just wasn't working well.
So from the customer avatar, we realized that residential is their bread and butter. So we wanted to focus that, um, this copy is just placeholder.
You'll see that mention. Uh, but we try to start to shape it here again, single call to action. And then you'll see here on the right side, we did, we've got a little slider for commercial commercial solar.
And to be honest, a lot of times I try to avoid sliders as much as possible because they add bloat and weight that aren't necessarily people typically ignore, um, sliders, but in this case it made sense.
So we put that in here and then immediately in the media section, again, this is for trust to just attach their brand, the client's brand to a media logos that already are trusted.
These are just placeholder. A lot of times I just use this as placeholder. Um, if the client doesn't have any logos, there's a way to create a press release, um, with a service, it costs, I think about a hundred bucks and then you can use the logos, ABC, NBC, and a whole bunch of other things.
I'll include that down below in some of the assets. Um, and then we immediately go into the process section that we mentioned above.
So this is going to be a scrolling section that they can see each step one by one, that'll explain it, there'll be an image that matches.
Um, and this is similar to the Tesla site. You can scroll through, see exactly how it works, and then it's broken up into six steps and they can start to get a quote right there.
Um, and then here's our testimonials section. Again, social proof. We want to highlight the four best testimonials. So it's easy to digest.
Um, and again, singular call to action, get a free quote. Then this is kind of the quality section we wanted to talk about that they are professional quality solar panels, again, get a free quote, um, same thing with their installers that they, uh, have experienced installers again, get a free quote.
And then also that there's a 25 year warranty again, singular call to action. Um, and then here in this next section, we wanted to bring up, Hey, if you're worried about costs, here's the benefits of the 26% tax credit.
And also here's this little financing calculator that we want to put together for them. That will also be a lead generation.
So we start with the very simple question, how many square feet is your home? And then they could select, it's just super easy, low friction.
And once a person kind of starts one of these things psychologically, they want to finish it. So I love multi-step forms, especially for lead generation.
Um, and we'll have the client provide us all the steps that we need for that and the logic, and then we'll make it work.
Um, and then again, if they got more questions, here's the most common questions and answers. These are obviously just placeholder texts.
Um, and then kind of that post-install stuff is, Hey, what kind of happens after? And so here, we want to talk about Manny monitoring their solar.
Here's the app that they use, get them to envision what it's like to use the app. So they're already thinking about having solar panels again, singular call to action.
Um, and then the charity section. So here we mentioned 10% of all profits are donated to solar one they're nonprofit.
Um, so again, trust shows that their purchase is actually doing good directly and improving people's lives in the, around the globe.
Um, and then blog section and footer. Okay. So now let me show you in base camp, um, exactly how I present this.
So I address the team this right here is usually, uh, how I start really excited to show you the homepage design concept.
After you look at the design, make sure to read through the explanations below. So you can the strategy behind the design of each section.
What I find when I don't mention this is the client immediately scrolls to the bottom, looks at it and does not come back and read this wall of text.
It's important to mention that and also mentioned, Hey, I know you're going to skip all this, but please come back after you look at it so you can understand why we design things the way that we did.
Uh, and then I also mentioned in this phase, we are focusing more on the overall look and feel fonts, colors, layout, how it makes you feel when you look at it.
So always in the first concept, I just want to get like, Hey, are we heading in the right direction with the way it feels?
And if we are, I get an approval on that. And that's when I want, uh, edits. Um, if I get edits right away, then I know that we're good with the look and feel and we'll start making those.
But I always mentioned it that it's more of like kinda zoom out. And how does it feel when you look at it?
Do you like the direction we're going or do you want to see something new majority of the time they like it.
And then we started making edits, uh, all of the copy is just placeholder for now, so we can see what the text will look like once you overall look and feel is approved.
We'll start working on all the edits needed for this page and happy to jump on a call this week to review it.
Also make sure to download the design so you could view it larger on your computer. What this means is base camp can get a little weird with this, where it just opens up here, but make sure you can download this image or view it full size.
I recommend they just download it and can see it. Um, and then we just go section by section. So I start with like fonts, colors, and buttons.
We chose a modern font inspired by Apple and Tesla, but also something that compliments your logo font. We also do the same with the colors.
We chose variations on brand Mark to keep it feeling modern and have it pop. Uh, this is usually the same for all of my designs.
You want something that's obviously complimentary with the fonts. Um, but my designer comes up with this. So I don't have to create that, uh, navigation here.
We created some visual separation with the subtle lines and this navigation will stick with you in scrolling. So a lot of times, especially with lead gen clients want that sticky header.
So I'm just mentioning, Hey, when we code this up, you're going to have that since your ideal customer tends to be a bit older and prefer calling.
We wanted to have a phone number right at the top, so they can speak to a solar expert quickly for people look at that are looking to get a quote online lead generation.
We have a call to action button for that. So again, mentioning here, so all I'm doing here is just explaining why it's laid out like this.
Um, and so the more that I can communicate that the more that they have less questions trust the design a bit more and go, okay, that makes sense, right?
Because a lot of times clients aren't thinking about their ideal customer, they're thinking about themselves. So this, when I present homepage designs, I do this every time because I want to reiterate this isn't necessarily for you, it's for your ideal customer.
So you're going to see that a lot. Um, so moving onto the slider in this section, we wanted something that feels modern, but also pops.
So grabs your attention right away. Um, on the left side, this is where we want to explain a bit more about solar for residential.
They can also start getting a quote from the button on the right side. We chose this image because it evokes quality and gets people to see what it actually looks like on a beautiful home on the bottom, right?
This is where you, this is where you will be able to see the next slide. If you click on commercial, when it's coded, obviously it will load the commercial slide.
This will also rotate automatically. So a few things here I mentioned when it's coated a lot of times, believe it or not, clients could confuse that they're seeing a design image of a PNG or JPEG, and they think it's actually coded.
And they're like, why can't I click on anything? So I make sure to mention that. Um, and so yeah, again here, I'm just explaining the details.
I chose an image for actually my designer chose an image that looked great. And so we're just explaining why we chose that image.
So I literally just looked at it and go, Oh, that image looks great because of this. So I just explain what I'm seeing and communicating that to the client.
So then in the media section here, we want to begin creating trust to the site visitor by showing media logos that are already trusted and attached to sphere.
Solar note, these logos are just placeholder for the moment. Again, this is the same thing I use explained pretty much every time, maybe slight variations, but anytime there's logos, again, it's about trust.
Um, the process section in this section, we were inspired by Tesla, solar page and wanted to do something similar for showing the steps that are involved with installing solar on a home.
The scrolling effect will be very similar to the second section here. This section will show the visitor what is involved from start to finish, to help educate them and pull back the curtain on the process.
So if you remember on the customer avatar session, people were frustrated with just not knowing what's involved and it felt complicated and they were overwhelmed.
So right here, we're just making a simple, Hey, it's six steps. Um, and so you make it just feel real easy.
So answer a few simple questions and then they'll scroll through and see the next, next one, the next one. And then, Oh, cool.
Um, this was a theme that came up during our customer. After our session, as I mentioned, this will also help get visitors into the lead funnel.
I've attached different designs for each step. So we actually designed each slide so they could see it's in a zip.
Um, the moving on what our clients think after visitor understands the process. We want to hit them with more social proof and feature some of your best reviews testimonials here to create even more trust for the site visitor.
Again, trust this. Whenever I have testimonials, I pretty much communicate the same thing. This happens with every single project. Uh, oops, got a typo, but next three sections.
He make mistakes. Uh, in these sections, we want to talk about the quality of your solar panel options, the quality of your work and craftsmanship and show that excellent twenty-five year warranty.
And you checked in each section will have a call to action for them to get a quote, just explaining why that's laid out that way.
Worried about cost section on the customer avatar session. The feeder of cost came up a few times and we wanted to use this section to let them know their tax credits and also financing available.
So you see, I'm just referring back. I'm using the customer avatar session to help me explain what we design and it helped me create the design or at least helping me create what I needed to communicate my designer to design, um, on the right, this will be very simple.
It will be a very simple multi-step form that will help walk the visitor through step by step the information we need in order to get them an idea of costs and what financing payments would look like.
This would also be a lead generator as they will need to enter in their contact information in order to get the details or the, the options also be entered into the welcome series, email automation to have email, educate them and create more trust with sphere solar automatically.
So again, now we're starting to bring in, Hey, we're going to use email automation here. A FAQ here will feature the most common questions and answers in this section to answer popular questions before they get on a call with your sales team, this is pretty much the standard FAQ and the goals of it.
Um, for lead generation monitor your solar in this section, we want them to envision what it would be like after they have solar installed by sphere.
This is where we will talk about the monitoring app and the state-of-the-art technology. The client uses after the install is complete.
The images will slide into the phone for some animation. And so I just thought, it'd be cool on this section.
When we go to code this up, I was just having this kind of slide through. So it's like brings a little life to it, nothing crazy.
Um, just kind of slides in so that it feels like, Oh, that's really cool. Um, charity section here, we want to create even more trust by showing how sphere gets back to its community globally and locally and how 10% of profits are donated so that not only do your customers feel good about making an environmental impact, but they can feel even better that their installed impact lives directly.
Again, just reiterating. What's what we discovered on that customer avatar. And also what's on the current website and then latest news in this section, we'll feature the most popular blog post for people looking for more detailed information and also for SEO looking forward to your feedback.
So then I attach the design, I've put in the zips, um, and you can see that they've already responded. And so, um, that's how I do it.
And then I basically, once I get I'll get edits in this thread, and then once that's approved, I get an approval on base camp.
And then I go create a new discussion for the next page. And I do something similar for inner pages. I usually keep it pretty simple.
If it's landing pages, then I get a lot more detailed, um, similar to a homepage, but for most inner pages, it's just a few sentences explaining, okay, here's the about page?
Here's the contact page. Usually not a whole lot to add to it, but on the homepage, you want to really take the time to lay this all out and when I've done it this way, it's just made the process so much smoother and the client gets excited and, uh, yeah, this is what I highly recommend.
Okay. So in the next module we're going to cover, if you don't have a designer, um, if you're a front end developer or if there is a, a lower budget project you're going to take on, I'm going to show you exactly how I do.
I create designs, um, for my, for these types of projects that, um, that I just do myself. So see you in the next module.