Tag Archives: case-study

Deconstructing a 56% Conversion Lift at Big Contacts

Image

Big Contacts – a web-based CRM targeting small and mid-range businesses – are smiling, and no, it’s not just because Spring has finally arrived.

Digital agency Surge Labs published a case study last November showing how they achieved a 56% conversion boost in sign-ups on Big Contacts’ landing page. Especially in a competitive field like CRM, this uplift represents a significant achievement. Here at EyeQuant, we always love a good success story, so we thought we would analyze this one through our own lens.

Here is Version A of Big Contacts’ website. For all intents and purposes, it’s probably not the worst web page you’ve ever seen, which is precisely why it becomes much more fun to analyze.

Image

Surge Labs hypothesized that, in order to better capture potential customers’ attention in such a competitive field, Big Contacts would need to eliminate clutter and focus on one key design strategy: Clarity.

They would achieve this by:

  • Creating white space
  • Focussing on only one call-to-action
  • Improving the user’s navigational path with better organization

Now take a look at the perception maps of the EyeQuant analysis of Version A below:

Image

The value proposition is clearly the element on the page that needs the most work; we can see what the software looks like, but we aren’t immediately aware of the core benefits it offers us. More importantly, perhaps Big Contacts’ greatest benefit – its affordable plans starting at $15 per month –  isn’t even on the page.

Version B of Big Contacts’ landing page corrects these problems beautifully.

Let’s take a look why:

Image

Organization & Flow:

Big Contacts’ value propositions are now clearly lined up in vertical bullet-point form, ending with a big orange CTA button. The improvements to the user’s navigational path are clear, and can once again be immediately gauged using EyeQuant’s perception map:

Image

Now, isn’t that a thing of beauty? 

Not only are the four bullet points immediately visible as the user’s gaze makes its way from the headline to the CTA, but the navigational path also calmly makes stops at an image of the software and an attractive price tag.

The best part? The logo, the headline, the core benefits, the price, and the CTA, are now visible within the first few seconds of a user’s visit to this landing page. Even visual information about the company’s social media presence and its syncing abilities are visible. Impressive.

Colour Consistency:

Surge Labs made an excellent use of colour in Version B of this landing page by choosing consistent three colours to draw attention to urgent information:

  • white for text
  • warm, bright orange for the CTA
  • warm, bright green to highlight the core benefits.
  • Cool blue as a background block colour.

These three colours are set off brilliantly by a cool blue background in which all the most important “above the fold” information is situated.

Most importantly, the use of colour choices is consistent and logical. While in Version A the user had to decipher between two text colours (blue and white), Version B’s text is all white, removing the need for the user to process any unnecessary aesthetic changes. The same could be said for the flashes of green next to the core benefits: by establishing bright green as a color associated with core benefits, the user is able to make instant connections between the price all the way on the far left, and the bulleted core benefits in the mid right.

Grouping Important Information with Colour: 

While too much variation in colour can be distracting to a user’s initial attention, here it has been well implemented. In Version A, a user had to leave the comfortable blue box and choose between one of two CTA’s, creating a visual barrier between the description of the product and its call-to-action.

In Version B, the user’s focus can remain almost entirely in the blue box – it immediately indicates that the user is in a zone that contains important information. 

In previous EyeQuant blogs, we’ve discussed the importance of clarity in creating a visually calm, easy-to-navigate landing page. Digital Surge’s work with Big Contacts is an excellent testament to this strategy. Bravo!

Key Takeaways:

  • Flow: When re-thinking a website, considering how the user’s gaze will flow across the page when they first arrive is crucial. Does the page create hurdles or obstacles around the user connecting important information? If so, there’s room for improvement.
  • Colour Consistency: It’s not enough just to know that an orange button will pop out, colour can be used to produce consistent visual cues, linking different kinds of information.
  • Grouping with Colour: Big Contact’s winning version draws a big blue box around its most crucial information, putting the viewer at ease by re-assuring them that everything they need to find will be in this one, confined area.

6 Ways to Achieve an Instant 30% Sign-Up Boost: An EyeQuant Case-Study (Fashion E-Commerce)

Screen Shot 2013-04-03 at 11.34.04 AM

SalesGossip directs savvy deal-hunters to the latest sales and promotions of their favourite brands. Users sign-up to access the details of each sale event, and opt-in to receiving emails to be notified about future deals.

SalesGossip recently overhauled their entire website using EyeQuant to test and compare changes along the way, and in doing so achieved an instant 30% boost in sign-ups. Not only this, but SalesGossip made some excellent fundamental changes to their core branding and content, putting them in line with the look and feel of other fashion websites in their ecosystem.

Screen Shot 2013-04-03 at 11.16.21 AM

To find out how SalesGossip made such a great leap, let’s take a look at one of their “Sale” pages.

  • Make It Easier to “Stay Tuned”

EyeQuant’s “Regions-of-Interest” function lets us measure how attention-grabbing a specific region of a page is in comparison to the average pixel on the page. Here, we can see that the “notify me about future sales” call-to-action went from 4% to 43% more attention-grabbing than the average pixel on the page. Why?

Even though Version A’s “Follow Selfridges” button is colorful and flanked by starred, bold black text, the button isn’t placed in a prominent location, and its light green color doesn’t produce enough contrast against its white background. In Version B, the user’s eye is drawn toward the “notify me about…” region thanks to the grey box that surrounds it, as well as its far more central location.

  • Give Users An Idea of What They’re In For

Version A doesn’t give the user much of an idea of what they might expect from Selfridge’s; they simply see a logo and a pair of shoes that don’t necessarily conform to the brand’s identity. In Version B, an ad campaign image from Selfridge’s takes centre stage. In this way, the user can instantly gauge the feel of the brand while being directed through a navigational path that is consistent with the overall aesthetic of the page.

  • Let Users Sign in with Facebook

30% of Facebook’s 500 million + users use Facebook Connect to log in to third party sites every month. SalesGossip used this knowledge to make their Facebook Connect CTA stand out with a blue button against an otherwise grayscale, monochrome scheme.


  • Bring Attention to the Community You’re Creating

Nobody will deny that the marriage of e-commerce and fashion editorial has become a strong one. Bloggers sit in the front row of fashion week, while Harvard Business School offers a course on just this subject. SalesGossip placed their “style journal” – a fashion editorial guide for their users – in a prominent position on the page in order to engage potential users and make them feel part of a fashion community.

  • Consistency Creates Flow – and Flow Creates Consistency

Recent studies into the science of human attention show that, rather unsurprisingly, it’s more difficult for us to find things in a messy environment. Scientists at MIT were able to hone in on one point in particular, though: too much variation in size, color, and texture is confusing. Even though Version A provided all the information a user might need, its organization was inconsistent, with too many varying sizes and colors scattered across the page. Version B’s flow becomes clear using EyeQuant’s Perception Map, where spotlighted areas show what users will see in the first 3 seconds. As opposed to Version A, where the user’s eye is jumping all over the page, Version B provides a focused path, putting the user at ease.


  • Align Your Color Scheme with Your Niche

Coco Chanel made black and white a chic staple in fashion in the 1920’s, and this trend continues today. Sites like Net-A-Porter, Neiman Marcus, ASOS, and TopShop adhere to a monochromatic black & white color scheme to impress a sense of sartorial savvy upon their users. By following their lead, SalesGossip effectively aligns themselves with the online fashion eco-system, allowing potential and current users to more immediately identify the site’s relevance in its field.


 

  • Create Space

In Version A, two banners of color flanked either end of the page, drawing the eye to the outer edges of the page; in Version B, this colorful background is replaced by white, centralizing the user’s focus and calming the visual path. Creating white space around important elements eases and smoothes the process of user attention, quite simply reducing the amount of information competing for user attention.

Using EyeQuant’s instant visualisations, the reasons why SalesGossip is achieving better conversions become clear: their new site flows from one element to the next with simplicity  – and just the right amount of design flair.

Key Takeaways

  • Determine how users can “stay-tuned”, and make this element easy to access.

  • Let users sign-in via social media.

  • Engage users with a sense of community via relevant editorial content.

  • Create “flow” by organizing and prioritizing content with consistent colors, sizes, and organizational groupings.

  • Know your ecosystem, and plan your color scheme accordingly.

  • Create space for the user to explore by de-cluttering unnecessary copy and design touches. Remember: Function over Form!

 

Want to instantly find out how users are seeing your website during the first moments of their visit?

Don’t worry, we’ve already done most of the work for you:

All you need to do is to visit EyeQuant and upload a URL or a screenshot of any webpage.

Your first test is always free, and we’re always happy to speak to you about how you can make your results work for you.