Integrated Chat and Customer Service System
This system is a multi-role chat platform for regular users, promoters, and support agents. It enables real-time customer support and communication between promoters and their subordinates. An admin panel handles user roles, chat logs, and service workflows.
Requirements Analysis
I worked closely with stakeholders to define core requirements for regular users, promoters, and support agents. Through interviews and workflow reviews, I identified key needs such as real-time messaging, multi-session handling, and role-based access. These insights shaped the user flows and laid the groundwork for a scalable and role-specific design solution.
User Role Map
To support diverse user types while maintaining clarity and operational efficiency, I designed a four-role map with clearly defined permissions and interaction boundaries:
End User: Can initiate support requests, describe issues, and provide feedback. Their access is intentionally limited to prevent exposure to affiliate or admin data.
Affiliate: Focused on managing downline communication, with tools to view engagement and conversation history per user. They operate independently of other affiliates.
Customer Support: Handles real-time queries, tags issues, and escalates when needed. To ensure service quality, they cannot independently end sessions or view affiliate relationships.
Admin: Manages platform configuration, agent permissions, and performance monitoring. They have no direct involvement in user conversations to maintain role separation.
This structure balances task relevance, information security, and workflow clarity, ensuring that each role has exactly what it needs—no more, no less.
User Journey Maps
To design a chat system that supports both platform users and customer support agents, I mapped out two parallel user journeys. This helped identify emotional pain points, system limitations, and key optimization opportunities across roles.
End User Journey
The end user's experience begins with uncertainty and often anxiety about getting help. By visualizing the entire journey—from chat initiation to resolution—I identified key friction points such as unclear entry points, long waiting times, and repetitive transfers.
Design proposals included more prominent help entry placement, wait-time indicators to manage expectations, clear session handoff with context preservation, and satisfaction feedback prompts to close the loop.
Human-centered automation can balance speed and clarity, while small UX details like welcome messages or emoji-enhanced replies help reduce perceived support friction.
Customer Support Journey
For support agents, the journey is fast-paced and task-intensive. I mapped their workflow from receiving a session to either resolving or escalating it. Challenges included inconsistent context visibility, lack of smart reply tools, and uncertainty around session closure.
Design proposals included smart macros and template suggestions, auto-transfer with session context, canned replies synced with internal notes, and session-end signals triggered by user behavior.
Empowering agents with the right tools—without overwhelming them—drives both efficiency and service quality. System automation should assist, not replace, human expertise.
Admin System Scope Map
To clarify the functional scope of the backend and ensure alignment with user roles and operational logic, I created a system architecture diagram centered on the Admin's responsibilities.
This visual map helped define the three core functional domains of the admin console:
Support Agent Management – Role setup, permissions, shift management
Customer Service Monitoring – Real-time visibility and KPI tracking
Customer Conversation Management – Standardization of chat behavior and automation logic
This architecture diagram served as a foundation for subsequent design phases, including information architecture, interface layout, and feature prioritization.
Design Process
In the first iteration of this project, I focused on designing three core system interfaces: End User, Customer Support, and Admin. Each interface serves a distinct role within the support ecosystem, requiring tailored workflows, interaction models, and permission logic.
To ensure a scalable and role-specific experience, I mapped each role to its responsibilities and operational touchpoints. This role-based foundation shaped decisions from information architecture to interface prototyping.
This initial scope was defined based on system dependency mapping and priority user journeys identified during requirements analysis.
The Affiliate Chat Interface, which handles communications between affiliates and their downlines, is scheduled for a future iteration to maintain modular rollout and system clarity.
Cross-role User Flows: Swimlane Map
To visualize role-specific responsibilities and system logic across the customer service lifecycle, I used swimlane diagrams. These helped identify dependencies, clarify handoff rules, and inform permission-aware interface design for each user type.
End User – Mobile & Desktop
To support seamless access across platforms, I designed the End User interface with full responsiveness for both mobile and desktop. The goal was to make support feel immediate, reassuring, and human—regardless of device.
Customer Support – Desktop
The Customer Support interface was designed for speed, clarity, and control in a multi-tasking environment. Agents need to manage multiple live sessions, maintain context, and respond quickly— without losing track of priorities.
Conclusion
As the lead UX designer, I was responsible for the full-cycle design of this integrated chat and customer service system from requirements analysis to wireframing, prototyping, and developer handoff.
My responsibilities included working closely with stakeholders to define core requirements, mapping distinct workflows for three user types, creating wireframes and prototypes, designing intuitive interactions, collaborating with developers, and helping structure the platform logic between frontend clients, customer support backend, and admin console.