Funnel Clarity

I’ve worked at Funnel Clarity, a sales training firm in D.C. for nearly six years. I joined in 2016 and immediately led the founders through rebranding and renaming the company. Working as both both client and designer, I defined the rebrand with a creative brief and helped the founding partners select two designers to submit logos, before they eventually chose an alternative logo and brand identity that I designed.

I went on to design and build multiple iterations of the website, using HTML, CSS and Javascript on the HubSpot COS platform. I also designed and built the print and digital classroom materials for the proprietary sales training content we sell, combining strategic aesthetics and principles of instructional design with the founders’ 15+ years of industry experience.

In my first two and half years at Funnel Clarity, I created a content marketing library of gated resources and as managed email marketing. Once these pillars were in place and being leveraged to generate leads, we implemented a comprehensive digital advertising and SEO strategy, as I passed the reins of the marketing engine to consulting partners and colleagues. Now, I focus on optimizing for conversions and enriching customer experience as I continue to grow, develop and maintain the brand system across our marketing channels, our products and the website.

5 Projects I’ve Completed at Funnel Clarity:

Core product pages redesign & optimization

Sometimes project timelines overlap and conflict, and this was the case when the current version of Funnel Clarity’s site was launched at the same time our product suite was being renamed and re-positioned. The new site went live with limited information about our online courses, and the corresponding pages for these products would have to be quickly updated after the course positioning was finalized.

On top of that, the keyword strategy launched with the new site had determined more copy was needed on each product page, which made multiple sections badly bloated with text. Our core product pages, each one promoting and detailing one of six online sales training courses, were already due for a redesign.



Clearly, the SEO-mandated text was causing cognitive overload and an optical imbalance that needed to be fixed. But the way this text was redistributed had to satisfy two other equally important objectives as well:

  • incorporate the newly established brand for our proprietary online courses: ‘Roadmap to Revenue’
  • help users understand our courses + offerings and optimize the page for them to take action

The second item was particularly key in an industry where buying behavior is increasingly research-heavy, and when users in general are seeking more and more control of purchasing information. In addition, much of the site design was inspired by eLearning platforms like udemy. I wanted to build on that, so I researched online course listing pages on edX, Teachable, and udemy itself. However, I made note to specifically focus on professionally oriented courses at a roughly comparable price point, as Funnel Clarity’s online courses are among the more expensive in the industry, and I wanted to use similar reference points.

Adopting some of the shared conventions from the example online course pages, I sketched a wireframe of an updated product page.

sketch of web page 1
sketch of web page 2

I then made a high fidelity mock up in InDesign with notations for animation, which I prototyped in InVision. Finally, I made the updates live by creating a new template in HubSpot with Javascript and CSS handling animations.

See one of the new product pages live.

It was a similar story six months later, when SEO strategy dictated that we add more text about target keywords to the online sales training overview page that listed each course together. In this update I leaned into illustration-based imagery, balanced with geometric shapes and our standardized icon style. Finally, never missing an opportunity for brand differentiation, I emphasized the Roadmap to Revenue structure with more defined graphics and thematic embellishments on the course images.

I really enjoy these opportunities to turn information into experiences and use branding to define and distinguish products.

See the new online training page live.

Creating & evolving Funnel Clarity's brand

A week after I joined what is now Funnel Clarity fresh out of college, I learned they were making the decision to rebrand. As a designer tasked the creative aspects of marketing, this was admittedly somewhat of a baptism by fire.

But, more importantly, it was an amazing opportunity to learn and define my process for creating a brand identity from scratch. At the same time, I was wary of the well-established pitfalls of designers creating logos for themselves and the limitations of in-house teams. Especially so early in my career, I wanted to do my due diligence.

I began by drafting a planning document with the scope and timeline for the project. After working with the founders and managing partners, I conducted exploratory meetings to define the company’s positioning in the marketplace.

These meetings included as many company members as possible, and prioritized open-ended brainstorming on company values. After achieving consensus on company values and differentiators, I wrote a creative brief that articulated our values, reasons for the rebrand, and the desired outcome.

Funnel Clarity Style Guide
Funnel Clarity Style Guide

This creative brief was invaluable not only for naming the company, which the founders had opted to do internally, but also for soliciting designers to compete with my work for the company logo.

To stimulate internal brainstorming for the company name, a marketing campaign was launched to solicit suggestions from the sales industry. Participants were told that if their suggested name was chosen, they would receive a $1000 gift card of their choosing.

This approach had several effects:

  • Generated awareness that we were rebranding
  • Incentivized participation from our industry and clients
  • Created a pool of 100+ names to use as fodder for brainstorming

In total we received over 250 suggestions. I took these entries, removed duplicates and categorized the suggestions based on name structure and the use of certain words. Given the focus of our industry, certain patterns emerged:

  1. One word names
  2. Two word names
  3. Names including the word ‘sales’
  4. Names including the word ‘funnel’ – (a common term in the sales world.)

I wrote every suggestion from these four categories, consisting of approximately 40-70 names each, on the walls of the conference room. The company met in person, reviewed the submitted names, and opened up internal brainstorming for additional suggestions before voting for favorites.

From this hybrid list of suggestions, we narrowed to a shortlist of 10, and I did research on the availability of social media handles and domain names.

Funnel Clarity Style Guide

Following a period of reflection, there was not a clear favorite amongst the company. During the meeting held to discuss this indecision, I personally proposed the name of Funnel Clarity, inspired by a combination of entries to the naming competition and values from the creative brief.

After confirming the availability of the domain name and social media handles, Funnel Clarity was born.

Company name in hand, I took the creative brief defining our rebrand and shared it with two designers we contracted to submit logo designs. In the end, one of my submissions was selected as the final logo.



I went with a familiar approach for the logo design: substituting one letter of the company name for a relevant icon/graphic. This execution’s strength is in its’ simplicity, scalability and the geometric typeface used.

It’s Euclid Flex by Swiss Typefaces, and the ‘funnel shape’ that replaces the E is derived from the ‘E’ character from the same typeface. The angle at which the letter was ‘cut’ went on to be a component of brands’ visual system. There are additional alterations to the logo type, and varying weights were used to emphasize the idea of ‘clarity.’



Next, I built the first iteration of the brand’s visual identity; standardizing colors, typefaces, image treatments and more through a style guide, pull sheets to be shared internally for quick reference, and web design guidelines.



As you can see, Funnel Clarity’s visual language has always heavily incorporated gradients, initially mostly comprised of cool blues and greens, with warm colors used for emphasis. This stayed roughly the same through the first two generations of the website, both designed and developed by me.

With the third and most recent iteration of the website, I wanted to invigorate the brands’ design system, and once again exercise design diligence. Multiple warm hues were added to the color palette, the type system was simplified to just the typeface used in the logo, and geometric patterns were introduced to complement the gradient backgrounds already heavily in use.

Funnel Clarity Style Guide
Funnel Clarity Style Guide

In addition, we standardized the iconography style, and moved away from stock photos towards more illustrative graphics for imagery. These steps modernized the brand, and created a more flexible, consistent presence across different contexts. I codified these updates in the most recent version of the style guide, which has been used to guide the design of every company asset since, including the current iteration of the website.

Funnel Clarity Style Guide
Funnel Clarity Style Guide

Custom blog post module to convert high-value traffic

When we went live with the current iteration of our site at Funnel Clarity, there were two ways to convert traffic from our blog: 1) a slide-in Call-To-Action (CTA) for subscribing to the blog that appeared after 70% scroll, and 2) a CTA to gated content resources at the end of each post.

Funnel Clarity Style Guide
Funnel Clarity Style Guide

As you can see, due to screen real estate concerns and the low-commitment level of a blog subscription CTA, the only field on the blog subscription form is for an email address, whereas all our other forms require additional information. The goal was to decrease friction in completing the form, because if we succeeded in getting them to convert as a contact with an email address, we could promote higher-commitment offers to them later.

Shortly after, we implemented a more sophisticated SEO strategy and our blog began to gain more traction. It became apparent from conversion rates we weren’t doing enough to leverage and turn this increasing traffic into eBook downloads and inbound sales requests.

Even more, information from our buyer research and marketing automation platforms suggested some of our most sought-after contacts, C-Level Execs with buying power, were represented in this squandered traffic.

It was clear we needed to incorporate more CTAs throughout the content-rich blog posts that were driving traffic. But inline CTAs, useful as they are, became quickly camouflaged by the already link-heavy blog posts. I began editing posts after colleagues had written them to visually differentiate CTAs from section headings and the rest of the copy, as seen below. But this approach wasn’t sustainable.



Part of the newfound success of the blog was the frequency and diversity of the content creation from across the company. We needed to continue publishing blog posts quickly from everyone on the team, and with my bandwidth it wasn’t realistic to continue optimizing each post individually. On top of that, the right CTA varied widely; it could range from a wide range of possible topics and levels of the funnel, depending on the content and target audience. The most appropriate ‘next step’ to promote was usually a decision best made by the original author of the post, so any design solution would have to include their ability to customize totally the CTA.

And of course, I wanted to first and foremost preserve the value users were getting from our content, and not interrupt their reading experience too much. It was important to be able to significantly diversify the type of CTAs we were offering to our blog readers. But I didn’t want this diversity to come at the cost of their reading experience.

Internally, we were elated that our content was resonating so well, and we were eager to share more in-depth knowledge through our eBooks and products. But we wanted to build on this burgeoning level of engagement, not jeopardize it.

Using HubL, HubSpot’s proprietary extension of Jinja, Javascript, HTML and CSS, I rebuilt the slide-in CTA on blog posts to be fully customizable on the page level. In an editor similar to the WSIWYG Rich Text fields for blog post copy, blog authors could now choose what level of CTA was appropriate for that post:

  • the original blog subscription CTA
  • an eBook or other gated resource of their choice
  • a request for a free consultation with our sales experts
Funnel Clarity Style Guide
Funnel Clarity Style Guide

Each of the more customized CTAs was also designed to include an image of the authors choice, using to CSS make sure it plays nicely with the slide-in container itself. And, rather than using the CTA to take the user away from the high-value blog post, I also built a modal window to show the corresponding form.

Funnel Clarity Style Guide
Funnel Clarity Style Guide

Next, for eBook download CTAs, I wrote a script to get the GUID of the form and download the corresponding eBook, Webinar or White Paper to the user’s computer directly after submitting the form via a GET request. That way, the user can click on the slide-in CTA, complete the modal form and download their content, then finish the blog post they were reading without ever leaving the page.


Requests for Consultation CTAs are handled similarly, instead of downloading assets it notifies the team internally and prompts the user to expect a call. This new customizable CTA module was implemented too recently to provide significant reporting on, but it has already generated multiple content downloads and a few inbound requests that likely would not otherwise have converted at that level.

You can see a demonstration of each type of the slide-in CTA here: blog subscription, content download, and request for consultation.

Covid-19 response for sales leaders pillar page

See it live!

In March 2020, our content marketing slowed drastically, as it did for many businesses with the onset of the pandemic. Several months later, as industries across retail, hospitality and the professional sector sought to regain some sense of operational normalcy, we created a guide for sales training leaders to how to do just that.

Funnel Clarity Style Guide
Funnel Clarity Style Guide


This was one of the most content-rich pages we had developed since the launch of our current site in late 2019. As such, there weren’t any existing conventions or design treatments for many sections of content on the new page. It also presented an opportunity to adapt the brands visual language in support of the theme.

Funnel Clarity Style Guide Default Funnel Clarity gradient/pattern
Funnel Clarity Style Guide Covid-19 campaign pattern

I created a simple geometric, single-weight line based pattern in a ‘germ/molecule’ theme to substitute for the pattern used on the rest of the site, without deviating from the original style too much. I also established design solutions for 3-item headings and 4-item subheadings, amongst others, that would go on to be re-used as modules for similar sections of content on other ares of the site.

This page was designed on paper before a mockup was finalized in InDesign and Invision, and then I developed the web page with HTML, CSS and Javascript. There’s also a healthy amount of animations incorporated throughout the page to mitigate the length of the content.

See it live!

Content preview landing page

See it live!

At Funnel Clarity, we’re really proud of our content. Our eBooks and gated resources, written by in-house subject matter experts and designed by me, are no exception. And we fully subscribe to the inbound marketing methodology.

That’s to say, we really want people in our industry to download and read our content, and not just so we can use their information to get in touch later about products. It’s because we genuinely believe people in our industry will find them deeply useful and valuable.

In an effort to make that happen, and more importantly, improve landing page conversion rates on key high-value assets, I created an expanded version of our standard landing page template. This expanded landing page is not just longer to accommodate more description of the asset, it also includes an image gallery for previews of the most content-rich parts of the eBook or white paper.

Funnel Clarity Style Guide Funnel Clarity Style Guide
Funnel Clarity Style Guide

In addition, it hides the form behind a modal window, which significantly reduces the initial ask-for-information recoil. It also uses this modal window to display a different, lower-funnel offer from the button at the bottom of the page: a free sales consultation. These design changes allow us to better showcase our high-quality content while simultaneously facilitating more conversions and inbound sales requests.

This new landing page has already increased eBook downloads by over 20% and resulted in multiple inbound sales consultation requests.

See it live!

Graphic 1
Graphic 1
Graphic 1
Funnel Clarity Website

about this site