how a mobile-first redesign drove engagement across channels
In 2022, KeyBank’s in-app messaging suffered from staggeringly low engagement, resulting in digitally active clients with limited awareness of products and services.
We redesigned the messaging tile component to be mobile-first, user friendly, and to drive conversion. Here you’ll find the story of how redesigning one component increased the average click-through-rate for all embedded messaging tiles in KeyBank’s mobile app from <1% to 16%.
mY ROLELead product designer collaborating with the design lead, product owner, developers, QAs, a UX writer, and marketing partners.
DELIVERABLESConducted UX research. Designed low and high fidelity mockups for desktop and mobile. Updated creative content for 50+ messaging tiles, using the new template. Designed a new library of 50+ illustrations. Created a post-release listening strategy.
TIMELINE5 weeks for template redesign + 4 weeks for updating all active messaging. Project went live in April 2023.
because context matters
In early 2022, KeyBank was focused on enhancing the digital banking experience to improve our relationship with clients. Client feedback and low awareness metrics pointed to a gap in communication and a need to optimize the home page real estate.
The messaging tile component - originally developed in 2018, was designed to quickly bring awareness to the products and services available to clients in online banking. Unfortunately, as our mobile app experience and design system evolved, four years later, the component felt large, cumbersome and out of place in our UI.
Our mobile app had a problem: users with multiple accounts were missing out on valuable information because it was hidden "below the fold." These lost opportunities to promote our products and services effectively resulted in a lack of customer awareness about self-service tools and personalized offers.
why a redesign?
Our overall goal in this redesign was to improve the UI of the messaging tile to ensure all users had access to promotions, educational content, and vital in-app messaging; rethinking a small, but impactful element of our user experience to deepen client relationships.
To accomplish this, we focused on these 3 key areas of improvement:
Discoverability
Revisiting visual and information hierarchy to reduce scroll, increase presentments, and improve awareness.
Content Strategy
Streamlining our content strategy to minimize cognitive load, prioritize important information, and drive conversion rates.
Visual Consistency
Updating the look and feel to align with the established design system and style guides, creating visual consistency and cohesion.
THE QUESTION DRIVING THE SOLUTIONHow might we streamline the discovery process of our services, products and self-service features for clients, so that they can maximize their banking experience?
LEGACY DESIGN
measuring success
Before commencing the redesign, it was crucial to define our success metrics. Historically, our primary measure was the click-through rate, while other metrics, such as conversion rates and presentment statistics, were lacking or incomplete. To address this, I collaborated with our business analyst and project manager to enhance our analytics capabilities and ensure comprehensive tracking. Additionally, I worked closely with the product owner to devise a post-release listening strategy.
Our main goal was to increase the average click-through rate by 5%, aligning with industry standards. This metric served as our benchmark for success, while other metrics would be newly introduced to gauge the redesign's effectiveness.
challenges along the way
Here are some of the challenges we faced throughout the redesign and how we pushed through:
Due to limited technical resources we thought we wouldn’t be able to develop the new components. After several working sessions with rockstar developers, we were able to override the HTML in our current templates to replicate our new design.
01Changing content management systems mid-redesign pushed the original timeline, affecting the product roadmap. I used the additional time to collaborate with the product owner on creating a more comprehensive post-release listening strategy.
02The new design called for smaller images that were not supported by the existing illustration library. I used elements from the illustration library to create a new pictogram library, while staying in the project timeline.
03DISCOVERABILITYmaking data driven design decisions
Engaging clients that are already giving their full attention to your mobile app is what makes in-app messaging so effective, in theory that is. Unfortunately, with an average click-through rate of 0.4% it’s safe to say we weren’t effectively engaging clients.
To understand why I dove into data analytics, surveyed clients and conducted a literature review. Here’s what we learned:
Mobile by the numbers
85% of clients access their accounts using the KeyBank mobile app.
Digitally active clients have on average 3 accounts.
Clients only spend about 19 seconds actively navigating the mobile app.
The messaging tile outsized the more important account tile 3:1.
Clients want to:
Easily find information about products.
Know when a personalized offer is available.
Know when there’s a new feature available or their experience is changing.
Have services that are appropriate for them recommended.
"A place to click for this info without it interfering with seeing my existing account information.”
Following best practices
With limited performance analytics available, I did the next best thing and consulted the experts. A literature review highlighted 3 foundational UX concepts that I needed to pay close attention to: information foraging theory, visual hierarchy, and interaction cost. That sounds more academic than it is, follow me…
Information foraging theory (PARC, 1999) says that users decide whether or not to stay on a webpage based on: (1) how valuable the information on the page is and (2) how hard it is to access it.
FINDINGIf users don’t see anything that seems relevant to them on a page, they won’t bother scrolling and will assume the page doesn’t have any more information they need.
INSIGHTA study done by Neilson Norman, investigating scrolling and attention on webpages, found that content above the fold received 57% of a users viewing time, with the second screenful of content receiving only 17% by comparison.
FINDINGThe interaction cost of scrolling was reducing the likelihood that content further down the screen was going to be viewed. If our messaging was important we needed to improve the visual hierarchy and reduce scroll.
INSIGHT
the lobby of online banking
The Account Summary page serves as the virtual lobby of our online banking platform, akin to the welcoming entrance of a physical bank branch. Just as a bank lobby offers access to various services and information, our Account Summary page provides clients with tools to manage their accounts and highlights KeyBank's products and services through messaging. However, we encountered a significant challenge – our in-app messaging was hardly visible, akin to entering a bank lobby devoid of any marketing materials.
For this project, improving discoverability meant we needed to figure out how to get important information in front of clients, without interrupting their banking experience.
“…how to get important information in front of clients, without interrupting their banking experience.”
Bigger is not always better
The existing messaging tile overshadowed the account tile nearly 3:1 in size, disrupting the visual hierarchy of the Account Summary page in mobile and desktop. It was time to downsize. After completing competitive analysis and exploring e-commerce apps we agreed that what we needed was a design that could house simple, succinct copy with proportionately sized decorative or product images to support the message.
LOW-FIDELITY MOCKUPS
Using scale to improve hierarchy and reduce scroll
Our previous design required a lot of scrolling generating an interaction cost that led not only to low presentments, but decreased accessibility. In particular, for users with motor skills impairments, who may find additional scrolling actions difficult. Minimizing interaction cost was our highest priority for improving discoverability. We did this by reducing the size of the tile.
After several iterations, we walked away with a nimbler, sleeker design that reduced the size of the component by nearly 66% ensuring messaging tiles would never exceed a 1.5:1 ratio with account tiles and would display above the fold for most users.
CONTENT STRATEGYengaging without being distracting
After downsizing the messaging tiles, we needed to give our content strategy a makeover. Just like a great billboard ad, the content needed to be engaging without being distracting. The old strategy had its issues, with large illustrations and wordy copy that increased cognitive load for clients. UX research findings underscored the importance of incorporating accessible content practices to enhance inclusivity, communicate clearly and engage users effectively. Our goal was clear: provide content that's easy to scan and quickly understood.
Creating clear guidelines
A lack of clear copy guidelines led to lengthy copy that increased cognitive load for clients and contributed to inconsistencies in the size of tiles. Research confirmed that users tend to avoid reading long lines of text, as they find them intimidating and overwhelming. As a consequence, crucial product or service benefits were often missed, affecting users' decision-making.
Implementing character count and text length guidelines afforded us the ability to:
Increase consistency in our messaging, while maintaining KeyBank’s ‘friendly neighborhood bank’ tone.
Deliver succinct, relevant information while still being descriptive.
Balancing visual elements
Another key focus in this redesign were the oversized illustrations on the tiles, which disrupted the visual hierarchy and overshadowed the accompanying copy. My design approach focused on rebalancing this hierarchy by reducing the size of the illustrations. Given that the illustrations were purely decorative, opting for a smaller size made the design more user-friendly. This alteration ensured that users would pay more attention to the copy, improving their engagement with the message.
VISUAL CONSISTENCYevolving a design system
The Key Design System went into production a year after the messaging tiles were designed. So as most of the elements on the Account Summary page were in alignment with the new design system, the messaging tiles stuck out like a sore thumb. The buttons, colors and typography were inconsistent with the rest of the UI on the page.
Aligning with the system's guidelines, we standardized the font color and size to match the rest of the typography on the page. To accommodate the smaller real estate of the message tile, I designed a new mini button component for tight spaces. This not only streamlined the design but also ensured a seamless user experience within our dynamic design ecosystem.
Creating a new illustration library
The redesigned messaging tiles necessitated a fresh set of illustrations, particularly ones that could fit into smaller spaces. Given the constraints of resources and time, I embarked on the task of creating simplified illustrations. Leveraging elements from the existing KDS illustration library ensured visual consistency across our messaging tiles. The goal was to maintain a coherent design while adapting to the need for smaller, more space-efficient visuals. The result was an extensive library of 50+ illustrations, specifically designed for small spaces.
oUTCOME & RESULTSsmall changes, big results
The redesign of KeyBank's messaging tile component has significantly improved engagement across channels, successfully addressing the initial challenge of low visibility and awareness of KeyBank's offerings. By implementing a mobile-first approach, we exceeding our business goal of a 5% CTR improvement.
Driving business results
The redesign yielded outstanding results for several marketing campaigns. Particularly noteworthy were the exceptional performance of the campaigns listed below.
Average click-through rate for all tiles increased from <1% to ~16%
KEY ACTIVE SAVER ACCOUNT ORIGINATIONS CAMPAIGN
94% application completion rate
+1,000 new account originations in the first week
DO MORE WITH KEY MULTI-PRODUCT CAMPAIGN
22% click through rate
+2,300 new account originations
$14.4M in deposits
These successes underscore the significant impact of the redesign on driving user engagement and facilitating meaningful interactions with KeyBank's offerings. By meticulously addressing challenges such as interaction cost, content strategy optimization, and visual consistency, we not only enhanced user experience but also drove tangible business results.
And now, a word from our sponsors…
“The messaging tile redesign was one of the many valuable ideas that came from an ideation workshop. We wouldn’t have this redesign if it wasn’t for design and development working together to enhance the experience.”
— Brad Vriezelaar, Product Owner
“The culmination of these improvements will not only allow our customers to see more of what they are eligible for; but will also familiarize our users with future improvements to come in the authenticated space.”