Quizzes have become a great way to create user engagement in your website, along with the ability to easily collect leads and grab user’s interest. But sometimes we’ll run into one big issue with quizzes: how they look.
To make quizzes like the one talked about in this article, head to tryinteract.com
You could have great content, interesting questions and fun results, but if the quiz doesn’t look good nor match your brand, why would you ever put it on your site? Well, in this article I’m going to show you how you can fully customize a quiz to blend perfectly within its platform. This blending property is key to not break up the flow and pull away from the brand you’ve worked so hard to perfect.
In this example I’m using a paid version of our software to make a lot of these customizations, but we also have a free product that you can try out and make changes to! Head over to tryinteract.com and click the big orange button in the middle to quickly sign up and get moving on your first quiz.
For sake of example, I’ll use this general brand that I made up for this article. We’ll have a simple logo here, and a color scheme that we can follow.
We’re working with a logo that leans on the more modern and simplistic side, as well as a green brand with multiple angles that we can approach that green. So let’s get going.
I’ll approach this strategy in a couple of different ways. First I’ll be talking about how we can mess around with different colors to ensure we have a quiz that not only looks good, but also makes sense to the reader and blends in with the rest of the site. These will be the basics on making a good looking quiz that can be matched with any brand with just a few treats. After I talk about that, we’ll get into how we can really make the quiz blend into the surroundings of where it is placed, so it doesn’t interrupt the user experience.
Let’s a make a quick quiz and figure out how we can style it.
Below is our blank slate and options on what we have to work with:
We’re going to want to address the following:
Font Color and Type
Call To Action Button Color
By making some minor tweaks to each of these things, you will be able to see how easy it is to make your quiz match your brand in no time.
First things a first, we need a solid center image. This really can vary depending on what your quiz is about, but I love the idea of not showing any boarders with this image for our particular quiz. I’m going to find something I can put there that is set in a white background, so there is no break. I have this great picture of Baymax from the movie Big Hero 6, so let’s throw him in there.
After we get our cover photo uploaded, let’s add our logo next. We want to make sure that our logo has a blank or white background, so it blends right in.
Next, you’ll see the option for background color. Since we’ll be implementing this into an article, we’ll definitely want to keep that white. I always try to keep the background of all my quizzes white, with very special circumstances allowing me to change the background color of my quiz.
For our font color, we have a dark grey that we’re working with in our color palette, so let’s go ahead and change it to that. That color for us is #525252, so I’ll just click on ‘Font Color’ and type in that number, or if I didn’t have one in mind I would just use the color picker to find one.
Currently I’m pretty happy with the font type that is present on the quiz, but if we wanted to change it we could easily doing that by selecting ‘Font Type’ on the left side and then selecting ‘Change’ which would bring up other options as well.
Another very important change we would need to make in order to have our quiz match our brand is the color of the call to action button. Let’s change this to our center green in our brand, which is # 5ABF96. This really ties everything together with the logo in the bottom right corner, and is one of the most important parts in getting our quiz to sync up with our brand.
As for our last option of changing the text that sits inside the call to action button, it’s really up to the creator for what that says. I’ll go back and forth on different options depending on the quiz and the audience. On this one, I went ahead and changed it to ‘Let’s Find Out!’ to further push forward the initial question that’s asked at the title of the quiz.
So after all that, I’d say the quiz is looking pretty good! It’s simple and not busy, and you can definitely see the hints of our brand without it being too in your face or interruptive. I added a single question and one result, and here is what we ended up with – take it for yourself!
This quiz is perfectly ready to blend into any environment. Now let’s talk about placing this guy into our articles.
If there is one challenge that I’ve noticed with online quizzes, it’s how they’re placed within websites. They either stick out like a sore thumb and interrupt the whole reading process with their nonconformity, or just break up the page into two different parts. The goal here is to make one smooth experience, not break the page into a bunch of pieces.
Notice how the quiz above doesn’t have borders, and it just sits right in the article. It’s not separate in any way, and it seems that all of its parts just come together to form the quiz. You can easily take the quiz and move on without thinking it’s a separate action. A good goal to strive for is making the quiz a complementary action for the reader, something they would do along with reading the article.
Quizzes that are placed within articles tend to have higher completion rates and more views than quizzes that are just linked and standalone. This is because the user is directly invited to engage with the quiz, rather than clicking on a link that takes them to a dedicated quiz page.
Looking at the numbers we have, we’ve determined that on an average quiz embedded in posts, it takes users just under 3 minutes to take a quiz. We have a 60% completion rate from quizzes viewed, so from this you could determine that by adding a quiz to your page, for 60% of the readers, you’ve just added an extra 3 minutes to the time they spend on your site and on your article. Below is a simple graphic that lays this out.
So, we’ve learned quite a bit today. It doesn’t take too much editing to have a quiz match our brand well, and it’s easy to implement it into an article to increase viewership and lead collection if you want to. What I’ve really learned from working on this product for a while and researching the creation and design of these quizzes is that well designed ones are hard to come by. We strive to allow you to build the quiz you really want, whether it includes better design, content, or fits in your site on any platform.
So, head on over to tryinteract.com to get started on your first quiz!