ChatDoc Master
Admin Panel
Enabling secure and scalable B2B user and chatbot management
IMPACT
0
+
Organizations managed via new admin panel
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Enhanced security via token expiration and revocation controls
ChatDoc Master
No-code AI-powered chatbot builder for B2B companies
MY IMPACT
Hong Kong's largest public broadcaster (3.4M+ listeners) adopted the redesigned tool
0
+
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Added token expiration and revocation controls to enhance security
ChatDoc Master
Admin Panel
Enabling secure and scalable B2B user and chatbot management
IMPACT
0
+
Organizations managed via new admin panel
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Enhanced security via token expiration and revocation controls
ChatDoc Master Admin Panel
Enabling secure and scalable B2B user and chatbot management
IMPACT
Organizations managed via new admin panel
0
+
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Enhanced security via token expiration and revocation controls
ChatDoc Master
Admin Panel
Enabling secure and scalable B2B user and chatbot management
IMPACT
0
+
Organizations managed via new admin panel
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Enhanced security via token expiration and revocation controls
ChatDoc Master Admin Panel
Enabling secure and scalable B2B user and chatbot management
IMPACT
Organizations managed via new admin panel
0
+
0
+
Chatbots managed via new admin panel
Simplified chatbot deployment with iFrame tokens
Enhanced security via token expiration and revocation controls
ROLE
UI/UX Designer (AI Team)
UI/UX Designer
(AI Team)
UI/UX Designer
(AI Team)
TIMELINE
Mar 2024 - July 2024
Mar 2024 -
July 2024
Mar 2024 -
July 2024
TEAM
1 Chief Engineer
4 Engineers
TOOL
Figma
OVERVIEW
ChatDoc Master is a no-code, AI-powered chatbot builder. As it evolved into a business-facing product, the original admin panel which was designed for individual users, could not scale to meet enterprise needs. Internal admins faced limited visibility, flat user structures, and manual backend work for onboarding and chatbot deployment.
To address this, I worked with internal engineers who also served as admins to map a new system architecture and designed a scalable admin panel with organization-level onboarding, role-based access control, and secure chatbot deployment via iFrame tokens.
COMPANY
CPII specializes in developing NLP and speech technology applications.
OUTCOME
The new admin panel for ChatDoc Master was launched in July 2024 and is actively used by internal admins.
To protect confidentiality, all UI visuals are design prototypes created for demonstration purposes. No real user or organization data is displayed.
PROBLEM
As ChatDoc Master transitioned into a B2B product, I needed to design a new admin panel that could support managing complex business hierarchies.
As ChatDoc Master transitioned into a B2B product, I needed to design a new admin panel that could support managing complex business hierarchies.
Originally, the admin dashboard allowed only flat user management: individual accounts with no grouping, no granular roles beyond platform admins, and limited tooling for debugging or onboarding. This setup worked when user count was low and user roles simple, but as we onboarded business users, the limitations caused inefficiencies and operational risks.
Old admin panel of ChatDoc Master
RESEARCH
Understanding internal admin frustrations as ChatDoc Master scaled for B2B
Understanding internal admin frustrations as ChatDoc Master scaled for B2B
As our engineering team also serves as admins, I interviewed four engineers to uncover the limitations of the original admin panel and their evolving responsibilities as we transitioned to support business users.
Interviews with admins surfaced gaps in group management, role control, and chatbot visibility and deployment.
Interviews with admins surfaced gaps in group management, role control, and chatbot visibility and deployment.
INTERNAL ADMIN PAIN POINTS
Admins had no way to see which users belonged to which business organization.
Admins had no way to see which users belonged to which business organization.
DESIGN IMPLICATIONS
Create a group management view with organization details and user lists.
Create a group management view with organization details and user lists.
The system only supported two roles—User and Platform Admin, no way to delegate admin rights to businesses.
The system only supported two roles—User and Platform Admin, no way to delegate admin rights to businesses.
Introduce role assignment: User, Group Admin (businesses), and CPII Admin (our internal admins).
Introduce role assignment: User, Group Admin (businesses), and CPII Admin (our internal admins).
Debugging chatbot issues required querying backend manually to access chat history or document data.
Debugging chatbot issues required querying backend manually to access chat history or document data.
Surface chatbot tools in the UI: document exports, chat history, and debug access.
Surface chatbot tools in the UI: document exports, chat history, and debug access.
Tokens had to be generated manually when business users wanted to embed a chatbot on their own websites.
Tokens had to be generated manually when business users wanted to embed a chatbot on their own websites.
Add UI for generating iFrame embed tokens for business users.
Add UI for generating iFrame embed tokens for business users.
INTERNAL ADMIN PAIN POINT
Admins had no way to see which users belonged to which business organization.
DESIGN IMPLICATION
Create a group management view with organization details and user lists.
The system only supported two roles—User and Platform Admin, no way to delegate admin rights to businesses.
INTERNAL ADMIN PAIN POINT
Introduce role assignment: User, Group Admin (businesses), and CPII Admin (our internal admins).
DESIGN IMPLICATION
INTERNAL ADMIN PAIN POINT
Debugging chatbot issues required querying backend manually to access chat history or document data.
DESIGN IMPLICATION
Surface chatbot tools in the UI: document exports, chat history, and debug access.
INTERNAL ADMIN PAIN POINT
Tokens had to be generated manually when business users wanted to embed a chatbot on their own websites.
DESIGN IMPLICATION
Add UI for generating iFrame embed tokens for business users.
To design features that help business users deploy chatbots, I needed to understand these two technical terms:
iFrame
The HTML snippet that businesses place on their website to embed the chatbot.
Token
A secure access key generated for a chatbot embed that controls and authorizes this embedding.
I worked with engineers to map a new information architecture organizing groups, users, and chatbots with their metadata and assets.
I worked with engineers to map a new information architecture organizing groups, users, and chatbots with their metadata and assets.
This structure supports managing complex business hierarchies by clearly defining relationships and data across groups, users, and chatbots.
Information architecture of new ChatDoc Master admin panel
IDEATION
While designing the key workflows, I had to balance complex backend systems with strict security requirements.
While designing the key workflows, I had to balance complex backend systems with strict security requirements.
Because our engineering team also acts as admins, every feature needed to support their technical workflows, minimize manual backend effort, and uphold platform security. I identified two core admin tasks as priorities:
01
01
Creating business groups and onboarding users securely.
02
02
Generating iFrame embed tokens so businesses could deploy chatbots on their websites.
Enabling admins to onboard business users securely
Enabling admins to onboard business users securely
ITERATION 1
I designed a flow where admins could generate a registration link tied to a business group. The business would share this link with team members to sign up under the organization.
SHORTCOMINGS
Links posed security risks if leaked or reused.
Maintaining validation logic for links was complex.
ITERATION 2
I replaced the registration link with a unique registration code for each group. New users enter this code during signup to join their organization.
WHY THIS IS BETTER
More secure and revocable.
Easier for admins to distribute and track usage.
Better aligned with backend validation and scalable across clients.
Strengthening security for chatbot embed tokens
ITERATION 1
Admins generated iFrame embed tokens by entering a name and question limit. However, tokens never expired once created, leaving them permanently valid.
SHORTCOMINGS
Tokens that never expire create a security risk if they are leaked or stolen.
ITERATION 2
I added token expiration controls, allowing admins to set expiry dates.
WHY THIS IS BETTER
Provides robust security by limiting token lifespan.
SOLUTION
A secure, scalable panel for internal admins to manage business users, troubleshoot chatbots, and maintain platform security.
A secure, scalable panel for internal admins to manage business users, troubleshoot chatbots, and maintain platform security.
GROUP MANAGEMENT
Create new groups for business onboarding
Create new groups for business onboarding
Admins can set up new business groups by assigning subscription plans, user and chatbot quotas, and a group admin who will manage the organization’s team. This supports smooth onboarding and scalable management of our growing business user base.
USER MANAGEMENT
Control access by assigning roles across users and organizations
Control access by assigning roles across users and organizations
Admins can easily assign or update roles—User, Group Admin, or CPII Admin (our internal admins), directly from the user table. This gives internal admins fine-grained control over who can manage teams, access chatbots, or configure system settings, all without needing to touch the backend.
Gain visibility into user activity and chatbot-related data
Gain visibility into user activity and chatbot-related data
From each user profile, admins can view chatbots created by that user. This gives admins the transparency they need to monitor usage and support business clients effectively.
CHATBOT MANAGEMENT
Enable chatbot embedding for business websites
Enable chatbot embedding for business websites
Admins can generate iFrame tokens that allow businesses to embed their chatbots directly onto their websites. Tokens are configurable with expiration dates and can be revoked as needed.
Access chatbot data for easier debugging
Access chatbot data for easier debugging
For each chatbot, admins can access the uploaded documents, chunked data, and chat history. This visibility supports issue tracking and aligns with backend data structures.
TAKEAWAYS
This was one of the most challenging projects I've worked on due to its highly technical nature, but it helped me grow as a systems thinker.
Speak the developers' language
Speak the developers' language
By learning what tokens and iFrames mean and why they matter for security, I made informed design decisions that protect users and platform integrity. Moving forward, I will invest time early to understand key technical concepts to design solutions aligned with technical scope.
Map system relationships to design for scale
Map system relationships to design for scale
By deeply understanding how users, groups, and data interact within the backend architecture, I identified edge cases and complexities upfront. This clarity enabled me to design solutions that not only solve current needs but also scale smoothly as the business grows.
A big thank you to my team :)
CHECK OUT OTHER PROJECTS:
Let's bridge the gap between people and
technology together.
© 2025 Made with ❤️ by Hedy Hui.
Let's bridge the gap between people and
technology together.
© 2025 Made with ❤️ by Hedy Hui.
Let's bridge the gap between people and technology together.
© 2025 Made with ❤️ by Hedy Hui.