Reactions on Gather
WEB APP · CORE PRODUCT
Redesigned Gather's reaction experience to encourage and increase engagement in meetings and conversations.
Responsible for research and design of the feature. Prototyped micro-interactions and worked closely with engineering to execute the details.
Aug 2022 - Sep 2022
Launched in September
With a 1-click emote bar, users can effortlessly wave, cheer, or thumbs up their teammate when the moment calls for it.
Participate more in meetings and never miss a raised hand with the improved raise hand feature.
Along with your favorite emotes, users have access to the full emote menu for a wider range of emotion.
Catch all shared emotes in the new designated reaction feed and trigger a Community Reaction when multiple users share the same emote 🎉 ❤️.
Working remotely, the opportunities to collaborate, socialize, and make genuine connections with your team are difficult to come by.
Emotes have been a universally impactful tool in conveying emotion, personality, and non-verbal cues in online interactions.
These virtual office spaces are designed to bring your team together in one place to hold meetings, collaborate 1:1, spur spontaneous conversations, and host team socials.
Conversations are held through video/voice chat with an avatar representing you in the virtual office space.
The first iteration of emotes launched over 1.5 years ago with a simple hover menu and 6 preset emotes. Shared emotes were presented above a user’s avatar in the space and by each user’s video in meeting, full screen, and screen share modes.
Greet others
Greet another user in the space with a wave to say hello and start a conversation
Engage without disruption
Engage in a conversation without having to unmute or clutter the chat
Give input
Raise a hand to ask a question or vote on a discussion topic in a meeting
A team that is actively listening, supporting one another, and making team decisions will not only lead to better employee retention, team synergy, and camaraderie but better work outcomes.
We believe the reaction feature can help promote this in meetings.
Sending an emote was not top of mind or was tedious due to the emote menu selection interaction. Preset emote options were difficult to switch in the moment.
It was difficult to see emotes shared in larger meetings, especially in screen share mode.
Help users instantly send the appropriate emote that reflects what they are feeling in the moment.
Present shared emotes clearly to the speaker and audience in all viewing modes.
How can we motivate others to send emotes and create a cascading effect of participation?
Considering the work environment, how can we bring fun and energy to meetings without being distracting?
In Q1 of 2022, the design team overhauled the navigation system, creating one single toolbar to house user controls and functions.
While most functions were redesigned, the emote menu remained untouched and dropped into the new toolbar until this dedicated project came along.
The emote menu was hidden unless hovered which reduced overall awareness and usage. Sending an emote through the menu took 3 steps due to the hover pop-up menu interaction.
Raise Hand was a persistent emote while the rest were temporary. This emote behaved differently but looked like the rest. Clicking the X button to lower their hand wasn't clear.
With only 5 emote slots, users couldn’t practically express a wide range of emotions in a conversation. Sending an emote not on the preset list required overriding a preexisting one.
Emotes were displayed on the user’s video under their name tag
✦
Emotes could be easy to miss as they are spread across the screen around lot of visual distractions
✦
In larger groups, user videos were hidden in the carousel resulting in no visibility of shared emotes or raised hands
Emotes were displayed above the user’s avatar on the map
✦
Easy to see everyone’s reactions at a quick glance but could be hard to see who is emoting if crowded with avatars
✦
Most meeting conversations were not held in this mode, but rather in meeting or screen share mode
With the launch of the new navigation system, the full length toolbar opened up more options for the design of the emote menu.
However, my early design ideas led to variations of same old pop-up style emote menus. I felt I wasn't addressing the desire for a 1-click emoting experience. I then started to explore a form that fit into the toolbar itself and the rest was history.
✦
Hidden and required 3 steps to send an emote
✦
Not as scalable and blocked some of the canvas
✦
Can only send one emote at a time as menu closes after each emote is sent
✦
Share favorite emotes in 1 click
✦
Menu is open by default to encourage emoting but can be collapsed if desired
✦
Enables emote spamming similar to the hotkey function
I separated the ‘Raise Hand’ feature from the rest of the emotes by creating a new section within the hot bar and assigned it an icon button rather than using an emoji.
To address one-off emote situations, I added an icon button for ‘More Emotes’ that launches a pop-up menu with the full library of emotes. This menu includes the edit function to customize the emote hotbar.
The existing emote placements work for certain use cases, but for not larger group meetings. In this case, shared emotes are scattered and possibly hidden from everyone’s view.
I proposed adding a localized visual feed of all emotes shared during a conversation and ideated a bunch of concepts.
✦
Must easily recognize who sent the emote; Display name was more recognizable than avatar or initials
✦
Must be able to display multiple emotes at a time to enable button spamming and show emphasized emotion
✦
Must be easily scannable; Stacking vertically was easier to read at a fast pace
I landed on reusing the user video name tag design as it mirrored what users are used to seeing on the platform, kept the design components consistent, and saved development time.
I chose to display up to 4 user’s emotes at a time as it felt like an easy amount to scan and has a small footprint on screen.
Explored many different placements for the reaction feed on the screen and tested them in the different viewing modes.
I opted for anchoring the feed in the left bottom corner of the screen as this area was free from any existing UI and avoided blocking screen share presentations and user videos.
Reaction Feed – Meeting View
Reaction Feed – Screen share View
To bring more visibility to raised hands, I added persistent visual indicators on the video tiles and participants list, as well as moved up the position of their video in the carousel list. The reaction feed features the raised hand emoji temporarily like a normal emote.
Raised Hands – Meeting View
Raised Hands – Screen share View
In collaboration with the Art team, we created a full-screen visual effect that would appear if multiple users in a conversation shared the same emote in a given time frame.
To start off, we designed the effects around 2 popular preset emotes: the confetti popper 🎉 and the heart ❤️.
Working off the new Gather navigation design patterns, I designed the components, states, and visual indicators.
Prototyped micro-interactions for the emote bar in Figma and paired with Emily (Eng) to bring them to life.
Hover
Ready to explode with emotion
Spam
A release of high energy emotion
Raise Hand
Persistent and unmistakable from the rest
Worked with Josh and Emily (Eng) to determine how emotes are fed into the feed, especially if users are spamming at the same time.
Up from 10% from the old emote design. Shows an increase in awareness and interest in emoting during conversations.
The number of emotes shared every week jumped from 200k to 800k on average. The visibility and spammability must of made emoting addicting.
Emote bar usage skyrocketed with no drop off in keyboard input usage. Even though keyboard shortcut indicators were removed, keyboard input usage for emotes only increased.
This was lower than expected which may point to a discoverability issue
We realized it was much easier to hit the threshold to trigger the Community Reaction effects in smaller group conversations compared to larger meetings.
In April 2023, we made adjustments and the number of emoters experiencing a CR increased to 23%.
We received great interest from the community and within our own company to increase the number of emote slots available. Users wanted more options loaded into their hotbar to react with!
So we increased the number of slots from 5 → 7
%202.svg)
.svg){kind=icon}