ALLY BANK

Snapshot Redesign

TL;DR

Redesign the Ally native apps’ Snapshot pages to better accommodate new content and interaction experiences and update the app styling to be more modern.

The Problem

With the addition of Status Tracker and with other requests coming into accommodate more and more content on the Snapshot, as well as an updated visual language coming out of Ally’s marketing team, it was time for the native mobile apps’ Snapshot page to be examined and refreshed. Major drivers for this high stakes request were decreasing conversions on the “banner” component due to suspected banner blindness, poor content differentiation due to lack of visual indictors for content types, general commentary of the apps looking outdated, and new patterns and components coming available as the native app team transitioned the iOS app from UIKit to SwiftUI.

My Role and Partners

Hats worn 🧙🏻‍♀️: IA, interaction design, prototyping, visual design, accessibility, design systems, product strategy

Partners: Partner designer working on the web experience; product owners; content strategy; engineers & QA.

Vision & Strategy

Fintech had become the pulse of the banking industry, paving the way for new patterns and paradigms to replace the stodgy banking experience. With Ally introducing new features like Savings Buckets and additional savings features like Round Ups and early deposits, it was time for the Snapshot to reflect that times have changed. Emojis were now not only allowed, but recommended. At the same time, the native app was seeing more and more usage, which then meant more and more content needed to be available in a consumable way. The Status Tracker project I had worked on prior to this project illuminated the need for a serious UI and content architecture effort to clean up the Snapshot experience, while also bringing it into modern times.

Our north stars guiding this project were that the experience needed to be personalized, customizable, accessible, modern, and perhaps most importantly, scalable as new features and functionality would continually be added to the app.

The Process

This project started with two daunting questions:

What current existed?

What could exist?

The idea of “widgets” on the Snapshot had been tossed around for ages, and finally seemed ripe for exploration. Additionally, we knew we wanted both a personalized and a customizable experience, two things that the web experience had already started experimenting with and native app desperately wanted to try as well.

There was an overwhelming amount of content that needed to exist just a touch away on a very small screen, so I began my discovery with a quick look at the landscape - who was doing what, with which patterns, and doing it well? At the time, “chips” or “pills” were all the rage in native apps, essentially small ultra-rounded rectangles that could contain icons and labels. Both iOS and Android now offered this button style, with caveats, and I knew they would be on my go-to list.

Additional complexity in native mobile was that we didn’t have the luxury of space that web had, nor did we have flexibility in component type to build out the content experience. There were several layers of content structure that needed to be displayed in the app, with priority at the time being to allow users to see not only their Ally accounts, but accounts at external institutions they were also tracking in our savings and spending tools. We were using Plaid for this external institution management, which meant a complex asynchronous loading experience depending on user context.

So the discovery phase of this project wore on, with myself and teammates conducting the following exercises:

content audit
comparative landscape review
sketching sessions
wireframing for IA
internal roadshow and evaluations

Explorations

I explored countless content structures, ultimately landing on three that gained enough consensus internally to be validated with users: the Blank Slate, the Digest, and the Categories treatments.

But I also came up with a lot of other ideas that I felt strongly warranted exploration, though ultimately none of these ended up being considered in the long term plan (as far as I know - I left before this project was implemented).

Some other ideas I explored:

A comprehensive message center combining notifications and secure messages in one communications center
creating a separate experience for “accounts” and “widgets” on the Snapshot
putting to use some new components in iOS and Android like the half-sheet to add depth to the content experience
left-right scrolling for like-content in the hero section of the Snapshot
using quick actions with red status indicators

Ideas Gallery

Snapshot with separated accounts and widgets views

Quick notifications circles and left-right scrolling

User Validation

With so many ideas needing to be tested, my usability partner and I designed a testing strategy that allowed us to narrow down items thematically.

Round 1 - overall content structure

We first tested the most complex - the content and interaction structure of the page. We tested the bottom sheet, the digest, and the blank slate formatting, using a mix of Axure and Invision for the prototypes, as some of the more complex interaction design could only be completed in Axure. The first round of testing was done with in-person recruits in our in-house usability lab. While users commented on liking the half-sheet for its uniqueness, ultimately the blank slate format won out in terms of time on task and positive comments on findability from users.

Round 2 - Major functionality findability

In this round, we tested findability of important communication and tasks, namely important product, feature, and outage messaging, status tracker, and money movement activities.

Round 3 - Onboarding and customization

In the third round of testing, we explored a few different onboarding tactics to introduce users to the new Snapshot and its new functionality. Our goal was to determine if we needed new or could reuse existing onboarding tactics to introduce page customization.

A major pivot

It was around this time that spike stories and feasibility experiments were wrapping up, with unfortunate findings. Most of the information UX was requesting we show on Snapshot would either be entirely unavailable, or would require such significant rewrites of the experience that they would delay the project too long to be worth continuing. Many of the widgets, the Digest content, the specific account data, and access points at the account level to different money movement tasks, were now out of the question, which meant many of our findings from the first three rounds of usability were irrelevant to the pathway forward.

Finding a common ground

While this conclusion was disappointing, we still found value in some of our findings that would inform future enhancements - just not the MVP. In scope for the MVP ended up being the following:

Revising the way users access new information via the What’s New experience, Status Tracker, and eventually widgets. Additionally, we were still able to restructure the content in the Snapshot to better mirror left-right scanning, which also allowed us to add in account-level functionality. We were able to successfully determine an onboarding strategy and landed on an interaction pattern that users found understandable for customizing their Snapshot. And we were able to update the UI to use a more fresh color palette and newer design styles from SwiftUI and MaterialUI.

The Outcome (MVP)

I left Ally before this project was slated to begin development, so I watched from afar and with bated breath as my former colleagues took my baby from design to reality. I thoroughly documented the experience, why it ended up the way it did, edge cases and sequencing of calls to ensure the UI didn’t feel sluggish. Overall, what is in production today very closely resembles the final experience I designed in early 2021.