top of page
Rate Match Header.png

EMPLOYER

Earnest

TEAM

5 People: Researcher, Visual Designer, Product Manager, Data Analyst, Junior Designer, Myself

CONTRIBUTION

User Flows, Research, Experimentation in Production, Wireframes, Interaction Design, Visual Design

DURATION

October 2021 - August 2022

THE GOAL

How might we allow customers to make informed decisions about their student loan?

 

By giving customers the opportunity to get rates earlier in the process with a soft credit check we allow them to have the flexibility to try multiple loan types or cosigners before applying for the best loan for their circumstances.

MY ROLE

I was the Lead Designer working with a junior product designer/intern, researcher, visual designer, product analyst, and product manager on the Student Loan Origination (SLO) product. I also received feedback and collaborated with the Lead product designer for Student Loan Refinancing (SLR) and my direct manager, the Head of Design.

THE CHALLENGES

EXISTING USER EXPERIENCE CHALLENGES:

Low reward compared to customer effort. In the existing legacy flow, customers went through an eligibility step which only tells them if they are potentially eligible for an independent or cosigned loan. If they are eligible, they would see headline rates, which is the range of lowest possible to the highest possible rates any customer could be eligible for.

 

Lack of personalization. Customers suspected that the results are not customized and had a lot of questions about what it would take to get the lowest rates. Customers already held some skepticism of the financial industry in general, and this wide range of possible rates confirmed their skepticism and lowered their confidence in Earnest and the application process.


Requiring higher commitment from users before seeing rates. If customers chose to continue to the application, they see additional questions after which they submit their application for a hard credit pull. If they are approved, they would see customized rates only after they start the loan customization process, the second to last step of getting a loan.

Legacy User Flow.png

This is the user flow for the existing Eligibility flow, where after inputting their information, customers see only a generalized range of rates available for all customers.

INDUSTRY & TIMELINE CHALLENGES:

When it rains, it pours. Student Loan Origination (SLO) is a seasonal product which limits the product team's ability to learn quantitatively from real users during design and development before "Peak". "Peak" refers to the critical time frame when most students whether in a semester or quarter system need to apply for loans in order to secure funding in time for the start of the school year.

Opportunities for real feedback are limited. One opportunity to get some signals as to how a feature is performing prior to "Peak" is "Mini Peak" when about 1/6th the amount of loans compared to during "Peak" are disbursed for students who need additional funding for the winter. Our plan was to conduct multiple tests in production during this time to maximize learning ahead of Peak. 

Few rate check examples from direct competitors. While a rate check feature existed for only one existing direct competitor, SoFi, we did not have any other examples of a feature like this nor did we have insider insight into how it was working for our competitors and why others student lenders did not adopt this feature.

Student Loan Origination Timeline.png

I made this visualization of the student loan origination timeline to assist with strategic roadmap planning. It depicts the the quarters starting with Q4 working towards the following Q3 when the main "peak" or most of our customers enter the experience and our loan volume is at least 6 times higher than the other 3 quarters combined.

TECHNICAL LIMITATIONS CHALLENGES:

Multiple projects were in flight. The development team was limited in time and resources with multiple other initiatives in flight. We needed to make the call to revisit the scope at multiple points throughout the process as a few other projects to improve user experience overall will overlap with Rate Check implementation, including the application experience which follows the new Rate Check feature in the new user flow.

Data and analytics debt from the legacy flow. We encountered limitations with consistently identifying unique customers across multiple parts of the funnel. Our Data and Analytics team had the challenge of working with our engineering teams to implement a backlog of events across the full customer experience.

DESIGN PRINCIPLES

In my audit of the user experience overall, my review of learnings from past surveys and testing results, as well as competitor analysis, I created a set of working principles to design towards for improving the SLO user experience. I shared this with the extended team and opened these principles to feedback as we continued working on new projects and features.

SEAMLESS: 

  • Reduce cognitive load (don’t ask users to recall where we can support)

  • Allow free movement or access (returning and going forward)

  • Plan for intentional pauses or non-linear routes (Asynchronous and linked)

  • Reduce context switching and distractions (Group logical form questions and steps)

CONTEXTUAL:

  • Reveal complex interdependencies (show how actions are related to results)

  • Educate users about policies and requirements (decrypt terms)

  • Account for multilayered motivations and needs (user needs can change with timing)

  • Increase Transparency (inform users of process, statuses, and what to expect)

FLEXIBLE:

  • Adapt to user situations (form fields are responsive to user entries)

  • Allow for collaboration (allow saving and sharing, necessary in Cosigner experiences)

  • User agnostic - irrespective of who is using it they should see what they need (allow redirects)

  • Considering diverse relationships (e.g. Cosigners may be grandparents and retired)

SECURE:

  • Look out for users (send reminders, alerts, notifications)

  • Surface safety nets (surface policies in case of need, like 9 month payment grace period)

  • Protect user information (limit sharing personal information)

  • Recommend what is also good for the user (make recommendations based on metrics and statistics proven to be helpful)

OPPORTUNITIES

  • Reward users with personalized rates earlier in the application process.

  • We can identify if customers are ineligible based on questions within the form and inform them as they enter their information

  • In the case that a customer is not eligible for one loan type (usually independent with undergrad students) we can redirect them to the rate check for Cosigned loan.

Above are the user flows for Rate Check. A high level flow in purple and more detailed level flow in black.

CO-CREATION WORKSHOP

In one of my first team offsites, I ran a workshop with my cross functional team members to understand the issue of user application withdraws as an indicator of less than ideal user experience and identify opportunities to improve upon features across the user journey.

Brainstorm Workshop Instructions.png
Brainstorm Workshop References.png

For reference, I provided customer quotes, data from the latest top reasons for withdrawing a student loan application, those same reasons compared with off season and peak season, and finally the new design principles.

Teams presented their ideas to other teams, we then voted on the top ideas and mapped them onto the user flow.

Brainstorm Workshop.png

This mapping helped us identify patterns for product improvement and to help us prioritize these ideas into future initiatives, including, of course, the rate check feature.

REFERENCES

I referenced existing rate check experience for the Earnest product, Student Loan Refinancing (SLR), wireframes from previous related homepage tests, what Earnest partners had previously designed, and competitor screens. For analogous inspiration I looked at credit card companies and flight booking experiences.

SLR Rate Check Results.png

Student Loan Refinancing (SLR) Rate Check Results Screen. While there is room for introducing new elements, for brand consistency, we will stay close to the UI decisions made in the SLR screens.

Previous Experiment.png

Test of Student Loan Originations widget. Test users expressed that the vertical side by side comparison of the terms was easy to understand, and that the single rate, rather than a range of rates felt transparent and more trustworthy.

Juno Rate Check Results.png

An example of the Rate Check Results screen from Juno, an Earnest Partner. Along with the other filter and sort options, I liked the filter of Fixed and Variable Rates, since most customers expressed that they knew their risk tolerance coming in and most would not consider Variable rates. The ability to select from the options feels like moving forward in the experience.

SoFi Rate Check Results Full.png

Out of the 5 main competitors, only SoFi, had an existing Rate Check Feature. They had a horizontal progress indicator, the ability to save and exit, as well as a label for the recommended loan offering. They showed the loan term selections horizontally with the ability to sort and to filter by payment plans.

Credible Form.png

Credible had a vertical progress/steps menu as well as a horizontal progress bar. They highlighted the educational/informative tips. This experience identified if users were potentially eligible with multiple lenders. They did not provide rates, just a range of rates for each competitor.

google flights.jpg

Google Flights I referenced for examples of slight variations in choices within the same set of limitations but with different companies, like the Credible experience.

American Express.jpg

American Express I referenced for interactions where users actively select and compare offerings within the same brand.

RESEARCH

I collaborated with an Earnest Researcher to put together a screener, questionnaire, and 2 prototype screen options for the Rate Check Results screen. We needed a quick test to make sure we are headed in the right direction.

​GOALS

  • Understand what expectations and goals cosigner parents have when beginning an Student Loan Origination (SLO) application.

  • Understand how they experience Rate Check Results pages and how it fits within their loan comparison journey.

Rate-Check_RCR A.png

Rate Check Results Screen Prototype A: Designed with the intention of giving users the ability to compare terms side by side, in a format similar to spreadsheets users were creating to compare competitor rates. Also the ability to filter and sort their loan term options.

Rate-Check_RCR B.png

Rate Check Results Screen Prototype B: Designed to be more similar to the existing "bookend" range of terms shown to users in the existing eligibility check experience.

DEMOGRAPHIC​

Testers who have previously cosigned a student loan. (Mostly parents of the students)

  • 8 Cosigners tested prototype A

  • 5 Cosigners tested prototype B

METHOD

  • 10 minutes background questions

  • 10 minutes unmoderated analyzing assigned prototype screen

INSIGHTS OVERALL

Cosigner Goals:

  • Cosigners’ top priorities are for deferred payments, so the student can find employment before beginning payment. Rates are second, followed by preferring fixed interest rate.

  • Cosigners front-load the research process, often deciding which specific companies to apply to by reading online or consulting with friends. That said, they do drop from funnels if they see that customer experience seems bad.

  • Cosigners often create spreadsheets with rows labeled before beginning the applications. They also take screenshots; being able to return to app easily is important, but parents have their own ways of doing that

Prototype Feedback:

Cosigners understood ‘estimates’ as meaning close to your final rates.  Not 100% guaranteed; depends on additional information they provide. 

Some cosigners weren’t sure if these estimates were even personalized for them; some parents thought the goal of the page was to specify the rate ranges of fixed vs variable loans

  • Prototype A: 

    • The information matches structure of the spreadsheets parents keep, and therefore easier to incorporate into comparisons

  • Prototype B:

    • Although parents generally understood that their final rates would come down to selected loan terms and a final hard credit pull, the rates shown were too broad to make useful decisions. If anything, they reduced confidence.

Recommended Iteration:

  • Even though participants in Prototype B understood ‘how’ these estimates were generally being generated, they still did not find them useful. Prototype A, however, inspired confidence. The format of clear estimates is significantly superior and helps parents decide if continuing is worth it.

    • Opportunity to iterate on intuitive filters and sorting in Prototype A​

  • Longer than industry standard deferred payments is an Earnest asset. Deferred payments are also of top importance to SLO parents, the only priority that isn’t clear on the RCR page. Should it be?

    • Opportunity to move Deferred payments higher on page.​

  • When asked how they’d save these offers, cosigners generally mentioned their spreadsheets, and copying the info over to the spreadsheets, or taking a screenshot. That said, it’s important to make it known that it’s easy to return to this page.

    • Opportunity for a long term ability to save their rates or return to them (Magic Link, Account Creation)​

  • Even though parents were overwhelmingly confident in their own personal financial decision making, they still wanted guidance to help them pick between fixed and variable, and wanted to know what others picked.

    • ​Opportunity to test a "Popular" label with CroMetrics, Earnest's third party testing service provider.

WIREFRAMES

ITERATIONS

Wireframes went through many rounds of iteration and feedback from research in user testing, to client happiness team feedback, and of course engineering and design team feedback. Below is a selection of explorations.

Iteration 2 Rate-Check Loan Details.png

Exploring a fading scrolling interaction

Iteration 3 Rate-Check Student Details.png

First iteration of the sticky left-hand side vertical progress indicator 

Iteration 2 Rate Check Results.png

Iteration of the Rate Check Results screen with 3 vertical cards and a Rate Check Summary to allow customers to review their entries and check for mistakes.

Iteration 2 Rate Check Results Mobile.png
Iteration 2 Rate Check Results Mobile.png

Mobile explorations of the progress indicator in horizontal format, and vertical card carousel format. Iteration with the filter controls situated under the cards closer to the reach of customers' fingers.

Iteration 3 Option A.png

DECISIONS

We reduced the complexity of the filters and sorting in favor of just 2 selections, one toggle for Fixed and Variable Rates and one dropdown for In-school payment variations while showing 5 total loan terms horizontally rather than showing a carousel vertically.

While the vertical cards for loan terms were user friendly for comparing up to 3 offerings, we ultimately went with the horizontal cards for consistency with the SLR sister product, and to reduce engineering lift. A follow-up exploration of the loan card UI will take place after the initial launch during a larger rebranding effort.

INTERACTION DESIGN

Following feedback that the application forms seemed very long, and the customer's desires to look ahead and see what is needed for the forms as well as their desire to submit a few different rate checks, one independent and another with a cosigner, we planned to add a progress indicator that will allow users to quickly navigate back to certain points in the form and make changes.

1 Progress Indicator.png
2 Progress Indicator.png

The Progress indicator had 3 functions

  • A gauge of how many steps are left in the user flow

  • Alerting customers to incomplete information or incorrect entry formats

  • Also navigation where customers can click to navigate to the form or their results

3 Progress Indicator.png

I iterated on ideas for the progress indicator for the left hand side of the screen where we had a lot of real estate for desktop. Previously, the majority of customers accessed their Student Loan application via desktop.

Mobile versions will be horizontal, located at the top of the screen, disappearing as customers scroll downwards and reappearing when they start upwards again.

4 Progress Indicator.png

Final states for the progress indicator after collaboration with the Visual Designer on animation and refining the size of the overall menu.

USABILITY TESTING

I advised and oversaw the work completed by a Junior Designer assigned to assist with in-person moderated usability testing for the project.

TESTING FORMAT

  • Conducted 45 minute moderated usability testing sessions with 5 participants

  • Showed Figma prototypes of Rate Check and Rate Check Results for SLO

  • Gathered feedback on interface

PARTICIPANT DEMOGRAPHICS

  • 4 : 1 grad vs. undergraduate

  • 3 : 2 male vs. female

  • 3 : 2 have not taken out student loans vs. have

INSIGHTS OVERALL

Likes

  • Statistics about other users’ trust in Earnest and their choices

  • Clean, intuitive user flow

 

Wants

  • Personalized recommendations + guidance based on previous input

  • More explanation for technical, financial terms

  • Ability to save

RATE CHECK (RC) INSIGHTS

Visual UI Elements 

  • Not sure if clicking Back < button returns to previous step or leaves entire flow

    • Scared to use it, in case info is not saved

  • Smaller sub-text was helpful, feels like it could be more prominent at times

  • Positive reaction to the branding

 

Input Fields, Decisions

  • Given info entered in Student Details, wanted to see which option is recommended between Independent & Cosigned loan types

  • Some form field seemed to belong with Student Details

  • Most would enter information at this point and involve cosigner later

RATE CHECK RESULTS (RCR) INSIGHTS

Visual UI Elements 

  • Some thought the alternating cards colors of blue and purple indicated some significance, perhaps certain options were related to one another

    • E.g. purple ones were “recommended”

 

Input Fields, Decisions

  • Text that appears on hover next to each toggle option was helpful and valuable

  • Wanted more personalized guidance on navigating and choosing from estimates provided

  • Wanted specific $ amounts to get a more transparent view of costs

RECOMMENDED NEXT STEPS OVERALL

Visual UI Elements 

  • Re-design back button, or in relationship w/ left rail

    • RC: help customers with choosing between Cosigner vs. Independent loan type

    • RCR: help customers with choosing between loan options

  • Give distinct visual treatments to loan terms based on recommendation
    Potential Ideas:

    • RCR: Move top, recommended 1-2 options and given them a green or purple
      indication vs. the rest

 

Input Fields, Decisions

  • Generate help text + value propositions based on previous user input

    • Add copy: “< Previous Step”

    • Allow CTA for “Save Progress” (once it’s possible)

  • Reduce confusion around technical terms

    • RCR: a sidebar glossary + intro copy linking to it, explaining how to best choose terms

    • RCR: explain more high-level, how terms are chosen, presented, and/or ordered in this way to benefit user

FINAL DESIGNS

Accomplished

  • Customers can move forward and backwards in the user flow

  • They can scroll forward to preview questions and steps

  • Showed customers their progress, introducing new UI and Interactions.

  • Inform customers of their eligibility as they fill out the form.

  • Customers can see real rates and terms available to them

  • Allowed multiple rate checks for customers interested in Independent or Cosigned loans

  • Incorporated UI elements also used in SLR screens​

Known Assumptions

  • While we front-load all the eligibility and rate determining questions, requiring higher engagement from users before seeing rates, customers will chose to continue to the application with Earnest (a few remaining questions) because we provided more transparency and established trust.

  • We anticipate launching a Rate Matching campaign during Peak where we can guarantee the lowest rates possible will help secure more loan commitments from customers.

1 Default Screen - Rate-Check Student Details.png
2 Rate-Check Loan Details.png
3 Rate-Check Loan Details.png
4 Rate-Check Loan Details.png
5 Cosigned.png
Mobile - Rate Check Results.png
Mobile - Cosigner Details.png
Mobile - Switch.png
Mobile - Independent Loan Selection.png

Deprioritized

  • Saving and Returning to the rate check results (A feature called Magic Link which was implemented with SLR users to start, we wanted to get more results from this first implementation before advocating for the feature in SLO).

  • A "Flex Form" allowing customers to add Cosigner information following independent rate check results. Surfacing the part of the form customers need in a logical manner.

Out of Scope

  • A Multi-player form where students or cosigners may fill out parts of the form and leave other parts for the other party to complete.

  • A single click submission of Application at Rate Check Results, where we remove all need for an application step. Due to the need to reduce engineering lift, we opted for a two part application, Rate Check, then the remaining details needed.

PRODUCTION TESTING

After the soft launch to 10% of real users throughout SLO Peak, we were able to observe real customer behavior and create experiments to run in production to get more insight and implement more user centric solutions. Below are some of the main themes for problems we observed and our solutions and experiments to address those problems.

Problem: LACK OF CONSISTENT FORWARD MOMENTUM

The original designs called for the ability to switch loan type at rate check results, but that feature was de-prioritized due to timing. We discovered that while users understood the function of going back to edit their form, users did not like going backwards to switch loan types, and seeing the same form again. Also, in many instances primaries may not be eligible for independent loans and even if they are eligible, independent rates are often much higher than cosigned rates due to the student's short credit history or income.

 

Solution: REDIRECTING USERS

While the original form is familiar and reduced the technical complexity of the form, we optimized for moving customer's forward in the user flow via additional redirection CTAs at points of potential friction to create the feeling of forward momentum.

Save & Exit.png
Invite Cosigner - Floating Action.png
Account Creation - Before Rate Check Form.png

Problem: USERS LEAVING WITHOUT CREATING AN ACCOUNT

Students and cosigners alike would leave the flow without creating an account which is prompted after seeing their Rate Check Results.

Solution: INTRODUCING ACCOUNT CREATION AT MULTIPLE POINTS

We created experiments for account creation on mouse leave, a CTA to Invite Cosigner at Loan selection which leads to account creation, and the option to SAVE & EXIT at Rate Check Results.

Account Creation.png

Problem: STUDENTS CHOOSING INDEPENDENT LOANS WHEN INELIGIBLE

Primaries would often try to get rates with an independent loan, for which 96% of them were ineligible, leading to an unable and redirect screen. We can opt to inform users earlier in the process to try a cosigned rate check to begin with.

Note: 98% of Cosigners responded to invitations and filled out their portion of the application within a day.

 

Solution: EMPHASIZING COSIGNED LOANS

In most cases these loans have the lowest possible rate for customers, and are lower risk as a loan as customers are less likely to default on the loan. It is a win win choice for customers and for Earnest. Even so, given the choice between an independent or cosigned loan, we often saw students complete an independent rate check first, and then may not complete the cosigned rate check. We ran multiple tests to nudge users towards a cosigned loan.

Guide Towards Cosigned Loan.png

Problem: USER AGNOSTIC ACCOUNT CREATION

Initially to reduce scope we optimized for Primary Led Rate Checks, which led into Primary Account Creation. 

Note: Cosigner led rate checks resulted in a higher rate of application submits, likely due to the cosigners having more decision making power out of the two parties.

Solution: TARGETING COSIGNER USERS

Add a Role Selection form field allowed us to identify if rate checks were conducted by Cosigners or Primaries and reduced friction at account creation for the Cosigners.

Role Selection.png

Problem: BACKEND LIMITATIONS IDENTIFYING USERS

We originally did not include an SSN form question to reduce friction, which then resulted in a high number of "Unable" results because the provided user details were not specific enough to definitively identify a single person with only a soft credit pull.

 

Solution: ADD SSN ENTRY

Tests showed that users were not hesitant to share their SSNs at rate check, presumably because they are accustomed to sharing their SSNs in this context of an application for a loan. 

Optional SSN.png

LEARNINGS

We made many improvements to the Rate Check feature as we observed real user interactions during Peak. Referencing Hot Jar, and tracking our funnels in Amplitude, as well as our internal experiments, formed a clearer picture of our customer behavior during a challenging rate environment as rates continued to climb. Our user experience improvements allowed our conversion to nearly, but not quite, reach parity with the legacy eligibility flow.

Conversion through Peak.png
Start to Sign Conversion through Peak.png

USER EXPERIENCE:

  • Seeing Rates before applying does not guarantee that customers will submit an application.

  • Customers are not loyal to brands, but are loyal to the lowest rates.

  • Most customers applied to only 2 different companies, if Earnest did not require a submission to see their rates, customers may be willing to get a hard credit pull only a limited number of times and thus do not submit an application for Earnest, opting to continue with lenders where they already used a hard credit pull.

  • Cosigner Led applications resulted in more application submissions, likely because Cosigners have more of the decision making power than their primaries, mostly undergraduates, who are originating loans.

  • Due to technical limitations, we compromised on the flexibility of the experience for customers, we still have a lot of opportunities to improve.

THE ENVIRONMENT OF LENDING

Customers liked seeing rates up front without having a hard credit pull. Yet the rates were rising at a rapid pace during SLO Peak due to the economic climate and seeing those rates may actually have been discouraging for users.

NEXT STEPS

Keeping the volume at 10% of all users, we will continue to make improvements and gather learnings in the next Mini Peak.

START

  • While most applications are started by undergraduate students, Cosigner initiated applications have a higher percentage of follow through, most likely due to Cosigner decision making power.

    • Target and inform Cosigners at the Top of Funnel.

    • Inform Students of benefits of adding a Cosigner at the Top of Funnel.

  • Optimizing Emails - Conversion value-based bidding emails are sent when after a user signs their loan; opportunity to test sending value signals higher in the funnel where we have more volume.

STOP

  • Shipping new features during peak seasons, it is a time for experimentation in production.

CONTINUE

  • Maximize experimentation and learnings during mini-peak using our knowledge of seasonality and past experiments to plan the experimentation roadmap.

  • Continue increasing scored users and adding more flexibility to the rate check flow for students needing cosigned loans.

bottom of page