logo_crazyegg

Over the past several years we’ve formed a relationship with Neil Patel and the CrazyEgg.com team based on our mutual beliefs in the importance of designing for results on the Web. We worked with their team to implement a SlideDeck product tour on their homepage last year, which led to a 21.6% increase in conversion in just 30 days. With this redesign the objective was clear, improve performance and create a memorable experience with the CrazyEgg suite of products. We think we’ve accomplished the goals with the new redesign. In this post we’ll show you what we did and how we did it.

The goal was straight forward, let the product sell itself

The Objective

Heat maps are powerful. They visually communicate what visitors are looking at on your website in a way that traditional analytics can't. Yet, they're hard to explain without seeing them.

So the goal was straightforward - let the product sell itself by putting it right in the hands of visitors from the get-go. Bring the product to the forefront, don't hide it, and don't reduce it to a series of thumbnails or screen captures. Let the visitors experience it for themselves, and use it to get a feel for what it brings to the table for anyone responsible for the performance of a website.

To meet this goal we chose a revolutionary web design which dedicated a full third of the page to a fly out, fully-functioning demo of the tech.

The Design

You've probably never seen a website like this before.

That was part of the plan. There's a lot of design fatigue out there. How many websites have you seen with the same layout structure - same skeleton - with different creative layered on top.

From the beginning we wanted to make this a memorable design. So we went with an unconventional - split of the page. The full third fly out makes the heat map the thing, while still giving room for messaging and calls to action in the content area. In the left-hand side we focused on a few key messages and updated the calls to action. A quick glance and you can't miss what you're supposed to do. It's all about focusing the user and driving them to the funnel.

The right side heatmap really is where all the magic lies

It's a totally unconventional design and one that is built to purposefully be memorable and engaging. So many products are featured with thumbnail images or poorly executed voice over screen capture walkthroughs that don't convey the power of the product. By using this fly out we're putting the tech right in the hands of the visitors. Letting them see it in action and manipulate and use it to get a sense for how it works.

Plus they can see all the features - not just one, they can see the different stats and visualizations and get a sense for the product as a whole.

Crazy Egg Call to Action Design Crazy Egg Account Creation Design

It's all in the details

You may not realize it at first, but there are split-second delays and timing elements that are feeding the visitor the information in a structured manner, improving comprehension and hierarchy of information consumption. On the pricing page we've completely updated and overhauled it and included some fun and unique interactive elements to improve the experience of picking a plan and completing the registration process. And to make the pricing page a bit easier to read, we decreased the demo fly out 40 pixels - a small tweak to give the content more room to breathe while maintaining the integrity of the design. A small detail, but an important one.

Crazy Egg Signup Form Design

While the first-blush visual is stunning in it's own right we worked really hard at getting the details right. At dt we believe that the details make the design and paying attention to the user experience means paying attention to the details. If you take a look at the design you'll notice a few subtle things we did to improve the usability of the site. For example when the heat map first appears you're presented the information in a very specific and timed sequence. Things appear and disappear in an orchestrated manner.

  • Heatmap
  • Scrollmap
  • Confetti
  • Overlay
  • List
Crazy Egg Features Design

A Brand Refresh to Boot

It's not just the design that's changed.

If you compare the CrazyEgg site now to the previous you'll see we've given the brand a shot in the arm as well. The previous brand was a bit whimsical and fun - playing off the name of the company and the spirit of it's live-life-to-the-fullest founders. But heat maps and web analytics are in-fact a serious business that mean success or failure on the web. For enterprise companies these heat maps can mean millions of dollars in revenues each year. So we wanted the brand to reflect the gravity of the product.

Stripped down some of the whimsy, and focused on conversion, usability and service the professional

Design elements such as the clouds were really toned down and we went for a more typographical driven design with less reliance on illustration - all in an effort to brand CrazyEgg as the pro's choice for serious web analytics.

We learned that getting attention of users and allowing them to experience the product yields great results. CrazyEgg's site is converting better than ever. What can you learn from this? Push your design. Get out of the box and create something that works for your business. Stop hiding your product behind thumbnail images and screen capture videos. Put it in the hands of your potential customers. Test and learn. Don't be afraid to break a few rules. And remember - design makes a difference. When you pay attention to design, you unlock new value for your business. Just like CrazyEgg did.

Have an awesome project in mind?

Contact Us
The Results