Company
Centre for Perceptual and Interactive Intelligence
Role
UI/UX designer
Timeline
Oct 2023 - July 2024
Platform
Desktop web
OVERVIEW
CPII ChatDoc Master started as an internal research tool for generating chatbots by parsing websites and PDFs. While functional, it was far from user-friendly, with a basic interface and limited capabilities. As the UI/UX designer, I transformed it into a no-code B2B AI tool, shipping a product that empowers businesses to create customized chatbots seamlessly integrated into their websites.
MY IMPACT
PROBLEM
When I took over the project, CPII ChatDoc Master was at a turning point: what started as an internal research tool needed to evolve into a full-fledged B2B solution. However, two main challenges emerged:
With the product’s potential in mind, I knew it needed more than just new features. I had to completely rethink its design to address these problems and make it ready for business adoption.
RESEARCH
To understand what businesses truly needed and identify how CPII ChatDoc Master could differentiate itself in a competitive market, I employed a three-pronged research approach—user interviews, usability testing, and competitive analysis.
I started by interviewing seven users to gather insights about their experience with the existing design.
This enabled me to learn what was not working and, more importantly, what users felt was missing.
Next, I conducted usability tests with the same seven users. I observed their interactions with the tool to identify issues in the existing design.
Lastly, I analyzed five competitors to identify market gaps and opportunities.
OPPORTUNITY
The research and analysis led us to our core challenge:
IDEATION
Having prioritized essential features, I mapped out a detailed user flow diagram to:
Identify and eliminate existing pain points in the chatbot creation process
Integrate new features seamlessly into the user journey
Optimize the workflow for multiple chatbot management
Rather than implementing a complete overhaul at once, I chose to redesign incrementally. This allowed me to iterate based on feedback while enabling our development team to test backend functionality without overcommitting to frontend changes. More importantly, it ensured a smooth transition for users, minimizing disruption while steadily enhancing the product's capabilities. I made three iterations:
In my first iteration, I added a tabbed interface for uploading different source types within the original design, enabling users to manage multiple data sources efficiently.
In my final iteration, I turned the chatbot sidebar to dark blue to create visual contrast with the rest of the interface. The sidebar was also made collapsible to give users control over their workspace layout.
SOLUTION
To address the challenges identified, I redesigned CPII ChatDoc Master with the aim to enhance usability, scalability, and customization. Below, I will highlight five key features of the final design and how they solved user problems.
I designed a tabbed interface with distinct tabs for different data source types. Users can switch between tabs to upload one or more types of data sources, making navigation between data sources more intuitive. The tab design also allows for future data source additions without cluttering the interface, ensuring the system remains scalable as needs evolve.
I introduced a flexible customization system that allows users to configure their chatbots. This ensures chatbots not only match each brand's unique voice but also drive higher user engagement.
Before Generation: Fine-tune the functionality of chatbots
After Generation: Customize the messaging elements
As trust is particularly essential in AI interactions, I designed clickable citations which link directly to the pages where the chatbot’s response originates. Users can verify the accuracy of responses with a single click and easily access source material for additional context, building trust in the system.
I designed a settings menu for each chatbot where users can update data sources by deleting outdated ones or adding new ones. This flexibility allows users to maintain accurate and up-to-date responses without having to recreate their chatbots, ensuring long-term reliability of the system.
I introduced a collapsible sidebar on the left of the interface, which displays a list of all created chatbots. This allows users to quickly locate and switch between chatbots, while the collapsible feature maintains a clean interface by letting users focus on their current task without losing easy access to their chatbot collection.
IMPACT
To evaluate the effectiveness of the redesign, I conducted usability testing with 14 users—half testing the old design and half testing the new design. The testing had three main objectives:
To directly compare user performance
To evaluate whether the redesign resolved pain points from the old design
To validate new features
TAKEAWAYS
Working full-time in the fast-paced, ever-changing environment of a startup challenged me to grow not only as a designer, but also as a communicator and problem-solver. Here are my key learnings from this project:
Designing AI tools required making complex technology accessible. Taking the time to understand the technical concepts myself enabled me to present information in user-friendly language that caters to users with varying levels of expertise.
Throughout the design lifecycle, I consistently collaborated with the development team to validate technical feasibility. I also ensured design-to-development fidelity by conducting quality assurance.
In a startup environment, constraints became opportunities for creativity. This experience taught me to find creative solutions while balancing user needs, technical feasibility, and business realities.
A big thank you to my team :)
