How might we let people react with emojis in a way that encourages more activity and participation in discussions but still prioritizes endorsing?
As this effort began as a feature request rather than from a specific user pain, I interviewed 5 officemates with varying levels of experience with the site to quickly empathize why people do or don't participate in discussions online, whether Massdrop or sites like Reddit, Quora, Amino, etc.
3 of 5 people browsed but almost never posted on Massdrop. I synthesized their reasons for not participating online into 3 areas. (While not significant data, it was enough to get going.)
Then, I framed my challenge as...
People don't engage in discussions because they're not passionate enough to post original content, don't have anything new to add, and endorsing isn't the right response.
We believed that by making it easier and faster to express how users feel and respond in a human way with emojis, more people who are interested in communities will participate.
Success metrics: lots of emoji-ing, while not decreasing endorsing too much; increase retention
To provide context and guide my approach from our users' point of view, I crafted the following job story:
When users read posts and comments, they want a fast, easy, and natural way to express how they feel, so they can join the conversation without investing a lot of time and effort.
There were two key factors guiding this effort:
- Dev effort
As an impromptu addition to the roadmap, engineering resources were very limited. So, we weren't trying to reinvent the wheel.
- Prioritize engagement with endorse
"Endorsing" is Massdrop's main metric for community engagement, ranking and surfacing content, as well as social clout. Lesson from the first release: emojis are highly engaging, don't dilute endorsing.
The original design failed because it displayed endorse and emojis as equally important and offered too many choices.
This time, we opted to start with less emojis (5) and add the ability to view which users reacted with emojis.
I broadly researched emoji patterns but converged on 2 solutions that we could implement with minimal additional dev effort and that supported our use cases.
Rather than introduce a new interaction to the site, we could build on existing components: our user listing link and modal.
Option #1 - Improved the original design by creating a clear hierarchy between emojis and endorse, but we assumed its stronger visual impact and easy incrementation might prompt more emoji-ing than endorsing.
Option #2 - Let people express their emotions quickly but added friction to emoji-ing. This method gave emojis and endorse a more similar visual impact and provided a less cluttered experience.
After reviewing with our greater product team and engineering, we believed option #2 would allow people to voice their opinion in an easy, human way, while better protecting engagement with endorsing. We shared clickable prototypes with CEO Steve El-Hage to get buy-in.
It turns out the CEO prioritized lots of emoji-ing and a larger emoji set (~20) because it previously allowed for community themes, tropes, and habits to emerge. Despite my hesitation that the original design would increase competition with endorsing, he accepted the risk in favor of providing a more engaging, flexible, and fun experience.
While I'd focused on tactically how people could react in a way that met our immediate requirements and goals, his feedback challenged me to consider that interactions right for a social network like Facebook might not be right for an online community like Massdrop–to think more strategically about our product identity.
With a new perspective, I went back to the drawing board to improve the original emoji experience.
The biggest concern for this effort was figuring out how to balance competition with endorse and emoji reactions, particularly on mobile (~60% of traffic). I solved this with an expandable emoji unit and making small but impactful tweaks to enhance endorse's visual prominence.
One of Massdrop's core values is being "community first." Rather than acting as a gatekeeper that limits what feelings members could express, we increased emojis from 5 to 25.
Would displaying the action bar first help protect engagement with endorse as users would see it first when scrolling?
Our team was split about where emojis should live in the card hierarchy, particularly on mobile. To test our assumptions, I user tested 2 designs with 8 people around the office to quickly gather user feedback.
Scenario: Imagine you've come across a cool or interesting post in one of your communities.
Questions:
- What actions would you take? Why or why not?
- Which feels the most intuitive to you?
- Knowing that we want to keep endorsing prioritized, which version would you recommend?
- 5 of 8 people preferred Above - because it felt more familiar and better aesthetically
- 3 of 8 people preferred Below - for various reasons
My results signaled that people are biased towards familiar things, and there were potential pros and cons with each approach.
"Emojis are a warm and interactive part of a post. They may entice a user to engage with the action bar. That won't work in reverse. Also, It looks better."
"Seeing the action bar higher vs. below brings attention to emojis. I almost completely ignored endorse because it's not colorful and lower."
Ultimately, our team couldn't predict what impact adding emojis would have in general–let alone how the placement of emojis would affect our metrics. At this point, we could only validate our assumptions by building and measuring. We decided to test emojis above the action bar.
Emoji reactions were approved and are awaiting development. While there were twists and turns on the road to alignment, I took away...
Design for needs, goals, and behaviors
While I considered our requirements, business, product, and user goals, I forgot to ask what potential or emergent behaviors did we want users to take?
Question what we are and aren't
The CEO's feedback challenged me to think deeper about what Massdrop is and isn't, the nuances between online communities vs. social networks, and push past once I thought I "solved" our problem to craft thoughtful solutions right for our product.
