Creating Luna - An Animated AI Chatbot

Conversational AI often feels robotic, sycophantic, and falliable, limiting users’ trust and engagement.

Design an AI interaction that feels more sincere and empathetic.

This project required learning several unfamiliar disciplines simultaneously, including conversational UX, web animation, and integrating large language models.

Additionally, due to the rapidly evolving AI ecosystem, I was forced to change my selected model several times throughout development.

I drew inspiration from a project prompt by Professor Chris Hamamoto in my UI Design Programming course at Seoul National University: design a "Personal Utility" based on your own interests, experiences, or goals.

At the time, large language models were rapidly becoming mainstream, and I was fascinated by how quickly people began treating them like conversational companions.

As someone interested in both psychology and HCI, I wanted to explore whether thoughtful interaction design could make those conversations feel more genuine and emotionally engaging. This curiosity became the foundation for Luna.

This personal project was intentionally open-ended, with the only requirement being to deliver a working product and live demo by the end of my internship.

I independently defined the product vision, interaction patterns, visual design, frontend implementation, animations, and AI integration from concept to launch.

I grounded Luna's conversations in the principles of cognitive behavioral therapy (CBT). Rather than offering advice or solving problems, CBT encourages people to recognize thoughts, emotions, and cognitive patterns through guided reflection.

This became Luna's conversational philosophy: validate emotions, ask thoughtful follow-up questions, and encourage self-reflection rather than prescribe solutions.

To reinforce this role, I designed Luna to avoid giving medical advice or definitive answers, instead focusing on active listening, validation, and reflective questioning.

I explored several layouts before settling on a split-screen interface: an animated companion on the left and a familiar messaging UI on the right.

This lets users read responses while observing Luna's nonverbal reactions, making conversations feel more natural and human.

My initial concept centered around a translucent floating orb. While visually appealing, its abstract form made nuanced emotions difficult to communicate.

I gradually introduced facial features while keeping the design simple and non-human, allowing Luna to express empathy without entering the uncanny valley.

I explored three distinct visual directions before combining the strongest elements of each into the final identity.

I evaluated several LLMs by comparing their conversational tone, emotional understanding, and response consistency using the same system prompts.

I ultimately chose Llama 3 because it generated the most natural dialogue and was the most reliable at recognizing and responding to users' emotional states.

Since Luna's personality relied on nonverbal communication, I evaluated animation tools that supported expressive, state-driven motion on the web.

I selected Rive for its state machine architecture, which enabled smooth transitions between emotional expressions based on conversation state.

I created Luna's animations in Rive, learning keyframe-based animation workflows and motion principles through community examples and experimentation.

To streamline iteration, I developed a workflow similar to video editing software: designing individual expressions and transitions as reusable animation states.

To make Luna responsive, I connected animation states to emotional data generated from the AI response.

The state machine used input values to control overlapping emotional states, allowing Luna to transition between expressions based on conversation context. I iteratively refined these transitions using principles like timing, easing, and anticipation to create smoother, more natural movement.

Each AI response was analyzed for emotional context, which was then passed to Luna's animation system to determine the appropriate expression.

I embedded Rive animations into the web app and connected the avatar's state machine to the chatbot backend using vanilla JavaScript.

• Shadowed client projects, gaining exposure to agency workflows, design processes, and real-world product development.
• Contributed tovisual design and frontend implementation for Spinet, a two-week team project creating a spinning wheel name picker.
• Completed micro-classes on React, SQL, business models, and advanced UI techniques.
• Strengthened my frontend and full-stack development skills through mentorship from experienced developers.

My internship at Viget gave me the opportunity to explore UI development through both independent experimentation and collaborative product work. Projects like Luna and Spinet, combined with exposure to client projects, helped me grow as a developer who bridges design, interaction, and implementation.