Boldgrid landing page & email retargeting redesign

The journey of learning what the users want and need on a single page

WHAT DID I DO?

  • Looked into heat maps of the old landing page design and determined which aspects needed improvement
  • Redesigned the page based on my research and insights
  • Redesigned the emails and banner ads associated with the landing page
  • Coded the page with Symfony/Silex/Twig, Bootstrap, HTML/CSS, JavaScript, and jQuery

OVERVIEW

Boldgrid is a drag-and-drop website builder that comes with InMotion Hosting plan package. InMotion wanted to introduce this new product that comes with its hosting plan, so they built a landing page that delivered the product information and captured leads. The landing page was linked with banner ads, social media ads, email marketing, and hosting plan pages. The old landing page was bombarded with information and most of the time, the users did not scroll past the hosting plan CTA and product info. Therefore, the new landing page redesign focused on how the users interact with different element on the page and improved the lead generation by revamping the email campaign.

CHALLENGES

In UI design perspective, the old Boldgrid landing page was outdated and had a “2000s” feel. In the era of modern and clean looking trends of web design, the old landing page hindered users from “trusting” its content and quality. Moreover, the page was very salesy because within the first scroll, it asked the users to purchase the plans instead of emphasizing how the product could help them.


Second, there was too much information on the page including the hosting plan information, hosting competitor comparison, product details, etc. Moreover, those details were represented in written copy, not in appealing visuals. The users were overwhelmed and usually left the page within 10-20 seconds when they did not see what they were looking for.


Lastly, one of the most important information was how Boldgrid stood out among competitors and this piece of deciding selling factor was hidden.

GOALS

INSIGHTS

WHAT DOES HEAT MAP SAY?

Take a look at the heat map above. It is obvious that there is no interaction with the lengthy copy in the header. Boldgrid is a web design tool and it should visually convey that. Header is the first impression when a user lands on the page and it must be a compelling tool to serve its purposes.


MORE DOES NOT ALWAYS MEAN BETTER

Generally speaking, longer content is best for technical products that need a lot of explanation. However, in this case, the longer landing page is bombarding users with irrelevant information about the product.

Let's compare them hierarchically.

OLD LANDING PAGE NEW LANDING PAGE
Header: Copy about what Boldgrid is + Logo Header: Visually presentation of Boldgrid
Feautre bar: Top 3 features Feature bar: Top 6 compelling features
Hosting plan information Interactive carousel to showcase templates
Boldgrid and Wordpress Visually explain why it helps users' needs
More features with link to competitor comparison Competitor comparison chart
Function features Strong CTA with next step
eCommerce features
Template showcase
Techincal specification table for hosting plans

CONNECT THE DOTS WITH OTHER OUTLETS

Retargeting consumers who had purchased hosting, but hadn't taken any actions to put their sites up by a succinct, yet powerful email campaign. I worked with marketing team to come up with a design that fit all content above the fold and aligned the look and feel with the new landing page.

DESIGNS

INFORMATION HIERARCHY IS ESSENTIAL

An average user spends about 20-30 seconds on a site and it is important to represent the content they are looking for above the fold. The old landing page failed to deliver the most important to the users effectively: WHAT IS BOLDGRID AND HOW CAN IT HELP ME? To address this problem, I restructured the content hierarchy of the page content.

EMAIL RETARGETING

It is easier to retarget current customer base, who had bought the hosting plan but failed to take any actions to push their sites live. By reminding them that it is very easy and fast to build a website with Boldgrid.

RESULTS

MORE WORK

Say hello!