Digital Certificate of Deposit

client
KeyBank
project type
Product Design
year
2023
Tools
Figma, UserZoom, Jira, Miro, Tableau
Jump to Results

Background

In KeyBank's client-facing originations we have two systems. UAP is our legacy system and AOX is our modernized system. Currently a large initiative of ours is to migrate as many products off of UAP and on to AOX.

Problem

The UAP system presents significant challenges due to its outdated design and sluggish performance. From a technical standpoint, UAP is slow, but this also translates into a poor user experience, with users spending more time on pages than necessary.

Additionally, maintaining UAP consumes valuable development resources that could be better utilized to improve AOX and address other priorities in our backlog. This inefficiency highlights the need for a strategic overhaul to optimize both system performance and resource allocation.

Opportunity

Modernize our account opening experience by migrating products off of UAP. We identified that the most value driving product to move to our modern AOX would be certificates of deposit.

Improve pull through rates on CD and increase our overall booked units.

01

Discovery

There is a particular pattern we follow in opening deposit accounts or credit cards. Certain types of questions we ask at different stages in the application. They are all defined by which back-end systems they are pulling information into. For example, personal information questions are asked up front so we can run an ID check in the background before continuing.

CD is a new product being migrated into the system I design for. It being a unique product, different from what we currently support, it pulls information from specific back end systems. Before we could begin designing or even researching, it was important to map out which back end systems were being utilized when so we knew our limitations.

To define the order in which we could ask questions we held discovery sessions between design, tech and product. In these sessions I created a map of how our back-end systems could work.

As you can see this is quite complex. This is meant to be most useful to our developers and our business analysts. I took this and refined it into a flow that was more useful for just design.

This flow chart better illustrates the types of questions we'll be asking and when we'll ask them in the flow.

The flow chart highlighted that certain questions, like those about name, address, and employment status, are consistent across all product types. It also clarified where to best position questions related to the Certificate of Deposit (CD), such as term length and amount.

With these insights, I was able to address technical constraints and then proceed to the research phase to further refine our approach.

02

research

Current State Insight

In redesigning the CD account opening flow, I identified a significant pain point related to rate transparency. Unlike competitors who prominently display rates on their landing pages, KeyBank requires users to navigate to a separate "Rates and Fees" tab to view this crucial information.

This extra step forces users to make several clicks and switch between tabs, often not seeing the exact rates until the confirmation page.

This approach disrupts the user journey, adding unnecessary complexity and friction. Users may become frustrated with the extra effort required to find rate information, potentially leading to confusion and a less satisfying experience.

By addressing this issue, we aim to streamline the process and enhance transparency, aligning with best practices observed in competitor designs.

One of the largest takeaways I had from the discovery portion of our work was that the unique aspect of our CD design would be the CD selection page. This was the largest part of the experience that would require new UI.

To learn how other competitors were handling their CD selection methods, I conducted a competitive analysis.

The Finding:

Many different institutions front load CD selection to their landing page on their website.

In this example, and in many more I found, BMO Alto employs a sort of calculator widget that allows the user to see the rates they will receive and they have a call to action to directly open that specific account.

This widget enbles users to shop around for the best rate.

How This Applies to Us:

This method would give the system I work on, AOX, the benefit of already knowing the specifics of the product before they even enter the account opening flow.

This method makes sense on the surface and allows flexibility to the user but would be extremely hard for us to adopt at Key. At the time the marketing team, which controls our website design, did not have funding to take on a project like this. Front-loading product selection onto Key.com would be an enormous undertaking. Maybe the juice of this method is not worth the squeeze.

The Finding:

The method Capital One uses here is within their account opening experience, not on their home page.

What they have, and others such as Wells Fargo, is a preset list of certain frequencies of CDs all with the various rates a user would receive displayed. This allows a user to easily see all their options in one place.

How This Applies to Us:

While being able to view all the different options, with rates displayed, all in one place is great, it may not work for our use case.

Key's CD product frequencies are already set. The certain products we offer have much more variability than what is offered here. For example we have Short Term CDs that offer a lot of variability. A user could select any number of days for their CD to be in length anywhere between 7 days and 179.

Displaying this many options in one place would be cumbersome to any user.

Competitive Analysis Main Insights

While being able to view all the different options, with rates displayed, all in one place is great, it may not work for our use case.

Key's CD product frequencies are already set. The certain products we offer have much more variability than what is offered with competitors. For example, we have Short Term CDs that offer a lot of variability. A user could select any number of days for their CD to be in length anywhere between 7 days and 179 or 6 to 11 months.

Displaying this many options in one place would be cumbersome to any user.

A/B Testing

Inisghts

The results revealed several notable effects:

Increased Interaction: Users clicked on the screen an average of 1.7 more times when using the shorter dropdown. This suggests that while the interaction frequency increased, the improved design led to other significant benefits.

Faster Term Selection: The streamlined dropdown reduced the time needed for users to select their CD term by 32% compared to the traditional dropdown. This indicates a more efficient selection process, enhancing overall user satisfaction.

Quicker Changes: When users needed to adjust their CD length, the time required dropped by 25% with the shorter dropdown. This improvement reflects a more intuitive and responsive design that accommodates user adjustments more effectively.

These findings underscore the impact of design choices on user efficiency and interaction, highlighting the advantages of a more focused and user-centric approach in the selection process.

Testers consistently reported a favorable overall experience with this design approach, highlighting its effectiveness in improving the selection process.

The words most used to describe the experience using this method of CD selection.

Key Insight

In our recent A/B test, we discovered that while a consolidated dropdown menu is generally effective, its utility diminishes when the item count exceeds 80. Beyond this threshold, user progress slows, making it more efficient to split the dropdown into smaller sections.

This finding challenges Nielsen Norman's guideline of limiting dropdowns to 15 items. Our test results show that, despite this recommendation, a dropdown with up to 80 items can still be functional because users are familiar with the list format and can navigate it efficiently. Similar to alphabetical lists like country selectors, users can quickly locate their desired option by scrolling, validating the need for flexibility in applying UX guidelines based on context.

03

The design

CD Selection Page

04

The results

44% Reduction in Application Time

The average time to apply for a CD decreased from 9.8 minutes to 5 minutes, streamlining the checkout process significantly.

5% Increase in Booking Rate

In the month following the release, we observed a 5% rise in AOX bookings, reflecting improved user engagement and efficiency.

185.7% Increase in Same-Day Funding Rate

There was a dramatic 185.7% increase in the rate of same-day funding.

05

The details

Select CD Details and Rate Dispaly

Problem Identified: Our findings revealed that users on Key.com had difficulty finding and comparing CD rates due to poor visibility. The existing underfunded landing page did not facilitate effective rate comparison.

Solution Implemented: To address this, we redesigned the CD selection process to enhance transparency. Users can now view the interest rate and annual percentage yield (APY) immediately upon entering their CD details. Additionally, a dynamic chart allows users to explore and compare rates based on different deposit amounts, empowering them to make informed decisions and choose the best rate available.

Business Objective: By providing clear, immediate visibility into the rates and allowing users to compare them directly on a single page, we to reduced the fallout rate and boosted bookings. This approach kept users engaged and informed, leading to a more efficient process.

Concept Sketches

Alternate CD Selection Method

For the CD products in which we had a few different options for term length, days and months in this case, we implemented a radio selection above the dropdown.

The dropdown being responsive allows for users to more quickly navigate the selection compared to our legacy experience.

A multitude of payment options including both frequency and method of payment allow for flexibility when it comes to funding your CD and also being paid out on your interest gained.

This directly contributes to our large increase in first day funding rates of CDs.

05

Retrospective

When releasing a new product, I always make sure to track how it is performing. I do this mostly in Tableau which allows me to gain insights on each page. One of the takeaways we found when monitoring the performance of the new CD product was that a lot of people, checking out with a specific CD product, were reaching the same full page error.

The reason users were reaching this full page error was the fact that they didn't meet the requirements to open the specific CD. Here is some of the marketing we released promoting our CD rates on our landing page.

As I have underlined in the image, we do mention that you have to be a KeyBank client with a checking account to receive the relationship rate advertised. However users do not read and instead scan. This resulted in many clients coming in who were not qualified to get the relationship rate.

When a user would log in with their KeyBank credentials, they would be directed to the full page error below.

Initial Design

Follow Up Iteration

Initial Design: In the original error design, users were directed to open a checking account to become eligible for the advertised CD rate. This approach oversimplified the situation and did not account for the fact that users could still access other CD products with comparable rates. Additionally, the alert icon used felt out of place, as users hadn’t made an error—they simply weren’t eligible for the specific CD.

Follow Up Iteration: In the updated error design, I aimed to provide a more comprehensive and user-friendly experience. Instead of a generic alert icon, we introduced a piggy bank illustration to convey a lighter message. This design offers users clearer information on their options, including the possibility of opening a non-relationship-rewards account for a similar rate or opening a checking account to access the specific rate they initially sought. By presenting multiple pathways and additional context, the new design helps users make more informed decisions and enhances their overall experience.


After this change, our pull through rate, meaning the amount of people who started and finished an application, went up 9% following the error message update.

This is a showing in why it is so important to monitor experiences after a release to optimize.