01
Manual Intake
Counsellors needed to understand incoming cases before deciding the appropriate next step.
All projects
Product & UX/UI case study
Website Sticky Chat Widget and Counsellor CMS Platform
OpenUp
Connecting Young People with Human Support Through a More Responsive Digital Service
- Role
- Senior Product / UX/UI Designer
- Platforms
- Website · Chat widget · CMS
- Outcome
- Connects first contact, case understanding and counsellor support in one coordinated flow.
Available on
01
Project snapshot
The product, people and scope—at a glance.
- Project
- OpenUp
- Product Type
- Website Chat Widget and Counsellor CMS
- Users
- Help Seekers / Counsellors / Supervisors / On-duty Administrators
- Platforms
- Responsive Web / Chat Widget / CMS Platform
- My Role
- User Research & AnalysisSystem Flow DesignUX/UI DesignPrototyping
02
Overview
A connected service for reaching human support.
OpenUp is a 24/7 online text-based emotional-support service designed mainly for young people in Hong Kong.
The digital product connects a help-seeker chat experience with a counsellor-facing CMS, supporting live conversations, case visibility, service coordination and follow-up across multiple communication channels.
Visit OpenUp03
The challenge
Improve clarity without reducing care to automation.
The service depended heavily on counsellors manually reviewing incoming conversations before understanding each help seeker’s situation and support needs.
The design challenge was to improve intake and case management while preserving privacy, sensitivity and human judgement.
02
Limited Visibility
On-duty teams needed a clearer overview of waiting cases, active conversations and counsellor availability.
03
Sensitive Prioritisation
Potentially urgent cases required visible indicators and human review.
04
My role & process
Translate service needs into a connected experience.
I worked with users and developers to translate service requirements into a connected help-seeker and counsellor experience.
My design scope covered the website chat widget, counsellor CMS, system flows, interface design and interactive prototypes.
User Research & Analysis + System Flow Design + UX/UI Design + Prototyping
01User and Workflow Analysis
02Service Flow
03Information Architecture
04Wireframes
05UI Design
06Prototype
07Developer Handoff
Zensis has supported the platform as a development partner since 2018.
05
Connected service flow
One coordinated path from contact to follow-up.
The experience connects initial contact, case understanding, counsellor review and ongoing support within one coordinated workflow.
The connected service flow moves from a help seeker through the website chat widget, initial context, queue and priority indicator, human counsellor review, the CMS workspace, and support, referral or follow-up.
06
Help-seeker chat widget
A clear first point of contact.
The sticky chat widget provides a clear first point of contact for people seeking support.
The proposed pre-chat flow helps collect essential context and prepare a priority indicator for counsellor review, while the support conversation remains with a trained person.
The chat flow moves from starting chat and accepting terms through availability, queue or appointment, essential context collection, human counsellor review and a human-supported conversation.
- Clear first point of contact
- Visible queue and handover states
- Human support remains central
07
Counsellor CMS
A coordinated workspace for human support.
The CMS gives counsellors and supervisors a clearer view of waiting, scheduled and ongoing cases while keeping conversation context and case actions within one workspace.
It also supports multiple conversations, referral and follow-up without losing the status of each case.
Monitor
- Appointments
- Queue
- Ongoing Cases
Understand
- Case Profile
- Conversation History
- Priority Indicators
Support
- Live Conversation
- Notes
- Follow-up
Collaborate
- Referral
- External Professionals
- Supervisor Review
The counsellor CMS is organised around four groups: monitor appointments, queues and ongoing cases; understand case profiles, conversation history and priority indicators; support live conversations, notes and follow-up; and collaborate through referrals, external professionals and supervisor review.
- Shared operational visibility
- Multiple-conversation workspace
- Human-controlled referral and escalation
08
Outcome & reflection
Technology supports the service. People remain in control.
Outcome
The proposed experience connects initial contact, case understanding and counsellor support within one coordinated service flow.
The chat widget provides clearer context before handover, while the CMS improves visibility across waiting, active and ongoing cases.
Reflection
The key challenge was not simply introducing AI into the workflow, but defining where technology could assist and where human judgement needed to remain visible and in control.