Omnisci Resources

OmniSci Resource Center

Gated content is a key source of information about OmniSci. How might we help people find relevant resources, and in turn bring more leads into our marketing funnel? I led the redesign to improve our Resource Center and increase conversions.

My Role

Lead Designer

The Team

Jason Stevens - Head of Creative and Web
Rebecca Kao - Sr. Director of Marketing
Paige Joseph - Demand Generation Manager
Caitlin Wolters - Front-End Engineer

Problem Definition

Kick Off Workshop

I facilitated a cross functional workshop to help the group define and align on the project. Using the Lean UX Canvas as a guide I built out a template and set of “sticky notes'' in Figma.

This was the team's first remote workshop after leaving the office. It served as a great introduction to Figma for the cross-functional team and set them up to review and comment on future Figma mock-ups.

Workshop Outcomes

Primary User:
People in the “interest” stage of the marketing funnel

Secondary Users:
Internal Stakeholders / Sales People

KPI's:
Bounce Rate
# Resource Downloads

Quantitative Research

As a data focused business we value and leverage quantitative data whenever possible. I used Google Analytics to research users who had downloaded resources from OmniSci.
‍
Findings:
Larger percentage of return users
Longer session times

Iterate and Validate

Layout

I love to start a project with the barest of bones mock ups to force myself and my cross functional partners to focus on the function and features. I move from rough to refined quickly once the direction and feature set is well defined.

Card Design

The resource card was going to be foundational to the overall design. Once the blocked layout was defined, I took an atomic design approach and iterated deeply on the card design, and brought it into high fidelity.
‍
This card was added to our design system and served as the foundation for a few new patterns like a resource carousel.

Pressure Test

Problem

The existing library of content had a wide variety of content lengths. How can we pressure test our solutions before we build out the design in webflow?

Solution

Using the google sheets sync plugin I was able to pressure test our existing cms collection on the design concepts. This helped identify the best solution and inconsistencies in the content.

Key Deliverables

Filtering

The basic filtering system of the existing design was the biggest pain point in the experience. Working with a front-end engineer I implemented the new filter system using javascript library called Isotope.

Features

• Updated Filter Categories
• Combination Filtering
• Real Time Filtering
• Filter Reset
• Visible Filter Selections

Illustration System

We wanted to create images that looked cohesive, unique, and helped guide users if possible. Additionally, we had to consider the internal workload required to continually create these images.

I built out 9 background designs, 4 color options, and 9 composition variations. This results in 324 unique combinations that will sustain this system for its lifetime.

Icon Set

To help users quickly identify the content type we opted to use icons to support the written tag. This helped reinforce the most important piece of information and helped more visual people browse through the resources.

Results

Conversion Rate

30% Increase in Downloads

Before

After

Bounce Rate

13% Decrease

Before

After

Outcomes

Maximizing Impact

Cross-Site Linking
We added CTA’s across the site to link to the resource center and leverage the card design and collection on individual pages.

Filtered Resource Collections
We used the cms collection to pre-filter assets on our industry and platform pages. This helped surface relevant resources to visitors and also auto-updated as new resources were added.

Global Impact
Overall conversion increased 5x. Resource page visits stayed constant despite a roughly 50% drop in global traffic.

Launch and Learn

While we did internal usability testing with the team we wanted to keep a close eye on how users were interacting with this new layout. We used Crazy Egg to monitor scroll and clicking behaviour.

One large area of concern was the highlighted resources in the top section. We were worried it might deter users from scrolling to the filter section. Our Crazy Egg showed that almost every user made it below the fold to the filter section.