LiveChat Tour

What is LiveChat?

LiveChat is a complete customer service platform with online chat and web analytics capabilities. It’s designed specifically to provide amazing customer service and fuel sales. This all-in-one customer service platform is used by over 36,000 customers in 150 countries. It stands out with its simple and intuitive design, making it easy for both support agents and customers to use it right off the bat.

Research

Initially, I conducted market research and observed that many product demos tend to overwhelm potential customers with excessive features that may be difficult to comprehend, unnecessarily prolonged, and presented in an unappealing way.

Furthermore, we also conducted a study of client feedback on G2 and GetApp platforms. Most responses indicated that our clients value LiveChat’s accessibility, straightforward implementation, and visually appealing dashboard.

Ideate

The most satisfying aspect was that our previous video was effective, so we opted to maintain its structure, enhance the visuals, and refine the presentation of our product. We determined that a new, slightly shorter animation would improve the pacing, and we chose to feature a universal use case to reach the broadest possible audience.

Fancy cursor on a stick

Storytelling is an effective way to ensure that content is memorable. When content is presented as a narrative, it resonates with people and is more likely to be shared. This is why it’s important to have a main character that stands out and captures the viewer’s attention. In our case, we used a teacher’s pointer as a cursor to showcase various features of the LiveChat App. The pointer acts as a guide to help viewers navigate through the app’s functions, like a red thread that leads them through a maze.

LiveChat Tour – Flow

I created a flow using Miro to illustrate what application features will be presented in the video.

File Export

To create animations, I have to import designs into After Effects. To transfer vector elements, I used two methods. The first was an AEUX plugin that moves shapes directly from Figma. In contrast, the second involved exporting SVG files and transferring them through the Overlord plugin in Adobe Illustrator. Each approach has pros and cons, so I don’t stick to just one. For raster elements and photos, I exported them as high-resolution PNGs to have greater flexibility when making close-up shots. By using these methods, I was able to bring the designs to life and create engaging animations for the project.

Animatic

I created an animatic as a starting point to begin the animation phase, which helped me establish the animation’s timing and pacing. I then divided the shots into separate compositions to maintain a clean and organized workspace, providing a clear view of the project’s overall structure. This approach allowed me to work more efficiently and effectively, ensuring that the animation was structured and coherent.

Draw Attention

I aimed to create a sense of depth in this animation, so I avoided a completely flat design for the website and LiveChat application. By extruding certain graphics and utilizing Depth of Field, I was able to draw attention to crucial story elements and maximize their focus.

Parallax Effect

To improve the visual appeal and interactivity of the website, I implemented the parallax effect, which adds a sense of depth and movement to the page. As the user scrolls down, different website components are revealed through lazy loading, which delays the loading of components until they are needed. By incorporating these design features, the scene is able to provide a more engaging and dynamic user experience, keeping viewers interested in the content and ultimately increasing audience retention.

Automation

For this scene, I used my own preset Circular Placement. You can learn more about it in the Tools section.

Custom Color

I understand how branding is important to build relationships with your audience. Using LiveChat, you can modify all aspects of the widget to align with your desired appearance and vibe. We wanted to show a new feature that enables you to customize the widget directly on your website.

Color Picker

It’s not a simple task to retrieve the hexadecimal value of a color in After Effects. I had to invent a workaround by breaking down the RGB channels into individual values. From there, I linked these channels to a text layer, which resulted in a functional color picker that updates in real-time.

You can check the After Effects Expression below.

// Copyright © Bartlomiej Otlowski
var myString = thisLayer.name; 
var split = myString.split(" - ");
var myColor = split[0];
var theColor = thisComp.layer(myColor).effect("Color Control")("Color");

var r = Math.round(theColor[0]*255).toString(16);
if (r.length < 2) r = "0" + r;
var g = Math.round(theColor[1]*255).toString(16);
if (g.length < 2) g = "0" + g;
var b = Math.round(theColor[2]*255).toString(16);
if (b.length < 2) b = "0" + b;
"#" + r+g+b;

LiveChat Tour Explainer

Product demos often overwhelm customers with excessive features presented in an unappealing way. We improved the previous video, maintaining its structure, enhancing visuals, and refining the presentation. These efforts communicate LiveChat’s value effectively. We are extremely satisfied with the positive results achieved through the redesign of the LiveChat Tour animation. It has exceeded our expectations and delivered exceptional outcomes.

CREDITS