My Events enhances user personalization on Gather by providing a central hub for accessing past interactions and discovering new events, series, and sessions.
As part of a larger effort to enhance user personalization on the Google Gather platform, this feature stood out as the most extensive and involved. As Product Design Lead on the Gather team, I oversaw design for the feature, including product strategy, information architecture and site mapping, concept, guiding internal discovery sessions, executing final UI, addressing implementation feedback from engineers, and presenting concepts to stakeholders.
Designs completed in 2022, created in collaboration with the Google Gather team at Left Field Labs.
Project overview
Positioned as the next evolutionary step of the Gather platform, My Events aimed to empower teams to efficiently organize their content for user consumption, thereby fostering enhanced engagement and attendee retention. Aligned with the recent launch of user profile and attendee settings features, this project elevated the concept of personalizing the attendee experience to new heights.
Prior to the introduction of My Events, users lacked a means to easily review content they had previously interacted with, spanning watched sessions and events, registered events, viewed resources, and registered series. Our team recognized a significant opportunity to bolster user retention with the development of a consolidated hub where users could access past content and explore upcoming events.
The project’s scope extended to encompass complementary features, including the "save to favorites" functionality, facilitating the preservation of various content tiers within a designated "favorites" section housed within My Events. Additionally, we introduced the notion of marking events and sessions with an "attended" indicator, visible not only within the My Events dashboard but also throughout the platform.
Because My Events inherently references other key parts of the Gather platform, my extensive platform knowledge facilitated a systems thinking approach. With a deep understanding of guest and admin behaviors, as well as the platform's hierarchical structure, I made informed decisions to ensure seamless integration.
Responsive designs for the My Events home page, which offers a launch-off point to other pages of the platform, via not only the navigation but via the CTAs on individual rows which correspond to each key page.
Strategy and discovery
The discovery phase of this project encompassed a high-level design systems lens, as I led internal sessions with the design team and our larger product team to discuss the approach.
The final version of the site map that I created and shared with the team, outlining the structure of how My Events would integrate within the other features related to the user personalization initiative.
Site map I created to align with the team on solutions for how to increase traffic to the new My Events portal.
Table that I created to aid in the decision-making process around aligning on the saving feature’s affordance design and destination label. This included selecting an icon that best indicated what user action would be made available by selecting it, and the title of the destination location. To recap on internal discussions, and my own research on the topic, I created this matrix and shared it with my design team, as well as the larger internal team. The clean matrix proved to be a successful tool in facilitating internal alignment, and we were able to sign off on my proposed solution, the blue bookmark.
Prioritization of features proposed by stakeholders, synthesizing internal discussions with engineering, design, and project management. As Product Design Lead, I was heavily involved in planning discussions, and helped steer the product vision towards feasible solutions that would satisfy our partners’ goals, while setting reasonable timeline and LOE expectations.
UX and Interaction design
Before jumping into executing the pixel-perfect UI, I thoroughly addressed the project UX from a high-level point of view, as well as the interaction specifics, such as outlining the logic around how individual components would behave in various conditional scenarios. Since this feature was aimed to address a wide range of instances (various teams at Google using Gather to host their events), and a wide range of users (with different goals and motivations for using Gather), it involved a significant degree of strategic thinking to ensure that the feature would be beneficial to everyone.
Diagram outlining the behavior of each row on the home page, including conditional logic I proposed to the engineering team around how each row would appear to users when varying amount of content was available.
Mobile nav exploration, where I explored options for how the multi-tiered navigation would translate from to clean desktop sidebar to mobile. For each option, I assessed whether the navigation accomplished each of these four crucial goals:
1. Convey that these tabs are a part of My events
2. Reinforce the heirarchy between the sub-sections and the parent
3. Allow the user to tab back to the My events tab
4. Maintain notion that My events is one of 3 parent-navigation tabs
As the introduction of the “saving to favorites” functionality would span beyond the bounds of the My Events design itself, I put a lot of thought into how the feature would integrate with integrating components of the platform. This diagram outlines the final solution that I proposed to the team, which shows how the saving affordance design guides users into knowing how to interact with the feature, as well as how to locate their saved content in My Events.
I outlined all of the areas of the platform where the saving functionality should be supported, considering data around current user behavior with the existing features to determine would ones would be the most useful to them.
I explored several scroll behavior patterns, making low-fidelity interactive prototypes for each. After testing out prototypes of several versions to determine which content should be sticky and which content should scroll, we decided that the page title and description could inconsequentially scroll out of view, since the title was already present in the side nav. We determined that it was crucial for the content type tabs, as well as any page-level filters to persistently remain in view as the user scrolled, thereby landing a secondary sticky nav bar, where layers content would stack when present.
Sketches showing the process I went through of outlining the functionality of the “Attended” filter on the Activity page. I explored several options, such as V1 with two binary chips, and V2 with a dropdown menu on “All activity”.
This sketch shows an earlier version of the “Attended” filter, where I initially considered including it along with other filter perameters, such as language options.
This sketch shows the exploratory process I went through of quickly iterating on various interaction models for the date range selector. After drafting up several versions as low-fidelity sketches, I mocked up several potential options in Figma, to assess which would be the cleanest solution.
Visual design
The UI phase leveraged pre-existing visual components from the Gather visual design system, while taking the opportunity to address any inconsistencies across the platform. In the UI phase, I carefully designed and applied patterns throughout the prolific set of screens depicting all of the permutations of the new feature. To reduce any inconsistencies between screens, I directed my team to follow a consistent approach of creating symbols and applying them systematically in Figma. I also applied significant attention to detail in all interactive components, as well as the responsive designs for each documented screen size.
Grid design supporting six breakpoints and how to adapt the design to gracefully transition between each one. This grid was applied to each key screen of the user flow.
The My Events home page design, showing two different mobile breakpoints, and one desktop breakpoint. This screen serves as the launching point for all other areas of My Events.
Registered page, Events tab: Lets users explore events they have saved to favorites.
Favorites page, Sessions tab: Lets users explore sessions they have saved to favorites.
Favorites page, Series tab: Lets users explore series they have saved to favorites.
Activity page filters. Final annotations I created as part of the development handoff, to outline the complete UI, as well as the interaction details, to ensure an easy experience of filtering and locating content within potentially dense lists.
After locking down the logic behind how each area of the layout would appear to users when there is no content to display during the UX phase, my partner and I designed how each icon would appear. We selecting the appropriate icons from the material icons library, occasionally designing custom ones if no suitable one was available. I devised a color system, which would base the color on each page, rather than on content type.
The file I created to document the final UI for the pagination components, as well as annotations around the expected interactions and behavior.
Final documentation outlining the expected functionality and UI components for the “Load more” option, which will appear at the bottom of each section when there are five or more items. The goal was to prevent the scenario in which a user has a very long list of “live” events, or “Upcoming” below, thereby pushing down the appearance of the subsequent sections. Designing these kinds of safeguards are a pivotal part of the design approach for Gather, due to the nature of the template-based platform, with content display subject to numerous variables.
An excerpt of the large set of designs I created for how the new function of “saving to favorites” would impact the rest of the platform. I adjusted the UI for all of the identified areas where the saving action should be available to users. Each individual card type has a distinct layout, and while I was able to identify patterns to reduce the number of variations, the solution was custom-tailored for each location.
Annotated designs that I handed off for development after reviewing the functional details internally. I based the tabs off of the Google Marketing Web standards, but adjusted them to fit the specific layout needs of our pages. I included the variable sizes based on the number of items per page, for each of the key breakpoints.