¶ Well-Designed Websites for Business Conversions
Hey there , quagel here and I am with my new website developer . Actually , he's not new .
He's been developing my brand new website over the past several weeks and his name is Archie Alibasa and he's going to help you understand how a website can help your business conversions increase , why a good design like a well-designed website with good English , why a well-designed website is really good for your business .
I mean , he's shared a little bit with me as we've gotten to know each other over the past bit of time , and he's been building websites for 15 years and he's done about 20 or so in the past years . He's located in the Philippines and if you forgot where I'm located , I'm in Mexico . Archie , thank you for being here on this episode .
Hey guys Quagel , Thank you so much for having me . I am super excited and I feel super blessed to be part of this episode and I'm so excited to share what I know with your audience to help them create a really , really great website Awesome .
Speaking of really great websites . I'm kind of just laughing . We were laughing right before we hit record because I pulled up my old website and new website .
By the way , you , the podcast listener , if you have not yet gone to the YouTube channel of the Funnel Fix Friday episodes , which are getting great reviews , by the way head down to the show notes below and click on the subscribe to the Art of Online Business YouTube channel link and go watch this episode there , after you subscribe , of course , because you can
see right now , archie and I are looking at the before and after and it's just , it's like night and day , maybe slightly embarrassing . Okay , so the context before you point out what was so wrong with my previous website , archie .
But the context here is why do we have a website as business , only Business owners , and that would be for one thing to convert , like to optimize conversions , to convert website visitors into clients , right ? What are the three things that that really entails , archie ?
Like when we talk about converting a website visitor into a client , like what's really important on a website for that ?
Okay , there are two general I'd say two general factors about building a website . First , I want to just talk about so your website is basically your store . You know , in the absence of physical brick and mortar store , you're selling services , whether it's a digital , online service , this is what sells you in the online space .
So you want to make sure that it's built nicely , it has the right copy and it loads very quickly . So there are two aspects to it the front end and the back end . With the back end , you want to make sure that it loads fast , it's lightweight , especially in mobile .
And then the front end you want to make sure that you have a really , really good design , a balanced design . Yeah , you want to make sure that you have excellent copy , sales copy . And then the one thing , the final thing , is , you want to make sure that the combination of design and copy would convert your customer , because ultimately , you don't want it .
Beautiful , sexy website . You don't want to be flashy and extravagant with your words , you just want something that sells and ultimately , that's the end goal , and that's what I always tell clients is . You know , as Rick would say , you want to simplify everything , because the end goal really is to sell your services , to sell your product to your audience .
Right . So we're going to dive into key principles of user experience , design and basically how they make your website more user friendly . We're not going to get into all the technical stuff but , like , if you're listening to this episode , you will get some principles in just a moment . That will , especially if you're a DIYer like I was .
Like I was because I'm a recovering DIYer , because as you get to it , it's quite clear that I should hire a professional , like way before . I mean I was on Squarespace before and then Archie put me on WordPress and , probably like many of you , I was scared when I heard like the W word . I was like , oh no , okay , you just build it .
Build it in Squarespace . And he was like it's gonna be a lot better for your brand and business if we do it in WordPress . And I was like , okay , let me trust the profession , and I'm glad I did so .
I mean , if you want to share just a little bit , describe what you're seeing , archie , on this page , which is my old website and then my new website , and can you tell me why the new one look good , just for the people that are listening and haven't yet gone over to the YouTube channel .
Because if you're on the YouTube channel , you could see why the new one's better .
What's wrong here at the old one , Okay , so yeah , you know . First of all , I'm going to be nice to you , Queija .
I'm going to say .
The first thing that strikes out to me is there's no balance with your previous Squarespace websites . It's just color and the text formatting with the text you know kind of off . There's no balance , as you can see right now .
You see , when I talk about balance , you're going to look at the headline on the left side is big , and then you have a subheading , that one which kind of is not matched with the heading , and then you're going to take a look at the right side . You're going to say that's way small compared to the headlines that you have on the left side .
Hold on a second For the podcast listener . We're talking , we're looking at a screen right now that it's like step one , step two , step three to work with me . And what he's talking about is on the left side of the screen , like step one is in like a blue color , which is my palette and it's all caps but it's kind of small .
And then the subheading for that headline is actually bigger than the step one itself . And then the what's in the subheading says are we a match to work together ? And then on the right hand side it goes into all the details about if we're matched to work together . But what you're saying , Archie , is it's not balanced . What does that mean ? Design wise , like ?
Is it just because I was getting applications from people to work with me as an ads manager ? But when you say it's not balanced , does it just like make somebody feel uneasy or just makes me look like an amateur ? What's going ?
on there . So let's assume , queijo , that no one knows you , right Like right now , everyone knows who Queijo . But let's assume for a moment that you just stepped into the game . You build a website , you're trying to sell what you have , and then people go to your website and say who's Queijo ? What does he do ?
Well , let me find out about him on his website .
He clearly doesn't design websites , that's .
Yes , so I'm gonna go . You know , with design , it heavily involves a fundamental understanding of human psychological tendencies , right ? And you want to make sure that the information flow naturally and it's easily . Okay , you know , I'm gonna use a buzzword digestible for your audience .
So that means you want to make sure that they're able to absorb it without any tension between and the human eyes and the human brain . But I'm gonna touch on this very briefly , on the difference between your current website and the new website and the reason for that .
You can see that text is kind of small and for the audience that are watching this on YouTube , the reason why it looks small on Queijo's screen , because Queijo is using a pretty large screen , right .
So that's kind of reason why you're gonna see the text a little bit small , don't worry , because the text , when we build websites , the text actually adjusts itself to the screen that you're using . So it could be a full HD , it could be 2K , 4k , widescreen or traditional or by 3 . So it automatically adjusts itself to the sizing .
That is really cool for your website , my website , the previous one that I tried to do myself . Well , let's be honest , like I was trying to do it myself to get it done really quick , I was trying to save some money by just doing it myself , right ?
Then I realized , oh , after I looked at what you did , I'm like thank God I invested with Archie , like because there were so many problems , but my old one by just . I want to be fully transparent here . When you look at these boxes on the screen which have like five plus years .
This was after I saw Archie's website , which looks like this , I was like , huh , those elements are really cool , let me try to recreate them by myself on my old one . And so those weren't like he borrowed those elements from me . It wasn't the case . I borrowed these elements from him to try to make my old website look better .
And in fact , I'll be completely honest , after I saw your website , I took like some of the background colors you know , like the different sections , how they have different background colors . Like my website didn't actually look this good designed my new one , I took elements from your new website and put it back into my old one to kind of help me limp along .
So if we're going to talk about like key principles of the user design experience and how that makes our website user friendly , like first of all , what is in your mind when you hear the word user friendly ? Now , looking at the new website , what does that mean ?
when we say user friendly to you , Again , it's just having the words and the design flow naturally and not not make it difficult for the person trying to understand the information or website . You know percent seamless , simple manner .
And then I'm just going to go back and talk briefly about the boxes on the new website and the previous website and you're going to see the huge difference between . That is number one you're going to look at . If you're looking at the old website , you're going to see the numbers and the text right below that . There's no balance .
There's too much space in between them . They're too small and they all cramped up at the top . And so when I look at that , you know like okay , you know like almost like it doesn't grab your attention . And so when you look at the new website , you're going to see it pops immediately because you have the numbers huge . So what does this five mean ?
And you're going to immediately take a look at what it means . Right below that , the text , right below that , it's five years of online experience . So , and again , you're going to see we're using colors on your website , but we're not using too much of those colors because you don't want to turn away people and make it .
you know , you know , sometimes when you go to websites and they have like really really bright colors , your website uses bright colors with the yellow ones , but if you know , we haven't really used a lot of that , that the yellow is kind of like too bright for a lot of people .
But we're using it in a way that it just grabs attention and we're using it in the most important aspect of the website , which is the call to action button .
Yeah , it's kind of funny , Like I know about website design but being able to coach somebody in tech , because I always say , like anybody who's listened to this podcast , I always tell them like your call to actions need to be a different . You know color from everything else and I talk about website design and I coach clients in opt-in design .
You know and how to increase their conversions , but that is unless you're working in a way that you really understand how to design and build a website yourself , as in my Squarespace website , like building the actual thing is difficult .
So tell me more like what went into , I guess , if we're talking about , like user experience and making it friendly , like I remember you were talking with me about having the sections be this alternating color , like what's the reasoning
¶ Colors, Emojis, and Building a Website
?
behind that . So again , you know we want to separate information . So if we're going to scroll back to the top quiz , you're going to see we're talking about step one , right ?
So they've already looked at your header , they've already looked at your numbers and now they're reading your step one and you want to make sure that they understand and process this information first before they jump into the next section . And psychologically you want to create separation with that . And the way to do that is to use the colors .
So you're going to see a separation in there . You have kind of like a gray light gray , the color background at the top and then immediately after you have white . So that kind of like psychologically for the person . Okay . So now the separation . They process information at the top . Now they're ready to process the next information .
Because then if you kind of like use the same colors continuously , at the end of the day the person reading the text won't be able to process . They're going to have like a brain over processing of information .
Because you see , with your website you've got lots of text , lots , lots of information on there and if they read it all at once they're not going to be able to process it and understand really what they're reading .
So you want to format it in a way that you're separating information , and the way to do that is with the colors that you use , the sectioning , the formatting of the text . So each and every time they go to each section , one new section , they'll be able to fully understand what they're reading before they move forward with the next section .
Gotcha . That's putting towards what my eyes are seeing . And my eyes are just seeing dang . This looks good now , but you're really kind of explaining .
I think of it in a way , queijo , if you're reading a legal document on a word on Microsoft Word or whatever word app you're using , and it's just a whole page of texts and you get it at one point , you're going to get tired of reading and not understand exactly what you're reading .
We want to avoid that because , again , we want to go back to the fact that we're using your website to sell something and you want to sell something by making them understand what you are , what you're selling and why they need you for their business , and so that's why we're using colors separation , formatting , which is something that you can't really do with a
regular document . Agreed , agreed . So that's what a website does .
I feel like I want to talk about how I wanted to put emojis on the website because I like emojis and you shot me down and you wouldn't let me put emojis and you started saying it's in my benefit to not have them there . But I know you told me it makes the website load quicker . But tell me a little more detail so the listener can understand .
And then I know we're not going to get into detail on this episode about other things that up to increased loading speed , but talk us through that a little bit , because that's very important for conversions and this whole loading thing . And so why did you shoot me down on the emojis ?
Okay , so a lot of people everyone's going to have a different opinion of emojis . I would talk about my personal experience and my personal opinion about emojis . They're fun and they're okay because they kind of visualize your personality , whatever emotion you want to convey on your website . But I feel like emojis are a hit and miss affair .
They may or may not work for you . It really depends on what kind of business you have , the tone of your website copy . Now I said and you wanted to have I think we talked about having an emoji flag over there on one of those pages . It said it might be cool to have that over there .
And this is one thing that a lot of developers would always tell you , because a lot of developers are not designed people Right . And then you're going to say immediately you want to use emojis because it kind of drags your website , it adds to the weight of your website . And when you say add to the weight , what does that mean for a local state ?
Yeah , and then just talking briefly about the weight , so that is the amount of text code that is being used to write your website and present it in a visual way on the front end , and so the more code you use , the bigger the file size and the heavier it becomes .
And you don't want to do that for your website because approximately 50 , 60 percent and in a lot of cases , 80 percent of your visitors come from your mobile phones , and that's really the reason why search engine giants like Google .
We're all shifting to a mobile landscape and with mobile you want to have a lightweight website because of the restrictions with the website speed , the speed of the hardware of your mobile phones . So you want to have a lightweight load , as fast as you can website for your mobile visitors and that's the reason why we try to avoid emojis .
And if you're going to take a look at those small photos , they may look small , but if you don't optimize them , images take up a lot of the weight on your website . I'd say about half of the file size of your website are all images . Wow , okay , and so I'm just going to go back to a website , but you are using super heavy images .
So it was weighing your website down , but you didn't notice . Oh , the previous website .
You're talking about images . In the previous website I think I may have actually taken some of those images off already , again copying your design cues . So , archie , I got one more question for you . You had my color palette , yet you're not using all of the colors in my color palette , and I know you educated me on this . But please educate the listener .
Like , how do you go about choosing which colors from the color palette actually are the ones that you're going to use on the website and maybe even tell them a couple of mistakes that people do with their colors ? Yeah , Okay .
So with a lot of people , when you have a color palette , it's really like a combination of five different colors . The first three would be something that's a little bit bright and then the rest would be neutral .
Now your main color is actually the teal , the yellow and the dark blue , and you're going to see what dark blue , the navy blue , is your neutral color , that's . That comes with your white and your gray , and then you have your active color , which is the yellow , and I'd say that teal is kind of between neutral and active dynamic .
So what I did here is I used the brightest , most interactive color for the most important aspect of your website , which is the call to action button , and then I used the kind of like a neutral ish color teal for , you know , presenting information .
That's needed , like you know your name , what you do and then a lot of the neutral colors with the blue and the white and the gray , because , again , you want to make sure that your colors work with your sales copy , with your copy on your website .
So you don't want to have a very boring black and white copy on your website page , but you also don't want it to be too contrasting , Like it kind of like you know , say you could only imagine if we were using a lot of the yellows and I know you also have orange on your website you can only imagine like it's just going to be so , so difficult on the
eyes and I would just say , oh no , you know what , you know what ? I don't want to read too hard my eyes , but yeah , we again . You know . I'm going to go back to the word balance . We use that to create balance and separation and present the website in a way that would be attention grabbing but at the same time , easy to process and read . Got you .
Well , I'm sure the listener is wondering how long does it take , let's say , to build a five page website , like with you ?
OK if all factors were constant , like , say , you know you already have design , everything is in place . Ideally it only takes anywhere between six to eight weeks . For me it could even sometimes clients come up to you and say you know , I need this pretty quickly and I did . The minimum that I would say is four weeks .
But then there are a lot of factors that are involved , especially with the schedule , and this one was something that we had to kind of really go around with with you and I , because you're you're super busy entrepreneur . You've got a lot of things on your plate and it's not easy to like .
Ideally I want us like we talk and we sit down once a week to talk about , run through all of the pages and discuss the changes that we want to do for the next version of the website .
But you know that doesn't work really for a lot of business owners because , again , you're busy , you're busy and not everyone has the time to hop on a call and discuss design and sales copy . So I'd say ideally four to six weeks , about eight weeks , but realistically anywhere between two months onwards
¶ Benefits of Professional Website Design
.
For a lot of the people that I work with and I would say , like , just to throw something in here , I would say you made the process really easy , and we're not going to talk about the process when we talk about that in an upcoming episode .
But I do want to say here you did make it easy for me because you would send , like the nice bullet pointed email like that would say , ok , like what do you want to decide about this and this and this and this and this ?
And then you would like have a screen recording of the new website asking me like the questions , visually that you put in the email , and you were great , like every time you had to make or you had a decision that I needed to make , it's like the email was there in my inbox . Now . Was I really good about responding to you like super quick ?
No , but you were really good about helping me because , like that's a consideration , like I'm here and you're over there in the Philippines . But like you really made it easy for me to move the process along , I just want to . That was a good experience .
I was . I was actually quite worried , kwejo , because I was thinking , you know , would he be able to really understand the process of how we were doing it ?
And back in the day I would just say that the alternative to not having a phone conversation is to have your screen recording and just kind of , let's just walk through what you want to do , which is what we did for us , because I knew you didn't really have the availability to have a hop on the call .
So back in the day , is was a little bit more challenging for us because we didn't have screen recording , so everything had to be like you know , tax and all of that .
But now you know , thank you for technology , we were able to record information and that really made it a whole lot easier for us to collaborate and exchange ideas , and so it went out pretty great . I'm super , super happy with what we came up with .
So , thank you and again this website is just it looks way better . I'm like we're going to actually talk in another episode . It's kind of the mentality and why like ? Because I'm a recovering DIYer , I'll say that and let's be honest , like I wanted to like not that your services are actually quite affordable , I just wanted to do it myself .
But after seeing the new website , I'll say it like this I wish I had met you and had you design a website , like a year ago . And I will also say that at the recording , at the time of the recording of this episode , it's like January 15 , 2024 , there has been an uptick in applications for a live ads management service .
I will say , since December and that is a little after like we rolled out this new website and it really , I choose to believe , just look how professional their website looks compared to the old one . And people do make .
They do make like a snap , instant decision when they see your website and like , I believe , like just more people are looking at the website now and they're like , oh , this guy knows what he's doing , just because the website actually looks good and professional .
So that is my , I guess my plug for you , but that's also my encouragement to you , the listener like , if you're doing it yourself , we'll go into another episode . Why , like having a professional do it for you on WordPress , like they're doing it on , or even just having someone use Squarespace or Wix ?
or whatever .
It's just hands down this . This result is a lot better . After you know , we've discussed a lot in this episode . If somebody wants to like , if a listener wants to work with you , archie , like , what would be the next steps ? And of course you know I'll link the link in the show notes below . But what would be the next steps for them ?
Yeah , before I go into that , I'm super happy and thankful that you know what we did created results for you . I'm so happy that things are starting to convert for you , Queijo . That's super awesome . And I would say this to a lot of business owners and I do understand that you know the necessity to DIY things , because not everyone has the budget .
But I would say this having a really good , well built website , as with any business , is an investment , you know , and a lot of people look at it as kind of like an cost . You know , I don't really have the money .
Well , you need to invest because that means more growth for your business and more conversions for your business , and it's an investment and , I would say , is almost kind of a necessity .
It's not a necessity for everyone , because you could always there's always , you know , there are always options to DIY , but for the serious business owner that really wants to create an impact and create a really really great presence online , it will really pay for you to invest on a really good , well built website .
And so , having said that , hop over to my website . It's arcawebsolutionscom . We offer website services . We also offer WordPress maintenance , hosting and a lot of other technical stuff for you , so be sure to check that out .
Cool . How do you spell that ? Arcawebsolutionscom .
Arca is A-R-C-A and then web solutions . Arca is actually a abbreviation of my whole name . My sister gave it to me actually , so she's entitled to royalty . She's asking for royalties . Oh , make sure to figure out .
Oh yeah , this has been a good episode . Arcawebsolutionscom , so I can see the steps there to work with you , and , of course , that link is in the show notes below . Thank you , archie , for designing my website and then building it . Thank you for saving me from the previous website , which I thought was good . Oh , my gosh Like .
If you're watching the YouTube channel , you can see how much my old website sucked compared to the new one , and I'm actually absolutely happy for that investment , because I mean , I'm going to have this new website for until I decide to make another one , but this one looks good , so I'm not getting rid of it anytime soon . So , yeah , all right .
This is the end of the episode . Until the next time that you see me or hear from me , be blessed , take care Bye .