{"id":48824,"date":"2019-09-17T00:27:39","date_gmt":"2019-09-17T07:27:39","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=48824"},"modified":"2019-10-21T01:40:49","modified_gmt":"2019-10-21T08:40:49","slug":"5-design-hacks-guaranteed-put-conversions-fire","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/5-design-hacks-guaranteed-put-conversions-fire\/","title":{"rendered":"5 Design Hacks Guaranteed to Put Your Conversions on Fire"},"content":{"rendered":"<p><span style=\"font-weight: 400\">If you want to increase ROI from your website, you can go about it in two ways: increase traffic or increase conversions.<\/span><\/p>\n<p><span style=\"font-weight: 400\">It is much easier to increase conversions, however. Depending on what you do, it costs little to nothing to increase conversions and the resulting increase can have a compounding effect. The best way to increase conversions, by far, is by tinkering with your design; if done the right away, there are design hacks that can give your conversions an immediate boost.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Simple actions like tweaking the color of your CTA, tinkering with the default option in your design, and literally using a \u201ccompromise\u201d can go a long way to boost your conversions. Below are five design hacks guaranteed to boost your website conversions:<\/span><\/p>\n<h2><b>1. When Designing CTAs, Always Make Sure They Contrast WithYour Site\u2019s Color Scheme<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48826 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash.jpg\" alt=\"\" width=\"2048\" height=\"1152\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash.jpg 2048w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-500x281.jpg 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-768x432.jpg 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-970x546.jpg 970w\" data-sizes=\"(max-width: 2048px) 100vw, 2048px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2048px; --smush-placeholder-aspect-ratio: 2048\/1152;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48826\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash.jpg\" alt=\"\" width=\"2048\" height=\"1152\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash.jpg 2048w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-500x281.jpg 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-768x432.jpg 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/84988ff4-russn_fckr-krv5as4jdja-unsplash-970x546.jpg 970w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/noscript><\/p>\n<p><span style=\"font-weight: 400\">When designing a page, it is important to realize that there\u2019s no one-size-fits-all format or color for a CTA. You might have read one of those articles in which a CTA was successful because it uses the color red, or the color green, or the color blue, or any other \u201cspecial\u201d color. More often than not, these articles are missing a key fact: the CTA worked because it contrasted with the site\u2019s color scheme.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Take a look at <\/span><a href=\"https:\/\/blog.hubspot.com\/blog\/tabid\/6307\/bid\/20566\/the-button-color-a-b-test-red-beats-green.aspx\"><span style=\"font-weight: 400\">the following example<\/span><\/a><span style=\"font-weight: 400\"> from one of the most popular case studies on CTA design:<\/span><\/p>\n<p><span style=\"font-weight: 400\">The study concluded that the red CTA outperformed the green CTA, and as such red \u201cbeats\u201d green! When you pay careful attention, however, you realize that the color scheme of the page used the color green. As such, the color green will blend in while the color red will stand out &#8212; making the color red more likely to convert. This is in line with a principle of psychology known as \u201csensory adaptation.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400\">When designing CTAs, make sure your CTAs use an entirely different color that contrasts with the actual color scheme of your page. When you do this, your CTA will stand out and become more noticeable, and your conversions will improve.<\/span><\/p>\n<h2><b>2. Use The Bandwagon Effect to Indicate that You Are Popular<\/b><\/h2>\n<p><span style=\"font-weight: 400\">The \u201cbandwagon effect\u201d occurs when there is mass embrace of an idea that might ordinarily have been ignored due to the fact that a lot of other people are doing it. When this effect comes into place, it doesn\u2019t really matter whether people agree with the idea &#8212; they are going to subscribe to it simply because a lot of other people are doing so.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There have been several mainstream examples of the bandwagon effect, including the hit K-Pop music video <\/span><i><span style=\"font-weight: 400\">Gangnam Style<\/span><\/i><span style=\"font-weight: 400\">. Even though the video originated from South Korea, it quickly became such a big hit and was on everybody\u2019s lips; people were singing in Africa, Asia, and all over the world, regardless of whether they liked pop or South Korean music. Everybody began to sing it to appear cool and socially relevant, and it quickly became the first Youtube video to reach 1 billion views.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Then there\u2019s also the popular <\/span><a href=\"https:\/\/www.vox.com\/2018\/5\/15\/17357684\/yanny-or-laurel-audio\"><span style=\"font-weight: 400\">yanny or laurel audio clip<\/span><\/a><span style=\"font-weight: 400\"> that trended and pretty much broke the Internet.<\/span><\/p>\n<p><span style=\"font-weight: 400\">That\u2019s the bandwagon effect in action. People join not because they are interested in a concept or agree with it. They join because a lot of other people are involved.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are many ways you can integrate the bandwagon effect into your design to boost conversions:<\/span><\/p>\n<ol>\n<li><b> Highlight major media mentions\/industry recognitions above the fold of your design<\/b><span style=\"font-weight: 400\">. The following screenshot shows an example from <\/span><a href=\"https:\/\/websitesetup.org\/\"><span style=\"font-weight: 400\">Website Setup<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400\">The \u201cMentioned on\u201d section features prominently on the homepage and communicates that top publications like Forbes, wikiHow, Entrepreneur, and Moz (individually read by millions) have endorsed the website. That automatically communicates popularity, and makes people more likely to follow.<\/span><\/p>\n<ol start=\"2\">\n<li><b> Showcase key metrics (subscriber count, traffic figure, sales, or other important metric)<\/b><span style=\"font-weight: 400\">. The following example from <\/span><a href=\"https:\/\/problogger.com\/\"><span style=\"font-weight: 400\">Problogger<\/span><\/a><span style=\"font-weight: 400\"> shows how that works. As a blogger looking for a blogging community to join, realizing that over 300,000 bloggers are in a community makes it a lot more attractive.<\/span><\/li>\n<\/ol>\n<h2><b>3. Leverage the Default Effect to Boost Sales and Conversions<\/b><\/h2>\n<p><span style=\"font-weight: 400\">One of the most powerful design hacks you can leverage to boost conversions is the default effect. The default effect refers to people\u2019s tendency to reflexively go with the default choice, and so many studies have shown just how powerful this can be.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In a particular experiment, Walt Disney found that <\/span><a href=\"https:\/\/www.fastcompany.com\/40403706\/the-subtle-power-of-default-choices\"><span style=\"font-weight: 400\">by changing the default choices<\/span><\/a><span style=\"font-weight: 400\"> in kid\u2019s meals to swap out soda for juice and french fries for fruits and vegetables, it was able to automatically result in kids consuming 21 percent fewer calories and 44 percent less fat. Vanguard was also able to double participation in employee retirement plans by opting people in for the plans by default and giving them an option to opt out rather than opting them out by default and requiring them to opt in.<\/span><\/p>\n<p><span style=\"font-weight: 400\">How can this be used in your design?<\/span><\/p>\n<p><span style=\"font-weight: 400\">Checkboxes, form fields descriptions, and placeholder content can be effectively used in such a way that what you really want people to do is included by default &#8212; and they have to take an extra step to opt out if they are not interested, rather than being opted out by default you having to prompt them to opt in.<\/span><\/p>\n<h2><b>4. Understand the Power of the Middle\/Compromise Option in Web Design<\/b><\/h2>\n<p><span style=\"font-weight: 400\">When given extreme options, many people are likely to go for an intermediate option or what they feel is a compromise between two options.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For example, if given three packages with the costs below:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">$100<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">$50<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">$10<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Many people will go for the middle option (the $50 option) instead of the cheapest or the most expensive. This is known as the \u201ccompromise effect.\u201d To really leverage this effect to boost your conversions, you can take the compromise effect not just figuratively but also literally. The below example is courtesy of <\/span><span style=\"font-weight: 400\">Aha!<\/span><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">As you can see, the middle option isn\u2019t just a compromise between the two extremes, it is also specially designed and highlighted in a way that it sticks out.<\/span><\/p>\n<p><span style=\"font-weight: 400\">When designing pricing pages and options for people, you want to design the option you really want people to select such that it is literally placed in the middle. Not only does this draw more attention to it, but it draws special focus on it as a clear compromise between the other options and as a result makes people more likely to select.<\/span><\/p>\n<h2><b>5. Optimize Your Design For Speed<\/b><\/h2>\n<p><span style=\"font-weight: 400\">In an age of rapidly declining attention spans, it goes without saying that every design changes should be made with speed in mind.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Here are some <\/span><a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\"><span style=\"font-weight: 400\">key facts<\/span><\/a><span style=\"font-weight: 400\"> you want to take note of:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">A simple one second delay in how long it takes for your design to load can make conversions to suffer. Even longer delays will be more detrimental.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Search engines use a page\u2019s speed as one of the major factors when determining how to rank it.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">47 percent of people expect a web page to load within 2 seconds.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">40 percent of people will abandon a website that takes longer than 3 seconds to load.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">In essence, speed shouldn\u2019t be a compromise when making design changes. Rather, actions taken to optimize your design for speed in and of itself can go a long way to boost your conversions.<\/span><\/p>\n<p><i><span style=\"font-weight: 400\">Ayodeji Onbalusi is the founder of digital marketing agency <\/span><\/i><a href=\"https:\/\/www.effectiveinboundmarketing.com\/our-services\/\"><i><span style=\"font-weight: 400\">Effective Inbound Marketing<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> and online reputation management agency <\/span><\/i><a href=\"http:\/\/boostmymedia.com\/\"><i><span style=\"font-weight: 400\">BoostMyMedia.com<\/span><\/i><\/a><i><span style=\"font-weight: 400\">. He&#8217;s an experienced content marketing strategist and can be reached via <\/span><\/i><a href=\"https:\/\/www.linkedin.com\/in\/onibalusi\/\"><i><span style=\"font-weight: 400\">LinkedIn<\/span><\/i><\/a><i><span style=\"font-weight: 400\">.<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to increase ROI from your website, you can go about it in two ways: increase traffic or increase conversions. It is much easier to increase conversions, however. Depending on what you do, it costs little to nothing to increase conversions and the resulting increase can have a compounding effect. The best way [&hellip;]<\/p>\n","protected":false},"author":1969,"featured_media":48825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[477,476,378],"tags":[19446,19444,19445],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/48824"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1969"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=48824"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/48824\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/48825"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=48824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=48824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=48824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}