How important are brand colors? Do they play a big role when it comes to button clicks on a website? Find out in the episode of The Cro Show.
Watch this episode of The Cro Show, a game show for conversion rate optimization and marketing experimentation fans, and see if you can guess which test variation performed better during a recent Cro Metrics client experimentation.
Full Transcript:
Katie Green: So this was for a nonprofit client that happens to be integrated – like in terms of like what they do with us.
But their donation pages used to look like this where the pillboxes and – which were like old – and it had the yellow versus orange and they got a lot of calls to their customer support team that basically somebody donated monthly when they meant to donate one time because they couldn’t tell between the two which one was actually selected.
So with our variation one, we changed it to orange and gray.
This is one of their brand colors that has seen the most urgency in some of their past test results.
And, you know, I think the gray being not selected made it a lot more clear that that was not the thing you were picking.
So, yeah, that is the orange version.
And then here is the blue version.
So we had the blue and gray versus orange and gray.
And though you may not see it here, this was desktop and mobile.
Our primary metric for success was just conversions.
It’s a pretty straightforward test.
There are two variables here, though, which is making these buttons more square, which is actually a brand thing.
We had to do that we just haven’t done yet.
And then updating the brand colors and making that selection more clear.
So there’s actually three rather than a few.
Really we just needed those to be updated.
That first experience was just so unclear.
So anybody have any thoughts on which one you think won?
James Buo: So when you get to that page, both one of the buttons is always selected.
Is there ever a time when you have no buttons selected?
Like you just land there, then you have to pick and then it fills in the rest?
Or is it always –
Katie Green: There’s always something on.
James Buo: OK.
Katie Green: Yep.
So there is always that is a great question and honestly something we should test, but I think it’s actually a function of the donation platform that you have to have it selected.
You do not have to have an amount selected, but monthly versus one time has to be selected.
Like, it just won’t load the page otherwise it will always default one time.
So when I this is the actual the actual experience.
So when you landed there had one time and it defaulted to 200 but when you hit monthly it did not pre-select a monthly amount.
We just copied exactly what control did.
We didn’t want to mess with any of that.
Those are our future iterations is like amount, you know asarray, order of asarrays, pre-selection, custom amount, like you’re very familiar with based on giving behavior.
So you know, those are the kinds of things that once you monthly or one time has to be selected.
But once you go away from one time, monthly it doesn’t have the pre-selected amount on the on this donate page – it’s just one donate page is their one that gets the most traffic.
Zeinoun Kawwass: And the difference between V1 and V2 is just the color of the active button?
Katie Green: Yep.
I hope you didn’t see anything.
It’s just the color.
So orange is V1 and blue is V2.
We have hover states there because I’m really passionate about hover states, fun fact.
So the hover state here is just like dark orange to orange and dark blue to blue.
So that’s the only difference down there.
Matt Vincent: And just to confirm, Katie, there is hover states in your control as well.
Katie Green: Yup.
Tiffani Driscoll: Did you mention like what the primary metric for this was?
Katie Green: Yeah, it’s conversion.
Tiffani Driscoll: OK.
Regular ol’ donation conversions.
Tiffani Driscoll: Got it.
Katie Green: Because this is kind of like a non-inferiority.
We just wanted something better than what we currently have.
Cara Binsfield: Have you considered doing like filled in/not filled in as the difference of CTAs?
Just like having them – because it’s just like to me having two separate colors at all is confusing. Like when I’m looking at the clicked on state, I’m like –
Katie Green: You’re talking about like inverted button?
Cara Binsfield: – Yeah, I’m like even more confused.
Like, I’m similarly confused.
Katie Green: That was new to the previous experience.
Cara Binsfield: Yeah. OK.
Katie Green: This donation platform requires that button.
Their text has to be white.
Cara Binsfield: OK.
Katie Green: It is a limitation of the platform that we cannot override.
Cara Binsfield: So then is there a reason that we can’t just do two buttons of the same color.
Katie Green: Two buttons of the same color – clarify that for me.
Cara Binsfield: Like, so like.
If they were both gray or both blue or both orange instead of this.
Because what I’m understanding from this test is like it’s gray and blue, and then you click it and it comes darker blue.
So like then you have to blue like it’s still told.
Katie Green: That’s just a hover state.
Cara Binsfield: Oh, OK.
Katie Green: Yeah, sorry. That’s just a hover.
Cara Binsfield: So the clicked on is in blue?
As like default selected?
Katie Green: Yep, yep.
Cara Binsfield: Oh, OK, interesting.
Katie Green: We wanted to do inverted because I think to me that is the most clear way of saying you have selected this button but you can’t have different text colors on buttons in this donation platform.
So it has to all be white.
So this was the darkest gray we could get and pass accessibility…
…or the lightest gray.
Zeinoun Kawwass: This is the lightest. OK, right.
Katie Green: Yeah, I went backwards with that.
This is the lightest gray, the darkest would’ve been black.
But you know, the lightest gray we could do to make it look not selected and pass federal accessibility standards.
Zeinoun Kawwass: Got it.
James Buo: One last question and it has to do with mobile.
And if you didn’t test conversions on mobile, then it’s not really doesn’t really matter.
Katie Green: We you do mobile, it’s just not here.
James Buo: When you’re looking at mobile and you see the two buttons at the top can you also see the ones below?
Because I think that really informs what is actually selected. 100%.
Katie Green: You can see the buttons.
It’s not below the fold.
James Buo: OK, so anyone reasonably would guess that which one was selected based on what was below that.
Katie Green: Would –
– oh, you’re saying so like if the amount was 100 and it was like clearly monthly. Yeah.
I mean it is in the same.
It’s not actually – none of them are above the fold.
But once you scroll you see them both.
So OK, I can’t show you.
James Buo: All of those are above the fold.
That’s interesting.
Katie Green: And that is a test we’re currently running. Yeah.
Matt Vincent: I feel like I’m with you though, James.
I like the fact that users have to do that, like quick math figure out like, oh, so orange is selected because only one of the asStrings is selected and that’s also orange.
James Buo: Yeah.
And the challenge there and I and I think it has to go with the limitations of every action is – I’m sorry, out of the ESP is that when you toggle does it keep if you have a custom ask array, does it reset or does it keep highlighted or does it clear it out?
Katie Green: It’s custom ask array and it’s in the URL it maintains.
James Buo: OK.
Katie Green: Yep.
Great question, though.
Should we vote?
Yeah!
V2 was our winner!
I know – V1 conversions on desktop were down 40%.
Zeinoun Kawwass: Holy macro.
Katie Green: I know isn’t that wild, but on mobile the orange did it really well.
The reason you know this is a 20% increase on the blue version in overall donation at the 20% increase on desktop and it’s a three to 4% increase on mobile.
So the reason that is is like this 40% decrease on desktop is just like way too much, not a chance, and desktop users have a higher average gift.
So we kind of prioritize even if they are a little bit less than half of the audience.
We prioritize their experience over mobile like usually because the mobile average gift is like $30 and the desktop one is like 180.
Those are examples, not true.
So those are not real numbers I want to caveat that those are not real numbers.
What I thought was super interesting is that on is more because on mobile, about the same number of people, we’re still engaging with the actual ask array.
So they were like clicking numbers to try and donate something.
On desktop, we had a 20% increase in donations, but a 4% decrease in the number of people engaging with the actual number buttons themselves.
So what that says to me is people aren’t fiddling around with the donate form as much, they’re clicking their number, they’re moving forward.
So we’ve actually seen in the past that orange does do a lot for a sense of urgency, but people for this client, actually their users trust their brand blue more than they trust their brand orange.
Katie Green: Thanks for watching and be sure to subscribe to have more test ideas sent directly to your inbox.