Podcast: Play in new window | Download
What goes into designing a great website? Uncover the secrets behind crafting visually stunning websites that seamlessly blend aesthetics with functionality. Arsh Sanwarwala, from ThrillX, spills their strategy on creating user-friendly, results-driven online experiences.
Use Beauty and Brains for Better Website Conversions Episode Summary
Key Takeaways
- Conversion rate optimization and data-driven design, the importance of clear messaging and the similarities and differences between optimizing conversion rates for e-commerce and lead gen sites.
- The key areas to focus on for improving website conversion rates, including clear messaging, reducing friction, building trust and credibility, and having good visual design, and the importance of using tools like Userbrain for user testing and gathering qualitative feedback.
- The importance of the hero section and social proof on a website, common mistakes with contact forms, and the importance of testing and optimizing landing pages to improve conversion rates.
- Tools for analyzing website user behavior, such as Microsoft Clarity and Hotjar for scroll maps and recordings, and FigPii for A/B split testing with AI recommendations. The importance of running tests for a sufficient duration based on traffic levels and considering multiple metrics for improvement, as there is no limit to continuous testing and optimization.
Use Beauty and Brains for Better Website Conversions Episode Transcript
Rich: My guest today is the founder and CEO at ThrillX, a UX and UI design and conversion optimization agency based out of Toronto, Canada. Prior to starting ThrillX, he has worked in design digital solutions for some of the world’s top companies, including several Fortune 500 and 1000 brands.
He noticed that the websites and mobile apps of today’s companies were not designed to their full potential, that is, they were not maximizing business goals, whether it was e-commerce purchases, demo signups for a product, or brand awareness. It frustrated him as he knew how big of a missed opportunity this was for business owners. That led him to starting ThrillX, where the focus from day one has always been on data driven design and leveraging research to fuel all decisions.
Today, we’re going to be diving into the world of conversion rates, A/B split testing, and everything you need to know to generate more business from your website with Arsh Sanwarwala. Arsh, welcome to the podcast.
Arsh: Thanks for having me, Rich. I’m excited.
Rich: So with your company, ThrillX, and I’m pronouncing that correctly, right? ThrillX?
Arsh: Yep. ThrillX.
Rich: Yeah. I should have asked you before we got on, but I’m glad I nailed it. Okay. You work with clients who are looking to improve their conversion rates. What type of clients do you tend to work with?
Arsh: Yeah, that’s a great question. So I mean, if we’re doing full scale conversion optimization, that would be things like A/B testing, and custom landing pages, and basically coming up with a full conversion optimization program. Those are typically going to be the clients that are in that 30,000 to 50,000 minimum traffic range in terms of monthly traffic to their website.
But we also work with a lot of small companies that are just looking to take their website to that next level, improve it from a conversion perspective, and really just setting up the foundation. Even if they don’t have a ton of traffic to their website, how do they position their website so that when they do get traffic it’s optimized for conversions or whatever their goal is.
Rich: On the side, I do want to come back to that, what do you do when you don’t have a whole lot of data? But I’m curious, what are some of the biggest differences that you see when it comes to conversion rate optimization or CRO between an e commerce site and a lead gen site?
Arsh: Yeah, that’s a great question. So I think fundamentally the first thing that we always look for in every website, and this is probably one of the biggest mistakes as well, is that messaging component. It doesn’t matter whether it’s an e-com site or a B2B site, messaging and crystal clear messaging is always the fundamental aspect of the site that somebody comes on there, they know exactly who the company is, what they do, and what’s in it for me.
So for a B2B company, that would be what is the quantifiable benefit that that company can provide to me as a user. So is that saving time, saving money. And then for an e-commerce site it’s, how does that product benefit me in my day-to-day life, whether that’s the emotional benefit or the functional benefit of their product.
So in terms of similarities and differences both, I think when you look at the conversion funnel for an e-commerce site you’re optimizing for ultimately purchases, right? And for a B2B site, it’s typically contact submission, form submission. So the way that you analyze both of those things, there’s a lot of nitty gritty involved, right?
Like for an e commerce, you’re looking at you know, at add to cart rate, you’re looking at how do I reduce the fear and uncertainty? And then for a B2B site, you’re looking at form field optimization, you’re looking at social proof and what can I expect once I actually submit the form? So, yeah, there’s a lot of nitty gritty involved in both and there’s similarities and differences as well.
Rich: It sounds like a lot of the stuff you do is data driven, but at the same time, a lot of the things I just heard are really about being clear. And obviously you can measure the clarity of your message after the fact, but it does sound like if we’re starting from scratch, one of the first things we want to do is just make sure that we are being as clear as possible. And clear trumps being clever, it sounds like to me.
Arsh: Exactly. Yep. And you can always use data to fuel those decisions as well. Part of being clear is ultimately what is going to resonate with your target audience. The only way you’ll actually know that is by speaking with your users, getting qualitative feedback. So there still is that data-driven component to it. But fundamentally, it’s just looking at your site, seeing how can you get rid of jargon. And to your point, make it clear instead of clever.
Rich: Alright. If someone is concerned with the conversion rate on their website – and we hope that they are – what are some of the first steps that they can take? What should they be looking at?
Arsh: Yeah, that’s a great question. So there’s always this idea of, are there such things as best practices on websites. And it’s something that I often battle with as well. You know, we’re doing a lot of A/B tests and we’re testing so many different things, and what may work for one client may not work for another client.
So the way that I like to look at it is there are some fundamental facets that every website should have, right? So one of those things would be the messaging component, right? Crystal clear messaging. Another one of those components would be the actual form submission or conversion action. How can you remove friction from the experience? How can I remove any friction from the navigation experience, any friction from the conversion action? So that’s, another facet of conversion focused design.
And then it’s other things like trust and credibility. Things like social proof, like future publications, testimonials, putting those in the most critical action points, and then just your visual design as well.
I often like to say that good UI design, which is user interface design, is also good UX design, right? The two go hand in hand together. So that’s on the general front in terms of things that you should have on your site, again, at a high level. But there’s no best practices. The way that you achieve all of those could be very different.
And then in terms of actionable data, things that you could do straight away, we love using the tool called Userbrain at our agency. Not sure if you’re familiar with it, but it’s a user testing tool. So basically you set up tests on your website, you ask people “what are your first impressions upon landing on my site?”, and you get your feedback. Then you can say, “Scroll on the website and walk me through how did your impressions change? Who do you think this website’s for?” You can run tests as low as 40 per tester. And so we’ve always found it an affordable way to get tangible, qualitative feedback from your ideal target user. So that’s kind of the low hanging fruit place that we always start.
Rich: You mentioned four areas that I heard for, maybe you don’t want to call them ‘best practices’, although I always say best practices don’t necessarily equal best results, but they’re good starting points. So if people are starting from scratch or if they have very little data to go off of, what I heard is we want to focus on the messaging. We want to remove friction. We want to use elements that build trust and credibility, and we need to have a good visual design.
Of those four things, visual design, you often hear ‘beauty is in the eye of the beholder’, but there still must be some practical examples of where to get started. What are some things that you generally recommend when it comes to that visual design that companies should keep in mind as they’re designing or improving their websites?
Arsh: Yeah, that’s a good question. So the one example that I always like to use is think about a button, right? If you had black text on a black button, that would just be poor visual design. Because it’s just color contrast is low, accessibility purposes, people with not even just a vision impairment, but even someone like myself could not be able to read that button. So that’s again coming to that idea of good visual design is also good UX design. If you don’t have adequate white space, if you don’t have breathability, good legibility in your content, that is going to effectively hamper the user experience, right? So that’s how I kind of connect the dots.
And then in terms of the specifics with visual design, color contrast is a low hanging fruit. Making sure that everything is readable. Font size, again, visual design, 16 pixels on desktop, normally 14 to 16 on mobile, and then you’re also looking at the overall branding, the white space. Just allowing people to actually consume all of the content that you’re creating for your website experience.
Rich: Glad to hear that. You said high contrast and 16 font, because as a guy who now has to use readers all the time, that is data driven information I can bring back to my creative director and say, you need to make the font big enough that I can read it. Good advice.
So you work with, as you mentioned, clients that have a lot of data coming in. And obviously with more data, you can make more informed decisions. But you did mention that you can work with companies with smaller data sets who aren’t getting that kind of traffic, if they have a new website or they’re niche industry, or maybe their website doesn’t gather a lot of traffic currently. What are some of the things that businesses that don’t have a lot of data, don’t have a lot of monthly visitors, or don’t have a lot of history for their website, what are some of the things they should focus on? Either that we have talked about or maybe some new things that we haven’t yet touched on.
Arsh: Yeah, yeah, for sure. So the first thing that I always look at whenever I audit a website is the hero section of the website, right? The hero section is a section that as soon as somebody lands on the site, that section would be considered the hero section, where you have a banner and a message typically. So that is called the ‘above the fold’ experience, as soon as I land on the site.
Now what I tell people whenever I do audits, is that statistically 60% of people never scroll past that section. So that means on average 60% of people may never see all of the news articles you have below all of the sections about who your company is, how you help people, all of that information, they may never see.
And so what we always try to do in 5 seconds or less is, again, who you are, what you do, and what’s in it for me. In five seconds or less. I always use toggle.com as an example. I think this might change depending on when you’re watching this, but it’s simple time tracking to save you time and money. Something along those lines, right? Can’t get more clear as that. Benefit driven. What’s in it for me. Five seconds or less.
The second principle of any high converting website is social proof above the fold. So that means as soon as I land on the website, I should see something like reviews and testimonials, feature publications basically incentivizing me to further scroll down on the website and engage with whatever you’re offering. If you look at any site like slack.com, right at the top of their site they’ll have “trusted by the world’s top companies”, they’ll have all the logos at the top. If you look at Mudwater, which is an e-commerce site, they’re going to have a testimonial, they’re going to have reviews, and they’re going to have featured publications.
Again, this will depend on when you’re watching this, but as a user, why do I have to continue scrolling down? I’m already given so much social proof. I trust the company immediately and it’s incentivizing me to ultimately click on the ‘shop now’ button or ‘learn more’ or ‘contact us’ button.
So, I know that was a lot of information just for that top section, but that is arguably the most important section and the easiest place that people can analyze and start.
Rich: You had also mentioned friction and removing friction specifically around contact forms. What are some of the biggest mistakes or some of the biggest opportunities you regularly see with contact forms or similar forms on company websites?
Arsh: Yeah, so I was just auditing a form the other day, so this is top of mind for me. But I often see forms where the label is also used as the placeholder. So in other words, imagine you had a first name form field in the placeholder text. People put first name as the placeholder rather than the label above the form field. And so you always want to separate these two things. Because imagine you’re on mobile and you’re filling out a form and you’re putting in your first name. I mean, we’re living in a world where anything can happen. You get a notification, you get distracted, whatever it is. And so as you’re typing in that form field, you may already forget what you were typing in in the first place, right? Because you’re basically removing that label.
So, one example of removing friction is separating the placeholder. Another big thing is multi column versus single column forms. So multi column forms is where you have your form fields, they’re stacked horizontally, versus a single column field where it’s vertical, top to bottom. And so the most intuitive experience is top to bottom. And there’s a lot of empirical evidence on this as well, and we’ve tested it a lot, where you’re not diverting a user’s attention to go left to right, bottom down, up down, and vice versa. It’s just one streamlined flow from top to bottom. So that’s another low hanging fruit that we often see.
And this is not really friction, Rich, but I would say the last thing would be, if you look at any high converting site and you go to their ‘book a demo’ or ‘contact us’ page, you will notice that they always have reviews and testimonials at that form itself. And the reason being is because you’re spending all this effort to get them to that form, you want people to get over the edge to ultimately convert. And so testimonials and reviews really help to do that at the point of conversion.
Rich: And do you have a recommendation on where that testimonial will go in regards to the form itself? Like, should we place that above the form, to the side of the form, below the form? And obviously, if we go from desktop to mobile, that might shift. But have you tested to see if one is more valuable than the other?
Arsh: Yeah. Again, it really depends on the use case. But normally what we’ll do is form on the right. On the left will be not just ‘book a demo’ or ‘contact us’, but actually actionable text.
So for example, ‘book your free website audit’, or ‘book a consultation session’, ‘free consultation’. What is that actionable step underneath that text, that header? You would have a couple of check marks telling the user what they can expect, like “somebody will reach out in 24 hours to schedule a consultation,” and then you’d have your testimonials under that.
So that’s kind of our standard format, which is form on the right, text on the left, and all of those different proof points.
Rich: All right. So when there is a decent amount of data, or when you’re working with a client and you’re testing some landing pages, what are some of the first things that you start testing to see if you can improve the conversion rate?
Arsh: Yeah, I think we always first start with scroll maps. So seeing how far people scroll on the website page. And then we really try and consult with the client, and also the users by using Userbrain, to understand what are the most important elements for the user experience, and are people subsequently reaching those sections?
So for example, one of our clients are a shotgun product for shotgunning drinks like beer and alcohol. Really funny product, but they’ve been killing it and they get a ton of traffic to their website. So for them the biggest thing that matters for users is videos of people using the product. But we saw that majority of people were not reaching that section because it was towards the middle of the page. I think it was maybe 60%-70% of people were reaching, they were getting a 30% drop off. So we experimented running an A/B test and putting that video above the fold, so as soon as somebody lands they’re presented with those videos. And so they saw, I mean, that hypothesis alone, we ran several tests based on that and netted like a 90% increase in conversions over the course of multiple different tests.
So again, this is going to vary depending on your audience, your customer base, your industry. But I like to always look at scroll maps and think, are people actually reaching the sections that is presumably the most important for them.
Rich: So I know that GA4 now offers some sort of scroll measurement, but is there another tool that you generally recommend or are you satisfied with GA4?
Arsh: Yeah, so we’ll normally use Microsoft Clarity or we’ll use Hotjar. Those are typically more ideal for things like scroll maps and recordings and click maps.
And then GA4 we’ll normally use for custom reports, and segmentation, and understanding the nuances of the audience further. So Clarity is a free tool, I would highly recommend anyone watching to download it and just take a peek at the recordings. I mean, the recordings alone is always, it’s so creepy, but it’s so useful, right? Like watching how people navigate and where they’re going and where they’re hesitating. It’s super interesting.
Rich: And so is Clarity something that I install on my website and then I can go watch the videos of people interacting with my website afterwards?
Arsh: Yeah, yeah, exactly. So you just install the code onto your website. It literally takes less than five minutes, and they have pretty good documentation on how to do it. You can also find a YouTube tutorial online, but it’s very simple to do under five minutes and just a great, great way to get data.
Rich: What do you feel the best tool is for doing A/B split tests on page, especially now that Google optimize is no more, or is about to be no more. And are those the same tools that you use to measure your results or do you use different tools for that kind of A/B split testing?
Arsh: That’s a great question. So we use a tool called FigPii. That’s F I G P I I. They have different plans, I believe they have a free plan as well. Why we love using FigPii is because setting up the tests are very simple, like setting up a simple A/B test or redirect test, very seamless to do.
The cool thing about FigPi is on some of their higher plans, they actually have an AI component to it. So they will recommend you conversion focused improvements with AI, and then have a human actually validate those things as well. So they’re not just recommending you anything, but that’s one aspect of figpii that we really like.
And we normally do all of the measurement inside of FigPii, but then also combining it with Google analytics to just get different data points as well.
Rich: When we’re running an A/B split test, how long should we run it before we start drawing conclusions? And I know the answer is, ‘it depends’, but what does it depend on?
Arsh: Yeah, so normally we say one week minimum, at least seven days. Typically our test will be two to three weeks long, but some particular clients given their traffic levels. So what it will really depend on is the traffic. Like how much traffic you’re getting to your website.
And without getting into too much specifics here, there’s a bunch of calculators online where if you just search up ‘A/B testing calculator’ and you go to one of the first three links, I think CXL has a really good one. You can input all of the data like traffic, how long you plan to run the test, your average order value, all of these different details, and it’ll give you the recommended length of the test based on when it thinks you can reach statistical significance.
So a lot of people will say that statistical significance is the only metric, and that’s a big misconception. Because I can run a test for three days and my test could be statistically significant. But again, there’s a lot of other variables. Like for example, how much traffic I’m getting per day business cycle.
You know, if I’m doing it during Black Friday, obviously I’m going to get a ton more traffic and that traffic is going to be very different as opposed to if it wasn’t Black Friday. So there’s all of these different considerations. But a calculator will do it automatically for you and it’s pretty simple.
Rich: I know that often after an A/B split test we take the winner and then we run another A/B split test, and then another, and another, with this idea of constant improvement. Do you feel that there’s a point where we should just stop testing, a point where the changes are going to be so incremental that it’s time to move on to greener pastures?
Arsh: Yeah. So I always like to think of a building block analogy, right? You’re just building more blocks on top of more blocks. These small, little changes become huge over the long-term, right?
Like when we started with one of our clients, for example, the first test that we ran was a 56% bump in conversions. Specifically what we did was we noticed on their product page that they had five bundle options, like one pack, two pack, three pack, five pack, 10 pack. We noticed that people were choosing the smaller options, or they would exit from the site. So we cut down from five to three, and we not only saw a 56% bump in conversions, but a 13.5% bump in the average order value. So people were ordering a lot more.
So the point being, that one test of 56%. You know, it’s very hard to get those consistent 56% increases over time, right? The subsequent test, we got maybe 13%. The next test, we got 20% . Some tests we didn’t even get an increase in conversions, but we might have got an increase in add to cart grade. We might’ve got an increase in average order value. So conversions are not the end all be all right. There’s a ton of other metrics that you can improve.
And so that’s why I always say that there is no ceiling, right? Amazon is running over 10,000 A/B tests every single year. And that number might be a lot more. It might be close to 20,000. Booking.com, they run easily over 10,000 tests every year. Obviously they’re billion-dollar companies, they’re getting a ton of traffic. But it just goes to show that as long as you have the traffic to support your testing and your experimentation, there really is no ceiling. You know, if anything, it just gets better and better over time.
Rich: Excellent. One question that I sometimes run into is how to maintain brand consistency. If we’re testing different aspects of a page, like for example, if our checklist of what to test has ‘try testing a red button’, but red is not part of our brand color, this starts to get into arguments with a creative director or designer about what we should and shouldn’t be putting on a page, even if we’re just testing it. Is there a place where we should just say we’re not going to test that because it goes against our brand standards, or is everything game as far as you’re concerned?
Arsh: I think it depends on the organization. You know, some bigger companies you have to deal with some nuance involved in terms of managing people, and also I think what the business wants and what the user wants. But there’s always that middle ground that we try and find.
So using your example, maybe we don’t make the button red, but maybe we make some element of it red if it’s the text or something. That’s just a random example. But we’ll try and find some sort of middle ground where we’re balancing the needs of the business, but also the user.
But if you’re asking me from my perspective, my perspective is always follow what the user says. Ultimately the user, the person using the website, is going to be right. It’s not the business owner who’s going to be using the website. So it’s a fine line to walk, but try to find a middle ground.
Rich: All right. Now I love everything we’re talking about, and I love the whole idea of experimenting and continual improvement. I mean, that just makes sense to me. But not every company necessarily has that same mindset.
If one of our listeners is out there and they struggle to get the powers that be to try different things, is there a way that we might advise them on how to adopt a more experimental mindset at their company?
Arsh: Yeah. So whenever we work with clients that don’t have that much traffic – and again, we work with a lot of clients where we’re just redesigning their site – they may not have a ton of traffic, under a thousand visitors a month. The place that we always start is qualitative feedback. So not necessarily quantitative, because we can’t use that to our advantage. But getting feedback from users in terms of how they navigate and use the website. That is going to be my best recommendation and advice is asking users how they actually think of the site, getting them to go through some tasks like adding a product to their cart, purchasing it, filling out a form, that would be the best place of a gold mine of feedback that you can get. And that’s also getting your mind thinking in terms of experimentation in terms of getting that data side, because qualitative data is still data, right?
Another example would be surveys. You don’t need a huge sample size to run surveys. You can also just get some quick feedback. Like asking people as soon as they purchased something, why did you purchase today? As soon as they filled out a form, what made you fill out the form today? What part of the experience made you fill out the form? So those are valuable data points that anyone can collect. Does that make sense?
Rich: This is absolutely. And ours, this has been incredibly helpful and very eye opening. If people want to learn more about you learn more about ThrillX, where can we send them online?
Arsh: Yeah, for sure. So our website is ThrillXDesign.com. I’m pretty active on LinkedIn as well, so it’s just Arsh Sanwarwala on LinkedIn.
And then we also have a free website audit that we do for any client. It’s just on our website, you’ll see it on the navigation. You can’t miss it.
Rich: Awesome. And we’ll have those links in the show notes. Arsh, thank you so much for coming by today and sharing your expertise with us.
Arsh: Thank you, Rich. Appreciate it.
Show Notes:
Arsh Sanwarwala and his team at ThrillX have mastered the art of creating websites that balance both visual attractiveness with functionality, while also achieving the results they’re looking for. Be sure to check out their website and score a free website audit, and head over to LinkedIn and follow Arsh.
Rich Brooks is the President of flyte new media, a web design & digital marketing agency in Portland, Maine, and founder of the Agents of Change. He’s passionate about helping small businesses grow online and has put his 25+ years of experience into the book, The Lead Machine: The Small Business Guide to Digital Marketing.