Protect Users from Direct Message Harassment Under the Anonymous Context
Company
Fuye Tech.
Time
2 weeks , Mar 2020
Current State
Launched
Team
Product Designer (Zane Hu), Product Designer (Sylvia Liu), Product Manager (Samuel Chen), Engineer (Steve Fu), Engineer (Liqi Chen)
Overview
Product Brief
Zhitiao (Whisper)
👤
🏫
💬
PROBLEM
The anonymous nature of social media has led to an increase in direct message harassment complaints.
Design approach
Transfer the power to initiate conversations from the sender to the recipient.
SOLUTIONS
🗣️
Sender
Restricted Content for First Message
Senders are limited to crafting their initial 'Say Hi' message from a certain set of phrases. The chat can only continue when the recipient chooses to reply.
Complete Flow
Key Screens
Craft Content
(Choose Real ID / Anonymous)
Wait for Reply
Conversation Blocked
👤
RECIPIENT
Power to Approve Conversation Continuation
Recipients can choose whether to reply or decline the messages. Only when they decide to reply will the conversation proceed.
Complete Flow
Key Screens
Choose Decline or Reply
Decline
Reply
Imapct
-42%
The rate of reporting DM harassment
🥰
Received lots of positive feedback from users
User research
Even with Reporting and Blocking features in place, we still got complaints about DM harassment. So why is that?
204
Online Survey
I conducted an online survey within the app and gathered quantitative data from 204 responses, which confirmed the severity of the problem.
8
User Interview
I also screened 8 users who had experienced DM harassment and conducted in-depth interviews with them to dig out their real thoughts.
key insight:
💔
What is needed is prevention, rather than remedy after the hurt.
"Although I can report and block the person afterward, I've already been hurt by those words."
HOW MIGHT WE…
☔️
Reduce DM harassment by providing a set of effective prevention mechanisms
Explore Mechanisms
So what other platforms do to prevent DM harassment?
I analyzed what other platforms' prevention mechanism, including RED, TikTok, Weibo and more.
There are 2 common mechanisms:
🔒
Limited Message Amount
The sender can only send one message unless the recipient replies.
⛔
Customized DM Preferences
But, they DON'T work for our platform because：
🔒
For Limited Message Amount:
Users have to send lengthy messages to clarify intentions, which can be cumbersome on mobile devices. Plus, harassment could still happen for the first message.
⛔
For Customized DM Preferences:
As an anonymous app, maintaining anonymity is crucial. It makes distinguishing between users impossible.
Though, inspired by them, we started exploring our own
Dump Ideas & Affinity Mapping
We ran a 'Dump Ideas' session, after which we sorted ideas and discovered they could be categorized into 2 types.
Finally, 2 mechanisms were chosen and refined:
🗣️
Sender
Restricted Content for First Message
Senders are limited to crafting their initial 'Say Hi' message from a certain set of phrases. The chat can only continue when the recipient chooses to reply.
👤
RECIPIENT
Power to Approve Conversation Continuation
Recipients can choose whether to reply or decline the messages. Only when they decide to reply will the conversation proceed.
Design development - Sender
🗣️
Sender
Restricted Content for First Message
User Flow & Corresponding Pages
Key Screen: Craft Content
Design Decisions
DESIGN DECISION #1
Use Half Sheet
WHY: Since it's a light interaction, half sheet helps to keep the user experience smooth and reduce any sense of interruption.
Open in Full Page
open in Half Sheet
DESIGN DECISION #2
Switch to a First-person Tone
WHY: Given the limitations of message content, using a first-person tone is a strategic choice to create a more immersive experience.
Second-person Tone
First-person Tone
DESIGN DECISION #3
Update the Component for Switching Anonymous Mode
Original
Toggle Switch
Radio Button
New Component: Avatar + Name
old
New Component: Avatar + Name
Usability Test
👤
Problem 1:
25% of them asked if they could choose to not display any personal information while in anonymous mode.
😵💫
Problem 2:
The visual difference when switching between Real ID and Anonymous mode is not obvious enough.
TWEAK #1
Make sharing of personal information optional
old
new
TWEAK #2
Color Changes when Switching
old
Color Changes when Switching
All Screens (Sender)
Design development - Recipient
👤
RECIPIENT
Power to Approve Conversation Continuation
Design Decisions
DESIGN DECISION #1
Moving the task of reading the message after the recipient decides whether to reply to the sender or not.
Initial User Flow
New User Flow
DESIGN DECISION #2
Add the original post for clearer context
WHY: It was difficult to understand the context of the DM, as users couldn't frame it using restricted content.
old
new
All Screens (Recipient)
Final Outcome
Flow of the Sender
(Restricted Content for First Message)
Choose to Say Hi
Craft Content & Send
Wait for Reply
Case #1: Conversation Blocked
Case #2: Continue Conversation
Flow of the recipient
(Power to Approve Conversation Continuation)
Choose Decline or Reply
Case #1: Decline
Case #2: Reply
Takeaway
💡
Customization Over Convention
While established design patterns are helpful, they’re not definitive. It's crucial to design features that are not only familiar to users but also uniquely attuned to our product’s specific context and user needs.
Validate Uncertainty through Soft Launch
Creating an innovative solution was exciting but filled with self-doubt. By soft launching, I was able to quickly validate it and uncover potential issues. It ensured that the final design not only solved the problem but also is accepted by users.