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.
Sole UX/Visual Designer
Front-end developers, product marketing, PMs, QA
Feb 2018 - Nov 2019
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.
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.
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.
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.
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.
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.
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.
Starting with the audit, I categorized each illustration and icon style and created guidelines for line width, size, color, and narrative.
A conceptual focus on the benefits of what Calendly can do. This style uses playful and metaphor based imagery designed to compliment the concepts.
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.
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.
Used only in menus and tables. Limited detail with two states @16px
Used only in content that highlight product features. Some detail with two colors that shift based on feature type @32px.
Used in cards and callouts to highlight a small story. Higher amount of detail with flexible color usage @56px.
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.
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.
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.
Shout out to Alex Friend, David Rostan, and Brandon Stewart for helping bring Axiom to life.