(re)Building Springleaf

For the past 2+ years I’ve been working at Springleaf Financial (now OneMain Financial), a leading consumer finance company providing loans and other credit-related products to more than 10 million customers in 44 states. I was brought on to the newly formed digital team in the summer of 2014 to head up the design of the online presence for the company.

Inheriting Legacy

When I joined Springleaf, while the site was still a better experience than alot of the competition in the personal lending space, the site left much to be desired. The site lacked focus and clarity. Specifically, the site suffered from poor visual and information hierarchy. A more streamlined approach was needed to better convey to our customers, what was the most important and where to look first. Also as a financial lender, credibility was of the utmost importance. The visual design needed to be completely rethought and updated.

Legacy Homepage

There are some who completely dismiss the importance of aesthetics, often citing unattractive but popular websites such as Craigslist. However, aesthetics do have a function. Attractive things work better. Studies show that emotions play an important role in the users’ experience.

Stanford University conducted a study with 2500+ participants on how people assess the credibility of a website. The findings prove the importance of visual design: “Nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes. (…) Beautiful graphic design will not salvage a poorly functioning Web site. Yet, the study shows a clear link between solid design and site credibility.” — from the Stanford Credibility Project

Another issue that would be addressed in the design would be the lack of a responsive web experience. At the beginning of the project, our mobile traffic was over a quarter (26%) of our visitors. (By launch of the redesign it was at 36%, and as of September of 2016 we had 59% of our visitors viewing our site on mobile).

Begin at the beginning

The first task I undertook was to create the visual framework for all of the items that needed to be created. Specifically the focus was on the grid, the typefaces used to present information, and the color palette.

The Grid
As part of the entire project, the development team was also rebuilding the backend systems from scratch. They had already decided to build the front end on Bootstrap. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Responsive, mobile first fluid grid system that scales up to 12 columns as the device or viewport size increases

By implementing a underlying layout grid we gained:

  • Clarity/Order — Grids bring order to a layout making it easier for visitors to find and navigate through information.
  • Efficiency — Grids allow designers to quickly add elements to a layout because many layout decisions are addressed while building the grid structure.
  • Economy — Grids make it easier for other designers to work and collaborate on the design as they provide a plan for where to place elements.
  • Consistency/Harmony — Grids lead to consistency in the layout of pages across a single site or even several sites creating a structural harmony in the design.

Typography
95% of the information on the web is written language. Typography and the font-faces we choose have a huge impact on multiple aspects of our website including readability, mood, perceived article length, user experience and much, much more. It is absolutely essential that designers know and understand the different principles of typography that create a pleasing design, in order to properly portray the vision and mood of the website they are designing.

  • The Font Hierarchy Helps Establish a Message Hierarchy
    Web fonts can help you define the hierarchy of your content in two ways: size and color. This means that you can have your viewers read your information from most important to least important just by using font sizes.
  • Different Font Types Help Differentiate Between Types of Messages
    In any website, there are several types of content: main, secondary, and navigation. Using typographic styles to differentiate between the type of content makes your website more clear and easier to understand.
  • A Good Typography System Will Drive Consistency Between Pages
    Your viewers will be able to easily understand your content, how it is structured, and how they can navigate through it.
  • Combining Stylized Fonts with Standard Fonts Can Create a Nice Designed Effect
    By using a clean, easy to read font for copy with stylized headers, you can achieve that charming balance and give your website a sophisticated and well designed feel.

Playing off our company tagline, Lending made personal, I choose to use two google fonts; Varela Round and Lato.

font-faces used on Springleaf.com

I wanted to give a more branded feel to the site versus just using the Arial / Helvetica default.

I chose Varela Round for is resemblance to the Springleaf logo type. Its rounded features give it a friendly approachable feel. Lato, with its semi-rounded details give a feeling of warmth, while the strong structure provides stability and seriousness. I think these two faces project the right balance of friendliness and professionalism that Springleaf stands for.

Color Palette

The legacy color palette given to me art the beginning of the project was good. I believe the execution of color on the site was not ideal. There was a heavy dependence on color blends and very bright, electric colors. I originally tried to tone down the bright palette, but was quickly discouraged by the corporate marketing team not to alter the current colors. I chose to simply use the Springleaf green, dark grey, and shades of these two colors to create the bulk of the color on the site. I also used the oranges to create a contrasting call to action button style.

Color palette progression thru the project

Identifying the Experiences

Before my time on the team, there was some user experience research done but it was limited in scope. Additionally, the site had only recently had any analytics connected to it. Without a lot of solid user information, I choose to focus on the data we had and define a path forward:

  • Based on analytics, determine which pages are the most heavily trafficked
  • How are users navigating through the pages identified as heavily trafficked
  • Identify pain points or points of breakdown on these user paths
  • Optimize design/content to better support users’ goals
  • Ship v1 designs and measure level of success.
user task flows

The realignment

About the Project:
Springleaf wanted to overhaul their existing web presence, increase engagement and drive more applications.

My Role:
As the lead product designer in the project, I worked with the Springleaf digital team to strip down the site to its core functionalities and advocate for a better experience that will be enhanced incrementally as the legacy systems at the back-end ramp up to a better standard.

The Problem:
While the site in general was a better experience than some of the competition in the personal lending space, the site left much to be desired. The site lacked focus and clarity. There was too much trying to be presented at once and the information hierarchy was not focused. What the entire site needed was a design realignment.

Realignment, as compared to redesign, has a much greater focus on user experience and usability. With a realignment, you’re addressing specific issues with the structure or functionality of the site, in addition to design changes.

After a preliminary presentation to internal stakeholders, I quickly realized that traditional wireframes were not going to work. It was too difficult for many to understand the final result just by looking at a wireframe. Wireframes can’t always convey important design components. Grey boxes and lorem ipsum text content can’t communicate how colors and contrasts influence content, the visual impact of brand design, the visual weight of graphical elements or the visual path created by colors, contrasts and components. This is where the mockup has one up on the wireframe, providing a language that all can communicate with and understand.

After an initial slow start I began to create higher fidelity mockups with more ”real” copy. This greatly increased the understanding of the designs and produced much tighter review cycles to get to a final direction.

The homepage

As one of the most viewed pages on the site (2nd behind account management) the homepage was the first page to be explored. The main objectives of this page were to increase volume into the application funnel for prospective customers but also make it easy for current customers to login, find a branch, or make a payment.

Legacy Homepage

Re-aligned Homepage
The new homepage was laid out on a very strict underlying grid, Unified typography and an information hierarchy that put the most important concept, customer acquisition, as the most prominent. Functionality is also present for existing customers but it was consciously reduced in the hierarchy of the page. The marketing carousel that dominated the legacy layout was rethought as a set of wells that sit to the bottom of the layout. I made this design decision because in general, carousels do not preform very well past the first position. By exposing all the options, we would have a better chance of viewers clicking on a particular well of interest versus potentially not seeing a content area on a carousel.

Re-aligned homepage

Results
An A/B test was conducted in Optimizely to verify that the new design would preform as well or better than the legacy layout.

The new design was a clear winner, all calls to action improved:

  • Apply Now (+137.7%)
  • Make a payment (+16.8%)
  • Find a branch (+84.1%)
  • Login (+30%)

Personal Loan Page

The legacy layout suffered from too much navigation and not enough chunking of content. the call to action is also buried in a sidebar. One of the most important fact about web users is that they don’t read, they scan. Jakob Nielsen’s eye-tracking study from 2008 indicated that less than 20% of the text content is actually read on an average web page. In another usability test, Nielsen tested different wording styles for a website. Concise, scannable and objective copywriting resulted in 124% better usability.

Legacy personal loan page

Realigned Personal loans page
The new personal loans page gives quick digestible chunks of information and a prominent callout to draw the eye to apply. I was also very deliberate in making the unique value proposition clear and part of the call to action banner. Customer testimonials were also included and placed close to the CTA to reassure the viewer if they are still on the fence about applying. Secondary information was also included on the page for a viewer who was more in a “browsing” mode. Sections for uses of a personal loan and the loan 101 sections were developed to further inform the viewer and not simply make the page about apply for the loan.

realigned personal loan page

Results
An A/B test was conducted in Optimizely to verify that the new design would preform as well or better than the legacy layout.

The new design was a clear winner:

  • Apply Now (+195.4%)
  • Engagement (+60%)

Loan Application Page

The legacy loan application was a three step process that gathered specific information about the applicant to determine if we would offer them a loan. because of the multiple steps we noticed a 20% drop off from step 2 to step 3, and another 20% drop from step 3 to submission. This application was also not responsive, making it very challenging for the mobile traffic that came to the site to apply for a loan.

Legacy Loan application (step 1)

Realigned Application
The new application went against common web practice and created a single long form for all the loan information. We completely stripped all navigation other than the continue button to focus the applicant on completing the form and not leaking out to another part of the site half way through. Headings were also put in to demarcate the types of information that would be needed for each section. The grid was also used to place elements in line to create a natural division between labels and form fields. This line helps guide the eye to the bottom of the page and the continue button.

realigned application page

Results
An A/B test was conducted in Optimizely to verify that the new design would preform as well or better than the legacy layout.

The new design had better performance:

  • conversion rate (+11.9%)
  • Engagement (+13.2%)

Learnings

This project proved to be a major learning experience for numerous reasons. Here are some of the biggest takeaways:

Teamwork
Perhaps the single most important thing during this project was communication and collaboration. By avoiding common waterfall workflows, we were able to release a better product because all the members of the team were involved. Designs we regularly viewed and pressure tested by the development team to check feasibility and impact on the timeline. At moments of disagreement, I worked with the development team to understand their issue(s) and pivot the design to alleviate their objections while still staying as true to the design as possible.

The notion of “perfection” is simply unattainable.
Nothing that surrounds us is perfect. There’s always at least one thing that can be improved. If everyone leads their product to perfection before launching it to the public, then today we would have nothing! When starting the work, you always have some actual goals to reach with the design. The pursuit of perfection does not bring you closer to the goals. On the other hand — coming up with the simplest possible solution does.

This is only the beginning.
Websites need to evolve and change over time. This version was our most informed viewpoint at the time with the information we had. But continual improvement is a must. Misunderstandings and incorrect assumptions can exist in any project. By implementing an iterative design philosophy we can course correct as the market, our users or other factors change.

Iterative design is the ongoing process of refining and improving a website. Rather than scrapping everything on your website all at once, you make small changes on a regular basis. As you make small tweaks to your website, you test the changes, getting feedback from web visitors and tracking results. Armed with this new data, you dive right back into the process, and start a new cycle of designing, testing, analyzing and refining.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.