ROLE
TIMELINE
TEAM
1 Chief Engineer
4 Engineers
TOOL
Figma
TL;DR
The Centre for Perceptual and Interactive Intelligence is a company in Hong Kong focused on building AI solutions for enterprises. As the sole designer, I led the end-to-end design and shipped ChatDoc Master, a no-code B2B AI chatbot builder for business teams to create secure, customizable chatbots from their own content.
See the launched product here: https://chat.cpii.ai
PROBLEM
Fragmented knowledge slows teams down.
Customer support, HR, legal, and media teams all need quick, reliable answers. However, they’re drowned in documents. According to a McKinsey report, employees spend 25% of their time searching for information on average.
Why not use ChatGPT?
Security
ChatGPT sends user input to third-party servers.
Source Control
No way to define where the AI pulls its answers from.
Maintainability
AI responses don't reflect updates in original sources.
RESEARCH INSIGHTS
Teams need control, consistency, and confidence in their AI chatbots.
01
Business users want to consolidate multiple sources.
02
Keeping chatbot knowledge up-to-date is essential.
03
Teams want chatbots to reflect their context and brand tone.
04
Accuracy is critical in high-stakes fields like law or news.
OPPORTUNITY
What if businesses could build AI chatbots trained on their own knowledge base, securely and without coding?
DESIGN DECISIONS & ITERATIONS
I. How might we help users create a chatbot easily?
Side-By-Side Panel
Visually heavy
Difficult to scale with additional fields
Tabbed Interface
Clean and focused
Scales better as we add new upload types
II. How might we ensure the chatbot’s knowledge is always up-to-date?
III. How might we support both non-technical and technical users?
IV. How might we help users verify accuracy of the chatbot's responses?
SOLUTION
ChatDoc Master: Build customizable chatbots without writing any code
All your sources in one place
I designed a tabbed interface that allows users to upload multiple data sources within a single workflow, addressing business users’ needs to work with varied and multiple files.
Keep chatbot knowledge up-to-date
Users can update chatbots by adding or removing sources, ensuring content stays accurate over time without needing to rebuild the bot from scratch.
Give chatbots their own personality
I introduced customization options to give users the autonomy to tailor chatbots to their specific business needs.
Build trust through transparency
Clickable citations let users trace each answer back to its original source with one click, reinforcing trust and aligning with user expectations for accountable AI.
HANDOFF
Building a design system for consistency and scalability
I created a design system to help engineers build new features quickly while maintaining visual consistency as the product scaled.
Accounting for edge cases: notifications & system feedback
To address edge cases like upload failures and sync errors, I designed toast notifications to give users clear, actionable feedback. I also worked with engineers to create a system-wide notification framework, and took the lead in writing UX copy and documentation to keep messaging consistent.
IMPACT
Product Traction
As of July 2024, the product supported 300+ chatbots.
Usability Impact
After launching the customization feature, System Usability Scale score increased by 8.5 points.
Ease of Onboarding
As of July 2024, 67% of users created their first chatbot within 15 minutes.
TAKEAWAYS
Simplify the Complex
Understanding the technical concepts myself enabled me to translate complex AI concepts into clear interfaces for users with varying levels of expertise.
Overcommunicate
I constantly communicated with engineers to validate technical feasibility. This reduced ambiguity, surfaced constraints sooner, and made handoff and QA much smoother.
Constraints = Opportunities
Working in a startup meant navigating tight timelines and constraints. This pushed me to find creative solutions that balanced usability, feasibility, and business needs.
A big thank you to my team :)
