ul{ margin-left: 40px; list-style:none; }

Axiom Design System

DEVELOPING A SCENARIO-DRIVEN DESIGN SYSTEM

While Calendly already had an established product component library, the marketing site required a different set of rules and interaction patterns to best serve the content and information needs. Primarily content complexity is higher and changes much more quickly. We needed a system that reduced complexity without compromising content quality and able to be changed quickly. And as the team grew, we needed a shared vision.

My Role

Design Systems, Design Ops, UI Design, Accessibility, UX Strategy

Collaborators

Front-end developers and product marketing

AXIOM-Hero

OUTCOME

Before implementing Axiom, stakeholders across marketing, product, and engineering had difficulty understanding the entire scope of developing a page design. This led to a lot of friction in the development process. During a quarterly innovation day, I paired with a front-end engineer and a member of the marketing team to launch a design system that would benefit all stakeholders and users. We built an internally accessed landing page to serve as an information hub and governance process for adding new components and pages.

A key feature of the system was the ability for anybody on the marketing team to go in and test how their content would look on a live component. They could check how content would look in production -saving time for both design and development.

Defining a "Single source of truth"

Together the resources below serve as a "single source of truth" for the marketing site allowing for greater understanding and collaboration across teams. The shared ownership means that there is buy-in across teams and the system accurately (as possible) reflects current process and patterns. 

Content Style Guide

Owned by Marketing
Learn how to understand and write in the Calendly voice and tone for a more unified brand experience.

Design Fundamentals

Owned by Design
Learn the visual elements of the systems such as typography, iconography, colors, and grids.

Live Component Library

Owned by Engineering
Learn how to use components to test out the spacing and look of common style patterns in a live environment.

AXIOM HOME PAGE

Key design system goals

Designing at scale presents many challenges. You have to be aware that every choice from font size to line color to button placement affects the experience of a person on the other end. But at the same time, you cannot design for every single person. You have to make tradeoffs.

In developing Axiom, I wanted to create a system that kept a couple of key questions at the center:

How do we create a site that increases conversion but doesn't sacrifice quality and UX?

Focus on information clarity and user product education
Use content and illustration to develop a clean, smart brand voice

How do we build a site that meets accessibility standards while meeting production deadlines?

Follow known design and usability patterns
Ruthlessly edit content and illustrations to the essentials

CONDUCTING AN INTERNAL AUDIT

Before developing Axiom, I had conducted an internal audit of all the various design and illustration patterns across the marketing site. I condensed these findings into the new guidelines for both illustration and UI design. I surfaced these on the website to ensure that I was designing with these fundamentals in mind.

Color-Contrast
This exerpt from the Design Fundamentals shows which color combinations are acceptable to design with and for what UI component.

Defining scope from the start

With Axiom as the foundation, the page development kits consist of design components, working code, design tools and resources, and guidelines for project kickoff. They serve as a framework for building web pages on the marketing site. This helped reduce instances of "scope creep" on projects because everyone started with a clear idea of the workload required. It was not meant to be inflexible but changing tiers meant everyone accepted what that would mean for deadlines and effort.

Tier 1

Speak to the majority, if not all, of the visitors to the Calendly website

Interconnect with other pages to create intentional user flows throughout the site

Highest narrative structuring and design thinking with goals for what a successful design will do

Tier 2

Target a specific subset or vertical of website visitors

Interconnect with other pages, should be linked to from a T1 page, and contain links to T3 pages

Narrative structuring but use components and patterns established and optimized on the Tier 1 pages

Tier 3

Serve as supporting or reference materials, with a single purpose and function as templates

Standard connections to the main pages but do not have to be as interconnected as T1 or T2 pages.

Single goal for what they will do 

DEVELOPING THE TIERS

Each tier has three sections aimed at addressing the major components of page development. I included language and goals that encompass marketing, design, and engineering lift for each tier. Prior to the development of Axiom, I published internal documentation to help people understand the user flows and information architecture from different perspectives.

I published internal documentation to help people understand the user flows and information architecture from different perspectives. This particular exerpt looks at how pages connect with each other. I used an webapp to create the maps so people could interact with the levels themselves.

Reflection

Building Axiom was an ongoing process. In setting up these processes and guidelines, I hope to pass the benefits to users of the site through increased clarity and usability of the marketing site.  Piece by piece building a solid design foundation while maintaining flexibility for future changes.

Before the innovation day, I had put several months of work into conducting internal design audits, publishing documentation, and trying to understand the full marketing to design to development process. But it was hard to get buy-in to devote engineering resources to developing the design system in the code base. So when the engineering held their first innovation day, I siezed the opportunity to jumpstart the effort.  This project was probably one of my proudest moments at Calendly, because it proved it's value in the end. Through increased communication and transparency, we designed and developed quality pages more efficiently. 

Designed by Rachel Arredondo