Tag Archives: case studies

How Kula Partners Followed A Structured Conversion Optimization Process Using VWO

The need for a structured, process-driven approach to conversion optimization (CRO) cannot be stressed enough. A structured CRO program is essential to deliver consistent and repeatable improvement in conversion rate and user experience (UX). Only a few organizations and agencies have adopted this approach to optimizing conversions; even fewer have been able to master it.

Kula Partners is one such agency that has actively practiced and advocated a structured CRO program. This story aims to highlight the optimization process followed by Kula Partners and how VWO helped it achieve success at each step of the process.

Based out of Nova Scotia, Canada, Kula Partners is a certified partner with VWO, offering services such as conversion optimization, inbound marketing, and web development. While optimizing conversions for its clients, Jeff White, Principal at Kula Partners, discovered that following a rigorous optimization process is what leads to success.

Synopsis of Kula’s Way of Optimizing for Success

The optimization process at Kula begins with identifying optimization opportunities on a client’s website or landing pages. It is done by closely analyzing website data and user behavior, using a variety of tools. Next, it hypothesizes ways to capitalize on each optimization opportunity. Hypotheses are then prioritized based on a few factors such as potential of improvement and effort in implementation. The hypotheses undergo A/B tests for validation, per its priority list. The results of A/B tests are thoroughly examined, and the learning is documented in a common knowledge repository. This repository is used to generate more hypotheses to optimize the website further. The cycle continues.

As Jeff puts it, “Optimizing a client’s site for conversion always starts for us with listening. We begin by implementing VWO heatmaps, clickmaps, and visitor recordings to see how people are using a site. Combined with analytics from tools such as Google Analytics and HubSpot, we’ll look for the pages that have the biggest opportunities for conversion optimization based on total number of visits and current conversion rates. Once we have a good understanding of how people are using those pages, we’ll implement a series of tests to see how best to improve the conversion rate. Sometimes this takes the form of simple changes to the body copy, button position and format. In other cases, it may mean making much larger bets and designing a wholly different, alternative landing page.

After we’ve an opportunity to implement revisions on a client site, we’ll continue to monitor the results to see how site visitors interact and refine the interface to improve the user experience even further.”

Since 2014, Kula has been trusting VWO for its optimization strategy. It has been using new features as they come up to achieve better conversions for its client websites.

Step-by-Step Process-Oriented Approach to Conversion Optimization

Let’s talk about how Kula puts its well-defined process into practice.

cro-process1

Step1: Identifying Optimization Opportunities

The first step in optimizing a website for more conversions is to establish baselines. This means setting up key metrics or goals that clearly indicate visitor actions and conducting quantitative analysis around these goals. Visitor actions leading to completion of a final goal (such as Checkout in case of eCommerce) are tracked as funnels. The website conversion funnel is extremely effective in spotting leaks—pages from which most users drop off.

Kula uses robust tools such as Google Analytics and HubSpot to track key metrics and discover potential leaks. These tools also point to high-value pages on a website—the pages that attract the highest traffic and the pages that contribute to many conversions.

Jeff says, “We identify opportunities for testing through a number of ways. We establish website funnels in tools such as HubSpot, Google Analytics and MixPanel. We then monitor conversion rates across the funnel to see areas that may be ripe for improvement. “

Step 2: Analyzing Visitor Behavior

After identifying potential leaks, the next step is to analyze how visitors are interacting with these pages on the website. This calls for a qualitative analysis of how visitors behave on the website. Such analysis provides significant insights about why visitors are behaving in a certain way. For example, if a lot of visitors are abandoning sessions on a eCommerce home page, a heatmap or visitor recording can be used to find out what category of products they were looking for and what specific problems they faced while searching for the product. Knowing what deters users from completing a conversion step is an opportunity for optimization.

At Kula, the team takes help of VWO capabilities such as Heatmaps, Scrollmaps, Visitor Recordings, and Form Analysis to understand the usage habits of visitors. It also uses VWO On-page Surveys to directly ask visitors for feedback.

Jeff shares, “As stated above, we always start our tests by observing the present usage habits of site visitors through heatmaps, clickmaps, and visitor recordings. If it makes sense, we may also gather subjective data through exit surveys. Once we have found where users stumble, we formulate specific tests to try to improve conversion.

Here’s how Kula analyzed visitor behaviors for their clients, using VWO’s advanced capabilities:

Using Heatmaps to Improve Traffic Flow

Kula Partners was working on optimizing the Halifax International Airport Authority (HIAA) website by highlighting information for airport visitors at the forefront: arrivals and departures, parking information, and directions. Although the new website saw major traffic increase (more than 300%), the team continued to scout for more optimization opportunities.

A heatmap report of the HIAA home page revealed interesting insights—68% of all clicks on the home page were on the Departures tab and only 6% clicked back to the Arrivals tab.

screen-shot-2016-06-01-at-8-54-27-am-1024x650

Kula realized that this made perfect sense. Most of the traffic on the website home page would be coming to check when their flight is scheduled to depart. Far less people would look at the arrivals; they would do that only before receiving someone at the airport.

Based on this insight, Kula decided to make Departures as the default view on the home page. As a result, it saw a 20% drop in the number of visitors that clicked the other tab, which was Arrivals in this case.

Using Website Surveys Directly Provides Insights from Actual Visitors

This time, Kula was optimizing the website of Tirecraft—a company providing superior tires, wheels, accessories, and automotive services. The objective in this case was to increase the number of quotes users submit on the website.

To do that, it first tried to understand what prevented visitors from submitting a quote. It went ahead with a website survey and asked the website visitors, “What stopped you from submitting a quote request today?”

Visitors could choose their answers from the following options:

  • I prefer to purchase this product in person.
  • There was no pricing information available.
  • I need more information.
  • I can’t buy the product I want online.
  • Other.

The result of the survey highlighted the major pain points that users faced.

tirecraft-exit-surveys

An overwhelming number of visitors responded with the second option “There was no pricing information available.”

Using Visitor Recordings to Optimize User Experience

Jeff shared an example of how Kula is using visitor recordings to help its clients.

We recently completed a large UX analysis project with a series of visitor recordings for a luxury extended stay apartment company with a national presence in Canada. Through this process, we’ve been able to develop a series of over 100 recommendations for improvement of the user experience. Our plan is to begin a series of extensive innovative A/B tests, starting with their product pages and moving to other areas of the site from there.”

Step 3: Planning and Prioritizing Testing Hypotheses

The insights and observations collected from quantitative and qualitative analyses act as fuel for the optimization engine. Our next key task is to manage this library of insights and build hypotheses for testing based on data insights.

A typical hypothesis statement looks like: Based on the observation that visitors are abandoning cart because they can’t find security seals on the checkout page, I expect that adding security seals on the checkout page will address the trust issues for visitors not completing the purchase.

There is a hypothesis aimed at addressing each optimization opportunity. Just as a thorough website analysis brings up multiple optimization opportunities, the hypotheses are also numerous. At most instances, it is not possible to validate all these hypotheses through A/B tests simultaneously. At that point, the hypotheses are prioritized on factors, including the potential to deliver positive results and ease of implementation. Prioritizing these hypotheses helps us pinpoint which tests to run first and which ones to park for future.

Kula also follows a similar prioritization model. Jeff adds, “Although we don’t specifically follow any single prioritization framework, our process most closely aligns with the PIE framework. As an agency with considerable dev chops, we’re lucky in that we can implement nearly any level of test no matter how complex. The question at that point is whether or not there’s enough potential lift in conversion to make the adjustment worthwhile.

The prioritization is usually implemented with the help of project management tools.

We record and detail our hypotheses for client tests using our project management tool, JIRA. We also maintain detailed notes about how to conduct tests and implement them in VWO, using Confluence, so that all Kula team members can quickly reference the correct processes.” explains Jeff.

Step 4: Validating Hypotheses with Testing

After the hypotheses are created and prioritized, it is time to test them. Testing a hypothesis helps you validate your thought process, and a winner assures the percentage of gain you’ll achieve by executing the change on the website. Based on the complexity of the change to be implemented, you should choose the type of test to run. For instance, it makes more sense to experiment with multivariate tests on websites with heavy traffic than on pages with low traffic.

Jeff talks about his experience with testing while he was working with rest of the team on creating a new version of the website to match the new positioning.

“We rolled out a version of the new layout for our HubSpot landing pages four months before we began designing the full site. The result was pretty solid—on our most popular asset landing page, we saw a conversion lift of nearly 10%. This gave us the confidence to deploy the design more widely.

Here is a screenshot of the test variations with the old version on the left and the new one on the right:”

kula_innovative_ab_testing-1024x987

Step 5: Analyzing Test Results and Documenting the Learning

The last leg of the optimization journey focuses on analyzing how the test results tie to visitor behavior and on saving learning from this analysis for future optimization.

Jeff explains, “When running tests, we review the results from VWO but also look at how GA and HubSpot are reporting on the changes in conversion or traffic behavior. We definitely document our results from previous tests in order to inform our future tests. These are also used in our presentations to clients on why/how we should implement CRO for their businesses.

Key Takeaways

  1. A process-driven strategy for optimizing conversions is the key to long-term success.
  2. To run the optimization engine for long-term growth, businesses need to adopt a structured approach that generates insights and learning that to act as fuel for this engine.
  3. The optimization process begins with first putting the baselines in place and finding areas of potential leaks. Next comes an in-depth view of how the visitors are behaving, that is, qualitative research. This is followed by recording and prioritizing hypotheses, which are validated through structured A/B testing.

5

1 ratings

How will you rate this content?

Please choose a rating

The post How Kula Partners Followed A Structured Conversion Optimization Process Using VWO appeared first on VWO Blog.

Follow this link:

How Kula Partners Followed A Structured Conversion Optimization Process Using VWO

Eating Our Own Dogfood – How To Optimize For Revenue As A SaaS Business

It wouldn’t be an exaggeration to say that we at VWO are very passionate about experimentation.

Not only have we built a product around A/B testing and conversion optimization, but we are always looking for ways to run experiments on our website.

Recently, we got our entire team to actively research and contribute ideas for optimization on our website and ran multiple tests. This post is a narrative of what we did after.

Who Is This Post for?

This post will help SaaS growth-hackers, marketers, and optimization experts to predict the business value from a test.

The aim of this post is to not only share the tests we ran on our website, but also introduce a revenue-based framework that predicts the business impact of an A/B test and prioritizing on the basis of it.

Revenue-Based Optimization

Need for a Model

After we propelled our team to suggest ideas for testing, we had more than 30 hypotheses looking at us, but no distinct way of knowing which of these to take up first. Of course, there is a range of prioritizing frameworks available, but we particularly wanted to look at the ones that would directly impact our revenue.

This framework helped us project the potential impact on the revenue from each test. Here’s what we did:

Step 1

We decided to identify high-impact pages and winnow the pages that were not as important for our business, that is, pages where no goal conversions take place. We looked at Google Analytics for pages with the:

  • Highest Amount of Traffic
    (We used “New Users” to nullify visits by existing customers.)
  • Highest Number of Goal Conversions
    (Goal conversion, which contributes to your overall business goal, is the main goal for your website. In our case, this meant all qualified lead-generating forms. A free trial or request a demo qualifies a visitor as a lead with a genuine interest in our product; or, as the industry popularly refers to it, a Marketing Qualified Lead.)

This gave us a list of pages which were high-value in terms of, either traffic generation or last touch before conversions.

We identified the following key pages:

  • Free-trial page
  • Request-a-demo page
  • Homepage
  • Pricing page
  • Features page
  • Blog pages (All)
  • Contact-us page

Step 2

Our main objective was to project an estimated increase in the revenue due to a particular test. If your test increases the conversion rate by say 20%, what would this mean for your business and, in turn, the revenue?

This is how our marketing funnel looked like:

VWO Marketing Funnel

Note: You should use data from the recent 3–6 months, and the average (mean) of each step. This is to accurately reflect what to expect from your testing and be relevant to your business.

For each of the “Key Pages” we identified in the first step, we also dug out the corresponding numbers at each funnel stage. We’ve explained each stage of the funnel and how it is calculated:

a) Key Page Traffic: The total number of pageviews per Key Page (new users in our case). You can find the data in Google Analytics.

b) Total Conversions: The total number of leads generated from each particular page. If there is an additional qualification your company follows, source this data from your preferred CRM or Marketing Automation software. For example, at VWO, we use Clearbit to qualify our leads in Salesforce.

c) Opportunities: The total number of opportunities generated for your sales team. This data will be available in your CRM; make sure to count qualified opportunities only.

d) Customers:  The total number of customers created in a month.

e) MRR (New): Or monthly recurring revenue, means revenue booked on a monthly basis; you can use this to estimate annual recurring revenue, or ARR, as well.

Step 3

Now that we had all the numbers needed in our arsenal, I decided to calculate some more internal benchmarks. This gave us the performance of our marketing and/or sales funnel.

  1. We computed the conversion rate of a particular page, using the following formula:
    Existing conversion rate = (Total Conversions Key Page Traffic); this is represented as %
  2. The conversion of your leads into opportunities:
    (Opportunities ÷ Total conversions) × 100, represented as %
  3.  The conversion rate of opportunities into customers:
    (Customers ÷ Opportunities) × 100, represented as %
  4.  The average revenue per user or ARPU:
    Total MRR  ÷ Total number of paying customers

Now all you have to do is to impute these numbers in this template.
Revenue-based Testing Model
The model uses all of that data and projects how much revenue increase or decrease you can estimate based on your test results. This estimate can give you a good idea of where to begin or prioritize your testing.

Step 4 (Optional)

This is where it may get tricky. At VWO, we sell both Enterprise plans and Standard plans. So to be fair, we must estimate each cohort with separate data and individual conversion rates.

For example, Opportunity creation % for an Enterprise plan may be lower, but a Standard plan is easier to convert. You may want to decide what type of plan do you want to focus on.

We, for instance, used website traffic and Alexa rank as the benchmark for lead qualification. We attributed more value to the leads that came in through key pages and prioritized them.

This led us to the next step, which is the qualification rate of the said lead of high value. This rate may be in the range 30–50%, depending on your definition.

It was interesting to note that each page had a different qualification rate. For example, we get better quality leads from our Request a demo page than we do from our free trial or blog post page.

Tests Conducted:

After we had the model in place, we played around with the increase or decrease in our conversion rates. This was to identify what would be our best optimization opportunities?

The free trial pages and the home page were among the high-priority pages, in terms of the impact of revenue. (Unfortunately, I can’t share the exact numbers with you.) We first looked at the hypotheses on the free trial page:

Test 1 – Free Trial Page

Our hypothesis was “Illustrating VWO features and social proof on the free trial page will compel users to sign up for the free trial.”

Here is a screenshot of what it looks like in VWO.
hypothesis-free-trial

Bonus tip: VWO has recently launched a new capability called PLAN that lets you manage and prioritize your testing hypotheses. To learn more about this capability, visit the VWO evolution page.

This is what the control looked like:

Free Trial Control

Our heatmap data also showed a lot of users clicking the features page after accessing the free trial page.

Screenshot of heatmap data:

Heatmap Screenshot for test

We created a variation which included the features we offer to solve this issue. Here’s a screenshot of the same.

This is our current free trial page:

Free Trial Page(New)(Variation)

We ran the test for over 2 months. The result was an increase of 6% in our conversion rate, which led to increased revenues.

Test 2 – Request a Demo CTA (A/B Test)

The main CTA on the homepage has been the free trial CTA. The headline on the homepage was “A/B Testing Software for Marketers.”

The hypothesis for the test was “We will get more qualified leads through a request a demo CTA on the homepage.”

This is what the control looked like:

Homepage Control

We came up with a more targeted copy and changed the existing CTA to Request A Demo. Here is what the variation looked like:

Homepage variation

We also wanted to change our positioning due to our foray into Conversion Optimization. The results from this test were that our variation beat the control and had more than 31% improvement in the conversion rate.

Based on the first example, we have already implemented the new free-trial page as our main free-trial page now. Based on the second test, we updated our current home page.

All in all, this model helped us correctly predict the best optimization opportunities, make our testing better, and more strategically aligned to business goals.

Let me know your experience with this model and how you go about testing.

Would love to hear your feedback on this!

Free-trial CTA

The post Eating Our Own Dogfood – How To Optimize For Revenue As A SaaS Business appeared first on VWO Blog.

Read more – 

Eating Our Own Dogfood – How To Optimize For Revenue As A SaaS Business

The Realities Of User Experience Design Within The Luxury Industry

For luxury companies and upscale lifestyle service providers, excellence in experience is an essential component of the value delivered. Conceptually different from the mass market, the luxury domain relies not only on offering the highest differentiated products and services, but on delivering experiential value.

The Realities Of UX Design In The Luxury Industry

Adopting technology and embracing a digital presence through platforms and initiatives, the luxury industry today is tackling the challenge of designing an unparalleled user experience (UX) online. In this article, we’ll present a case study and share observations on the peculiarities of the UX design of a luxury lifestyle service platform and its mobile apps.

The post The Realities Of User Experience Design Within The Luxury Industry appeared first on Smashing Magazine.

Link to original:  

The Realities Of User Experience Design Within The Luxury Industry

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

Editor’s Note: When it comes to elections, we are each given a choice in how to express our opinions and beliefs. Some designers and developers use their skills to further articulate their choice in one person. Here’s a glimpse into how Topple Trump!, an interactive responsive quiz game, was designed and built — combined with some valuable lessons learned along the way. This article is about techniques and strategies, so please avoid political flame in the comments.

Creating an online quiz that is simple to use, looks great and is really fun to play is one thing. Basing it on Donald Trump’s polarizing presidential campaign is another.

Building 'Topple Trump', An Interactive Web-Based Quiz Game (Case Study)

The brainchild of Parallax director and developer Andy Fitch, Topple Trump! has gone on to win numerous awards. But it was a real team effort that brought the game to life. Here’s a glimpse into precisely how that happened, touching on the development process, design considerations and some valuable lessons learned along the way.

The post Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study) appeared first on Smashing Magazine.

View original post here: 

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

How To Run A Side Project: Screenings Case Study


Did you know you have a superpower? No, I’m not talking about super-strength, sticking to walls or pushing metal claws out of your forearms (although you might have those as well, for all I know).

Screenings: A Side-Project Case Study

If you work on the web — which I assume you do if you’re reading this — your superpower is side projects. Unlike your regular job, where you have to listen to your boss or please your client, a side project lets you take on an alternate identity, one of which you’re in charge and no one can stop you.

The post How To Run A Side Project: Screenings Case Study appeared first on Smashing Magazine.

Read original article:

How To Run A Side Project: Screenings Case Study

Approaches For Multiplatform UI Design Adaptation: A Case Study


There is no winner in the battle between iOS and Android, and we all know that. If a product succeeds on one platform, it will undoubtedly be ported to the other. Sometimes app developers don’t even bother waiting, and release apps for both platforms simultaneously. For designers this means only one thing — they will have to adapt an application’s UI and UX to another platform while ensuring a consistent design language across the product.

Three Approaches For Multiplatform UI Design Adaptation: A Case Study

There are three different scenarios for UI multiplatform adaptation: retaining brand consistency; aligning with the conventions specific to the platform; and seeking a balance between the two. We decided to analyze these three approaches by looking at the most popular apps out there so that you get some insight into what method might work best for you.

The post Approaches For Multiplatform UI Design Adaptation: A Case Study appeared first on Smashing Magazine.

See the original post: 

Approaches For Multiplatform UI Design Adaptation: A Case Study

Making Time: Redesigning A Calendar Experience For Android


In UX design, few things are more intricate than time and personal time management — only a good arsenal of mobile design patterns and information architecture principles can save you. This is the story of redesigning the UX for a popular calenda tool on Android: Business Calendar. We’ll cover designing systems, interaction design problems, scaling across screens and platforms, research, and big business decisions and their outcomes.

Making Time: Redesigning A Calendar Experience For Android

Business Calendar started out as a side project, a one-man show, and is now run by a team of eight in Berlin. The app was very successful right from the time Android entered the mainstream market, and it now has an active user base of 2 million. But instead of modernizing the design and usability regularly, the developers focused on implementing user requests and customization options. Outdated design and new features stuffed in had made the app heavy and complex — full of features, hard to maintain for the team, hardly accessible for new users.

The post Making Time: Redesigning A Calendar Experience For Android appeared first on Smashing Magazine.

Continued here:

Making Time: Redesigning A Calendar Experience For Android

Product Design Unification Case Study, Part 2: “Burger-Driven” Framework


In the first part of the case study about Mail.Ru Group product design unification, I described our first approach — a mobile web framework. Aside from creating a unified visual style and interaction principles for a dozen services, we’ve also transformed our design process from the classic “prototype → design mock-up → HTML → implementation” approach for every screen, to a modern and more efficient framework-based approach.

Product Design Unification Case Study, Part 2:

In this second part I’ll show how we have improved the same technology to embody larger versions of these products and made our “Bootstrap on steroids” more powerful. In the spring of 2012, our business unit acquired 11 content-based projects: Auto, Events Guide, Health, Horoscopes, Kids, Lady, Moto, News, Sports, TV, and Weather. Many of them are very successful in their market niche in Russia; however, they each have their own history, often with outsourced designs that led to inconsistencies.

The post Product Design Unification Case Study, Part 2: “Burger-Driven” Framework appeared first on Smashing Magazine.

Link to article: 

Product Design Unification Case Study, Part 2: “Burger-Driven” Framework

The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths

Web-based interactive experiences are widely used in the modern age for a variety of reasons, predominantly for the advertising of premium high-street products and services. After discovering the little-known clip-path property of CSS, I embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.

This article explores the inspiration for the project and aspects of how different parts were built, and I’ll dive into how you can use this greatly underrated line of CSS for your own projects.

In Pieces – 30 Species, 30 Pieces
In Pieces: 30 Species, 30 Pieces.

In Pieces1 is an interactive exhibition of 30 of the world’s most distinct but, sadly, endangered species. The experience is an informational reminder of the beauty we are in danger of losing every day, but it’s also a showcase of evolutionary distinction, because many of the species evolved in ways that make them genetically special. Users are told the stories and struggles of these unique lifeforms, as well as invited to dive into numerical data, download wallpapers and even obtain a poster featuring the entire collection — all completely viewable on mobile devices.

Inspiration: CSS Clip Paths And Animation

In Pieces started as experimentation and tinkering in code, not a grand plan for an interactive piece to help conservation, as romantic as that notion sounds. I remember reading about the polygon property of CSS’ clip-path in mid-2014 and learning of its amazing potential. A few months went by and I was surprised not to see it used much on the web, probably eclipsed by the attention given to SVG, canvas and WebGL. I felt that clip-path provided an opportunity to dive into something untouched and explore what could be made from it. At the same time, creating a project in pure CSS felt (rather ironically) cutting-edge.

If you’re not familiar with CSS’ clip-path or its polygon possibilities, Dirk Schulze has a great tutorial2. As one example, turning a regular div into a triangle is possible with a snippet of code:

.polygon-div 
  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
Polygon output based on code above
Polygon output based on code above.

The very first thing I wanted to see was whether the polygon property could have a conversation with CSS transitions, and how smoothly their first date would go. I was happy to see that the two were a natural union, especially when an easing curve is thrown in to add fluidity:

.polygon-div 
  -webkit-clip-path: polygon(9.38% 59.35%, 13.4% 58.95%, 9.28% 61.08%);
  transition: .18s cubic-bezier(.7,.3,0,1);
    &:hover 
    -webkit-clip-path: polygon(20% 59.35%, 30% 58.95%, 40% 61.08%);
  
}

Concept And Art Direction

Early sketches and brainstorming
Early sketches and brainstorming.

With this established, I wanted to think up a way that would make the polygon aesthetic matter and become some sort of visual simile — polygon animals seemed a natural visual area to explore. First, I want to get one thing straight: Polygonal species are not a new thing in terms of art direction. Hundreds of projects have used polygons to form animals, and they are easily findable on websites such as Behance (search for “polygon animals”3). This point is very important when I talk about the “idea.” I’ve seen some really nice comments on the project, and some have included references to “origami” or “polygon style,” but they miss the mark a little in that the idea is not a visual style, but rather about the formation of the species through “pieces” and the analogy that their existence lies “in pieces,” and thus they themselves are all “in pieces.” Without this aspect, the project simply becomes visual periphery.

I think there is something very romantic and interesting in linking a piece of new technology directly with an idea and in designing and developing it in a way that hooks into and works directly around that idea. This really gets to the core of what In Pieces is about.

Other ideas came quickly after this initial experiment, such as the discovery that one animal would require around 30 pieces, which led to the decision to create 30 species, and the idea to use the polygonal forms to create data visualizations of species’ numerical histories and other statistics. Let’s dive into some specific parts and see how they were achieved and how you can use them for your own interactive projects.

Creating the Polygon Animals

Each triangular piece was hand-coded from scratch, because no tool or framework existed to help me. If you inspect the code for the species, you will see that they are made of 30 divs placed on top of each other, nested in a series of parent divs. Each of the 30 divs in turn contains a child that is essentially one of the 30 pieces.

Illustration

Perhaps the simplest aspect of the project was how the original illustrations were crafted in Adobe Illustrator. It was a tough task to create all 30, but it was also the most straightforward part of the project, the main restriction being the number of polygons. The second figure below shows the asset that was produced in the tracing phase.

Vectors of scimitar oryx in selected state
Vectors of scimitar oryx in selected state.

Transparent PNG image example – used to trace over in-browser
Transparent PNG image example — used to trace over in-browser

Here's an image of the Golden Poison Frog in Illustrator outlines mode so that I make the illustration process look cooler and more intelligent than it was. But do note the deliberate overlaps
Here’s an image of the Golden Poison Frog in Illustrator’s outlines mode, which makes the illustration process look cooler and more considered than it was. But do note the deliberate overlaps.

Tracing

I then used these illustrations as flat PNGs in the browser to trace over — but with 30 illustrations to copy over to the code, I desperately needed a way to speed up the process, which consisted essentially of placing the 30 polygons in default positions and then individually moving each point to match the PNG beneath. Some online resources, such as CSS Plant Generator4 and Bennett Feely’s Clippy5, are available for us to map out clip-path points, but I needed something much more bespoke — so, I created it in the form of a JavaScript function:

$('body').on('click', function (e)
  var mouseX = e.pageX;
  var mouseY = e.pageY;

  var shapesoffsetX = $('.polygon-wrap').offset().left;
  var shapesoffsetY = $('.polygon-wrap').offset().top;

  var polygonswidth=$('.polygon-wrap').width();
  var polygonsheight=$('.polygon-wrap').height();

  var shapesmouseX = mouseX - shapesoffsetX;
  var shapesmouseY = mouseY - shapesoffsetY;

  var mousepercentX = shapesmouseX / polygonswidth;
  var mousepercentY = shapesmouseY / polygonsheight;

  var finalmouseX = (mousepercentX) * 100 ;
  var finalmouseY = (mousepercentY) * 100 ;
  var normalisedX = parseFloat(finalmouseX).toFixed(3);
  var normalisedY = parseFloat(finalmouseY).toFixed(3);

  nodecount = nodecount+1;

  if (nodecount < 3) 
    nodescss = nodescss + normalisedX + '% ' + normalisedY + '% ,';
   else  
  if (nodecount == 3) 
    nodescss = nodescss + normalisedX + '% ' + normalisedY + '% );';
    alert(nodescss);
    nodescss = '-webkit-clip-path: polygon( ';
    nodecount = 0;
     
});

This JavaScript function is fired upon a click on the body. You might want to run a query of a particular variable switch, like I did, so that it fires only when you’re tracing polygons. Here’s a quick summary of what the divs and variables are referencing:

  • mouseX and mouseY
    This picks up the position of the mouse at the point of the click.
  • shapesoffset
    This is the distance of the div from the top left of the browser window.
  • shapesmouseX and shapesmouseY
    This finds where the mouse is in the context of polygon-wrap.
  • mousepercentX and mousepercentY
    This calculates the percentage value of the mouse’s position in the context of polygon-wrap.
  • finalmouse and normalised
    These values turn these decimal percentages into usable CSS values.
  • nodecount
    This is how many times the user has clicked on the screen, from 0 to 3, before looping back to 0. Because the pieces are triangles, three points are required for each.

So, what’s going on here? Essentially, this function enables you to click three times over the flat PNG to find percentage plots in the context of the div you’re plotting. As you click, a string variable is sequentially made up until the third click outputs the full CSS line within an alert, ready to be copied and pasted.

Alert presents a copy-and-pasteable line upon tracing 3 points, ready to place into CSS
Alert presents a copy-and-pasteable line upon tracing three points, ready to be placed in CSS.

Further Processing

Once you have your code copied, it’s easy to paste, but I also needed to make sure that the appropriate shard was being colored while I did this. Copying every color from Adobe Illustrator and then pasting into Sublime seemed too lengthy a process, and there’s an app for that. I can’t recommend Sip76 enough because it directly copies the color you’ve picked to the clipboard, ready to be outputted to the code:

Sip, a handy app which allows global color picking
Sip76 is a handy app that enables global color picking.

&:nth-child(4) 
  .shard 
    -webkit-clip-path: polygon(23.45% 56.143%, 34.66% 57.3%, 22.45% 71.714%);
    background-color: #D7C5A4;
    
  }

I was able to output the code for all 30 pieces of each animal, one by one, using this tracing process. But there was still work to do — one of the big problems in rendering this style is the anti-aliasing between two shapes. If you fit two vectors perfectly alongside each other, you get a very faint but noticeable line running through, just as you do in Illustrator. So, I needed to very slightly overlap each vector via the Inspector and, thus, required a way to pinpoint which polygons were the troublemakers. This is where another of CSS polygons’ great advantages comes in: They automatically mask background images within the shape. So, I created repeating background images of all 30 numbers to track which polygons were which:

Repeating number images masked within polygons to indicate which shard to alter
Repeating number images masked within polygons to indicate which shard to alter.

For me, polygon clip paths provide something special via masking like this. I used it to solve a problem (and later used it for the blood effect upon the “smash”), but ultimately I think extremely creative things can be done with the effect. One awesome potential lies in the fact that if you move a polygon, the image doesn’t follow the polygon — you’re altering the mask. If you mix the excellent performance that one polygon alone has when transitioning with a background image that can move simultaneously, then I think something really cool lies beyond. Maybe it will be the stem for a new personal project. Another thing to bear in mind is that you can mask elements, not just images. In fact, a few paragraphs down I go into a bit of detail on the “shimmering” effect on the species, which does exactly that.

I couldn’t find a way personally, but I’d bet with more digging you’d also find a way to make the polygons visually “outlines” (like the frog image a few paragraphs above). Again, this could lead to a supercool scientific look. It’s a tool with so much potential, and I’m excited to see new things made with it.

How The Species Change

In Pieces rests heavily on the addition, removal and alteration of class names, and the species themselves are no different. Changing the class name on one lone parent div to the respective species allows for the appropriate CSS changes to the elements inside it. The species are kept within an array, like so:

var animalList = ['crow', 'vaquita', 'tamarin', 'frog', 'owl', 'turtle', 'oryx', 'iguana', 'seahorse', 'armadillo', 'sloth', 'kakapo', 'echidna', 'penguin', 'damselfly', 'bear', 'parrotfish', 'camel', 'butterfly', 'ostrich', 'panda', 'tapir', 'sifaka', 'lynx', 'rhino', 'peccary', 'okapi', 'loris', 'hirola', 'drill' ];

Anytime a new species is called into play, whether it be the next one, the previous or one directly selected, I determine what the current status of the species is via this code:

prevAnimal = (animalList.indexOf($('#animalchanger').attr('class')));

For reference, #animalchanger is the parent div that controls the species, which is set to a string variable from the array animalList. This line determines the index (i.e. integer) for the current species’ name in the array. This is used to create the variable newAnimal — the name of the new species, depending on which button the user has clicked. As an example, the “Next species” button would be this:

newAnimal = prevAnimal + 1;

Of course, a whole host of other stuff is going on simultaneous to this, but with the index of the new animal established, this is then pushed into the div’s class:

$('#animalchanger').attr('class',animalList[newAnimal]);

Polygon Transitions And SASS for Loops

You now know how the polygons are created and that the alteration of the species’ polygons is processed via class changes to the parent div. Now to delve into the fun stuff, animation! As mentioned, everything is based on CSS, and the movement is no different; a wide variety of base transition settings are used to adapt the movement to the appropriate action taking place. Before we start with the CSS, I should mention that in the last coding example, another thing is calculated: the direction the user is going in (left to right or right to left).

if (prevAnimal > newAnimal) 
  $('.wrap').addClass('right-to-left');
  $('.wrap.left-to-right').removeClass('left-to-right');
 else 
  $('.wrap').addClass('left-to-right');
  $('.wrap.right-to-left').removeClass('right-to-left');

This assigning of a “direction” class leads to the species flowing in the direction that you are browsing and is done via two SASS for loops, depending on which of the two classes is in play.

$fluidpolygons: .7,.3,0,1;

.left-to-right 
  @for $i from 1 through 30 

    $s: ($i*0.04+0.3s);
    $t: ($i*0.02s+0.2s);
    $ct: ($i*0.02s);

    :nth-child(#$i) 
      transition: 
        -webkit-clip-path $s $t cubic-bezier($fluidpolygons), 
        background-color $s $ct;
    
  }
}

.right-to-left  
  @for $i from 1 through 30 

    $s: ((31-$i)*0.04+0.3s);
    $t: ((31-$i)*0.025s+0.2s);
    $ct: ((31-$i)*0.02s);

    :nth-child(#$i) 
      transition: 
        -webkit-clip-path $s $t cubic-bezier($fluidpolygons), 
        background-color $s $ct;
    
  }
}

As you can see, there is a variety of speeds and delays for different properties. Sass’ for loop is utilized to alter both the transition’s duration and the transition’s delay, depending on which index the polygon has. For example, in a left-to-right movement, the 10th polygon will transition with a duration of .7 seconds and a delay of .4 seconds. The reverse direction is calculated simply by reversing the order — subtracting the index of the polygon from 31 instead.

Species Animation

Contrary to the impression of some, the species are not moved with CSS animations. The reason I veer away from CSS animation is that I don’t like the visible “cut” if the animation is interfered with halfway through. Instead, I’ve adjusted two classes that loop through two states: primary and secondary movement.

function animalStates(e) 
  setInterval(function()
    e.removeClass('state-four');
    setTimeout(function()
      e.addClass('state-two');
    , 1000);
    setTimeout(function()
      e.removeClass('state-two');
      e.addClass('state-three');
    , 2000);
    setTimeout(function()
    e.removeClass('state-three');
    e.addClass('state-four');
    , 3000);
  },4000);
}

function animalStatesSecondLevel(e) 
  setInterval(function()
    setTimeout(function()
      e.addClass('two-state-two');
    , 1000);
    setTimeout(function()
      e.removeClass('two-state-two');
    , 1100);
    setTimeout(function()
      e.addClass('two-state-two');
    , 1400);
    setTimeout(function()
      e.removeClass('two-state-two');
    , 1500);
  },3000);
}

There is new CSS for each state, and the polygons simply move to a new place, change color or otherwise alter as an override. Importantly, as soon as the “animation phase” kicks in (after a species has completed its transformation), the transition durations and delays on the polygons from the previous code are overwritten to be synchronized and faster.

Below, you can see the two class sets in play: animalStates controls the movement of the Golden Poison Frog’s vocal sac, while animalStatesSecondLevel controls the sporadic changing of the eye through just one movement. This dual-layered approach to movement is seen across the set of species to create depth and disrupt visual repetition.

Species animations use a dual class set to create layered movements
Species animations use a dual class set to create layered movements.

Shimmering

One of the quickest visual effects to implement on the website was the subtle shimmering effect that happens every few seconds across the species, adding an extra splash of 3D gloss to the mix. These shimmers take advantage of the excellent masking that clip-path gives you by default: Anything contained within an element that has a CSS clip-path applied to it will be seen only within the masked area. For the shimmer, I created a full-width and -height pseudo-element that lies within each shard.

On the left side, the shimmering animation
On the left side, the shimmering animation.

.shard 
  &::before  
    content: ""; width: 100%; height: 100%; 
    background: rgba(255,255,255,0); top: 0; left: 0; 
    position: absolute;
  
  @for $i from 1 through 30 
    &:nth-child(#$i) .shard::before 
      $ad: ($i*0.05s+0.02s);
      @include animation(shimmer .8s $ad forwards);
    
  }
}
@include keyframes(shimmer) 
  0% 
    background-color: rgba(255,255,255,0);  
  
  35% 
    background-color: rgba(255,255,255,.1);
  
  100% 
    background-color: rgba(255,255,255,0);  
  
}

The shimmer is created by each pseudo-element simply fading in and out with transition delays. This sequential fade creates the nice flowing effect. Consider how bad this would look if the separated delays weren’t present. I’m using RGBa’s alpha value to change the transparency of the pseudo-elements, rather than opacity: RGBa is a lot less processor-intensive. Using opacity in my initial experiments led to huge glitches, as I’ll explain shortly.

Fallback

Clip paths are supported by all major browsers except for Internet Explorer, but one factor takes Firefox out of the equation as well. Firefox supports the technology, but only as an SVG-referenced path, meaning that alteration of the coordinate would need to be done outside of CSS. I’m sure someone with more of a developer’s brain could find a way to get this working across all browsers, but what I value in this project is, first, that it’s unabashedly experimental and, secondly, that it works across most mobile devices with good performance. The latter is absolutely key: Outside of the normal CSS media queries you would expect, getting the project to work on mobile was very much like dealing with Retina devices.

The fallback I went with for In Pieces is a simple image slideshow of the species. The idea is still there: Visually it’s very similar, but with the transition effects taken away.

Working With “Retina” And Bugs

With the technology still prefixed, it’s no surprise that you might encounter a number of problems when using CSS’ clip-path, especially when transitions are involved. First, they despise being overlapped with elements transitioning between opacity values — sometimes you’ll get visual “static” showing up, like an old television set that can’t find a signal.

The same goes for large transformations. As mentioned, I use a heavy sandwich of parent divs to translate, rotate and scale the species. Without this nesting, transforming the polygons directly created huge problems, which at one point almost ended the project prematurely.

In principle, Retina devices have no problem with clip-path, and you will probably be fine if your use of them is simple (i.e. for a few objects). But with 30 polygons, I found problems that probably relate back to the overlapping opacity issue. For example, you may notice that on non-Retina desktop screens, I have a nice vignette around the species that make the visuals appear a little more complete. Whether this used CSS gradients or an image didn’t matter — Retina screens and Safari choked unless this was taken away. So, it’s maintained as a “nice to have” for Chrome on non-Retina screens.

Performance

So much is going on within the website that it’s no surprise I had to do a lot of tinkering to maintain good performance. As noted above, Retina doesn’t play as nicely (this tends to be the case across intensely interactive content) and needed some things taken away. But I also did a lot of neat tricks with CSS to get performance running more smoothly, and they can be taken away and used again. I’ve talked about Sass’ for loops — 30 objects all being transitioned with slight delays to add depth to visual movement. But when used properly, this can also improve performance.

Turtle transition almost complete – and only a few polygons moving at one time
Turtle transition almost complete — and only a few polygons moving at one time.

Imagine that you’re moving 30 objects at the same time; you are asking a lot of the browser, and it makes sense that this would create problems. If you have a speed of 0.199 seconds and a delay of 0.2 seconds on each object, you would fix the problem by moving only one object at a time. The fact that the same amount of total movement happens doesn’t matter: If the animation is done as a chain, performance is immediately improved by 30 times. Also, note that the “.99” kills any overlap in that instance. Of course, 0.2 × 30 would mean a total of 6 seconds, which would become draining to the user. So, in my case, I went for somewhere in the middle, with the number of shapes moving at once spread out, for a good visual but better performance. This is a great trick because it’s usable for so many things (it’s used across the website for delayed transitions) but also adds so much depth to the visual.

This approach was taken a little deeper in the introduction to the website — specifically on PCs. Unfortunately, I discovered quite late that PCs seemed to be very chuggy on the very first part of the website, which concerned me immensely. I tried a lot of things, but in the end the solution was a mixture of things — one of which was to alter the amount of crossover that transitioned elements had within their timelines. On PC, transitions are made faster to prevent overlap, and that helped a lot.

I know that the debate on the performance of CSS versus JavaScript animation is hot now, and I don’t wish to come across as someone who is saying that things should be done one way; we all have our quirks. For me, however, it was notable how little work I had to do to make mobile devices perform smoothly, and I do think that they seem happy to perform CSS-based animation — it was no different working with the polygons either.

How To: Main Menu

Main menu to select any species
Main menu to select any species.

One of my favorite parts of the website is the main menu because of how it was built. I can imagine this technique probably has quite a lot of uses, and it is actually used again in the data visualization part.

The menu system looks like the height and width of the circle you see, but the entire div is actually anchored on a central parent div of no height or width. This div — positioned centrally — contains 30 separate divs for each species, and pseudo-elements within each are used extensively to give the little interactive touches upon opening and hovering. But all of that is pretty simple stuff — the part I want to delve into is how these were actually positioned. Below is a very simplified version of what’s going on:

.hover-detector 
  div 
    position: absolute;
    left: 0; top: 0; 
    margin-left: -35px; margin-top: -35px; 
    width: 70px; height: 70px;

    @for $i from 1 through 30 
      &:nth-child(#$i) 
        $r: ($i*12deg - 7deg);
        @include transform(rotate($r) translateY(-230px));
      
    }
  }
}

Say what?

Here, 30 div elements are being referred to here as div. I’m utilizing a Sass for loop to use each div’s central anchor (still the very center of the circle — each one is positioned absolutely on top of each other) to transform it from this center, depending on which child it is. Now, 12 degrees fits into 360 degrees 30 times; thus, 12 degrees is the value used to rotate each sequential div. The effect is completed by moving each div away from the center by 230 pixels.

Transformation offset and angle rotation based on Sass for loop
Transformation offset and angle rotation based on Sass for loop.

Little Touches: Data Visualization

Data visualization: polar charts
Data visualization: polar charts.

Tools such as D38 are really expanding what can be done with interactive data visualization, as we escape the constraints of squares, circles and rectangles to create tactile communication of information. But CSS polygons can be used in this way, too, very simply. In the data visualization charts in In Pieces, I use the same technique as I did for the main menu to position dates and numbers around the circular form, using a single div, while changing clip paths to sweep and move between shapes to tell a data-led story. Here’s a line of code used to generate a quick and easy polar chart, as used in the diagram above:

-webkit-clip-path: polygon(31% 4%, 66% 11%, 84% 36%, 81% 63%, 60% 74%, 43% 68%, 37% 55.5%, 42.5% 47%);

One thing you might notice in the piece is that the charts sometimes move from 8 data points to 4, 5 or 6. When doing something like this, you must maintain the same number of polygon coordinates to transition between. Much like in many other programming languages, if you have a different number of points, then CSS’ clip-path doesn’t know how to process movement, and so it simply pops the next state into place. For, say, a 6-point data chart, I just made the 2 “mute” data points have coordinates of 50% 50%, meaning that the points seamlessly zip to the center.

Little Touches: Type Scratchiness

Throughout the project, major headers rustle and agitate with life via a looping scratchiness within the type itself. This is done with another little fairly new CSS trick that I’ve kept my eye on for some time: masking imagery within text.

Scratchy typography animation
Scratchy typography animation.

Targeting only WebKit browsers, the following code is used to achieve the effect:

.textured-type, .animal-nav-content h2 
  background: 
  url('../img/textured-ui/repeat-white.png') center center repeat;
  background-size: 80px 60px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scratchy .253s linear forwards infinite;


keyframes scratchy 
  0%  background-position: 0 0; 
  25%  background-position: 0 0; 
  26%  background-position: 20px -20px; 
  50%  background-position: 20px -20px; 
  51%  background-position: 40px -40px; 
  75%  background-position: 40px -40px; 
  76%  background-position: 60px -60px; 
  99%  background-position: 60px -60px; 
  100%  background-position: 0 0; 
}

It essentially mixes the basic CSS text-masking technique now available to use in WebKit browsers with a CSS animation that simply moves the background image between a set of different places with quick-spurt movements, resulting in the scratchy effect. Simples!

Little Touches: Ambiguous Iconography And Tinkering With The Mental Journey

Iconography used in the information centerpiece
Iconography used in the information centerpiece.

One piece of feedback I got several times relates to the user interface’s readability — specifically, the icons, especially those linking to the desktop wallpaper and data visualizations. It was a rare case of being pleased by negative feedback because it was actually exactly what I wanted. Essentially, I believe that if you have an experience like this one (I’m definitely not speaking of corporate websites, product-selling websites, etc.), spelling everything out spoils a lot of the user’s journey of discovery. You could probably guess that the icon on the right indicates desktop wallpaper or “imagery,” for instance, but it’s certainly not clear — however, this is completely intentional. Users who click the icon get a surprise when they open the window, another layer of content. Would people have clicked if they already knew what it is, and thus would people ever know that these desktop wallpapers are just a click away? I think that cleverly tinkering with the way a user mentally explores a website is just as important as creating a completely clear path for them.

The same could even be said of the most important call to action on the entire website — “What’s the threat?” The button jumps out with a subtle animation to engage the user, but the terminology doesn’t really explain a thing about what’s to come — the “smash moment.” Psychologically changing how a user is presented with information alters how they read it, in a state of surprise and intrigue.

Final Thought

The reaction to In Pieces totally blew me away. We could have endless discussion about whether a WebKit-only website is suitable for client projects (and it’s a worthy argument to have) but actual hit numbers and public response has to take on importance. I think that CSS polygons have great potential for future projects, and I hope to see the technology used in crazier, more creative ways than what I have achieved.

I’ve had many moments while traveling of trying to get to the bottom of why the project worked out so well. The message is important, and I think it shows how a side project with a genuinely good cause can reach more people, because the general public is more intelligent than we in the industry sometimes give it credit for. I think a project with no commercial intention can be appreciated by a user in 2015, and I find that interesting when taking on client work.

I think it’s an interesting project for designer-developers to look at because there’s something about one or two people being in control of the whole thing that results in complete communication harmony. From concept to design to development, all of the parts speak directly to one another, and by the end they are holding hands in a circle rather than being separate things that are nice in their own right. The polygon style wouldn’t work visually without the technology behind it, and the technology wouldn’t be saying anything without the cause or message, and this concept would be nothing without the “pieces” element that the polygon style brings. I’ve mentioned to many friends that I don’t believe that the design, idea, development, sound or overall journey offered by the project is the best, each taken on its individual merit. But because they all communicate in unity, they become bigger than the sum of their parts. And I think that this potential provides a great opportunity for hybrid designer-developers.

Please note that Bryan’s code could have been written in different ways. The point of the article is to highlight the approach and the result of an experiment. – Ed.

(ds, il, al, ml)

Footnotes

  1. 1 http://species-in-pieces.com
  2. 2 http://www.html5rocks.com/en/tutorials/masking/adobe/
  3. 3 https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=polygon%20animals
  4. 4 http://cssplant.com/clip-path-generator
  5. 5 http://bennettfeely.com/clippy/
  6. 6 https://itunes.apple.com/us/app/sip/id507257563?mt=12
  7. 7 https://itunes.apple.com/us/app/sip/id507257563?mt=12
  8. 8 http://d3js.org/

The post The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths appeared first on Smashing Magazine.

Visit link: 

The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths

Thumbnail

How a Simple Shift in Focus Can Improve Your Conversions Many Times Over

Scores of articles have been written about improving conversions—articles that discuss seemingly mundane details like button size, headline length, brand color and even typography.

Yet even after testing these suggestions, you may not see a lift in conversions. In fact, tables may turn and you could actually see lower conversion rates. (That’s why you need to know a couple of things before a/b testing.)

However, today I am going to show you, along with proofs and examples, something that’s proven to increase conversions every single time.

Can’t wait? Let’s jump in.


How a Simple Shift in Focus Can Improve Your Conversions Many Times Over
Click To Tweet


Excellent customer support creates a positive vibe

Let me first share this story that I found on Quora.

This was the question that was posed.

“Shouldn’t Indians buy products from Flipkart or Snapdeal only to help it beat Amazon in India, at least?”

And the answer.

“I’m sorry but I disagree. My father recently wrote a book on Hijackings of Indian Airlines aircraft called IA’s Terror Trail, and self-published it.

As a self-claimed Digital Marketer, I went on to create a website for it and make it live on different social media. I did that, and then proceeded to Flipkart and asked them if they could upload my book there. They replied saying that they do not accept first time authors, and that we should contact an independent publisher. Those publishers demanded 50% of our proceeds, which obviously wasn’t feasible.

I then approached Amazon, who went step-by-step with me on how to upload it. They use our book as a personalized ad where relevant to the audience, and provide feedback as and when needed.

Flipkart, despite being supposedly an Indian company, refused to help out a newbie like us, while an e-commerce giant helped when it mattered.” (Source)

It seems, at least in this case, that good customer service beats patriotism. This answer went on to receive over 7,500 upvotes on Quora. Although, Amazon is a giant and doesn’t need this kind of publicity, imagine what it could do for a small and upcoming company.

It isn’t an isolated incident. According to Oracle’s Customer Experience Report,

  • 86 percent of consumers will pay more for a better customer experience.
  • 89 percent of consumers began doing business with a competitor following a poor customer experience.
  • 79 percent of consumers who shared complaints about poor customer experience online had their complaints ignored.
  • 50 percent of consumers give a brand only one week to respond to a question before they stop doing business with them.

86 percent is a big number, especially since those customers seem to value customer service infinitely more than price or other factors.

To put it another way,

customer support quote

Now let’s go over some ways by which we can deliver excellent customer service with practical examples of the same.

World’s second-largest home improvement retailer triples conversions with a FAQ section

The trouble with being the second-largest home improvement retailer is that you get lots of customer support questions. LOTS.

Two hundred employees handled over 130,000 inquiries every month for Build.com, but out of all those calls and chats, questions submitted through the website’s contact form received the lowest priority.

So much so that replies to those questions took 9 hours. Needless to say, customers left miffed.

Upon reviewing this issue, Build.com discovered that customer support personnel were answering the same questions again and again. There was a need for a centralized system that customers could make use of.

That’s when Build.com used NanoRep’s product knowledgebase software to install product FAQ pages on their product pages.

Along with FAQs, question boxes were also placed so that the customers could search for queries.

build faq search box

Image Source

As a result of these changes in answering customer queries, the company saw significant improvements over the following months:

  • Conversion rates more than tripled as a result of the improved customer experience
  • 40% increase in the number of questions asked by potential customers
  • 70% fewer questions answered by humans
  • Agents personally answered an average of six times fewer questions each day
  • Product FAQ was managed automatically, with minimal human involvement
  • Improved business intelligence and analytics

Excellent support gives 156% lift in conversions for Proposify

As part of their commitment to become a customer-friendly company, Proposify invested in Groove’s help desk software. Customer support widgets, examples of which are shown below, were added all over the site.

proposify-widget customer support

Image Source

Not only did their trial-to-paid conversion rate improve to 9.85%, they also found that users who clicked on Proposify’s help widgets converted at 25.23%.

2-times-higher-conversions with help widget customer support

All of this implies an important fact: Simply by making customer support more accessible, that they doubled their conversions.

Customer support through Livechat puts conversions on steroids

Livechat is the proverbial cherry on top when it comes to customer support.

How?

A survey conducted by Forrester Research reports that,

“Many online consumers want help from a live person while they are shopping online; in fact, 44% of online consumers say that having questions answered by a live person while in the middle of an online purchase is one of the most important features a website can offer.”

Also according to the Oracle Survey I quoted earlier in the article, 73% of customers want friendly support executives while only 33% care about brand reputation.

customer support through chat

But surveys alone aren’t enough proof. So I decided to reach out to customer support personnel at PowerUpHosting and MaxCDN, since I am a customer of both these services. Interestingly, in both cases I purchased the services because they had LiveChat and I had tons of questions.

However, when I asked them to provide me stats regarding how (or if) LiveChat improved their conversions, it took a lot of convincing.

Persistence finally paid off.

Your chat transcript - Gmail - customer support

Finally Udit Goenka from PowerUpHosting got in touch with me. Earlier on they used only Skype to provide customer support but it took a lot of time and most customers weren’t happy using Skype. They wanted something spot-on and finally decided to implement LiveChat.

As with everything, they also split tested to see if their results were pure luck or if LiveChat, in fact, made a difference. Here’s the mail excerpt:

“On an average we talk to around 140-150 people on website’s LiveChat every single day (Until March 2015). A whopping 30% who contact us through LiveChat purchase instantly. We capture rest of the 70% as potential leads out of which around 57% sign up eventually.

The above Sales purely come from LiveChat Sales (There are customers who comes to our website and purchase right away). Another pattern we have seen is, most of the customers prefer to talk to someone before making the purchase. We have seen an average retention percentage of 82% of those customers who had a talk over chat versus 37% of people who purchased directly.

We decided to do some split testing then.

We decided to turn off our LiveChat for a period of 7 days, and saw a huge sales drop of around 55% on a weekly basis, this number was nasty and massive, so we decided to have chat on 24/7.

For $35/month worth of investment per Sales Agent, this is one of the best investments you can ever make in your business. Once you start getting traffic, I would recommend anyone having a website to embed a livechat right away.”

Didn’t read it fully? No problem, here’s TL;DR version:

  • 30% of users who contact through Livechat make a purchase instantly.
  • Over 82% of the users who contact through LiveChat have a lower attrition rate.
  • Plus it costs just $35/mo per LiveChat representative.

According to Kris from MaxCDN

“We received about a 34% conversion improvement due to live chat. We have 24/7 live chat coverage as well. 24-hour coverage makes a big difference”

Concluding thoughts

Improving customer support and answering customer queries using LiveChat is one of the best things that you can do TODAY to improve your conversions. User studies, live stats, everything points toward this.

When are you planning to add one?

Read other Crazy Egg articles by George Mathew.

The post How a Simple Shift in Focus Can Improve Your Conversions Many Times Over appeared first on The Daily Egg.

Source:  

How a Simple Shift in Focus Can Improve Your Conversions Many Times Over