Case Study

KeyBank Outreach Moments: ATM Fees

How might we provide clients with support so they are less likely to incur an ATM fee and feel frustrated with KeyBank?

Role
Product Designer

‍

Team
A. Ohly – Product Owner

L. McNamara – Copywriter

J. Anderson – Analytics

M. Scanzuso – Marketing Strategist

P. Doyle, M. Campbell – Marketing Execution

H. Fedor – Developer

Background Context

Clients want us to make them feel confident in their money management decisions by proactively providing them with the right tools, alerts, and communications.

 

  • Regional ATM Fees cause client pain and employee friction.
  • 17% of clients who rated contact center satisfaction “Low” incurred a foreign ATM Fee in the past 3 months.
  • Each month 180-200k clients are charged an ATM fee.
  • ATM fees charged to checking accounts within their first 3 MOB are highly correlated with their likelihood to attrite by their 6th MOB.

‍

The Problem

Regional ATM Fees cause client pain and employee friction. How might we provide clients with better support so that they are less likely to incur an ATM fee and feel frustrated with KeyBank?

‍

My Role

I worked on this project as the Lead Product Designer alongside a team of copywriters, analysts, project managers, and developers. My responsibility was to visually communicate the resources available to help clients avoid ATM fees.

‍

Target Users

Clients who have incurred a regional ATM fee who are either eligible or ineligible for a checking account upgrade.

‍

Project Constraints‍

  • Strict compliance-approved copy and design guidelines
  • Outreach will happen via email

‍

Project Goals

Inform clients on incurred ATM fees and share alternatives to avoid fees.

‍

Design Goals

  • Needs to be easy to read at a glance
  • Eliminate confusion between product offerings

Business Goals

  • Improve attrition
  • Improve customer satisfaction
  • Upgrade clients to new products
  • Reduce volume of clients calling contact center
  • Test effects of fee avoidance messaging and its relationship to recurrence rate and client behavior

Project Success Metrics

  • Fee Recurrence Rate
  • Fee Incurrence Rate
  • ATM Fee Charges per Client
  • Client and Account Attrition

My Success Metrics

  • Feedback in daily standups, weekly creative reviews, and refinement sessions

‍

Solutions

‍Meeting User Needs

Clients want to feel supported as they go through stressful moments like incurring an ATM fee. Our solutions aim to alleviate that stress and confusion by providing information to clarify why they might have incurred an ATM fee, what they can do to avoid incurring one in the future, and who they can talk to for any extra information.

‍

Offer Tips

By informing the client of how ATM Fees work and what they can do to avoid them, we help the user feel in-the-loop and prepared to prevent incurring fees in the future.

Tips to avoid ATM fees

Recommend Account Upgrade

Users who upgrade to a Key Smart Checking Account gain access to use of Allpoint ATMs nationwide. That drastically increases the number of ATMs a client can use, and can help them avoid ATM fee incurrence in the future.

Product upgrade recommendation

Schedule a Financial Wellness Review

KeyBank offers a Financial Wellness Review service that allows customers to talk about your current financial picture, discuss what's important to them, and have a banker recommend the products and services that best fit their unique needs.

‍

This can help a client decide if a different product or service can help them avoid ATM fees in the future.

‍

Financial Wellness Review Recommendation

Design Process

Each week of this product sprint, my team held refinement sessions and creative reviews where I presented my designs and received feedback from stakeholders.

Financial Wellness Review Module

Originally, the team planned on having two CTAs: one for clients to schedule a financial wellness review and another to call their branch if they desired further information.

‍

We decided that it made the most sense to combine the two CTAs into one after discussing what information should take priority. The Financial Wellness Review took priority as it allows for both user goals (getting help) and business goals (upgrade clients to new products) to be achieved.

Product Comparison Table

Initially, there was no comparison table included in the email. The comparison between the client's checking account and the recommended upgrade was denoted only through copy. Due to strict compliance-approved copy guidelines, the team was having trouble agreeing on the correct way to differentiate the products.

‍

From a user perspective, I realized that we were trying to solve the wrong problem. It would be easier to understand those differences via a visual aid, and instead have the copy be a supporting factor.

‍

I created a new product comparison table which allows the user to clearly see the differences between checking accounts. This component has since been added to the bank's component library for other designers to use.

Cross-Functional Collaboration

  • Worked in tandem with copywriter to implement revised copy and iterate the designs
  • Held weekly creative reviews to ensure brand alignment
  • Met with developers to hand off designs and assist in CSS styling adjustments

‍

Research and Data to inform Design

- Used neurological data to support using a product comparison visual aid over just text

  • The human brain processes images 60,000 times faster than text (Source)
  • 90 percent of information transmitted to the brain is visual (Source)

- Attended strategy sessions with analysts to synthesize datapoints into actionable solutions

- Competitive analysis for other product comparisons, ex: Amazon

‍

Tradeoffs

- Decided against exploration of using images to give a friendlier tone to the email. Including images would increase the amount of content users need to scan through and interrupt the hierarchy of information that the user needs to see.

Outcomes

‍

Testing Process

  • Email will be sent to clients after they have incurred an ATM fee
  • 2 segments of the email, Eligible for Account Upgrade and Ineligible for Account Upgrade
  • Control group will be applied to each segment

The testing process for the ATM fee outreach will begin in Q2 of 2023.

‍

‍

Mockup and Prototype

‍

Back to Work
Case Study

Internal Tools Design System

How can we unify the 20+ products and 7 themes across Internal Tools into a scalable design system?

Role
UX Designer

‍

Team
V.L. – Design Manager

Background Context

MLB's Internal Tools encompass the suite of software used internally by employees, from on-field umpires to in-office product managers. This software serves as the backbone of MLB, ensuring seamless operations that allow the company to broadcast the world’s most exciting baseball games to millions of fans globally.

‍

The Problem

Over a decade of software development without a unified design system has resulted in significant inconsistencies across products. The absence of a standardized system led to developers manually styling components, causing errors and wasting time during design reviews—issues that could have been avoided with a standardized approach from the outset.

‍

My Role

I joined MLB in early 2024 to develop a unifying design system for Internal Tools and lead the transition from Sketch to Figma. My role involved creating the design system, leveraging it to migrate and rebuild legacy components and screens into Figma, and ultimately using it to design new products in the pipeline.

‍

Target Users

Internal Tools serve a wide range of users across the company. Some software is used on-field in dugouts or replay rooms, while others support corporate operations. Each product serves a unique user base, with distinct UX needs that are addressed on a project-by-project basis.

‍

Project Constraints‍

With 7 distinct UI themes in place, it was essential to preserve each theme's unique character while standardizing their structure. The goal was to provide developers with a unified set of styles across all products without compromising the familiar feel of the themes employees had come to know.

‍

Project Goals

Create a unified design system to structure all Internal Tools software.

Design Goals

  • Create a comprehensive color system that can accommodate the 7 existing UI themes and scale to new themes in the future
  • Update existing component library to use a standardized set of color, spacing, and typography variables
  • Rebuild legacy screens using the new system to ensure it works seamlessly
  • Allow for "dark mode" to be added to existing themes
  • Create documentation across all pillars of the design system for designers & developers to reference

Business Goals

  • Drastically reduce developer time implementing designs
  • Speed up design time for new products
  • Reduce time needed for design reviews

My Success Metrics

  • Can any given product be swapped between any given theme and look good?
  • Can developers easily utilize the design system styles in their work?
  • Does it take less time to create & update designs?
  • Are developers spending less time implementing designs?

Solutions

Introducing the new Design System

Flexible, elegant, and scalable.

‍

Color System

Flexible enough to acommodate as many themes as needed, yet simple enough to fit on a single page.

Typography Variables

All font styles are mapped to responsive variables includling: font name, font size, line height, and weight/italic styling.

Size and Line Height variable chart

Comprehensive Components

All components have been rebuilt using Figma best practices (auto-layout, variants, etc.) to allow designers to easily swap between different component states.

The many states of a standard Input component.

Detailed Documentation

Documentation has been created to help designers and developers transition to the new design system if any questions arise regarding style usage.

Documentation for Surface Colors.
Back to Work