{"version":3,"sources":["webpack:///./src/pages/heatmaps/ux-improvements.js"],"names":["withUsabilityTestingTemplate","href","target","rel"],"mappings":"6FAAA,wDA4VeA,uBAxVQ,WACrB,OACE,oCACE,kFACA,4GACA,sEAC2C,IACzC,kBAAC,IAAD,CAAMC,KAAK,2BAA2BC,OAAO,SAASC,IAAI,gCAA1D,eAEQ,IAJV,0CAOA,2jBAMiF,KAEjF,kDACsB,kEADtB,OAC0E,IACxE,kDAFF,6CAIA,6GACA,kDACuB,IACrB,kBAAC,IAAD,CAAMF,KAAK,0BAA0BC,OAAO,SAASC,IAAI,gCAAzD,gBAEQ,IAJV,8BAOA,0XAMA,4GACA,4BACE,oJAIA,mLAIA,2NAKA,+IAIA,0KAKF,2HAGA,0EAC+C,IAC7C,kBAAC,IAAD,CAAMF,KAAK,uBAAuBC,OAAO,SAASC,IAAI,gCAAtD,YAEQ,IAJV,0CAK0C,KAE1C,0SAIe,KAEf,2BACG,IADH,0YAM8C,mEAElC,IARZ,sBAWA,8IAIA,oDACyB,IACvB,kBAAC,IAAD,CAAMF,KAAK,0BAA0BC,OAAO,SAASC,IAAI,gCAAzD,kBAEQ,IAJV,mCAOA,yhBAQA,upBAQa,KAEb,kEACA,+CACoB,IAClB,kBAAC,IAAD,CACEF,KAAK,+BACLC,OAAO,SACPC,IAAI,gCAHN,qBAMQ,IARV,uEAWA,sPAGyD,IACvD,wIAJF,uOAUmD,KAEnD,yYAI4F,IAC1F,yNAIU,KAEZ,gEACA,0CACe,IACb,kBAAC,IAAD,CACEF,KAAK,wCACLC,OAAO,SACPC,IAAI,gCAHN,yBAKyB,KACjB,IARV,+BAS+B,KAE/B,oLAE4D,KAE5D,gSAKA,8PAKA,2SAKA,sMAIA,oFACA,yGACA,wDAC6B,IAC3B,kBAAC,IAAD,CAAMF,KAAK,2BAA2BC,OAAO,SAASC,IAAI,gCAA1D,SAEQ,IAJV,8BAOA,2aAKqD,sDALrD,8CAM2C,oEAAkD,IAN7F,8FAO8F,KAE9F,+GACA,8DACmC,IACjC,kBAAC,IAAD,CACEF,KAAK,+BACLC,OAAO,SACPC,IAAI,gCAHN,iBAMQ,IARV,kFAWA,8TAOA,gXAIuE,KAEvE,qWAIkE,IAChE,qFALF,8FAQA,4EACA,sDAC2B,IACzB,kBAAC,IAAD,CACEF,KAAK,qDACLC,OAAO,SACPC,IAAI,gCAHN,kCAMQ,IARV,qCAWA,gTAMA,ggBAQA,qGACA,mDACwB,IACtB,kBAAC,IAAD,CACEF,KAAK,gCACLC,OAAO,SACPC,IAAI,gCAHN,mBAMQ,IARV,sCASsC,KAEtC,qOAIE,kBAAC,IAAD,CACEF,KAAK,iDACLC,OAAO,SACPC,IAAI,gCAHN,eAJF,gSAgBA,2WAMA,wHAGA,oDACyB,IACvB,kBAAC,IAAD,CAAMF,KAAK,4BAA4BC,OAAO,SAASC,IAAI,gCAA3D,gBAEQ,IAJV,2DAOA,4tBAUA,uCACA,2NAGY,IACV,kBAAC,IAAD,CAAMF,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,aAJF,cASA,4BACE,8EACA,sDACA,sDACA,uDACA,kDAEF","file":"component---src-pages-heatmaps-ux-improvements-js-19cd21fa8ff6d074fb8c.js","sourcesContent":["import React from 'react';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport Link from 'components/ui/link';\n\nconst UXImprovements = () => {\n return (\n <>\n
\n Chris Anderson, Owner and SEO Analyst at{' '}\n \n MyFiveGuide\n {' '}\n –curated content on Health and Fitness\n
\n\n For my website, MyFiveGuide.com, heat maps helped me develop a smarter and user-friendly web\n design. When I first implemented the heat map, I noticed that users were not scrolling to my\n “Popular Posts” section on the homepage. After making some web design changes, I positioned\n the section in a more visible area for users to find. As a result, I noticed on the heat map\n immediately that users were spending an increasing amount of time in that section after the\n change. The heat map allowed me to find this issue in my website architecture.{' '}\n
\n\n This resulted in an 8% drop in website bounce rate and{' '}\n 17% more views to posts in the “Popular Posts” section.\n
\n\n Michael Saly, CEO at{' '}\n \n Aspire Media\n {' '}\n – web design & SEO company\n
\n\n It is not easy to design an application that can directly attract a user and convince them\n to download it immediately. In the case of music streaming apps, they are not so hard to\n find, but people tend not to install them and rather search their favorite songs online\n through free platforms. And this really doesn't help a website user experience.\n
\nBut when we implemented a website heat map that was a BULLSEYE! Among others:
\n\n Kristian Borghesan, Director of Marketing at{' '}\n \n Savology\n {' '}\n – an online financial planning platform{' '}\n
\n\n We've used heat maps dozens of times in the past, and continue to use heat maps as a\n way to help us identify user interaction points and ways to better optimize the website\n experience. We use heat maps both on our marketing site as well as directly in our\n application.{' '}\n
\n\n {' '}\n In particular, on our homepage, we discovered three primary 'sticking' points\n where our website visitors were spending 80% of their time, without taking any further\n action. In this case, we tried a few different things like moving the order around of the\n content sections, as well as introducing CTAs in those respective areas. The results were a\n lift in pages visited per user as well as a \n 23% increase in conversion rate\n {' '}\n from the homepage.\n
\n\n Stewart Dunlop, CEO at{' '}\n \n LinkBuilder.io\n {' '}\n – link building services agency\n
\n\n Previously, I kept the clients' feedback section at the bottom of the products’ page,\n after all other info. I thought that it's not very popular among the website visitors.\n However, then I decided to experiment with the website components by switching places.\n Installing a heatmap helped me realize that people not only stop briefly for viewing the\n comments but also click the slider to read all of them. The heatmap revealed that the\n section with feedback attracted equal attention to the service pricing.\n
\n\n For this reason, I brought the comments up before the pricing and it worked. Now, when\n website visitors land on the page, they have a chance to see which big companies trust us,\n then read about our services and check the positive experiences from our clients. This helps\n convince leads to make the first step and contact us. Surprisingly, this switch increased\n the average session duration by 45 seconds and brought us 10% more leads. So, it's\n interesting to experiment with the heatmaps from time to time to find inspiration for some\n minor tweaks that could bring in more positive results as far as the user experience is\n concerned.{' '}\n
\n\n John Ross, CEO at{' '}\n \n Test Prep Insight\n {' '}\n – US-based online education company offering exam test prep reviews\n
\n\n Oftentimes, optimizing your site for UX can be a complete shot in the dark, where\n you're just going off your gut for what you think will perform well with users.\n However, after using this approach for a couple years,{' '}\n \n we used heat maps to do some A/B testing on different page layouts to see which would\n perform better\n \n . We built two totally separate landing pages, with almost inverse layouts. Then we ran a\n heat maps test after reaching a few thousand page views to see where users were clicking,\n scrolling, and ultimately dropping off the page.{' '}\n
\n\n This gave us an awesome idea of on-page layout changes that were needed, and we actually\n ended up combining elements from both landing pages to make a hybrid of sorts. I never would\n have thought to go with the final design that we used had it not been for the heat maps. We\n then ran another heat maps test on the final landing page and the metrics were fantastic.{' '}\n \n Our original session durations prior to any redesign were about 1 minute 6 seconds. After\n the redesign with heat maps optimization, they were nearly 2 minutes (1 minute 53\n seconds).\n {' '}\n
\n\n Kennedy from{' '}\n \n Email Marketing Heroes{' '}\n {' '}\n – an email marketing podcast{' '}\n
\n\n We found heat maps extremely useful when launching a new offer on our site. We wanted to see\n how the new page converted and what was stagnating sales.{' '}\n
\n\n We noticed that a lot of people were clicking the ‘Buy Now’ link at the top of the page\n before the product price was even displayed to them. This resulted in them going into the\n first step of a 2-step checkout and ending up in our Cart Abandonment sequence.\n
\n\n Instead of checking out, they simply wanted to know the price. You see – our sales page has\n a number of buttons someone can click to begin checkout. However, we do not introduce the\n price until around halfway down the page.\n
\n\n Using heatmap technology we noticed people were clicking on the Buy button near the top of\n the page, completing step 1 of the check out process (giving us their email address) and\n abandoning. This led us to the conclusion that they were only clicking to see the price.\n
\n\n Based on that we changed the page so that all buttons on the page before the price is\n mentioned simply scroll to the price on the page, instead of commencing checkout.\n
\nThis has reduced checkout abandonment significantly.
\n\n Brenton Thomas, Founder at{' '}\n \n Twibi\n {' '}\n – Digital Marketing agency\n
\n\n I've used heatmaps to assess landing page engagement. I was driving traffic to gated\n content to generate lead gen interest for a SaaS-related product. After enough data had\n collected to review the heatmaps, it was apparent that prospects didn't engage with\n most of the content on the landing page. They only engaged with the form and a few other\n elements on the page. As a result, I stripped away 80% of the content,\n streamlining the page. The outcome was a 300% increase in conversion rate{' '}\n which became my new default landing page to compete against future landing page variations.{' '}\n
\n\n Ray McKenzie, Founder and CEO at{' '}\n \n StartingPoint\n {' '}\n – SaaS customer operations and experience platform for service-based companies\n
\n\n As a SaaS platform, customer experience is something we value a lot. Especially since we are\n a customer operations and experience platform. Utilizing site heat maps has helped us\n streamline multiple areas of our business. This includes our commercial website, but also\n our SaaS platform.\n
\n\n\n As an early-stage startup, the visits to our website experienced a bounce rate of more than\n 72%. We needed to increase the engagement on our site. We needed to make visitors want to\n see more and stay longer. We used heatmaps that helped direct us to visually change the\n content presented, and in an order that made sense for our visitors.{' '}\n
\n\n Our website bounce rate currently is approximately 45% and we are continuing to improve\n this. We also use heat maps inside our product for streamlined efficiency. We want our\n customer experience to be intuitive, simple, and lean. By recreating steps our customers\n take and seeing what they focus on, we were able to do this and{' '}\n increase engagement and adoption by more than 22%. We are just starting\n off, but heat maps are essential to our product and company growth.\n
\n\n Dan Bailey, President at{' '}\n \n WikiLawn Los Angeles Lawn Care\n {' '}\n – Lawn care services’ marketplace\n
\n\n We actually used heatmaps to optimize our site and address issues. We were noticing a\n drop-off in sign-ups and had to identify where that was happening. Once we isolated the\n bounce rate, we discovered that people were making it to the signup page and then just\n falling off.\n
\n\n We used heatmaps to determine where the focus was on the form and when that was happening\n and discovered we were exacerbating the "form fatigue" phenomenon. Essentially, we\n were asking too many questions. There was no reason we absolutely needed to ask for the\n amount of information we were asking for. The heat map helped us determine where people were\n exiting the page and where they were spending the most time which then let us address those\n issues and improve our signup rate.\n
\n\n Alex Willen, Owner at{' '}\n \n Cooper's Treats\n {' '}\n – healthy frozen snacks for puppies{' '}\n
\n\n We set up some heat mapping software on our site, and the one really useful thing we\n discovered was that a lot of homepage visitors were scrolling all the way down to the footer\n and clicking on the "\n \n Our Mission\n \n " link. When we checked the data on Google Analytics, it turned out that people who\n landed on the homepage and clicked that link then subsequently went to a product page were\n about 14% more likely to purchase than those going to a product page immediately after\n visiting the homepage.\n
\n\n We moved the link from our footer to our header menu, and we ended up seeing about a 9%\n increase in conversation rate from the 30 days prior to the change to the 30 days after. We\n saw visits to the "Our Mission" page increase by over 200%, and people who went\n there and then to a product page continued to purchase at a higher rate.\n
\n\n Shawn Breyer, Owner at{' '}\n \n The Hive Law\n {' '}\n – virtual divorce attorneys and estate planning lawyers\n
\n\n When we used heat maps for our website, we noticed that 8.7% of our clicks were going to our\n ‘About Us’ page. Before we noticed this, we had not spent much time building up our\n credibility. Our company page was basically blank with a generic blurb. We added photos,\n wrote out small descriptions about us, added our core values, and wrote what we stand for.\n Since the change, our amount of clicks on the About Us page has remained the same. But the\n number of conversions on the website has increased. Our conversions before the About Us page\n optimization was roughly 3.9%. After that, our conversions went up to 5.3%. That allowed us\n to get 28 more leads per week, which was another 2 clients per week.\n
\n\n By using a heat map on your website, you can collect a variety of insights that will help\n with UX improvements. As mentioned in the examples above, by using and analyzing the data\n from your{' '}\n \n heat maps\n \n , you can:\n
\n\n Interested in learning more about the power of heatmaps? Be sure to check out our dedicated\n guide!\n
\n >\n );\n};\n\nexport default withUsabilityTestingTemplate(UXImprovements);\n"],"sourceRoot":""}