Michael Ligier
Michael Ligier

upstart - overview

My main design project over the course of my internship with Upstart was to come up with a new landing page strategy for the company and execute the redesign of the current landing pages that we have. The entire process includes understanding the problem with user research, concepting, wireframing, developing high fidelity mockups, running A/B tests, and analyzing the results. 

team/contribution

The team members I worked with on this project are Darren, Leah, Karina, and Vicky. I created all of the wireframes and high-fidelity mockups as well as conducted user research and ran all of the A/B tests. Darren and Leah helped with asset generation (icons, images), Karina with research and brainstorming, and Vicky with the development of the page.

 

problem

When coming up with a new landing page strategy, I noticed that there were two main problems with the current landing pages (shown to the left):

Landing pages are meant to be optimized for conversions (specifically conversions with the call to action button). Best practices generally recommend that landing pages have a reduced number of exit points, but currently our landing pages have many ways for a user to leave the page

The overall design feels outdated and though our homepage has been modernized a bit and will continue to be revamped in the future, it seems like these landing pages have been left behind - there are broken elements on the page, the overall design is from a previous version of the homepage, and the page isn’t cohesive with the rest of the Upstart brand.

 

hypotheses

There were two hypotheses that I wanted to test with this project. The first addresses the problems above while the second attempts to extend the landing page’s impact on the overall growth of the business.

If we optimize the landing page for clicks on the call to action button by removing navigation, reducing the length of the page, and putting multiple call to actions throughout the page, then the conversion rates will increase.

If we have a more seamless ad to landing page experience by using similar imagery and copy from advertisements on the landing page, then the increased relevance to the user will increase the overall conversion rate.

 

user research

In order to determine what people liked about our brand and what content to put on the new landing page, we conducted some user research to better understand how our customers thought about Upstart. We interviewed seven people via Google Hangouts in order to qualitatively get their underlying feelings for the company. Furthermore, I conducted a word/phrase frequency analysis from over 700 reviews on Credit Karma (a loan review site) using a simple web scraper I built.

 

Above is the frequency analysis that was conducted and to the right was the user research wall that we created to house all of the findings we consolidated from our user research.

 
 

sketches

After we conducted and consolidated our user research, our team then got together and began sketching out some possible layouts for the page. In this process, we focused on quantity over quality and were pressed to sketch out as many ideas as we could in 10-15 minutes. Featured to the left are some of the sample sketches that we came up with for layouts. Some focused more on visual components while others were more barebones and focused on placement of content. In the end, we wound up consolidating the elements that our designs had in common, or that had a particular element we liked and I moved on to turning those into wireframes.

wireframes

The goal in the wireframing process was to turn the sketches we previously created into a more tangible product. In the image to the right, you can see some examples of the mobile mockups that we created which each differ slightly in layout, content, or specific elements. I’ll be going a bit in depth into the individual elements in the high fidelity mockups section. After I created the wireframes, we went through a design critique and review process to select the wireframes that we collectively liked the best. These would then be turned into the final high-fidelity mockups that engineering would develop.

 
Screen Shot 2017-07-26 at 11.21.09 PM.png

mockups

The two sites can be viewed live at www.upstart.com/personal-loans and https://www.upstart.com/myoffer-beta. Here we’ll go through a few of the individual sections and point out the reasoning behind certain design choices that contribute to the effectiveness of the overall page.

Fixed Header: 

One of the biggest changes that was made to the landing page was the removal of all of the navigation buttons at the top. Instead, we replaced it with a fixed header that moves with you as you go down the page. The reason for this was so the user would always have a call to action (as the point of a landing page is to optimize for click-through rate on the call to action button).

Color Scheme:

The large visual change between the old landing page and this redesigned one is the focus on monochrome imagery and more neutral colors in the header section with pops of teal. Not only does this make the page have a more clean look overall, but it becomes easier to switch hero images in and out as more landing pages are created, as there's less of a reliance on colors in the image.

Iconography:

The choice in icons and text to put in this section were determined almost exclusively from the user research we conducted earlier. The three factors that people mentioned most during our user interviews were that we were quick (next day funding), provided low rates, and gave them a loan when others wouldn't (with our technology). 

Typography:

Many of our competitors have started using thin typefaces with very minimalist design aesthetics. However, as a company, we wanted to stand out so we've made bold imagery and bold typography a part of our brand overall. The text in the main header and the headers of each section is bolded for that reason.

Diagonal Lines:

One feature of the page that is new is the diagonal lines between sections. We wanted to create a guide for the user to follow as they move down the page. Rather than simply reading one section and finishing, the user is able to be led by these lines to the next section. We decided to not include the diagonal lines in the screen a user sees when they first come to the site because our goal is to have them click the call to action button. Only if they show intent for more information do we show them the diagonals.

Testimonials:

Testimonials became a very important feature in the overall design. Since we are offering a financial services product, it's important for us as a company to establish trust with users. This is most often done in testimonials because they're real people who are vouching for the company. Again, we wanted to only give information to people who were intent on finding new information because we wanted to funnel most people to the call to actions, so we decided on the carousel format to provide that flexibility. 

 

experiments & results

After the page was developed, I planned out a testing schedule which would allow us to determine whether or not the page was effective. Most of these were in the form of an A/B test so we could easily tell what the performance of the new landing page was and whether or not it was a significant result. Some of the experiments that have been launched or will be launched before the end of my internship are:

  • Comparing the performance of the new landing page against the current homepage (which is where ads are currently directed to) from both a Facebook and a Google search advertisement: The goal here is to test whether or not the new landing page's design, which is optimized for conversions, makes a difference to the overall click through rates of the page

  • Comparing the performance of two landing pages, one with a hero image and text that is relevant to the ad the user came from and one with more generic imagery and text: The goal with this test is to see if relevance and a more seamless ad to website experience increases conversions. If people are seeing a consistent theme from the ad to the website, it might be more relevant for them and they might be more likely to convert

  • Testing the effectiveness of an even more reduced length by comparing a shorter version of the landing page to the current one: Perhaps people don't need all of that info and loading speed is far more important. If we have a page that's shorter and has less content, but loads in half the time, would that increase or decrease conversion rates in the long run?

Test 1 Results: When comparing the performance of the old landing page to the new one, the new landing page doubled the clickthrough rate compared with the old page. We wanted to make sure that these weren't just erroneous clicks because we removed the navigation, but users were also filling out the funding form (the next page after the landing page) at similar rates.

Test 2 Results: Looking at two landing pages which are exactly the same except for the hero image (one that is relevant to the ad and one that is more generic) we saw a 5-10% relative lift in the relevant image. This experiment was ongoing as I finished up the internship, but it's promising for the idea of relevancy across platforms and ads to improve conversion rates.