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.