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

Axiom Design System

DEVELOPING A CONTENT FOCUSED DESIGN SYSTEM 

AXIOM-Hero

BACKGROUND

My role on this project

Collaborated developers and product marketing
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 an engineer and a member of the marketing team to launch a design system that would benefit all stakeholders and users. We built an internally assessed landing page to serve as an information hub and governance process for adding new components and pages.

The challenge

While Calendly already had an established product design system, 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.

A shared vision for the design + development process

SOLUTION - AXIOM 

Defining a "Single source of truth"
Good Design Requires Good Process
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. 

1. Content Style Guide [Marketing]
Learn how to understand and write in the Calendly voice and tone for a more unified brand experience.

2. Design Fundamentals [Design]
Learn the visual elements of the systems such as typography, iconography, colors, and grids.

3. Component Library [Engineering]
Learn how to use components to test out the spacing and look of common style patterns in a live environment.

Axiom home page hosted internally 

Axiom-Home-Page@4xx

CONSIDERATIONS

System Tradeoffs

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:


Q. How might we create a marketing site that uses ethical conversion practices to increase conversion while hitting conversion goals?

A. Focus on information clarity and user education


Q. How might we build a website that meets accessibility standards and focuses on usability while meeting production deadlines?

A. Follow known design patterns and ruthlessly edit content and illustrations to the essentials

Following accessibility guidelines to ensure clarity

Color-Contrast

PROCESS 

Page Development Kits
Define scope from the beginning
With Axiom as the foundation, the development kits consist of design components, working code, design tools and resources, and guidelines for page development. These are to serve as a framework for building web pages on the marketing site.

Tier 1
Pages on this tier:

  • 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
 Pages on this tier:

  • 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
Pages on this tier: 

  • 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 

RESULTS

Reflection

Building Axiom is an ongoing process. Nothing we have done above is perfect, and we are still testing the effectiveness of the components. 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. As it stands now we are still solidifying the underlying structure of the design system. Piece by piece building a solid design foundation while maintaining flexibility for future changes.

SITEMAP

CREATIVE PROJECTS
Ceramics
Animation (Coming Soon)´╗┐
Illustration 
3D Illustration (Coming Soon)
Interactive Websites (Coming Soon)

INTERESTS
Travel Essays
Book Recommendations
Every peach (Coming Soon)

Designed by Rachel Arredondo