Case Study: Redesigning High Impact Landing Pages

Now that I’m a few months out from redesigning two of the most high impact landing pages on the Huntress website, I wanted to reflect on the process and try to answer what makes a high impact landing page and what elements drive conversion.

The Trial Registration Process

A side by side view of the old Huntress Trial registration page with the new, redesigned page, showing the increase in conversion after the redesign
A before and after overview of the Huntress Free Trial Registration page

When I first joined Huntress and made my passion for design as a conversion optimization tool known, I took on the project of redesigning the Free Trial Signup experience. That included the landing page where users signed up, and the following digital touchpoints and user onboarding. The conversion rate for the existing page was fairly strong (16%), but the page design was not consistent with the overall site and did not provide enough information to the user.

The first step was to levelset the need for a redesign with our stakeholder group:

A graphic showing why we needed to redesign:
- Potential for higher conversion rate on trial registration page
- Based on user behavior, it was clear users were unsure what they were committing to by signing up
- Content did not provide users with pertinent information
- Main value points of the product were not clear
- Page did not match the overall site design

Our stakeholder group of Brand + Content leads, the Chief Marketing Officer, and key Sales leads agreed that this project was worth prioritizing. I then documented some goals for this undertaking so that we had something to measure the final product against.

A graphic listing the goals of the project:
- Increase trial to paid customer rate
- Increase form submission conversion rate on trial page
- Make the trial process more self-service and less reliant on 1:1 interaction from Sales
- Lay the foundation for iterative approach based on user feedback

The first step was to start gathering data from Google Analytics, Google Pagespeed Insights, Hubspot (our CRM + CMS), and Hotjar. Not only did we need to establish a baseline for typical web metrics like time on page and view to submission rate, but I also wanted to get a sense of how a user behaved on the existing page; were they getting frustrated? Were they going back to previous pages? Was it clear what was being asked of them and why?

A graphic showing a sample of data gathered from Hotjar and Google Pagespeed Insights
A small snippet of the data gathered from Hotjar and Google Pagespeed Insights

After reviewing heatmaps, scroll maps, watching a lot of user recordings, and looking at the data, it became clear that there were opportunities for improving the user experience in terms of information but also function:

A graphic listing what the page needs to accomplish:
- Show users what they are getting when they sign up for a free trial
- Show users how Huntress solves their relevant pain points
- Clearly state what Huntress is + does
- Be accessible and user friendly
- Get to the point quickly
- Not require users to seek out more information before submitting the form
- Load quickly, especially on mobile
- Provide a visual experience that is consistent with the rest of the website
- Adhere to best practices for landing page + form design
- Be built for future A/B testing

The current page wasn’t loading fast enough, wasn’t accessible, and wasn’t giving the users the information they needed to quickly make an informed decision. Now that we knew the weak points we needed to address, and had a good understanding of how our user base (aligned with our existing Marketing personas) was behaving, I compiled some inspiration and best practices.

A graphic showing a compilation of inspiration for the landing page design
A sample of inspiration for the landing page design

Knowing what information we needed to prioritize and industry best practices, I began creating wireframes.

A graphic showing the wireframes designed
Low fidelity wireframes created in Figma

Once my team and I decided this was the right direction, I created high fidelity mockups that we could present to the stakeholder group. We knew we needed to prioritize the top three value propositions, what would happen during the trial period, and social proof in the form of partner testimonials. We also wanted to include a testimonial video to instill more trust with a real partner sharing their experience on camera.

A graphic showing four different high fidelity mockups for the page

After gathering feedback from our stakeholder group, we decided the following design was the strongest, and iterated on it:

The final mockup of the redesigned trial page

This version highlights the value propositions, clearly and visually outlines what happens during the trial, has a testimonial video, and provides some stats about the Huntress platform.

With our resources at the time, we knew there would need to be some tweaks once this was created in Hubspot. Since I had already been learning Hubspot as a CMS, I decided to undertake building the page myself in the Hubspot Design Manager (when we later had more resources, this was properly recreated by our development team to be more easily editable).

The live version of the redesigned Trial page, on desktop and mobile
The first version of the new page that we published

We ran into some limitations, as to be expected, that meant we had to push some of the content further down the page, but visually it was a cleaner experience that used our existing website modules.

One thing that we had realized during the process was that once the user submitted the form they were redirected immediately into the platform, which could be a bit jarring. We decided to create a Trial Success page that acted as a confirmation as well as a guide to users to answer the question of “what’s next?” This page includes a short video explaining the keys to a successful trial, along with a datasheet that explains those keys in more depth. We also wanted to make sure that users could easily contact the Partner Success team with any questions.

A screenshot of the trial success page, showing a video and datasheet
The first iteration of the Trial Success page. Video by Bryan Sarmiento.
A side by side view of the three page datasheet
The ‘Hacking the Huntress Trial’ datasheet; content written by Rachel Bishop, design by me.

There was an existing nurture email sequence that we now needed to overhaul, in terms of visuals and content. Content writer Rachel Bishop retooled all three emails to guide the user through the trial process and I redesigned the visuals of the emails to match the new web experience and Huntress branding.

A side by side of the old emails that went out to users who registered for the free trial
An overview of the previous trial related emails
A compilation of the new, redesigned nurture email sequence
The new trial onboarding email sequence

With all three touchpoints launched, we began to collect data and validate our hypotheses. After some time, we saw the view to submission rate climb to 21% (it was previously 16%). Recent Hotjar click maps indicate users are utilizing the testimonial slider and watching the testimonial video, validating the need for social proof that was previously missing.

Desktop and mobile click maps from Hotjar of the trial page

While we are still running A/B tests on the trial page, I turned my focus to one of the other most important pages on our site: the demo page, which suffered from many of the same problems as the old trial page had.

The Demo Page

A side by side view of the old demo page design and the new demo page design along with the increase in conversion rate

Because we had recently completed the trial redesign and had seen success, we used that as the model for the demo page and were able to use it as a framework.

A lot of the reasons to redesign the page were similar to the trial page:

A graphic listing the reasons to redesign the page:
- Potential for higher conversion rate on demo registration page
- Content did not provide users with pertinent information
- Main value points of the product were not clear
- Page did not match the overall site design

With similar goals for the outcome of the project:

A graphic showing the project goals:
- Increase form submission conversion rate on demo page
- Lay the foundation for iterative approach based on user feedback
- Align the page design with the rest of the site

We repeated the research process so that we could set a baseline for the page performance, and examined user behavior on the current page to see the pain points.

A sample of data gathered from Hotjar - click maps on desktop and mobile of the old demo page
A selection of click maps from Hotjar on desktop, tablet, and mobile

I also gathered some inspiration and best practices for landing pages that are very form focused.

A compilation of inspiration for the new demo page

Because we planned to use the trial page as a framework for the visuals (and to be cohesive with the rest of the site), I did not create wireframes but went right to high fidelity mockups.

A compilation of six different high fidelity mockups for the new demo page
High fidelity mockups of the redesigned demo page showcasing different layout options

Drawing on the trial page learnings and design, the demo page provides an at a glance view of the Huntress Security Platform to tease what the user will see in a live demo, and provides social proof in the form of partner testimonials in a carousel.

A mockup of the selected design on both desktop and mobile
The selected layout for the redesigned demo page

As with the trial, our stakeholder group reviewed the mockups and selected the above as the layout to pursue.

The final version of the redesigned demo page, shown on a laptop and on a black iPhone
The first published version of the redesigned page

Having learned our technical constraints, the first published version of the redesigned page did not differ widely from the final mockup; the only changes were subtle, visual changes. We also revamped the content to make it more relevant and straightforward.

What I did not expect was that only a few months after launching the new demo page, the conversion rate (form submissions/pageviews) had increased 46% and our view to submission rate was up to 19%.

Given that we were able to make a significant impact on the conversion rate of both of these pages, I wanted to think about and put forth some potential answers to the question of what makes a high impact landing page?

What makes a high impact landing page?

Based on my experience with these redesign projects, a high impact landing page needs to have the following:

A clear call to action that has a higher level of effort, like a form

It’s a relatively easy ask for a user to click a button, but taking the time to fill out a form means the user expects something more in return, and the brand is receiving something higher in value than a single click metric (lead information, etc)

Clear value proposition(s)

What is going to make this user fill out the form? What pain points will this action solve? With the Huntress Trial, by completing the form the user is granted access to the platform for 21-days to see how it works and how effective it is.

Cohesive visual appearance

It’s extremely jarring to go from one page on a website to another page that looks completely different and visually disconnected from the one you came from. A lack of visual cohesiveness leads to confusion and potentially event doubt, lowering the chance that the user will take that high-value action.

Social proof (testimonials, stats, etc)

It’s a bit silly to say “but don’t take my word for it,” but that’s what users need to see. Any company will tell you their product is great and you should fill out their form, but what about the people who have gone before them? Did they literally get what they signed up for?

In summary

I learned so much and flexed so many new skills throughout this process, from being able to really leverage analytics and user behavior data to dusting off my wireframing skills. The increase in conversion rates provided proof that design can have a huge impact on conversion, and really demonstrates that it’s not just about “making it pretty” but presenting information in a way that makes sense, is easy to understand, and solves a problem or pain point for the user. On the other side, higher conversion rates on pages like these lead to more leads (pun was unavoidable), and therefore more revenue.

More cohesive brand appearance? ✅
Better user experience? ✅
More revenue? ✅

project lifecycles for creative work management

Why Creative Work Needs Project Management Systems: Project Lifecycles

Remember way back when in November when I started this series and definitely thought I would finish it before the year was up? Yeah, me too 😂 Now that we’re halfway through 2021, and I’m settled in my new role (more on that later!) I figured it was time to get back to this topic.

Photo from Unsplash

One of the most important aspects of using a project (or task) management software as a creative is having a defined workflow that reflects every stage of the project, so you know when copy is still in development, or it’s being designed and isn’t quite ready for review. These workflow steps can be as granular or as broad as you’d like; here is an example of a more specific workflow:

  • Assigned
  • Copy in Progress
  • Copy in Review
  • Ready for Design
  • Design in Progress
  • Design in Review
  • Approved
  • Deployed

And a broad workflow:

  • Ready to Start
  • In Progress
  • Ready for Review
  • Complete

I’ve seen both of these work well, but it really depends on what works best for you and your team. To create customized workflow, you (& your team) need to look at the typical flow of a project, and identify the repeatable steps. Even if a project may get tossed back & forth between ‘in design’ and ‘in review’, you don’t necessarily need a step for each revision. Most project management systems will allow you to move between statuses in a non-linear fashion, so it would be very rare to need ‘revision 1, revision 2’ etc as workflow statuses.

Most creative projects follow the below workflow:

StatusWhat It Means
Assigned / Project Kickoff / Ready to Start Project or task has been scoped and has the right information to be able to start work
In Progress / Copy in ProgressTypically Copy or Content will first work on the task/project before it moves to design
Ready for Review / Copy in ReviewThe work that has been performed so far is ready for review by the requester and/or stakeholders
[Back to] In Progress / Design in Progress / Ready for DesignIf you don’t have a status specific to ‘design is ready to start,’ or similar, putting it back to In Progress and alerting the designer it is ready works just as well
[Back to] Ready for Review / Design in ReviewThe design work is ready for review by requester and/or stakeholders
Approved / Complete / Ready to LaunchEveryone involved has approved and your task/project is complete!
(Optional) DeployedIf you want to have a status for if the task/project has actually gone out the door and been appropriately deployed or put in the right places

Make sure to see what your system will allow – some systems have a limit on the number of statuses in a workflow.

Once you have the workflow steps outlined, make sure to socialize it with your team and get them on board. Does this way of thinking work for them? Will they remember to move a task to the next step? Who will be responsible for making sure the traffic is kept moving?

Once everyone is onboard, put your new workflow steps in your system, and make sure everyone who will be using this workflow knows what status should be used when. And you’re done! 🎉

Design | Holiday Card 2020

2021 has finally arrived! One of my small wins in 2020 was actually this holiday card design and I’ve been meaning to share it but the holidays got a bit crazy (lots of sewing gifts and baking cookies!).

I have to credit my husband with the idea of adding hand sanitizer and a mask to the traditional milk and cookies by the fireplace—it’s such a small detail but people loved it!

I usually only do hand lettering for our holiday card, but I couldn’t let that idea go and decided to try my hand at illustrating it in Procreate. It took a good amount of time and it’s certainly not perfect, but I feel like it’s good for my skill level, and I’m quite proud of it.

The interior had this hand lettering that I did as well that I’m quite happy with. I’ve been trying to challenge myself to hand letter more serifs rather than scripts and I was happy with this attempt (but I still need to practice more!).

I hope everyone had a safe holiday and that your new year is off to a good start!