case study

The Herndon Agency

A website for a life insurance agency

Overview

The Herndon Agency, LLC is a Life insurance agency in Fort Meade, Maryland. They sell Final Expense Life Insurance for seniors ages 40 to 85 to pay for burial expenses, whole life policies for families, and inexpensive term life insurance for younger adults or young families.

HIGHLIGHTS

  • Creation of a landing page for the website.
  • Understanding the target audience - ages 40-85
  • UX Design for ease of use and highest conversions.
  • Logo Design
  • Asset and component creation
  • Mobile Responsive

THE CLIENT

Michael Herndon

The Herndon Agency LLC.

MY ROLE

Web Designer and Webflow Developer

Hear from Mike

She was extremely patient with us as we went through the scope of work. We are extremely happy with her professionalism, knowledge, suggestions, and performance. She took the time to understand our business and goals. I recommend Bernice to everyone!

Michael Herndon
The Herndon Agency, Maryland

The Goal

The death of a loved one is often unexpected and unplanned. In order, not to leave your children and family the burden of unexpected funeral expenses, you would want to make sure you and your family are protected. The Final Expense Life Insurance Program that The Herndon Agency offers for individuals 40-85 years old, provides extra security even if you are covered by life insurance.

Mike Herndon, the CEO of The Herndon Agency, LLC wanted a simple website for his Insurance Agency that would host the landing page to The Final Expense Life Insurance Plan.

The Final Expense Life Insurance plan has the following benefits:

  • It is a whole life insurance policy designed to cover funeral costs and final expense items like taxes, and credit card balances.
  • You can qualify for up to $35,000 in cash benefits.
  • Policyholders can borrow against the cash value of the policy for emergencies.
  • They accept health issues that disqualified you elsewhere
  • Your family will be paid in advance if your loved one is diagnosed with a terminal illness after you have the policy.
  • Perfect for people on a fixed income. The monthly premium will never increase.
  • No medical examination required.
  • Simple phone application. Less than 5 minutes!

To see if he qualifies, the user will fill out a simple form and then will be presented with 3 options:

  • Get on a Priority Call with Mike - or in simple terms, call Mike immediately.
  • Schedule a follow-up call with Mike. This option should send out an email to Mike with the user’s form details and also send a notification to the user that his details have been sent to Mike.
  • An option to send a text message to Mike. This option would present itself to the user after 5 minutes of a countdown timer.

The Problem

After filling out the form, Mike wanted the form submitters to receive automated responses based on one of the three actions they would eventually take.

They would either:

  • Call Mike Immediately.
  • Schedule a call with Mike.
  • Send Mike a text message

Scenario #1

If a user calls Mike Immediately, they were to be presented with 5 minutes of a countdown timer and will place a call within the 5 minutes is up. After 5 minutes, the user is presented with an option to send an SMS.

Scenario #2

If a user schedules a call with Mike, that would trigger 2 things:

  • An automated email to be sent to Mike with the user’s info.
  • An automated email to the user informing them that a follow-up call has been scheduled with Mike and that Mike would get in touch with them.

Scenario #3

If the user doesn’t take any action, they are still able to call Mike using 2 options:

  • Use the ‘Call Me’ option in the Navigation menu to call Mike.
  • Use the phone link on the page to be able to get in touch with Mike directly.

My Process and Insight

MOODBOARD

I put together a mood board based on some latest web design trends and competitor websites such as

FONTS

Mike preferred a simple font for his website that would be bold and represent him well. I chose Roboto Condensed for the headings as well as the body text.

Roboto Condensed

Designed by Christian Robertson, Roboto Condensed is a largely geometric font but friendly and open-curved.

The spectacle before us was indeed sublime.

COLORS

Mike’s brand colors were blue and orange. I used white and a shade of blue as the body background color. A bold blue was used for headings and text and Orange was the accent color for buttons.

HERNDON BLUE

#063751

HERNDON ORANGE

#e77405

HERNDON LIGHT BLUE

#e7f1f6

HERNDON Black

#313131

HERNDON white

#ffffff

ICONS

I used font awesome icons for the checkmarks on the website. Green checkmarks indicate trust, value and present the info to the user clearly.

LOGO

Mike’s brand was bold and authoritative. He also wanted a simple text logo for the website and hence I created different variants based on bold fonts such as Limelight and Cinzel. 
We finally went with this one!

STOCK PHOTOGRAPHY

For the Hero Section of the website, I used stock photography that represented the purpose and idea of the Final Expense Life Insurance Plan. So I picked a nice picture of grandparents with a child.

WIREFRAMES

I started by creating wireframes for the landing page keeping in mind the User Experience associated with it.

DESIGNS

My next move was to create the designs that would match the wireframes throwing in the brand fonts, colors, images, and copy.

Challenges & Solutions

CHallenge #1 - user experience

  • The user needed to have a seamless experience submitting a form for a quote.
  • Reduction of the number of clicks.
  • The form ‘Submit’ button needed to do basically 2 things:
    a. Send an automated email out to the user and to Mike.
    b. Send an email to schedule a follow-up with Mike.

I decided to use a Slider to create this seamless experience.

The user will fill up his details on the form. The form is validated for blank fields and when validated will activate to press the Submit button to go to the next slide.
At the time the user goes to the next slide to either set up a ‘Priority Call’ or ‘Schedule a Follow-up’, a confirmation is given to the user, which helps the user understand that he’s been matched with Michael Herndon from The Herndon Agency.

A nice smiling photo of Mike, helps the user get reassured that he is in the right hands.

CHallenge #2 - setting up the automation

When the user submits the form, he is presented with 2 Options.

OPTION 1 - Request Priority Access

This means that when a user clicks on the button that Requests Priority Access, his form details are submitted. On submission, there are 2 automated emails that are to be sent out. 
I used Zapier’s automation to achieve the results.

SEQUENCE #1

When the user clicks, ‘Request Priority Access’, a zap is triggered.

This Zap will

  • Send an email with the user’s details to Mike.
  • Once Mike receives the form, an email will be sent from his email client to the user acknowledging form submission. I set this up using Webflow’s form submission as a trigger to trigger the zap.
  • The user is presented with a count-down timer. A user can call Mike before the timer is up. If the timer is up, he will be able to send a text message to Mike.

After the timer was up, the user needed to be presented with the option to SMS Mike.
This is how I achieved this - I created 2 buttons to achieve the results. I used an anchor link to create the button and to activate its SMS feature. This required some custom code within Webflow. When the timer was up, I hid the call button and enabled the SMS link button.
I needed to write custom code to activate the priority call timer and also the hiding and showing of buttons.

if ( 'priority-submit' === formSubmitButtonID ) {
// hide the form
jQuery('#Email-Form-Section').hide();
// reveal the section
jQuery('#Priority-Call-Section').show();
var int_spec = 300;
$('#buttonID').hide();
var myVar = setInterval(function(){
     if(int_spec == 0){
        $('#call-now').hide();
      $('#buttonID').show();
        $('#js-clock-minutes').show();
        $('#js-clock-seconds').show();
         clearInterval(myVar);      
     }                            
var minutes = Math.floor(int_spec / 60).toString().padStart(2,'0');
$('#js-clock-minutes').text(minutes);      
var seconds = (int_spec - minutes * 60).toString().padStart(2,'0');      
$('#js-clock-seconds').text(seconds);      
int_spec = int_spec-1;      
console.log('ee')    }, 1000)}
// if end
});

SEQUENCE #2

When the user clicks ‘Request Follow-up Call’, a zap is triggered

  • Send an email with the user’s details to Mike.
  • Send an email to Mike via Zapier requesting a follow-up call. I set this up using Webflow’s form submission as a trigger to trigger the zap.
  • Once Mike receives, the request, an automated email is sent out from Mike’s email client to the user.

CHallenge #3 - validating the form

Since the form was on a slider, the form needed to be validated so that the user cannot go to the next slide to be able to submit the form.

<script>
//To validate the fields before moving on to the next slide  
   
$('#first-name-3,#last-name-3,#age-3').keypress(function(event) {
       if (event.keyCode == 13) {
          event.preventDefault();        
         }    
      });        

$('#name-step').click(function(e) {
  e.preventDefault();            
  if(($('#first-name-3').val().length !=0) && ($('#last-name-3').val().length !=0) && ($('#age-3').val().length !=0) && ($('#phone-number').val().length !=0) && ($('#email-address').val().length !=0) && ($('#Zip-2').val().length !=0)){
         $('#name-alert').hide();
        $('.w-round div:nth-child(2)').trigger('tap');
      }else{
         $('#name-alert').show(500);
      }
});
</script>

CHallenge #4 - custom code for countdown timer

The user needed to be presented with a countdown timer counting down from 5 minutes. This required some custom code within Webflow.

if ( 'priority-submit' === formSubmitButtonID ) {
// hide the form
jQuery('#Email-Form-Section').hide();
// reveal the section
jQuery('#Priority-Call-Section').show();
var int_spec = 300;
$('#buttonID').hide();
var myVar = setInterval(function(){
     if(int_spec == 0){
        $('#call-now').hide();
      $('#buttonID').show();
        $('#js-clock-minutes').show();
        $('#js-clock-seconds').show();
         clearInterval(myVar);      
     }                            
var minutes = Math.floor(int_spec / 60).toString().padStart(2,'0');
$('#js-clock-minutes').text(minutes);      
var seconds = (int_spec - minutes * 60).toString().padStart(2,'0');      
$('#js-clock-seconds').text(seconds);      
int_spec = int_spec-1;      
console.log('ee')    }, 1000)}
// if end
});

CHallenge #4 - custom code to find out which submit button the user presses

The user needed to be presented with 2 Submit Buttons - REQUEST PRIORITY CALL and REQUEST FOLLOW-UP CALL for 2 different workflows. I had to find out which button was pressed in order to direct the user to the right automated workflow.

//Checks which Form Submit button is pressed
let formSubmitButtonID;
$( '#priority-submit, #follow-up' ).click( function() {
// get the ID of the selected button
const selectedButton = $( this ).attr( 'id' );
// assign the value to the variable
formSubmitButtonID = selectedButton;
});

Hear from Mike Again

Bernice is patient, fair, asks lots of questions to make sure she understands the vision and the goal. We highly recommend her for your next web project. She's definitely a Webflow platform expert!

Michael Herndon
The Herndon Agency, Maryland

The Results

Mike is now able to run Facebook Ads to gather leads that are interested in knowing more about the Final Expense Life Insurance Plan. With the website set up, Mike is now able to follow up on the users that submit a free quote on his website.

Lead Generation

Mike's website is a lead generation tool for people that are interested in preparing to meet the burial expenses of their loved one.

Get Free Quotes

People are now able to get a free quote for the Final Expense Life Insurance Plan which covers burial expenses for a family member.

Keep in Touch

Because of his  new website, Mike is now contacted for details about the Final Expense Life Insurance Plan and this websites serves as a tool to contact Michael.