AI-Powered Support Chat with Visual Tutorials
Design project lead, product/UX design, user research, Conversational AI design, AI-driven Product modernization, 2023-2025
As AI technology matured, AI-driven product modernization became a crucial business need. The first exploration to transform the company’s core legacy product – step-by-step device support tutorials – is to combine it with conversational AI to build an AI-powered support chat.
Role: Design project lead, Designer, Researcher
Note: Due to confidentiality purposes, limited and altered interfaces are shown.
Project Context
One of the company’s core legacy products was the step-by-step tutorials for device support. These tutorials relied on traditional navigation and static visual layouts. While the content was strong, it was difficult to discover and lacked flexibility for individual customer needs. This project redefined the support experience by shifting from static documentation to a conversational, adaptive model.
Before Starting - Defining the Core Value of the AI Design
In the wave of AI advancements, it can be tempting to rush into AI-driven solutions. However, during project scoping, it is important to first define the user value AI would create, and to assess if AI is the most logical approach. For this project, AI was used to increase content findability, reduce cognitive workload, and personalize device support content, while driving greater engagement with existing content.
Modernizing the Product Without Losing Its Core Strengths
The AI-powered support chat builds on the strengths of the original product rather than replacing them. By seamlessly integrating existing step-by-step tutorials into the conversational experience, the chat overcomes the limitations of text-only interactions by providing visual guidance when needed, while also increasing engagement with the original tutorial content.
UX/UI Design and Testing
The experience begins with a clear entry point on the device support homepage, replacing the traditional search bar, with prompt suggestions to guide first interactions. The conversational model quickly narrows down the user’s situation and presents the most relevant tutorial. When no internal content is available, the chat falls back to generating answers from public data. Tutorials can be viewed directly within the chat or expanded for improved visual accessibility. Multiple layout variations were tested to identify the most intuitive and helpful experience.
Conversation Design and Testing
With a full set of existing content and tutorials, the conversation design focuses on matching potential user prompts with relevant content. The tutorials are tagged with intent labels and possible prompts. When multiple tutorials are relevant to the same user problem or situation, a set of follow-up questions are designed for the conversation model to route the user to the correct tutorial. The conversation model was tested with sets of potential user questions asked in different fashion, logic, and phrasing. The testing results were used to improve on model iteration.
Setting the Foundation for Future - AI Guidelines & Components
As the product’s first exploration into AI, this project was designed with future iterations in mind. A set of AI guidelines and reusable components was established to maintain quality, cover common scenarios and interaction patterns, and avoid gaps in the experience such as error scenarios. This foundation helps future AI projects start faster and evolve more smoothly.
