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

Calendly Marketing Site

CRAFTING USER EXPERIENCE THROUGH VISUAL DESIGN AND CONTENT STRATEGY

When I joined Calendly, the company was rapidly scaling. I was brought on as the first visual designer and illustrator for the marketing site. During this time, I refined my skills in UX and data-driven design. I focused on improving the site functionality and usability through changes to the site information architecture, visual language, and content hierarchy.

My Role

User Research, A/B testing, Data-driven UX, Illustration, Content Strategy, User Flows, Component Design.

Collaborators

Collaborated developers, product marketing, product managers, UI/UX designers, QA

Calendly-Hero

OUTCOME

I worked closely with the marketing and sales team to create a website with content that encourages product education but still drives leads. As Calendly started to scale, I worked with the engineering team to implement new work processes for scaling our design and development process. By focusing on usability, clarity, and functionality, these changes cumulatively led to strong impact on the success of the marketing site at Calendly:

  • Improved site SEO from internal linking improved organic site traffic
  • Increased by +63% overall conversion in users that sign up for Calendly
  • Increased by +17% multiple page traffic via internal linking
  • Increased by +23% number of users who filled out demo and sales lead forms
  • Decrease in CX tickets for problems on marketing site

*Update: In 2021 Calendly launched a rebrand of the marketing site

Designing for the long term

The initial Calendly marketing website had a limited number of pages but as more pages and content was added we needed to rethink how the marketing site was scaling. Over two years I worked on the marketing site, I implemented key changes to the following areas:

1. Information Architecture

 The site structure no longer supported the depth of content available for people visiting the site.

2. Visual Language

The illustrations and iconography on the site did not give users an accurate concept of what the product did or could do for them.

3. Data-Driven Content Patterns

As more and more pages were added there needed to be a systematized design language to better aid collaboration across the marketing, product and engineering teams.

WIRE FRAMING AND IDEATION

I think that good visual and UX design starts with content. I worked closely with the marketing team to develop low and mid fidelity wireframes for various pages across the site. For pages with existing designs, I printed them out and we moved them around noted them as a team the goals for a given section. This helped us understand the interplay between the content, the layout, and illustration.

Marketing-Site-Wireframes-3
Marketing-Site-Wireframes-2
Marketing-Site-Wireframes-1

1. Improving the information architecture

Site analytics showed that certain pages did not receive any internal site traffic. Based on the analytics, we determined the site navigation lacked organic discoverability of new pages added. Within the pages, it was hard to find related content naturally and within context.

UX Goal

Improve user-driven discoverability through improved site navigation and wayfinding

SOLUTION 1 - FOOTER NAVIGATION

To improve site navigation, we tested variations of the footer design. Based off the results, we chose the design that added labels to sections to create a clearer visual hierarchy and easier ability to scan.

Footer Redesign - Before | After

SOLUTION 2 - USER FLOWS

Working with the marketing team, we developed user flows for that site by including internal links and resource card sections. By adding more links to relevant content within the proper context, we were able to better aid potential users in understanding how Calendly applies to their specific use case and vertical.

2. Creating a strategic visual language

Based on the illustration style on the homepage, user calls found that people did not have an accurate idea of what service Calendly provided. Working within the current brand style, I crafted an illustration style focused on providing more context and clarity to users.

UX Goal

Redefine the visual language to educate and captivate potential users on the in-app product and its specific application to their needs

SOLUTION - ILLUSTRATION DESIGN SYSTEM

In creating an illustration I work with the product marketing manager or copywriter who created the content that the illustration will accompany. In one-on-one sessions, we worked together to make sure that I was capturing the intent and purpose of their words in the illustration.

I split the illustration focus into two types:

A narrative-focused style with a conceptual focus on the benefits of what Calendly can do for them. This style uses a more playful and metaphor based imagery custom designed to compliment the concepts in the marketing content.

Frame-89

A technical-focused style with a detailed, specific explanation of how a feature or workflow in Calendly works for them. I specifically mixed parts of the UI with more illustrated pieces to bring different levels of focus to understand how some of the more complex part of the product works.

Frame-86

Combined, this built a strong targeted illustration style for the various user personas to help them understand at a conceptual and technical level what Calendly can do for them.

SOLUTION 1 - "Information Chunking"

Establishing Content Hierarchy 

3. Standardizing Content Patterns

We did walkthroughs with users on low-fidelity prototypes of page designs . We learned that people could not decide on what to click or were overloaded by the density of information. As the complexity of the Calendly product has grown, the content on the marketing site needed to be updated to reflect the added functionality.

UX Goal

Establish clear content hierarchy and patterns using a marketing-focused design system to aid in directing attention and reducing cognitive load

SOLUTION 1 - INFORMATION CHUNKING

As the complexity of the page content rose, we needed to find a design solution that appealed to all stakeholders across marketing (who want to tell a story), product (who want their feature represented fully), and design (who want to ensure usability and aesthetics).

Working with marketing, we reviewed past pages and content being developed for future pages for similarities. We broke out similar content structures into modular components that could be used across the site. Then when releasing a new page, we A/B tested versions of the components to ensure usability and clarity of the design.

Three-Layers-of-Linking

The goal of the component structure is to create a decision-making hierarchy using visual design to create emphasis. The tiers enable the design to support information tiers based on need while keeping the key calls to action prioritized.

Reflection

Good design doesn't happen in a vacuum. And not all changes need to be complete overhauls to impact metrics. Through incremental changes and testing, we figured out tailored solutions that both meet the needs of multiple internal stakeholders and the users who visit the marketing website. My greatest contribution and takeaway from my time at Calendly was how ensuring transparency and collaboration with my coworkers set in place incremental, well-tested design solutions. 

Designed by Rachel Arredondo