Ad Landing Page

At my current position, our marketing team created beautifully designed digital ads. We placed the ads on various websites that our target audience frequently visited. The purpose of those ads was to get people to fill out a form so they could either apply, visit, or learn more about the college. People were clicking the ads, but we realized that once the ad brought people to the landing page, they weren't filling out the form. My task was to influence users to submit the form.

Date: Summer 2018     Skills: User Research, UX Design, UI Design, HTML, CSS

Goals

Goals

The old layout of the landing page was not producing a high conversion rate. Everything was contained to a grid. There was only one photo on the page. The form was below the fold, requiring users to scroll down the page before they ever saw the form. There were bullet points of valuable information, but they were clustered together and nothing jumped out. At the bottom of the page was a quote from a current student, but it's placement made the quote seem like an afterthought. When we decided to redesign the landing page we had two main goals:

  1. Engage users
  2. Increase conversions (i.e. clicking the submit button of the form) 

Wireframes

Wireframes

I did some quick sketches of layout options for the new design. Contributors, such as writers and the design manager, had certain components to include in the new design. It needed to have space for facts, quotes, photos, and a video. In general, we wanted the page to be more visually appealing as well as get visitors to use the form.

ad landing page wireframe

Results

Results

Old Ad Landing Page

Old landing page.

Undergrad Ad Landing Page

New landing page.

I created the landing page with our CMS Expression Engine, HTML, and CSS. I also edited the photos. Once everyone approved the design, we made the pages live! We made landing pages for 8 difference audiences and 3 messages for each audience for a total of 24 ad landing pages. One of the major changes was making sure the form was one of the first things the user sees.  We positioned the form in a full width row directly beside a photo with strong messaging that related to the user.

Another change we made was removing the navigation, which was appropriate in this case because we didn't want the user to become distracted. The primary function of the page is to submit the form and we increased the chances of that happening by decreasing the amount of links on the page.

We have also added additional but still valuable information to allow the user to learn more about Meredith. The ads have been running since late 2018 and these are the results of our design changes:

  1. Submitted forms increased to 120 Q1-19 compared to 15 Q1-18
  2. There was a 40% increase of visitors to meredith.edu
  3. There was an 86% increase of new visitors to meredith.edu

Other Projects

Style GuideContent Design

In-app MessagingContent Design

Credit UnionMobile App Redesign

Digital ArtArtwork

Conversational DesignVirtual Agent

Effectiveness RateUser Research

LinkedIn Student AppUsability Testing

Wine to Water DRWebsite Design

Ad Landing PageLanding Page Design

Care Partners WebsiteWebsite Design

Residence LifeWebsite Design

svg-image
svg-image

Symone' Austin © 2022

 Symone' Austin © 2020

 Symone' Austin © 2020

css.php