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

Calendly Marketing Site

CRAFTING A PRODUCT EDUCATION FOCUSED USER EXPERIENCE AND VISUAL DESIGN

Calendly-Hero

BACKGROUND

My role on this project

Collaborated developers, product marketing, product managers, UI/UX designers, QA
When I joined Calendly, the company was rapidly scaling. I was brought on as the first visual designer and illustrator for the marketing site. I’ve focused on improving the site functionality and usability through changes to the site information architecture, visual language, and content hierarchy.

Research

Teaming up with members of marketing and engineering teams, we conducted user calls, A/B testing, and diving into the site analytics on current pages to determine what were the key issues with the current user experience on the marketing site.

Low + Mid Fidelity Wireframes for various pages

Marketing-Site-Wireframes-3

KEY USER PROBLEMS

1. Information Architecture
The initial Calendly marketing website had a limited number of pages but as more pages were added 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. 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.

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

UX STRATEGY 

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.

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.

Footer Redesign - Before | After

2. 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 FOCUS AREAS
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

A technical-focused style with a detailed, specific explanation of how a feature or workflow in Calendly works for them

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

Narrative-focus style

Frame-89

Technical-focus style

Frame-86

3. Standardizing Content Patterns

Design-focused user interviews on low-fidelity prototypes of page designs showed 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"
People can only hold onto a limited amount of information at a time. However 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. When releasing a new page, we A/B tested versions of the components to ensure usability and clarity of the design. I paired with a developer to ensure what was being called a component in marketing translated to what was a component in the codebase.

The goal of this hierarchy is to create a decision-making hierarchy using visual design to create emphasis. If all you want to do is sign up, that is available first. If you want to find out more then you can sign up for a webinar or learn more about a high-value tool. If you want to get into the nitty-gritty of how Calendly helped another company, then you can go to a case study. The tiers enable the design to support information tiers based on need while keeping the key calls to action prioritized.

Establishing Content Hierarchy 

Three-Layers-of-Linking

RESULTS

Metrics

These changes have 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 customer support tickets for problems on marketing site

Reflection

My high-level intent of focusing on usability, clarity, and functionality is so that the content focuses on providing a website environment that encourages product education versus a sales-driven approach. There is still a lot that can be done, but through these changes, we have figured out tailored solutions that both meet the needs of multiple stakeholders and the users who visit the marketing website.

Good design doesn't happen in a vacuum. And not all changes need to be complete overhauls.  My greatest contribution to the marketing site has been collaborating with my coworkers to set in place incremental, well-tested design solutions. 

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