
Trickle - DM Feature
Creating a system that enables farmers to monitor and analyze crop growth in real-time, ensuring optimal crop health and crop management.
Duration
2 weeks
Project Type
Professional Project
Web Design
Role
UXUI Designer
Scope
User Flow, I.A., Wireframe,
Hi-fi Prototype, Usability Testing.
OVERVIEW
About Trickle
Trickle is a SaaS company focused on cross-functional collaboration in the North American market. Its design principle centers on seamless task management and communication to boost productivity.
As a startup, Trickle operates in a fast-paced environment where the design-to-launch process is rapid. We iterate and deliver designs quickly based on market feedback to stay agile and responsive.
The Problem
Trickle's current communication method is task-centered, relying on comments and replies. However, many users have reported that this approach often leads to overlooked or missed messages, resulting in inefficient communication and decreased productivity.
The Solution
To address this issue, we launched a direct messaging (DM) feature within two weeks, allowing users to communicate outside of task-centered conversations. This led to a 22% decrease in message response time, a 32% reduction in missed messages, and a 5% increase in task completion rate.
UNDERSTAND THE PROBLEM
User Research
I employed 3 research methods to identify user pain points and optimize communication, aiming to uncover inefficiencies and inform the design of a more effective solution.
Research Methods:
User Feedback Analysis
Reviewed 6 months of user feedback and support data to identify communication pain points.
Workflow Analysis
Mapped the current communication workflow to identify inefficiencies and improvement opportunities.
Competitive Analysis
Analyzed SaaS products like Slack, Teams, and Trello for DM insights to guide our approach.
General Insights
Feedback Insights:
Missed Messages
Important updates were often buried in task-related comments, leading to missed messages.
Cluttered Task Threads
Users struggled to manage cluttered threads, driving the need for a more flexible communication tool.
Workflow Insights:
Fragmented Communication
Conversations were scattered across tasks, making it hard for users to maintain context.
Navigation Inefficiencies
Tracking conversations across multiple tasks led to inefficiencies and potential information loss.
Competitor Insights:
Best Practices
Leading SaaS products separate task and general communication for easy context switching.
Flexible Customization
Top DM systems offer group creation, search, and tool integration for enhanced productivity.
BRAINSTORM AND IDEATION
Brainstorm Seesion
I conducted brainstorming sessions both individually and with the product and engineering teams to explore different approaches for implementing the DM feature.
The key goals were to:
1. Ensure the DM feature was intuitive and easily accessible.
2. Integrate the DM feature without disrupting existing workflows.
3.Provide flexibility in communication methods (task-centered vs. direct messaging).


IDEA 1:
Integrated Chat within Task Threads
Embed the DM feature within the [threads] interface, allowing users to initiate private or group chats directly from a task.

IDEA 2:
Slide-Out Chat Panel
Create a slide-out chatting panel that appears from the right side of the screen. This panel would support both direct messages and group chats, accessible from any part of the product without leaving the current view.

IDEA 3:
Pop-Up Chat Windows
Implement DM as contextual pop-up windows that can be accessed from anywhere within the product, allowing for real-time, ad-hoc communication.
START DESIGNING
Mid-fi Prototype
Leveraging our robust design system, I swiftly created mid-fidelity prototypes for each idea. In the process, I also explored different design variations for each concept, which provided valuable insights and allowed us to thoroughly evaluate the visual and interactive elements of the proposed solutions. This approach ensured we could choose the most effective design direction.
IDEA 1:
Integrated Chat and Threads

IDEA 2:
Slide-out Chat Panel

IDEA 3:
Pop-up Chat Window

Internal Testing
Due to time constraints, I conducted internal testing, gathering feedback to identify the pros and cons of each idea. I presented the design rationale for each solution during meetings with the product leader and engineers. After discussions, we agreed that the Integrated Chat within Task Thread was the best solution.
Why Choose IDEA 1 :Integrated Chat and Threads
Functionality Integration: Merging chat within task threads is more effective than adding new features, streamlining the user experience.
Simplified Implementation: Embedding chat leverages existing structures, reducing complexity and easing development.
Seamless Context: Keeps communication within the task, maintaining context without switching views.
Efficiency: Improves task-focused collaboration by keeping everything in one place.
Why Didn't Choose IDEA 2: Slide-out Chat Panel
Redundant Features: Existing member list and thread drawer already slide out from the right, making the new panel redundant and potentially cluttered.
Complex Navigation: Switching between chat, thread views, and a separate thread popup complicates the user experience and disrupts workflow.
Why Didn't Choose IDEA 3: Pop-up Chat Window
Limited Space: The small window size causes a disjointed experience between chat and threads. Adding thread functionality makes it harder to display details clearly, impacting efficiency.
Higher System Load: Managing multiple pop-up windows increases complexity and resource usage, potentially affecting performance.

Final Design - Chat Feature
FEATURES
New Chat
The New Chat feature empowers users to initiate private, one-on-one conversations or group chats directly with workspace members. This enables seamless and confidential communication beyond task-specific threads, fostering real-time collaboration and quicker decision-making.
Search
The Search feature allows users to efficiently locate specific messages, conversations, or users within their chat history. By using the search bar, users can quickly retrieve past discussions, important information, or locate contacts without scrolling through lengthy threads.
Filter
The Filter feature allows users to streamline their communication by easily locating specific types of content. Users can filter messages by direct chats, threads, or focus on messages that are most relevant to them, such as those they’re tagged in or have actively participated in.
Sort by
The Sort By feature allows users to organize their messages according to their preferences, such as sorting by unread messages or by date (oldest to newest or vice versa). This flexibility helps users prioritize important conversations, ensuring they never miss critical updates.
Read all
Erase all the unread chat by one click.
REFLECTION
Takeaways
The Value of Internal Testing: When time and resources are limited, internal testing proves to be an invaluable method. While it may not offer the breadth of insights gained from external user testing, gathering feedback from internal users still provides crucial insights. Some feedback is always better than none, helping to identify major pain points and validate key design decisions. Post-launch, we can collect broader user feedback and iterate the product to continuously improve the user experience.
The Importance of Contextual Integration: One key takeaway from this project is the significance of aligning new features with existing workflows. By choosing to embed the direct messaging feature within task threads, we ensured that users could communicate without losing task context. This not only improved usability but also reinforced the product’s core value proposition of task-centered collaboration. Seamless integration of features reduces complexity, enhances efficiency, and ultimately leads to a more cohesive user experience.