Axiom is a design and illustration system built to reduce complexity and increase development speed —without compromising quality. In early 2019, Calendly was rapidly scaling but so was the complexity—more pages, more content, more illustrations, and it needed to happen quicker.

my role

Sole UX/Visual Designer

collaborators

Front-end developers, product marketing, PMs, QA

my role

Feb 2018 - Nov 2019

outcome

Inter_3.0-Axiom-2-1

overview

I joined Calendly as the first visual designer and illustrator for marketing and web development team. As the only designer, I wore a lot of hats designing everything from conference booths for the marketing team, API's for the engineering team to employee branding for the recruiting team.

However, one of the major projects during this time was evolving the Calendly brand aesthetic which had not been changed since the company launched. I developed Axiom as a systematized approach to evolving Calendly’s design and illustration style balancing internal constraints with user needs.

+63%

conversion rate

+17%

page traffic

+23%

demo & sales leads

one month after launching redesigned pages

During a quarterly innovation day, I paired with a front-end engineer and product marketer to launch Axiom. After the innovation day, I worked closely with the marketing and engineering teams to bring this system to life to the pixel and word. We scaled the design process to other teams needing pages and content developed from business development, recruiting, and compliance.

challenge

In the early days, there was little hierarchy, process, or documentation to developing content for the marketing site. And as new pages and illustrations were added style inconsistencies started to arise.

Axiom-Illo-01_v2

no common design language

research

In the months before launching Axiom, I interviewed everyone I worked with from Marketing to QA to Customer Experience digging into what were the painpoints in the current process. I talked to users on their experience on the marketing site. I attended conferences on design systems (twice!). I audited every icon, illustration, and UX pattern on the site. I published internal documentation on site usage patterns and accessibility.

Axiom-Illo-02

airtable illustration audit excerpt

transparency & governance

This research revealed stakeholders across marketing, product, and engineering had difficulty understanding the entire development pipeline causing delays and development difficulties. One of they key parts of Axiom’s launch was communicating the design to development process and creating a sense of shared ownership.

casestudy_Axiom-landingpage_01

 internal landing page on guidelines for developing new content

casestudy_Axiom-landingpage_02

setting expectations with a clear design to development process

live component library for testing input interactivity

system design

After auditing the current patterns, I identified key areas for updating the brand style. As the new kid on the block, the Calendly brand needed an updated feel without a complete overhaul. Using Brad Frost’s Atomic Design methodology and IBM’s Carbon design system as a reference, I methodically defined everything from vertical spacing standards based on content type to defining button style hierarchy. I pushed to move the marketing design work from Sketch to Figma to make use of Figma’s native design system capabilities.

guidelines for using buttons on the marketing site

Axiom-Illo-03_v2

guidelines for ensuring consistent spacing across pages and content

Axiom-Illo-04

guidelines for ensuring accessibility

Axiom-Illo-05

Axiom differs from product design systems. I had to split from conventional methods to design a system that updated more dynamically to fit the needs of the marketing team. I designed the modules with a style agnostic approach. Each module type captured a common UX pattern on the site and then defined possible adaptations for a given scenario using illustration and icons.

Axiom-Illo-06_v2

card based scenarios

Axiom-Illo-07_v2

page header scenarios

illustration system

Starting with the audit, I categorized each illustration and icon style and created guidelines for line width, size, color, and narrative.

narrative style

A conceptual focus on the benefits of what Calendly can do. This style uses playful and metaphor based imagery designed to compliment the concepts.

Illustration-Narrative-03
Illustration-Narrative-01

technical style

A detailed explanation of how a feature or workflow in Calendly works. This style brings focus to how the more complex part of the product work.

Illustration-Technical-02
Illustration-Technical-04

icon design

The previous icon system used varying line weights and colors. Some icons had different versions for the same goal. To consolidate the usage and style, I created three icon categories based on how and where they would be used on the page.

navigation icon

Used only in menus and tables. Limited detail with two states @16px

Axiom-Illo-08

feature icon

Used only in content that highlight product features. Some detail with two colors that shift based on feature type @32px.

Axiom-Illo-09

spot icon

Used in cards and callouts to highlight a small story. Higher amount of detail with flexible color usage @56px.

Axiom-Illo-10

results

More than a component library, Axiom set up a governance process for adding new components and pages for anyone in the company giving a more polished, and user friendly experience.

before | after

Drag green bar to compare

transition phase

For pages with existing designs, I printed them out and worked with the relevant teams to update the style.

Marketing-Site-Wireframes-1

conclusion

Collaboration happens best with transparency and clear communication. Using my position as a designer, I could use my skills as a systems thinker help people see the whole picture from all the different perspectives of everyone involved. By making the rules and reasons visible to everyone Axiom helped others do their best work, while improving the quality and efficiency and creativity of the marketing site. As a team, we figured out tailored solutions that met the needs of internal stakeholders and passed those benefits on to the users who visit the marketing website.

special note

Before leaving for graduate school, I was part of the early rebranding process working with Pentagram to re-design Calendly’s brand voice and style. While Axiom no longer exists the lessons I learned in the process of creating it have stayed with me.

acknowledgements

Shout out to Alex Friend, David Rostan, and Brandon Stewart for helping bring Axiom to life.

resume          email          linkedin