Overview
Transforming Therapists-Clients Communication: An In-Platform Messaging System Built for Workshop Customization
At TogetherWell, I led the design of an in-platform Direct Messaging System to bridge communication gap between therapists and their clients. With a Floating Chat Box for quick discussions and a Full-Screen Direct Message Page for in-depth conversations, it enables therapists to update requirements while chatting in real-time, ensuring accurate alignment with client needs. By reducing cognitive load, it supports a smoother collaboration on workshop customization.
Timeline
5 weeks (Aug - Sep 2024)
My Role
Product Designer
Team
Founder (strategic alignment), PM, UX Designer (peer feedback), Developer
Tools
Figma, FigJam, Slack, Freedcamp
My Tasks
Market Research, User Interview, Usability Testing, Design System Improvement, Hi-fi Prototype
Background
Testing Results
Reduced user efforts, enhanced alignment, and improved efficiency
74% testing users reported reduced user efforts, no longer needing to memorize workshop details while discussing.
65% testing users reported reduced mismatch expectations with workshop requesters through requirements update feature.
58% testing users reported improved efficiency in real-time discussions and aligning with requesters.
Current Communication Model
Challenge
External communication tools led to ineffective collaboration on workshop planning.
Workshop requesters submitted their requirements through forms, but without discussion, their suggestions often conflicted with therapists’ availability. The current reliance on external tools like email made it difficult to discuss, finalize and access updated requirements for workshop customization.
Problems
How might we help therapists seamlessly discuss and align on workshop requirements with requesters, reduce effort, and ensure finalized requirements are accessible for reference and alignment?
Research
User Interviews Insights
Ineffective communication affects alignment and tracking on workshop requirements
I conducted in-depth interviews with 8 current users to understand their communication process with workshop requesters:
User pain points --> opportunities: improve communication, reduce load, ensure alignment
TogetherWell’s 2-Way Communication Model - Enhances tailoring but adds process complexity.
TogetherWell gives requesters the flexibility to negotiate and customize workshop details with therapists. It supports a more tailored experience, but also adds complexity to the communication and confirmation process.
Phase 1
Ensuring Seamless Communication Experience with In-Platform Messaging
Problem
How might we help therapists seamlessly discuss workshop requirements with requesters?
Approach 1 - Asynchronous Form Submission
Floating chatbox for quick discussions
Design Decision
Design an in-platform real-time message system
Lack of real-time interaction led to delays and conflicts
Therapists and requesters submit preferences via a requirements form with notes to communicate.
Why Rejected: May lead to conflicting suggestions, prolonged back-and-forth, and fragmented communication due to lack of real-time interaction.
Approach 2 - Real-Time Messaging (Selected)
Direct message page for in-depth conversations
Real-time chat ensures alignment and reduces conflicts
Direct chat helps therapists and requesters quickly align on workshop requirements.
Avoids conflicts and reduces back-and-forth discussions
Phase 2
Reducing Cognitive Load during Discussion and Ensuring Alignment on Workshop Requirements
Problem 1
How might we help therapists reduce user effort on memorizing details during discussion？
Challenge - Exploring ways to display editing form in limited space
Limited side panel space made it difficult to incorporate both the request info and the editing form, leading to cluttered layouts and poor usability.
New Problem Found
How might we ensure therapists seamlessly check requirements while using the floating chat box across different pages?
Design Decision 1
Enable therapists to chat while viewing workshop requirements and contents side by side
Floating Chat Box - Open chat on Workshop contents page & Request details page
Direct Message Page - Use side panel to display workshop requirements & contents
Iteration Process - Exploring ways to display all essential information in limited space
Difficult to display all essential information therapists need to minimize cognitive load effectively.
Design Decision 2
Enable therapists to chat while updating finalized requirements side by side
Floating Chat Box - chat while editing requirements within popup
DM Side Panel - Chat while editing requirements within side panel
Final Version - A clean, focused editing experience
Streamlined editing ensures efficient updates and alignment in discussions
Therapist can update requirements while discussing, keeping finalized details as reference for alignment.
Entire space of side panel is utilized for the editing form, optimizing limited space without clutter.
Reduced cognitive load with progressive disclosure: the side panel transitions to the editing view, revealing only necessary functionality to minimize distractions.
Design Decision 3
Design a collapsible workshop requirements section attached to the floating chat box
Seamless access to requirements anywhere, anytime
Therapists can view and edit requirements while chatting, on any page.
Provides uninterrupted access to essential information, effectively minimizes cognitive load.
Final Version - Split the space with 2 tabs
Use tabs to organize 2 sections
Use 2 tabs to organize workshop requirements and contents to effectively display both sets of information.
Therapists can discuss while viewing details, reducing the need to memorize and minimizing errors.
Problem 2
How might we help therapists keep updated requirements as reference to ensure alignment?
Team’s Concern - Chatting on irrelevant pages adds cognitive load
Peer Suggestion - Remove floating chat box & rely solely on DM page
Floating chat box was designed for specific pages, but therapists can still use it elsewhere.
Why I advocate for floating chat box - for its unique value
It provides unique flexibility, allowing therapists to chat while accessing any workshop-related page.
Final Version - A collapsible requirements section
Phase 3
Improving Requests Prioritization for Better Focus and Efficiency
Problem
How might we help therapists prioritize requests based on urgency?
Design Decision
Organize requests based on status
Approach 1 - Add a status-based filter to requester list
Filter requesters by status for faster prioritization
Pro: Allows quick identification of requesters requiring immediate actions based on status.
Con: When a requester has multiple requests with different statuses, it’s unclear which status should take priority for sorting.
Question
How can we differentiate and prioritize multiple requests from the same requester？
Solution - List for all requests from the same requester
Differentiate and prioritize multiple requests from the same requester
Display all requests from a single requester, organized into 3 tabs, helping therapists quickly focus on urgent priorities
Selecting a specific request transitions the panel to show detailed info in full view.
Phase 4
Increasing User Engagement to Initiate Conversation
Problem
How can we encourage therapists to start conversation in DM page?
Design Decision
Display requesters who are waiting for response from therapists
Current workflow to start a new conversation
Inefficient process limits user engagement
Currently, only requesters who are in conversations with therapists are listed in DM page
Starting a new conversation requires 3~4 clicks, making it inefficient and reducing engagement
Iteration 1 - list all requesters who sent requests in DM page
Pro: Increases visibility of requesters waiting for responses, encouraging engagement.
Con: Mixing all requesters can overwhelm therapists and make ongoing conversations harder to find.
Final Solution - separate “In Contact” and “Waiting for Response.”
Use tags to organize ongoing & pending conversations
Ensures quick access to ongoing conversations
Improves visibility of requesters awaiting responses, encouraging engagement.
Reflection
Lessons Learned through the Project
Seamless features with contextual flexibility
Through the project, I learned that simplicity in design doesn’t mean fewer features. It means designing features that work seamlessly together. Balancing floating chat box and DM page required designs that offered contextual flexibility: adapting to users’ specific needs while minimizing distractions. To achieve it, I explored space-efficient layouts and task-focused workflows prioritized clarity and responsiveness in real time.
Balancing immediate needs with long-term adaptability
I also realized that a designer’s role goes beyond creating user-friendly interfaces. Effective UX design not only addresses immediate user needs but also builds scalable systems for future growth. (e.g. Side panel’s nested views resolved pain points while laying the foundation for future adaptability.) I gained insights into how thoughtful design can drive both user satisfaction and long-term product growth.