Headline Google Calendar

With over 500 million users Google Calendar is one of the most used products in the world. Across four years I worked on numerous Interaction and visual design projects across Mobile and Desktop – and guided the team through two major design overhauls

A smartphone showing the Google Calendar UI during event schedulingA MacBook Pro showing the Google Calendar UI during event creation

During my time on Google Calendar, I led the design system efforts for both mobile and desktop platforms – and guided the team through two major design updates: Material Design 2 and the recent Material You (Material Design 3) implementation.
Throughout this multi-year effort, our overarching goals were twofold: First, we wanted to improve cross-platform consistency and create a more cohesive user experience. Second, we aimed to create a distinct visual language for Google Calendar to strengthen brand recognition and user association with the product.

As Google Workspace products become increasingly integrated, a unified design system is crucial to break down silos and create a holistic user experience across the suite of products. 

The initial vision for Google’s biggest design update in years, Material You, only included a basic idea for the overall look and feel. Therefore, my main challenge for this effort was to not only lead the implementation of the new design system within Google Calendar, but to also collaborate with designers across Workspace and Material Design to define the new visual language. To achieve this, I co-led a working group spanning eight Workspace teams, facilitated workshops with product managers and engineers, and developed internal design guidelines and tooling.
The biggest hurdle in all of this? Over 500 million users rely on Google Calendar regularly. Therefore, making changes without disrupting established workflows was a top priority.

VISUAL DESIGN 
FRAMEWORK

My role
Visual Design

The task: Create a consistent Calendar design framework

The challenge: How to embrace the Google brand identity without giving away Calendar’s visual character?

A screenshot of Google Calendar's mobile experienceA screenshot of Google Calendar's tablet experienceA screenshot of Google Calendar's desktop experience

Material Design’s core principles are key to achieving a strong brand identity and consistent user experience. These include leveraging white space as an active design element and expressing Google’s brand through componentry.

Google Calendar prioritizes clean layouts by embracing generous white space. This eliminates the need for visual containers and unnecessary dividers. Instead, the design relies on clear element alignment and an adaptive spacing system to ensure a structured user interface across all platforms.

A screenshot of Google Calendar's 3-day view on desktop

However, to truly elevate Calendar's brand identity within the suite, we prioritized core Calendar elements like the grid and today indicator.

A Apple MacBook Pro showing the Google Calendar UI with the month view selected. The laptop sits on a circular mirror

While the importance of a unified today indicator seems self-evident now, numerous design variations previously existed across desktop, mobile, emails, and marketing materials. The new design streamlines the user experience by providing a clear visual focal point within the app.

This achievement wasn't solely reliant on UI design; The biggest challenge was to achieve consensus among stakeholders and ensure consistent technical implementation across multiple teams.

A smartphone showing the Google Calendar UI. The schedule view is shown A smartphone showing the Google Calendar UI. The month view is shownA smartphone showing the Google Calendar UI. The mini month is shown
T
O
D
A
Y

‍A central design library became the cornerstone of the visual design framework. This library extends beyond Calendar-specific components, ensuring a consistent user experience by sharing and reusing elements across all Workspace products. To achieve this, I collaborated with designers across teams and developed a pipeline for creating, maintaining, and adding components to the library.

The Calendar library is now used by over 200 teams across Google, with more than 20,000 component insertions per week.
And since a design library in Figma only gets you so far, I closely collaborated with engineers on Android, iOS and the web to bring components and design tokens to life.

A person holding a smartphone with both hands. The screen shows the Google Calendar UI with the dark theme enabledA phone screen showing the Google Calendar UI with the dark theme enabled

DARK THEME

Following the successful rollout of Material Design and a robust token system, the frequently requested dark theme was a natural next step for Google Calendar. I led both Interaction and Visual Design for the project. The key challenge? Google Calendar's functionality relies heavily on color distinction – and the product's vibrant color scheme could lead to increased eye strain in low-light conditions.

My roles
Interaction Design
Visual Design

To address usability concerns in low-light environments, I explored various proposals for color mapping between light and dark mode. The final solution – a subtle yet effective approach – maintains consistent color rendering across most setups. This is achieved through dynamic adjustments to color saturation and perceived brightness, ultimately reducing eye strain and significantly improving usability in challenging lighting conditions.The Material Design team showcased our system at Google IO, and it was later adopted by other products like Google Home.

iOS WIDGET

With Apple introducing widgets on iOS we had the unique opportunity to design a tailored experience for Google Calendar from the ground up. I led the entire project from the UX side – from initial vision and feature set definition through to implementation.
The final widget comes in two sizes, offering essential features for users to manage their day without needing to open the full app. The widget seamlessly integrates with the Google Workspace environment, providing users with one-tap actions to join meetings, initiate chats, and create new events or tasks – all without ever leaving their home screen.

My roles
Interaction Design
Visual Design
A screenshot of the medium sized Google Calendar widget

Google aimed to launch all their widgets on day one – which required close collaboration with other designers, project managers and engineers across the company. Furthermore, Apple’s own Calendar widget obviously had a head start. We defined a feature set that clearly differentiates Google Calendar as a product and provides additional value to our more business-focussed target audience.

A phone screen showing the Google Calendar widget with the dark theme enabled

As with all other design efforts within the Workspace and Google ecosystem this project required close collaboration across teams and disciplines. While each implementation has its own personality, key UX and UI patterns are shared on both the design and engineering side. This collaborative approach significantly reduced development timeframes, enabling us to deliver the entire suite of widgets within a mere few weeks.

A phone screen showing a Google Workspace widget
A phone screen showing a Google Workspace widget
A phone screen showing a Google Workspace widget
A phone screen showing a Google Workspace widget

While each Google widget has its own personality, we designed key components in partnership for both the design and engineering side, thereby significantly reducing development times.

Google Chrome

A phone screen showing a Google Workspace widget

While each Google widget has its own personality, we designed key components in partnership for both the design and engineering side, thereby significantly reducing development times.

Gmail

A phone screen showing a Google Workspace widget

While each Google widget has its own personality, we designed key components in partnership for both the design and engineering side, thereby significantly reducing development times.

Google Drive

A phone screen showing a Google Workspace widget

While each Google widget has its own personality, we designed key components in partnership for both the design and engineering side, thereby significantly reducing development times.

Google Calendar

A phone screen showing a Google Workspace widget

Moving beyond a static list of events, the widget dynamically adjusts its rendering throughout the day. This also includes intelligently grouping calendar entries to make optimal use of the limited space available.

Moving beyond a static list of events, the widget dynamically adjusts its rendering throughout the day. This also includes intelligently grouping calendar entries to make optimal use of the limited space available.

AM

A screenshot of the medium sized Google Calendar widget
A screenshot of the medium sized Google Calendar widget
A screenshot of the medium sized Google Calendar widget

PM

Color labels

Many Calendar users rely heavily on color coding their events for a more structured scheduling experience. To better support this behavior we explored various ways to add semantic meaning to calendar entries. 

My roles
Interaction Design
Visual Design
A screenshot of the right-click context menu from Google Calendar's desktop experience. The user can accept or decline the event, pick a color or assign a named color label

The challenges: right from the outset, we knew that we wouldn’t be able to launch color labels on all platforms simultaneously. Additionally, users often sync their calendars with other products like Outlook or by sharing .ics files. In essence, we had to make sure that the users’ workflows don’t break even if the feature was not supported on every client.

The final solution is straightforward and intuitive, primarily due to its inherent simplicity.  Rather than introducing a completely new labeling mechanism, we capitalized on the existing calendar color system, enabling users to assign custom names for better organization. This approach ensures cross-platform and cross-calendar-client compatibility, as labels can be effortlessly included or excluded within .ics files.

A screenshot of Google Calendar's Time Insights feature on desktop

With color labels we saw an additional opportunity: a few months earlier the team had introduced Time Insights – a new way to help users better understand how they spend their time. Initially, Time Insights focused solely on event types and meeting attendees. We recognized the potential for even greater user value and strategically expanded the feature to include breakdowns based on user-defined color labels.

Google Workspace Rebrand

As Google's work tools achieved tighter integration and a wealth of new features, the G Suite brand no longer fully captured their potential. To clearly communicate this evolution and position the suite as the premier productivity solution, we partnered with Wolff Ollins to launch Google Workspace.

My roles
Brand Design
Visual Design
A photo of the Google Calendar logo printed on a poster next to the entrance of a colorful building
A billboard in an American city on the west coast showing five logos of Google Workspace productsA screenshot of Google Calendar's desktop UI highlighting the new logo in the top left corner

Together with Visual Designers from across the org I closely collaborated with the agency to guide the process from the product side. This included briefings and feedback check-ins, but also design solutions for specific use cases, such as Calendar's dynamic logo, system icons, and favicons. Additionally, I partnered with an external motion designer to bring Calendar's logo to life – not just for marketing purposes, but also for the app's splash screen.

Two larger wall paintings on a brick-stone building in an American city. The paintings show ads for Google Workspace

Other projects