Improving conversions with design — a UX case study of

Nicholas Peckham
Aug 12, 2018 · 6 min read

Project Details

My Role: Lead UX/UI Designer (A bit of project management too)
Product: Supplement insurance platform for mobile and desktop
Product Team: Lead UX/UI, Product Manager, CEO, Lead Engineer
Some tools: Sketch, Marvel, Usability Hub, Google Analytics, Hotjar, and Jira
Project duration: 4 months
Location: Miami, Florida

Project results

The results of this project are data driven. These results are a by-product of relentlessly fighting for the user and focusing on their needs (while maintaining business objectives).

Below are some results of my time spent working with Emerge:

  • Redesigned homepage ‘above the fold’ experience for both mobile and desktop. Increased desktop main CTA conversions from 8% to 27%, mobile CTA from 2% to 18%
  • Redesigned copy and quote form increasing form completion from 4% to 15%
  • Increased navigation and findability (used 5 second test)
  • Doubled the amount of users that were scrolling to the bottom of the homepage

Below I will focus on solving ‘above the fold’ content, which also helped solve navigation and findability

What is

Emerge is a startup focused on fixing the supplemental insurance industry. The leadership team can be found running around the streets saying:

“We’re making supplemental insurance easy to understand and accessible to everyone”

The insurance world is riddled with antiquated processes and most supplemental insurance today is still sold by an actual person coming to your home and making you sign a stack of papers.

99 Problems — and research was one

Within my first week with Emerge, I quickly discovered the lack of user research. A startup with minimal user research? No way!

Before I jumped in and redesigned anything, I needed to understand more about the individuals actually using the product. Unfortunately, because of the way the customer database was set-up, I was only able to have minimal contact with actual customers. So, it would be guerrilla strategy interviews or nothing (at least in the beginning). This meant everyone in the office, coffee shop, or my immediate family would succumb to a usability test. In the end I interviewed 17 people from different demographics, ages and gender.

During test sessions, I relied heavily on A/B tests, switching between the live site and clickable prototypes. Observing people switch between the two versions made it easy to eliminate assumptions while also gaining insights to user preferences.

Some of the discoveries were:

  • Users were not able to comprehend and explain the site’s purpose within 5 seconds of viewing above the fold content.
  • They were unable to complete a given task quickly, because of site navigation and findability issues.
  • They felt the quote form lacked structure.
  • Pages were too long and didn’t tell a good story.
  • Of the users I interviewed — older (ages 48+) generations preferred background images over illustrations. The younger generation (ages 20–40) strongly preferred the illustrations.

‘Above the fold’ content, and navigation redesign

‘Above the fold’, such a lovely use of editorial language in the digital space. This often overlooked section of a website can be priority numero uno in regards to first impressions which directly impacts user behavior.

With Emerge, they understood this but did not execute well.

The original design looked nice, but did not function as well as it could. There was no obvious eye path, CTA’s did not pop, bounce rates were not meeting company goals and after testing, it was discovered that readability and comprehension were problematic as well.

Some of the answers I gathered during testing explained how users did not know if the site was a general insurance marketplace, or if Emerge was selling their own products. The main CTA(s) were consistently overlooked and almost no one watched the product video. Most visitors only scrolled down 30% of the page on both desktop and mobile.

Below are the hotjar click heatmaps after 2000 visitors, for both desktop and mobile.

The most clicks for both desktop and mobile were on buttons that immediately distracted users from the site’s purpose. On desktop, for some unknown reason, 7% of all visitors were clicking on ‘login’. And just in case you think “ha, staff testing the site”, this was not the case. On mobile, 7.5% of visitors were quickly clicking on the hamburger menu. Users disappeared after these clicks.

I wanted to completely redesign the homepage so we could A/B test. This was a difficult solution to implement because of the buy-in needed from the rest of the team.

This is one reason why I started with designing above the fold content first. To get the team on board, I created a presentation to sell my idea. In the presentation, I simplified the design process by simulating the lack of eye path and how the design was built around form and not function.

Below are some slides from the presentation:

With a few strategically placed arrows and triangles, I was able to demonstrate how a new UI could increase usability. The team approved the new interface so we moved forward.

Some notes about the User Interface

As you can see from the updated UI, some of the style was dramatically changed . This was very purposeful. The reason behind the changes were:

  • The original UI had competing colors calling for the users attention; so we selected a secondary brand color that would only be used for CTA’s.
  • Because of our marketing channels and the way users were directed to the site, a larger majority of the users visiting the homepage were under the age of 38. This data pushed us into experimenting with illustrations instead of images.

Launching the redesign

After more iterations, more testing, and of course many compromises, we decided to build and launch the version below.

Once we launched, we monitored how user behavior changed using Google Analytics and Hotjar.

Below are the results from the click heatmaps from Hotjar:

After 2,000 visitors, the results were pretty clear that the new design worked much better at converting users.

  • Original desktop design heatmap — Main CTA(s) converted 4% of users; New desktop design heatmap — Main CTA converted 27%, up from 8%
  • Original mobile design heatmap — Main CTA(s) converted 2% of users; New mobile design heatmap — Main CTA converted 18% of users, up from 2%
  • As a result of user immediately understanding the product offering, the amount of users scrolling to bottom of the homepage doubled.

To be continued

Conversions were increased, and bounce rates decreased. This does not mean Emerge is in the clear, there is still a lot of work to be done. But at least the user experience is heading in the right direction.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade