In 2015 a client came to me asking me to help test a concept for their new life insurance product. They had recently launched a simple life insurance lead generation product that allowed their customers to get customized life insurance quotes. But a few months after launch, they weren’t seeing the conversions they expected. I reviewed their current landing page, and then designed and implemented a landing page test.
After a few weeks after initial launch, the analytics team found that the initial zipcode form on the landing page was underperforming drastically, particularly when it came to mobile. Only 20% of desktop arrivals would fill out the initial home page form, and that number dipped below 10% when looking at mobile traffic. This was very low compared to their other products, and seemed particularly troubling given that users were primarily arriving through high intent traffic sources.
The team came to me with a few suggestions for how to improve the site, including presenting the site as a resource for life insurance information rather than just a quote generator, adding a click to call option, and adding partner logos to the page. I also reviewed the current site and suggested a number of UI improvements, including:
- adding a fixed header with a jump button to either the form at the top of the page on desktop or to a click-to-call option on mobile.
- showcase the number of users helped by their site to help boost the trustworthiness of their site
- adjusting the form fields to ensure the appropriate number pad keyboard would appear on mobile, thereby reducing friction on the site
- choosing diverse images to illustrate the variety of family makeups and life stages the product supports
- adding multiple jump buttons back to the top to allow users to navigate without getting lost in the content
- creating mobile-friendly accordions to make it easy to digest large batches of information
After the design was settled, I started coding up the front-end components and setting up the test. Their site was built on Rails, so I built off their HAML/Sass stack for the test. I find using styling variables in Sass (or Stylus depending on the project) help keep the code manageable and to make it easy to port over to new components. My variable set for this project focused on coloring, repeat styles like text-shadow, icons and media queries. I also used a BEM-style css class structure to make the parent-child and element-modifier structure clear for myself and future developers.
The client was very satisfied with the results and saw improvements to their conversion rates within a few weeks of the restyle launch, and within a month it became their official landing page.