How might we integrate LUI + GUI to design a conversational AI experience, making your AI agent a playful companion that understands and supports your daily life?
Context: Product design freelance work for an AI startup in China, designing the product from 0 to 1 individually. Team: 3 Engineers + 1 Designer ( me 🙌 )
Impact: The product has launched, gained 20,000+ users, received 700+ reviews, and maintained an average rating of 5 out of 5 within four months. 🥳
This product brings an AI-powered companion to life—a cute cat that becomes part of your daily routine. More than just a virtual pet, this AI cat offers emotional companionship, chats with you, manages your to-do list, reminds you of tasks, and writes a diary about your day. Through these interactions, it fosters a meaningful bond between users and their AI companion, building trust and emotional connection over time.
The core interface of the product is a chat-based UI, enabling users to interact with the AI agent naturally and intuitively. However, a traditional GUI remains essential for providing precise control—allowing users to refine LLM-generated results, manage AI outputs, and review memory and history. The challenge lies in designing a seamless integration of LUI and GUI, crafting a user journey that balances fluid conversation with structured interaction for an optimal experience.
Core Functions Intro
Chat with Your Cat: Enjoy heartfelt conversations with your AI companion, offering emotional support whenever you need it.
AI-Empowered To-Do Assistant: Let AI recognize your intentions, manage your to-dos, and set reminders to keep your day on track.
Augmented-Reality Experience: Make virtual character interacting with the real world.
Daily Diary: Capture your thoughts and memories by writing a diary, turning everyday moments into cherished keepsakes.
Surprise Gifts: Receive spontaneous little gifts from your AI cat, tailored to your mood and daily activities.
Design Highlight
AI Interaction Flow Design – To-Do Assistant through LLM Natural Conversations One of the core functions of this product is assisting users in setting up to-dos and reminders naturally while chatting with the AI. By leveraging intent recognition, the AI detects tasks and automatically schedules reminders within the conversation. However, AI is not always accurate, making it crucial to design an interaction flow that allows users to manually correct AI-generated results and proactively trigger intent recognition when needed. How might we create a conversational AI experience that seamlessly integrates automation and user intervention, ensuring the usability?
Below is an example of how users can set up to-dos through natural language while interacting with the AI. By integrating traditional GUI interactions, the design ensures a seamless experience, allowing users to easily manage tasks whether the AI’s recognition is accurate or not.
Augmented-Reality Experience - make virtual character interacting with the real world. The mixed reality feature integrates with the dining scenario, allowing users to "eat together" with the cat by taking photos. Leveraging AI image recognition and generation technology, the cat reacts differently to various foods in real time and returns a photo of itself eating, creating an engaging and immersive interaction between the virtual character and reality.
A week before the feature launch, I created a prototype and a storytelling video and uploaded them to social media to test user understanding and acceptance. The video received 22K likes, and DAU quadrupled within three days.
Motion+Micro Interaction Design to Enhance the User Experience This is a product designed to create an emotional and gamified experience. A user-friendly interaction flow alone isn’t enough—the visual design is key to attracting users and enhancing the emotional experience. Although I’m not a professional visual or motion designer, I pushed my limits, refining micro-interactions and motion details to shape a more delightful experience.
Below are several examples where I craft the details of motion and micro-interaction design in the product.
This is only a brief introduction to the product and the design thinking behind it. There’s much more happening behind the scenes and exciting things on the way! Feel free to reach out if you’d like to learn more or experience the product firsthand.