The public and private chat features enhance the Gather platform by enabling guests to interact and connect during live events.
I spearheaded UI/UX design for both public and private chat, seamlessly integrating these new features into the existing guest and admin experiences on Google Gather. This journey involved stakeholder and user research, user flow creation, and the meticulous execution of the final UI for all feature components.
Created in 2021-2022. All designs for the Gather Chat feature were created in collaboration with the Google Gather team at Left Field Labs.Objectives
Enable real-time audience interaction.
Bring the sense of community and connection of physical conferences to the digital realm.
Enhance event engagement, attendance, and user retention.
Maintain visual consistency for platform integration and alignment with the Google brand.
Implement safeguards to ensure a safe, comfortable environment for atendees.
Provide an intuitive moderation experience for admins.
Project overview
The scope of work included designing the guest-facing interfaces for public chat and private chat, as well as the corresponding admin platform for both features, which allowed admins to effectively monitor activity on the feature during live events.
Public chat, watch page
Private chat, event landing page
Chat moderation, admin console
Public chat
As a highly-anticipated feature of the Google Gather digital events platform, the public chat feature aimed to enhance user engagement during live events, enabling attendees to actively participate in real-time discussions in a public forum. Our design efforts addressed several challenges, including the development of measures to prevent abuse, such as admin tools for guest bans and a flagging system. We also designed a robust, intuitive admin portal for chat moderation.
Regarding visual design, one significant challenge was integrating the chat feature into the attendee view interface, as the previous watch page layout would require some major changes to house the new feature. I devised a solution by modifying the pre-existing sidebar to include a dedicated chat tab, ensuring chat content had a prominent position in the live session experience. Additionally, we implemented an unseen content notification badge to highlight important information within the other tabs.
Launched in 2021, and enhanced throughout 2022.
Desktop view, with the sidebar expanded to show the active chat feed taking place during a live session
Ensuring safe and positive interactions
We recognized the importance of maintaining a safe and positive environment for attendees at Google Gather events, safeguarding them from inappropriate or offensive content. To achieve this, we implemented a system that allowed the community to actively participate in reporting inappropriate messages. I designed a system for attendees to flag messages, notifying admins for swift action. I also designed an efficient moderation system that empowered admins to maintain event quality without disrupting their workflow.
An excerpt from the annotated designs, which show the interactions involved in the message flagging process.
Mobile designs showing the designs I came up with for how to best support chat within the interactive feature sidebar ecosystem. Mobile portrait and landscape each entailed a unique set of challenges to solve for.
Process sketches
User flow diagrams I created to explore solutions for the high-level, fundamental decision about how to ethically allow users to opt in to the feature, while taking care not to discourage participation.
Exploring how to strategically update the pre-existing side panel component to support public chat.
Establishing concepts for how to adapt the desktop design to mobile. This was a challenging puzzle to solve due to the small space constraints. It involved strategic prioritization of features to ensure that the users were able to easily access chat and the other interactive features, without interrupting their ability to watch the live talk.
Wireframes
Some of the wireframes that I created to map out the UX, locking down key details of the user flow. I reviewed these thoroughly with the internal team and stakeholders before beginning on the visual design phase.
Guest-facing experience during live events.
Private chat
The Gather private chat feature was designed to enrich the community experience of digital events, bringing attendees closer to the networking aspects of in-person conferences and gatherings. It aimed to replicate the magic of real-life events, where people can meet, chat about the event, and learn about each other.
This feature enables guests to engage in direct messaging during events, both in one-on-one and group chats. To ensure a user-friendly experience, I designed the interface to be familiar, resembling popular direct messaging applications while aligning with the Google ecosystem.
The project involved intricate user flow design, addressing various scenarios such as initiating conversations, adding participants, leaving chats, managing blocked attendees, and the process of banning attendees from chat. I collaborated closely with the rest of the product team to ensure a seamless chat ecosystem and address emerging questions. For example, we considered scenarios like user sign-in status, the chat's behavior after an event ends, consent for adding participants to ongoing chats, and the privacy of private messages regarding moderation.
This project was the most complex feature on the Gather platform to date, and offered valuable insights into the process of designing versatile systems that accommodate diverse user interactions.
Launched in 2022 
An event landing page featuring the expanded visible attendees list. This list was designed in conjunction with the private chat feature, enabling guests to see who else is attending the event, as well as the ability to initiate messages by selecting individuals from the list.
An event landing page with the expanded private chat list, serving as the primary hub for ongoing conversations and initiating new ones. The design incorporates an unread content badge system, as well as logic to protect user privacy, keeping message content and the number of unread messages hidden until a new message is manually opened.
Mobile designs for key screens of the user flow.
Tablet designs to address the wide range of variability between touchscreen devices.
Hover interactions for the desktop interface of the private chat expanded menu.
Moderator presence
Moderators play a crucial role in maintaining a safe and abuse-free chat experience. They closely monitor the admin console and actively participate on the front end. Their status is indicated by a distinctive blue badge, which makes it easy for guests to locate moderators for assistance. Like many other feature elements, I carefully ensured a seamless experience when default labels are rendered in different languages.
Initiating a conversation
There are two methods for starting conversations in private chat: By clicking the “Start a conversation” button in the DM list, or locating a user and selecting the “Send message” option. The user flow below illustrates the first method.
User-to-user blocking
Participants can block specific guests from initiating private chats with them. This action is exclusive to guests, as moderators cannot block or be blocked.
Private chat window message states
The design visually indicates whether a conversation window contains new/unread messages by highlighting the header bar blue. It also includes the ability to collapse and expand conversation windows, optimizing screen space for viewing event content. These designs illustrate the intended stacking pattern for sent messages within conversation windows.
Process sketches
Page layout ideas for how to represent the DM list, which is the primary way for users to access private chat. This dealt with larger questions, such as whether the attendees list should only show users who opted into chat, or if it should show all users who opt in to be visible on the event.
Chat moderation
I designed a new chat moderation feature for the admin console, which offers event moderators a wholistic view of guest participation during events, and enables them to take action when necessary.
Primary objectives:
To make it easy for admins to observe attendee participation behavior during live events.
To set up tools that allow them to quickly resolve any issues, and take the necessary actions.
To enable admins to communicate with one another via features that enable multi-admin collaboration.
A few high-level observations from research findings, after interviewing a focus group of current users to better understand the current workflow of moderating events. These initial findings steered the first pass of designs for the chat admin experience.
Matrix I put together to align with the team on where each feature should be located, across both the front-end interface and the admin console (CMS).
Moderation user flow
Flow chart mapping out the key user flow in which the moderator handles messages that are flagged by guests in the public chat feed.
Process sketches
Initial sketches mapping out navigation options for the public chat moderation feature.
Exploring various ways to approach the need for admins to be able to block users, ban users, mark messages as hidden, and view the message status.
Establishing the logic around filters; mapping out which columns should be filterable, and which peramaters would be the most useful.
Admin console, design iterations
MVP version of the public chat moderation tab. This version was a solid start, but we realized after talking to our users that the Status column was too confusing. It was too hard to tell if a message was hidden or not. Combining message status and hidden state into one wasn’t intuitive enough.
The final version, featuring the final UI styling, as well as updates to the treatment of status and hidden. This version simplified status to “open”, “claimed”, and “closed”, and introduced a new column for “hidden”, which was a binary check-box to allow moderators to hide messages, and easily see if a message has already been marked.
An early draft of the attendee detail screen. It became apparent during user testing that this version didn’t include enough information; there was no way to view details of the reported content directly on the page, which we learned would be important for helping moderators make decisions around whether to ban a user.
The final version of the attendee detail page, which uses buttonized accordion rows, which give a clear indication that each row is clickable. Each row can be expanded to reveal a table containing relevant columns for each area. This version was also restyled to match the updated UI styles for the admin console.
The MVP version of the message detail page. This page allows moderators to get a full glance into the message context to determine what action to take regarding the message and its sender.
The updated version of the page, with styling redesigned to match the other UI updates for the admin console.
Moderator view from event interface
Admins have the option to moderate chat from the event interface, in addition to the admin console. Key features are available in both interfaces, to support both modes of moderation.
Wireframes illustrating the basic public chat moderator view interface, including the “Appear as Google” option, which lets moderators chose to appear as their own name, or to represent Google anonymously.
Wireframes outlining the hide-message flow available for the moderator view.
Excerpt from the final UI mockups of the hide-message flow moderator view.