Somehting from nothing

Zebra Pen sought a creative approach to delegate requests to their customer service. They aimed to utilize their mascot Zen as the chatbot's persona in an innovative and entertaining manner. The objective was to create a cutting-edge chatbot that facilitates product research and purchases without hindering the consumer's buying experience.

Strategic Hurdles

The main challenge was integrating Zen as the face of the Zebra Chatbot. We explored different options, like a static image or a pre-animated 3D character, but they didn't meet our innovation criteria. The chosen solution was to create a dynamically procedurally animated ThreeJS Zen character, despite it being a significant task.

Other 3D Chatbots

Advancing the research I found other chatbots like Kuki depicted here on the left. She is a real-time procedurally animated 3D chatbot that syncs the lips with speech. This was the goal that I wanted to achieve. A realistic 3D chatbot but now I had to connect the 3D character and the voice with the an AI backend.

Designing For AI

The ZenChat backend was crucial, mirroring the significance of the frontend. Since our project was groundbreaking, we sought a platform utilizing AI for decision-making. This allowed the team to input product information and basic keywords, letting AI generate accurate responses. For instance, if you inquire about the F-701 pen, Zen comprehends subsequent questions about its ink or barrel, maintaining context. We chose BotLibre for its flexibility and compatibility with ChatGPT 3.0, available at that time. Below are examples of the editor which offers the ability to set related topics, keywords and more.

Shaping the ZenChat

Executing this project was significant, requiring collaboration among 3D animators, ThreeJS developers, and internal designers and developers. The integration into the recently launched website demanded careful consideration—standing out without cluttering the pages. After discussions with the client, we settled on an icon to open a window on the page.

Chatbot version 1

In this chatbot version, the window opens by default for consumer convenience, making it inviting. However, this approach isn't practical for all website pages.

Chatbot version 2

Opting for an icon with a popup window is a practical solution. It can be applied to all Shopify site pages and designed to grab attention.

The rollout

The beta version, after an 18-month development period, had a soft launch in January 2023. I leveraging a background image from a previously created 3D Zebra Pen video which kept the continuity between the video and the chat, Amazon Polly handled the voice, and supplied lip-sync code for the animation. Zen has a British accent, prompting the need to construct the phenom language code for accurate pronunciation, bridging American slang with the British accent. Combining the Zen 3D character, AI backend, Amazon Polly, and HTML development resulted in a unique stunning showcase of technology.

Note: This is a screen capture and streamed video. For the true experience, visit ZebraPen.com and click "Ask Zen." permission was provided by Zebra Pen.

Note: This is a screen capture and streamed video. For the true experience, visit ZebraPen.com and click "Ask Zen." permission was provided by Zebra Pen

Innovative Solution

The ultimate solution was a revolutionary 3D animated chatbot, successfully meeting the client's objective of redirecting customer service requests. This innovative technology, featuring Zebra Pen's mascot Zen, integrates a fully procedurally animated character with an AI-driven backend. Amazon Polly's speech technology ensures realistic lip syncing, portraying an animated Zen moving randomly and in real-time, achieving nearly 50 frames per second without pre-animated motions. Version 2 of the chatbot is to connect ZenChat with ChatGPT which will expand Zen's capabilities and pull data directly from the Zebra Pen website.

ZenChat