Mallory Hartzler, Design Lead Mark Colwell, Product Owner Danielle Holet, Project Manager Mark Lesczynski, Business Analyst
What I Did
• Completed inventory of information on other account types • Created a competitive analysis among competitors' account details screens • Co-facilitated an ideation workshop and a prioritization workshop with PM, engineers, designers, and stakeholders • Conducted multiple rounds of testing to validate design decisions (click tests, usability tests, surveys) • Established a template that can be leveraged for other account types
Timeline
Mar 2021 - Feb 2022
Context
Account details is a shared space where users can access important information and manage their accounts, such as viewing statements, managing cards, and reordering checks. However, KeyBank's web experience had not been updated in several years, leading to significant user frustration. Clients often struggled to find key information and complete essential banking tasks, resulting in over 59,000 calls to our contact center for issues like card management and deposit funds availability.
In 2020, KeyBank launched their mobile redesign of their account details to better surface actions which resulted in an increase in first-time usage of mobile deposits and transfers. To further improve the user experience with this initiative, our goal was to achieve closer parity between mobile and web account account details while addressing all the pain points that users were facing with our outdated web experience.
The Challenge
Clients have problems finding key information and actions relating to their accounts resulting in high call volumes to the contact center.
Furthermore, digital teams have a hard time surfacing and merchandising new servicing experiences.
Objectives
Develop an improved, scalable schematic for account-based navigation on Web
Achieve closer parity between web and mobile app account navigation
Decouple account information and actions from one another
Surface important information and functionality that users currently struggle with finding
Explore a modular approach to displaying important account information that allows for flexibility
Outcomes
Shipped a scalable architecture that supports the complexity of 500+ sub-products currently supported while providing space for future capabilities to live and evolve.
Initial Research and Findings
Bridging the Gap Between Business and User Needs
To kick off our redesign, my design lead and I co-facilitated an engaging workshop with key stakeholders to refine our redesign goals. Together, we explored existing challenges, gathered user insights, and clarified business goals. The workshop session helped us understand the gap between user needs and business objectives, ensuring that our approach would address both effectively and align with the overall vision for the new account details experience.
We determined two primary business goals for the new account details redesign initiative:
We understand clients are having trouble completing their essential tasks and finding information but what exactly do they want from our experience? To better understand the behaviors of our users, I dove into our data analytics and also, surveyed 100 users on UserZoom. Here's what I learned:
Clients want to:
Easily see their running balance.
Easily find their routing number.
Find what they need quickly.
Want to be presented with the right opportunities at the right time.
Want site actions to be predictable.
Disabled clients want to be able to complete tasks.
— How might we design an account details web experience that adapts to our clients evolving needs and goals, while also guiding them to find additional opportunities to improve their financial situation?
Evaluating the Current Experience
Through a cognitive walkthrough, I navigated the current account details page by drawing on heuristic evaluation principles, UX laws, and Gestalt principles. This approach allowed me to see the page through the users' eyes, uncovering areas for improvements.
Opportunities
From Insights to Concepts: Facilitating Ideation
Co-facilitating an ideation workshop with my design lead, I gathered with stakeholders to translate research insights into actionable design strategies. We presented three key opportunities — lack of feature awareness, inflexible architecture, and inconsistency with our design system. Guided by principles of modularity and flexibility, we brainstormed solutions using a 6-to-1 ideation exercise that would make account details more intuitive and scalable, addressing user pain points while supporting future growth.
Redesign Critical Decisions
Bringing Essential Features to the Forefront
To improve usability, we brought essential features to the forefront. Previously, users struggled with hidden actions buried in a ‘more’ menu due to a lack of clear hierarchy. We made it easier to view transactions and account details at a glance while reusing familiar mobile app components, creating a flexible design that can be easily adapted for other sub-products.
A Streamlined Search Inquiry
The old search function was confusing and lacked useful filters, making it hard for users to find specific transactions. To address this, I collaborated with the dev team to add more filters from the back end, improving search efficiency. Additionally, I partnered with a copywriter to craft clear instructions, helping users better understand how to navigate the search engine and utilize the new filters.
Simplifying Scheduled Payments
The original scheduled payments design was riddled with visual clutter and lacked a proper hierarchy, making it hard for users to process information quickly when trying to view payment details. I introduced a clear structure that improved both readability and scanability. Users can now instantly recognize whether a payment is recurring or a one-time transfer, reducing cognitive load, making it easier to manage their finances with confidence.
Post-Launch Strategies
Adapting to Feedback: Managing Change
Following the launch, we noticed that desktop users, particularly our older clients, were unhappy with the redesign, even though it improved usability and utilized familiar mobile components. We quickly realized that these users were uncomfortable with the changes because they disrupted their usual way of interacting with the platform. To smooth the transition, we began proactively communicating with users about the upcoming design changes and the benefits they would bring. This strategy was effective, as we saw a significant drop in negative feedback during the subsequent launch for credit card products.
Boosting Payment Awareness
Following the initial launch, users were still having trouble keeping track of their payment due dates. Seizing this opportunity, I redesigned the component to highlight payment deadlines more prominently. A/B testing confirmed that this update significantly reduced the number of missed payment dates, demonstrating the effectiveness of the design adjustments.
Areas for Improvement
Before launching the redesign, I should've...
advocate for more time for user research with the product team. I inherited this significant initiative midway through its development, and it had undergone multiple design iterations over the years before reaching me. Unfortunately, this limited the time available for thorough exploration during the discovery stage. As a result, we encountered unexpected differences between our web and mobile users, particularly in the demographics of our web users, who were predominantly older and less inclined to embrace mobile technology or changes aimed at improving the user experience.
prepared clients for significant changes. As observed from our experience, our web users, particularly older demographics, exhibit resistance to change due to their familiarity with existing processes. The long-standing nature of the account details experience, despite its usability limitations, contributed to this resistance. In hindsight, we should have proactively communicated with our clients to anticipate their reaction and prepare them for forthcoming changes to mitigate resistance and facilitate smoother transitions.
What I Learned
One crucial takeaway from the redesign project is that setbacks pave the way for future improvements. Despite encountering challenges during the initial rollout of the redesign for checking products, we collectively learned to anticipate and address client concerns more effectively in subsequent sub-product changes. Moreover, we recognized the importance of considering feedback comprehensively, as solely focusing on negative feedback can lead to confusion within the product team regarding prioritization and resource allocation.
I appreciate you visiting my portfolio, which is a heartfelt love letter to my craft 🫶🏻
Please feel free to message me or connect with me on LinkedIn!
.png)
.png)
.png)
.png)
.jpg)
