KELLY CHANG .

How might we help users connect and recognize referred posts in a private manner?

Individuals and organizations can search for posts of offers or requests on the platform. During a meeting with 2 PMs, I learned that the current platform only allowed them to communicate via publicly visible comments under posts, which did not promote trust or safety during the information exchange. Therefore, we decided to build the Direct Message feature that allows people to communicate in a more private manner. Also, it should let users recognize the posts which they're referring to in the same way as they comment under posts.

Displaying associated posts in conversations

I took a mobile first approach, which helped me focus on core content and make it concise and easy to understand. To help message senders and recipients be able to identify what offers or requests are being discussed, I designed a solution that displays associated posts in chat conversations.

User is messaging the post author to discuss details

User received the message about his post and is replying to the message sender

Learning the design trends

My team and I screenshotted some apps that we use to learn about the current trend of messaging. I summarized some key insights that could be applied to the design—

• Prominent message title or user name
  Users are able to scan and identify what subject they’re discussing or whom they’re talking to.
  
• Distinguishable senders and recipients
  Users can distinguish them with avatars or different colors of message bubbles in conversations.
• Noticeable signifiers for unread messages
  Users could know what they’ve read or haven’t by the signifiers.
  

Defining the flows

We defined different use cases and listed out feature specific behaviors, including message request/ acceptance, notifications, block/unblock users, edit/delete message, and archive conversation. Then, I translated these requirements into task flows that clarify high-level steps of users to use the messaging feature. The task flows not only helped answer how users would be able to access and interact with the feature but also helped communicate effectively with PMs and engineers about how it works.  

Navigation

I first started thinking of navigation about where users can access Direct Message and other features in the mobile app. I explored 3 options based on different assumptions. After a consult with another designer from the notification team, we decided to do a light testing, asking people which they prefer and how frequently they use those features. However, the feedback I got surprised me because these 3 options seemed all workable for people.

After the testing, I realized that it really depended on what we'd like to shape the user behavior. Also, I got the inspiration that people are likely to use Direct Message more often to discuss offers/requests with others. Moreover, Direct Message and Notification are important features to keep people engaged and retained on the platform for the business. Thus, I created Option 4, which we all agreed with and met the current demands.

Messaging from post

People message others via posts, meaning they'd like to contact the post authors to discuss more details. Therefore, in order to let both the message senders and recipients know which posts (offers or requests) they're going to discuss, the associated posts would always be kept in the conversation. Accordingly, I designed the UI on which the message sender could see the post snippet when messaging via a post.

Messaging threads

To let the message senders and recipients know and remind what offers or requests they're discussing, I applied what I've learned from the competitive analysis and explored 3 options. However, none of them were ideal for the team. They concerned about the post title won't be seen because of the limited space in Option 1. The Option 2 and 3 were similar, but the Option 3 looked less text heavy. Also, they concerned about how users could know there are some unread messages in the message requests inbox.

As a result, based on Option 3, I designed Option 4 with the indication of the number of unread conversations in messages and message requests inboxes and the blue dot indicate unread messages. We eventually went with Option 5 because it makes the read and unread messages more distinguishable.

Chat conversation

To keep the associated post in a conversation, I designed Option 1, in which the post snippet sticks on the top and each conversation would only have 1 post content. However, there was a potential problem after discussing the design with my team. There may be multiple communication between the same recipients and senders without a unified chat conversation for multiple posts.

Therefore, I designed Option 2, which solved the above problems. The solution allowed to have multiple post content in a conversation. It could save multiple conversations between the same senders and recipients. Although users might feel confused about which post is targeted one in discussing by seeing multiple post content in one chat, this solution could help build a long-term connection between users and help to track the previous records of exchanged details easier.

Web experience

After the mobile experience was finalized, it was straightforward to translate it into web experience.