Role: Web Designer
User Research, Expert Review, Interaction/Visual design, Prototyping & Testing
Tools: Google Analytics, Mouseflow, Adobe XD
Clearwater homepage displayed on laptop, tablet, and mobile device.
Overview
Clearwater Analytics is a rapidly growing SaaS software company which provides an investment accounting and reporting platform to institutional investors. As the sole Web Designer on the Marketing team, one of my primary projects was to redesign cornerstone features of the public facing marketing property to generate a 30% increase in marketing qualified leads (MQLs) — namely demo requests.
An analytics audit and expert review of Clearwater's website user flow lead to strategic changes in the site's design yielding a 44% increase in organic demo requests, $240k in attributed campaign revenue, and $1.2M+ in the sales pipeline.
The Process
Start with Visitor Data
We conducting an audit of the legacy website to understand how visitors engaged with different pages and which pages lead to the most conversions. After filtering out employees, job seekers, and bots it turned out that most of the traffic that requested a demo came from the homepage through a form located in the site's footer. The trouble was that only 20% of visitors end up scrolling that far down — on any page. The time on page was less than two minutes on average. It was clear visitors weren't sticking around long enough to achieve their goal of reaching out to learn more.
Was this because they weren't interested, or because the site didn't make it easy for them to do so?
Herein lies Problem
Site visitors who meet the criteria for being future Clearwater clients are not able to easily request a demo with the sales team. This is because the primary form required for this request is buried at the bottom of the site, despite majority of the site engagement occurring "above the fold" on the homepage and in the navigation.
Legacy Clearwater homepage (left) compared to refreshed homepage (right).
Legacy Clearwater homepage (left) compared to refreshed homepage (right).
Homepage Hero Redesign
Legacy homepage hero section with company headquarters and video play button (left) compared to redesigned section with new copy and brand imagery (right).

Legacy homepage hero section with company headquarters and video play button (left) compared to redesigned section with new copy and brand imagery (right).

The hero section of the legacy homepage prominently featured a photo of the company headquarters with copy that communicated the core value propositions, but failed to connect with visitors on an emotional level.
The new page utilizes subtle brand imagery featuring a person using the actual software, along with copy designed to connect to the visitors drive to transform investment operations at their company.
Research shows that a positive emotional decision takes nano-seconds to impress itself on a person, and can bias a logical decision just because "it feels right."
The homepage hero section is designed with responsiveness in mind. Desktop (left), Tablet (center), mobile (right).
The homepage hero section is designed with responsiveness in mind. Desktop (left), Tablet (center), mobile (right).
Results
This new design resulted in higher video engagement and directly contributed to exceeding the MQL goal for demo requests in 2019. The imagery from this design extended to other digital platforms around the company, including the default background image for the Zoom Rooms which hosted meetings with clients.
Header Redesign
Legacy website header navigation (top-left) and footer (bottom-left) compared to redesigned header (top-right) and consolidated footer (bottom-right).

Legacy website header navigation (top-left) and footer (bottom-left) compared to redesigned header (top-right) and consolidated footer (bottom-right).

When evaluating user data, we found majority of visitors browsed the legacy site using the primary navigation and footer. They visited a core set of informational pages however, almost all users failed to complete the 'Request a Demo' form.
When we further analyzed the shared structure of the site we discovered the navigation was persistent on almost all site pages, but its primary call-to-action (CTA) was for existing clients to login. It was also found that the footer contained unnecessary content and could benefit from consolidation.
The visual updates to these components reflect Clearwater's evolving brand which later influenced other digital expressions and the Northfork Design System.
The new header stack featuring a notification bar, page navigation, and call-to-action (CTA). Displayed in responsive breakpoints desktop (top), tablet (mobile), mobile (bottom).

The new header stack featuring a notification bar, page navigation, and call-to-action (CTA). Displayed in responsive breakpoints desktop (top), tablet (mobile), mobile (bottom).

The new header design introduces new site-wide touch-points to connect visitors with news, events, thought-leadership, and the sales team. 
The introduction of the 'Request Demo' button allowed for a visitor to engage the sales team from anywhere on the site, resulting in 44% year-over-year growth in organic demo requests through the website.
The introduction of the notification banner created an uptick in User Conference registrations and allowed the company to easily share reports on stellar system and operations performance during the onset of COVID-19 .
To drive consistency, we standardized an 8-pixel grid for spacing and type size. The content itself did not change, except for optimized verbiage and intuitive grouping of informational content and action oriented options inside the responsive container.

Other Projects

Back to Top