Screenshots of the live ProSource website in light mode and dark mode color schemes.

ProSource Landing Pages

Challenge
Microsites tailored to prospects in healthcare and finance that convert leads at a 10% rate.
My role
Responsible for the entire process, including user research, wireframing, copywriting, visual design, testing, and front-end development.
Tools
FigmaFigJamHubSpotAstroJS
Duration
Sept 2021–June 2022

Background

Hosting desktop versions of QuickBooks is a core offering of ProSource. When ProSource became an Intuit Authorized Hosting Service Provider, the company wanted a dedicated landing page to track and convert leads generated from the Intuit website.

A healthcare landing page was created for the Florida Radiological Society conference ProSource attended in July 2022.

Process

To write the copy for the QuickBooks landing page, I first surveyed current hosting customers and asked why they chose us. Their primary reason? They didn’t like their previous hosting provider. Digging deeper, these customers didn’t like the previous providers’ technology stack, customer support, and security. All of these bullet points were emphasized in the marketing copy for the website:

Focus on HIPAA

For the healthcare page, we decided to focus on HIPAA compliance, which is the framework that dictates the majority of technology decisions for healthcare companies. We created an assessment gated behind an email capture to capture leads:

A screenshot of the gated HIPAA assessment module on the ProSource healthcare landing page.

In order to take the HIPAA assessment, you have to enter an email address, which is sent to HubSpot.

Design

I created a few frames in Figma and tried swapping around sections to see which flowed better. Eventually, these were A/B tested to determine which layout results in a higher conversion rate.

A mockup of the healthcare landing page designed in Figma.

Ultimately, I decided that the HIPAA assessment should be the focus for the healthcare landing page.

Development

After the designs were run by peers, stakeholders, and a select few customers, I developed the pages using AstroJS. For the interactive quiz portion, I used Svelte. Results from the survey are automatically attached to contacts in HubSpot using a Netlify Function.

Tech Stack

The following technologies were used to create the landing pages:

  • Astro — a new static site generator that promises “powerful developer experience.” So far, it’s lived up to its messaging and the community around it has made me so excited about web development.
  • Tailwind CSS — the utility-first CSS framework. Though controversial, the tool’s power to iterate and design quickly helped a lot with this project.
  • Netlify + Functions — like the main marketing website, the landing pages are hosted on Netlify. Netlify Functions in conjunction with Svelte are used to securely create/update HubSpot contacts using the HubSpot API.
  • Svelte — the HIPAA assessment was inspired by an open-source trivia project written in Svelte.
  • HubSpot — the gold-standard for CRMs out there. I use the meetings embed as the main CTA for the landing pages. Additionally, the Svelte HIPAA assessment creates a contact in HubSpot and attaches the takers’ results upon completion.

Outcomes

  • Wrote new marketing copy entirely from scratch.
  • Designed and developed landing pages for the company’s healthcare and hosted QuickBooks Desktop campaigns, which have converted leads at a 10% conversion rate (industry average is around 2%).
  • Created a Svelte-powered HIPAA assessment on the healthcare landing page; HIPAA knowledge/best practices are tested and the takers’ results are sent to HubSpot via their REST API and Netlify Functions.