Calendly Adopts an Accessible, Iterative Approach to Design Systems

Who is Calendly?

Calendly is the #1 SaaS scheduling platform in the world. It has over 10 million users and over 50,000 companies that rely on its scheduling tool. 

Problem: No Brand Consistency Established for the Calendly Website

Calendly’s Marketing team wished to iterate existing elements and components without disrupting going to market promptly.

Unfortunately, they were missing an important piece of the formula that allows for speed to market: a design system, otherwise known as a brand’s visual language.

Calendly’s underlying issue was that they were lacking a consistent brand language for their website—a marketer’s playground. Their marketing team didn’t have the visual language to empower them to create pages that were cohesive and on-brand.

Solution: Create and Implement an Atomic Design System

We recommended a solution that no longer restricts marketers from transforming a brand’s identity or forces them to focus solely on individual products and not the pieces that assemble them.

Migrating to an Atomic Design Approach

To create, iterate, and transform website pages and assets like Calendly wished to, they needed a new approach to establishing their visual language.

Our creative team implemented the atomic design approach to rebuild Calendly’s design system using existing assets, branded guides on their website, and other documentation.

Figma Design, a web-based prototyping tool for designers, was relied on to organize and build the building blocks of Calendly’s design system using the atomic methodology.

Our team started with Calendly’s smallest design elements, including labels, buttons, inputs, brand colors, and typography. In the atomic approach, these elements are known as atoms.

That way, teams can build more complex beings by grouping elements to build larger aspects of the website or a specific page. These parts of an asset are known as organisms.

Once Calendly defined its atoms, molecules, and organisms, the next step was to build templates. Templates consist of the previous building blocks and are used to orchestrate the user interface of a page.

The ultimate goal of the atomic approach is to use atoms to build iterative, accessible website pages that can be altered without disrupting the brand’s consistency. In the example above, there are two variants of a page that use the same building blocks established in the previous steps.

The power of a design system is that it allows anyone on the Calendly team to make one change to an element and have it reflect in every other instance that the element or design component exists without breaking consistency.

Now, Calendly’s marketing team has a source of truth for their website, meeting accessibility and consistency requirements. 

A Seamless Feedback Loop with the Slack-Figma Integration

Because Figma has a comment feature that is agile and accessible to anyone in the organization, communication was seamless.

The majority of the communication between our creative team and Calendly happened over Figma. We leveraged the Slack-Figma integration to receive notifications directly in Slack. 

In addition, all the comments and conversations that occur in Figma and Slack are documented, unlike an email inbox where messaging gets lost or things get lost in translation. 

This consistent, efficient feedback loop ensured that Calendly was voicing its concerns, questions, and approvals quickly to meet the demands of their speed to market strategy.

Outcome: A Shared Language That Increased Agility, Speed to Market, & Scalability

As a result, Calendly now has an evolving design system that consists of 60 total design components and 4 total design templates.

The number of branded components and design templates allows Calendly to launch assets, website pages, and more in a fraction of the time. They now have an established visual language that can be used across departments and for different purposes; like split testing.

Calendly Increases Their Split Testing Efforts

By having an arsenal of design components, Calendly conducted a split test for their newly designed pricing page. The goal of the split test was to find which variant of the pricing page yielded more clicks, page views, and, most importantly, conversions.

The visual language developed using the atomic approach allowed the Calendly team to mix and match components on the pricing page and create the page variants they wished to test. When they approach the next round of split testing, the process will be as simple.

The design system is the middleman between the Marketing and Development teams. Calendly is now free to test and transform its brand identity while staying within the guardrails set by the design system while maintaining brand consistency.