Facebook Comment Composer
During my first few years at Facebook, working within the Feed team, I helped modernize and improve experiences within the conversation space, mainly how people composed comments and replies within a post.
There are two ways to see a post, within Feed and Permalink (a post's details page, where you can see all comments). The composer and comments en each have inconsistent visual styling, features and behavior. We could speculate on why, but it's likely due to these different reasons: different user needs, varying engagement metrics per surface, discrepancy in team's investment.
When I set to work on any new space, I do a thorough audit on all platforms (iOS shown here), and gather data on the usage and performance of every component within it.
Beyond pushing for unification and consistency for all composers across surfaces and platforms, some standout features that could use a redesign were:
- Limited space for text as you type, space being misused by tools
- Inconsistent location and behavior for tools/attachments (photo, gif, stickers)
- Lack of visual hierarchy between selected tools and send button
- Send button states could be improved
- No space or extensibility for future composer tools (audio, avatars)
Team
- 1 product designer
- 2 product managers
- 16+ developers
Role
I proposed the unified system and gained buy-in from leadership, and led the team through the development and testing of all the designs.
Timeline
2017—2019
I explored dozens of combinations aiming to move to a consistent, coherent, extensible composer system. For a product used by billions of people everyday, it's vital to understand how each of these changes impacts engagement, so the approach was granular and iterative.
Attachment Drawer
Comments, GIFs and Stickers are a very common way for people to respond easily while adding context or personality to their comments. As mentioned above, we have an opportunity to create consistency and create a way to extend the menu as more tools become available.
I was responsible for creating a bottom sheet system that could easily hold these common attachments, beginning the improvements from an architecture and navigation standpoint and unifying grids and components.
Beyond the bottom sheets, getting the entry points positioned together and exploring ways to extend this system as new tools were introduced was another side of this effort.
Conversation suggestions
We knew from research people often need a bit of a push to engage in their friends' posts or they might just not know what to say. Using machine-learning, we created a set of conversation starters to help people more easily engage. We started with small text and emoji suggestions, but in the spirit of growth and extensibility, I also began exploring ways that these suggestions could hold the range of tools we offer.
Some user experience fun parts we explored:
- Tap to send vs tap to fill the composer (the latter was better - people appreciate control)
- Keeping vs dismissing the suggestion banner after tapping on one (people often used multiple suggestions)
- The ability to dismiss or report suggestions as irrelevant or problematic
- The logic for which types of posts should have suggestions and which shouldn't
- Periods in time where people would not be open to suggestions at all
