Google Gather empowers Google teams to effortlessly create, manage, and host their own digital events.
I began as a contributor to the project in 2018 and assumed a lead design role from 2019 to 2022, overseeing design for all aspects of the product, including the client-facing content management interface and responsive website templates.
All designs for Google Gather were created in collaboration with the Google Gather team at Left Field Labs.Product design overview
As the product design lead for Gather, I addressed the diverse needs of key user groups, including product owners, product marketing managers, event administrators, and attendees seeking insights from experts within Google on a wide range of technology topics.
In terms of UX, designing for the admin console required in-depth understanding of the overall user experience and workflow. Simultaneously, optimizing the guest experience on the front-end and seamlessly integrating the two was paramount.
In the realm of UI, a primary goal was to align the guest-facing websites with Google's brand guidelines. This involved the challenge of applying Google's evolving design standards to Gather while allowing room for interpretation. Attention to detail was a critical skill, and I ensured pixel-perfection in every design, providing not only mobile and desktop designs, but detailed responsive development guides for all browser sizes.
Though designing templates may not seem as glamorous as creating custom pages, it expanded my design thinking in valuable ways. It taught me to prioritize practicality and versatility, focusing on what users need and what options should be available. This role taught me to think in terms of design systems, and how to zoom out.
The admin portal
The content management system (CMS) is the heart of the Gather product; the place where administrators create content and manage real-time events and pages. Each new feature I designed for Gather was a dual effort, encompassing the guest-facing web interface and the CMS to ensure seamless integration between the guest and admin experiences. While the original CMS had existed for years before my tenure, I dedicated four years to revitalizing it both visually and functionally. Throughout this journey, I collaborated closely with the team to align the CMS with Google's visual standards and introduced numerous new features annually.
Event page dashboard: Every event is accessed through the dashboard, which serves as the launch-off point to update content, run events, and moderate them.
Event detail page page: To set up new events, admins upload text and imagery, and interact with the various UI controls.
Process sketches for the Publishing and Validations feature, which I designed to make it easier for admins of various permission roles to ensure that all required components of the event templates have been fulfilled. I explored numerous solutions, and eventually landed on a straightforward system of warnings and notifications. The eventual solution was a sticky tab component fixed to the right edge of the screen, which can be expanded to reveal details and additional options.
Sketches that I made to quickly iterate on various navigation concepts for the CMS IA redesign. I explored a few alternate approaches to the breadcrumbs, side navigation, and interaction of page links, before landing on the final approved design, as featured in the screens above.
Gather platform hierarchy
Gather hosts numerous instances within Google, each dedicated to a specific product or service team. These teams utilize Gather's templates to structure their event platforms.
Platform objectives
Attendee Experience: Enhance the attendee experience by bringing the sense of community and connection typically found in physical conferences to the digital realm. This includes improving event engagement, attendance rates, and user retention. Implement safeguards to ensure a safe and comfortable environment for all participants. Encourage the discoverability of events, sessions, and series while upholding visual alignment and adhering to UX best practices according to Google Standards.
Admin Experience: Provide admins with an intuitive interface to effortlessly create events, sessions, series, speakers, and resources. Streamline the process for admins to add and update content, improving efficiency. Enhance the event moderation experience for admins and make it easier to identify setup errors made by any user.
Flow chart I created to outline the registration flow, a crucial stage in the attendee experience. The number of registered guests is one of the key metrics for the platform, and the first step of the goal to increase event viewership.
Gather Instance homepage template
Every team has a homepage within their Gather instance, serving as the hub for their series and events.
Careers on Air homepage. Visit site
Responsive UI designs I created for mobile, tablet, and desktop XL breakpoints. For every template, I always provided a set of 6 breakpoints to developers, to reduce back-and-forth of scaling and layout during testing.
Below, you'll find a live carousel showcasing three additional examples of sites that have utilized the template, highlighting its extensive customization options tailored to meet the diverse branding and functional needs of each team using Gather. Click on each image to view the live site.
As the first instance on Gather, this HP template was tailored to their organizational needs. Subsequent updates increased its flexibility to accommodate new instances.
Ads OnAir uses the featured module (located below the event hero) as a way to highlight certain high profile or upcoming events.
Edu OnAir's page is currently using a row of Series cards to offer a quick way for guests to view event series from the homepage.
Android OnAir has chosen to use the centered hero option. The hero slide has a left/right option as well as a centered option, giving flexibility to admins on content display.
Startups on Air homepage
Admob on Air homepage
Series page template
Series pages promote and showcase event collections with specific audiences or themes. Users can follow relevant series, and teams often create sets of series with branded programs that complement each other.
led the design for the Series page template, created in response to stakeholder demand for a second level of hierarchy between instances and events. Prior to this feature, teams resorted to using an inadequate workaround, using event templates to host multiple single-session events. This solution was suboptimal for both administrators and guests, prompting the development of Series pages to enhance the user experience.
Example of a site built using the Series template. Visit site
Default event page template
Although the Gather platform offers multiple event page templates, the default template is the original and most robust. It accommodates an unlimited number of sessions, which can be either categorized or organized into tracks within the agenda. Additionally, it includes subpages like speakers, resources, and FAQs. The centerpiece of the interactive experience is the watch page, active during live sessions or available for on-demand viewing. During my tenure on the Gather team, I designed numerous new features and enhanced existing elements of this template. Throughout my tenure on the Gather team, I designed numerous new features and enhanced existing elements of this template to create a seamless guest experience, allowing guests to discover, register, and attend digital events.
Event landing page
This page features a dynamic hero section with the event title, image, and description, along with an agenda and versatile content modules for text, images, videos, and social sharing. This is the primary source of information about an event before, during, and after it airs.
The event landing page includes immense customizability. The image above shows files I created for the “text-image module”, which was an optional module type that could be added to any event page to allow admins to add images and text. For every permutation, I included specific specs and dimensions for each breakpoint.
2. Speakers page
Here, guests can discover the event's speakers via a grid that includes their images, names, titles, and associated sessions. Clicking on a speaker opens a modal detail view which also includes a description.
3. Resources page
This page shows all resources which have been added to the event. Event admins can provide links to reference materials, such as downloadable files or external links, often including white papers, briefs, and supporting documents for further reading.
4. FAQ page
This page can be enabled to surface commonly asked questions, and a way for admins to provide additional informative content to guests. It includes an expandable accordion, and a custom image.
5. Watch page
The Watch Page serves as the central hub of the Gather event experience, where guests can access both live and on-demand sessions. It features a customizable video player with pause and resume functionality, presenting essential session details, including title, time, speaker names, and descriptions. Additionally, it hosts a live Q&A module, enabling registered guests to ask questions and event admins to respond. In response to the demand for enhanced interactivity, I designed a live event sidebar that offers informative and interactive features such as polls, suggested events, notifications about other live or upcoming sessions, and public chat.
Process sketches showing the explorations I did for the announcements and interactive features panel. This eventually resulted in the sidebar pinned to the right side of the screen, as shown below. Before landing on that design, I explored numerous layout options, and eventually chose the sidebar because it proved to be the least distracting during live events, and presented the information in the cleanest, easiest to digest manner.
Process sketches exploring how the sidebar design would carry over to mobile. I looked into a variety of options for how the content would expand and collapse, with the goal of landing on the most intuitive solution.
This screen displays the default state with the expanded sidebar, featuring the "Chat" tab selected, providing a public chat feed for all registered participants during live sessions.
The user can manually collapse the sidebar drawer at any time by selecting the arrow at the top of the sidebar navigation.
The "Live now" tab shows other sessions within the event concurrently airing. This was designed to increase visibility for other tracks and concurrent sessions during larger events.
The "Starting in 30 minutes" tab shows other sessions within the event that are starting soon.
The "Poll" tab is a place to showcase interactive polling content during live events, to increase audience engagement. The results are displayed to guests after the poll closes.
The "Suggested event" tab creates an opportunity for team admins to promote upcoming events, which guests watching the current session may be interested in.
State-driven framework
Every aspect of the Gather platform is state-driven, adjusting the user experience based on the current state of events and sessions. For instance, the default template presents a countdown bar and registration options before an event, a “Watch live” call-to-action during a live event, and “Watch on-demand” options after the event, referencing the original air date. All new features for the template must consider these three states.
Additionally, across various templates, session and event representation is always accompanied by a status indicator chip to denote its current state, whether it’s “live”, “on-demand”, or “registered”.
The platform also accounts for various user states, displaying a limited experience for unauthenticated or non-account users. It also considers whether an event is gated, open to the public, or restricted to invited guests.
To ensure a comprehensive user flow, I closely collaborated with the product team and partnered with engineers to gain a deep understanding of the platform's capabilities and limitations. Every day, I learned new things about how things worked and why. Designing within this complex ecosystem required both a profound knowledge of the platform infrastructure and a high-level understanding of its construction. I take pride in contributing meaningful enhancements to the platform, improving both its visual appeal and the seamless functionality of the admin and guest experience.
I designed status indicator chips used throughout the platform, including on event cards, in search results, and within the 'Starting soon' and 'Also live' tabs on the watch page sidebar, each tailored to the corresponding context.
Ensuring platform consistency
To facilitate a seamless experience as users navigate between various pages within the Gather hierarchy, maintaining consistency in terms of UI and usability is essential. I upheld a component library which was used to create screens by myself and my team. I also consistently made rounds of updates to UI based on periodic refreshes to the Google Standards web and product guidelines.
I put together these annotated designs as part of a handoff package for a header redesign project, where I outlined a comprehensive batch of header updates to make that would span across all three of the key templates. It includes not only the design components, but screenshots of the current build to emphasize what needs to change. Since the header is visible across all templates, ensuring consistency in terms of functionality and visual appearance was crucial.