AI Talker
AI-based chatbot service
AI Talker is an AI-based chatbot service that leverages large language models (LLMs) and information retrieval-augmented generation (RAG) to enable users to perform various tasks through voice and chat.The UI has been redesigned to provide a more intuitive and simplified experience on mobile devices, allowing users to easily input voice and text commands and receive responses.We migrated to Next.js to improve SSR and SEO, enhancing the overall user experience, and optimized the design structure for better mobile usability.
TIMELINE
2024.10 ~ 2024.12
ROLE
UI Developer
SCOPE
· Design : 100%
· Development : 70%
Frontend
Next.js, React, TypeScript, Shadcn/UI, Zustand, TailwindCSS, TanStack Query
Collaboration
Figma, Confluence, Jira, Git
How can we fix voice UIs that confuse users by hiding responses?
After voice recognition, the response appeared behind the modal, making it seem like the system did not respond.This led to user dissatisfaction as they perceived the voice command as unsuccessful.The chat interface became cluttered and space-constrained during response generation, negatively impacting the mobile user experience.
Enhancing User Experience through Voice Response Visualization
Despite the voice command function working correctly, a UX issue arose as the system failed to visually convey that it was processing the user's input, causing confusion. To address this, we introduced an animated listening indicator immediately after voice recognition to provide instant visual feedback. This enhancement reassured users that their command was being processed, significantly improving interaction intuitiveness.
Optimized Chat Interface
Enhanced Mobile Usability
Simplified the chat interface and optimized space utilization to prevent clutter during response generation. The mobile UI was redesigned to be intuitive and streamlined, reducing user confusion.
Improved Voice Response Feedback
Resolved the Issue of Responses Appearing Behind the Modal
Addressed the issue where voice responses appeared behind the modal, allowing users to immediately see the response and avoid confusion.
Maximized Space Utilization
Dynamic Keyword Suggestions and Scroll Control
Enhanced space utilization by displaying keyword suggestions only when the input field contains text, making the interface more spacious. Additionally, a scroll-up button appears when at the bottom of the chat, allowing users to view longer conversations efficiently.
Reduced user feedback on voice response issues through improved visibility
Improved mobile usability, leading to higher customer satisfaction
Lessons Learned from Addressing Voice Recognition and UI Visibility Issues
Through the AI Talker project, I learned the importance of visual feedback in enhancing user experience. The challenge was that voice responses appeared behind the modal, making the service seem unresponsive. I addressed this by analyzing the UI structure and adjusting the component hierarchy to ensure immediate visual feedback. Implementing Next.js improved performance through server-side rendering, and mobile-first design principles helped optimize screen space and readability. This project enhanced my skills in creating intuitive, responsive interfaces using Next.js, React, and TailwindCSS.