design strategy – Regina Ball Design

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:

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? ✅

Something I’ve been thinking a lot lately is how the value of design and design skills has changed over the past ten, or really even five, years—graphic design is much more accessible in the past both given the technology changes, but also new tools, like Canva, that provide basic design technology to anyone who needs it. I think Canva is great as a basic starter tool that can provide people with a starting point, or for resource-strapped organizations, a way to still have decent, customized design. But it’s not the same as having a professional graphic designer or agency research and create a piece for you or your organization.

However, one thing I have noticed over the years is more content about ‘how to make money as a graphic designer without the education,’ and similar topics, and I believe that has led to an increase in the dangerous thinking that design is easy. Sites like 99designs and fiverr perpetuate this idea, where you can get designs (and what is often really spec work) from designers at a fraction of the cost and the time. These are band-aids—not long term, thought-out solutions, that often lower the value of a professional designer or firm’s work.

There is a very big difference between design that looks good and design that is effective, which I think is a difference that many non-designers are not aware of. This is why many designers (myself included) are often handed the start of a project and asked to “make it pretty.” That request in itself shows that many people just want something that looks good, regardless of whether or not it’s effective. Just search ‘branding’ in Pinterest and a plethora of single page brand boards will show up, which yes, may be pretty, but do not provide any of the background or strategy. And although the designer may have that information, that’s not what people look for. People go to designers for “pretty,” not “effective.” And that lowers the value of truly good design.

“Design is having ‘a moment’.” – Stephen Gates

It’s great that the appreciation of design is much more widespread than ever before—as Stephen Gates says, “design is having ‘a moment’.” But much of that appreciation focuses on the end product, rather than the process—and I think that’s purely because many people do not understand everything that goes into a design. There’s a great quote that says “Design is for solving problems, not vetting solutions,” and I think that sums up a lot of what many designers run into now. Requests are frequently to vet a solution by “making it pretty,” rather than to solve an exact problem. Graphic design (or any design, really) will be most effective when it follows the creative process—that can vary from designer to designer or firm to firm, but the starting point of that process is research and information gathering—and the most important part of that is defining the problem.

This isn’t easy to do—this is why tools like design thinking (which has been turned into a buzzword) and process are so important. If you design something without defining the problem, researching the target market and competitive landscape, how can you define or determine success? If it looks good does it mean it’s “successful”? Not necessarily. Some of my favorite projects haven’t seen much ROI (again, that doesn’t mean it’s “bad design”—it’s just what happens when it comes to creativity and experimentation).

Furthermore, design is not something that happens quickly—some designers may execute faster than others, but that does not include time that needs to be dedicated to defining the problem, research, ideation, and concepting. In our current culture of instant gratification and efficiency, everything is measured on how much can be produced and how quickly. And it’s really easy to fall into this trap—it’s one I’m trying to slowly dig myself out of, this focus on pure output rather than following the process and producing something truly creative—and effective. But I think if more designers share their process and the value in it, and that sometimes quick execution will not lead to a successful, effective, or creative project, people will come to understand it.

A great starting resource for this is ‘The Strategic Designer‘ by David Holston, which I’m currently reading—it has a whole section on communicating the value of design to clients which I find particularly helpful.