How we Built a Responsive Resource Center in Marketo

As a B2B company, it is critical to have a Resource center on your website, allowing your users to browse through all your assets. Typically, I have seen companies building a resource center on their website CMS like Drupal or WordPress, and then directing traffic to a Marketo landing page with separate form and asset details. This leads to long email communication between the marketing team and website maintenance team.

Moreover, the process for creating separate landing pages and maintaining them is time consuming, complex, and less scalable for marketers. To overcome this, we decided to build a custom resource center for ourselves, with advanced features and mobile friendly layout.

Responsive Resource Centre built in Marketo

Business Need

We have comprehensive content assets in our resource center. Since our clientele is diverse, it is important to have the transparency of customers’ preferences. We needed to transform to:

• Make it easier for marketing team to add all new assets to a single listing page
• Provide Filter options, allowing users to filter assets based on type, platform and browse through them.
• Allow users to preview the design of Marketo landing page and email templates before they download the assets.
• Track resource center web page activity directly in Marketo to see which assets are performing better.
• Allow users to select multiple assets at a time, and then get their download links directly in email
• Provide a multi-device functionality to improve the user experience for customers

Technical Challenges

1. Marketo doesn’t allow us to categorize our assets, which can be used for building filters.
2. Developers cannot access Marketo database directly, the option of search was not possible.
3. No default functionality to send multiple assets based on the user selection in a single email or display them on the confirmation page.

What we did

Step 1: We created a single Landing Page to a multiple display different assets which users could download.

Step 2: jQuery to allow users to preview on click of thumbnail, helping them decide which template they want to download.

Step 3: Using jQuery filter plugin, our developers’ implemented search in Marketo to track the selection of the customer. For filters we have used jQuery JP List and we have set up multiple lists on a single page.

Step 4: jQuery-based script was added for responsive carousels that work with mouse, touch, and keyboard along with the functionality of the views from Carousel to grid and vice versa.

Step 5: Used Marketo velocity scripting to send different assets in a single email, after user filled out the form.

Step 6: Testing for responsive layout, asset filters, progressive profiling and complete program flow.

After implementing this, marketing team had the flexibility to directly add new assets, as well as track user behavior in Marketo. If you are also planning to migrate your existing non-Marketo resource listing page to a Marketo based functional resource center, drop us a line at [email protected]

About Grazitti Marketo Services