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.